'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-lg border border-zen/10 bg-void flex items-center justify-center">
      <span className="text-zen/20 text-sm animate-slow-pulse">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-20">
      <div className="absolute inset-0 bg-void" />

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

        <ScrollReveal delay={0.1}>
          <p className="font-caveat text-lg md:text-xl text-zen/40 text-center mb-8 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-zen/20 text-xs text-center mt-4">
            drag nodes • connect ports • load presets • build your own flow system
          </p>
        </ScrollReveal>
      </div>
    </section>
  )
}
