'use client'

import dynamic from 'next/dynamic'
import SectionHeader from '@/components/ui/SectionHeader'
import ScrollReveal from '@/components/ui/ScrollReveal'

const FlowCanvas = dynamic(() => import('@/components/sandbox/FlowCanvas'), {
  ssr: false,
  loading: () => (
    <div className="w-full h-[500px] md:h-[600px] rounded-2xl border border-flow/10 bg-deep flex items-center justify-center">
      <span className="text-foam/20 text-sm animate-glow-pulse font-light">loading canvas...</span>
    </div>
  ),
})

export default function SandboxSection() {
  return (
    <section className="min-h-screen flex flex-col items-center justify-center relative px-4 py-24">
      <div className="absolute inset-0 bg-deep" />

      <div className="relative z-10 max-w-6xl w-full">
        <SectionHeader>Flow Sandbox</SectionHeader>

        <ScrollReveal delay={0.1}>
          <p className="font-caveat text-lg md:text-xl text-foam/35 text-center mb-10 max-w-2xl mx-auto">
            Reconnect the flows. What would you build?
          </p>
        </ScrollReveal>

        <ScrollReveal delay={0.2}>
          <FlowCanvas />
        </ScrollReveal>

        <ScrollReveal delay={0.3}>
          <p className="text-mist/30 text-xs text-center mt-6 font-light tracking-wide">
            drag nodes · connect ports · load presets · build your own flow system
          </p>
        </ScrollReveal>
      </div>
    </section>
  )
}