'use client'

import SankeyDiagram from '@/components/visualizations/SankeyDiagram'
import SectionHeader from '@/components/ui/SectionHeader'
import ScrollReveal from '@/components/ui/ScrollReveal'
import { naturalFlows } from '@/lib/sankey-data'

export default function NatureFlowsSection() {
  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-5xl w-full text-center">
        <SectionHeader>Natural Flows</SectionHeader>

        <ScrollReveal delay={0.1}>
          <div className="flex justify-center gap-6 mb-6 text-xs font-light">
            <span className="flex items-center gap-1.5"><span className="w-3 h-0.5 rounded bg-[#fbbf24]/60 inline-block" /> Energy</span>
            <span className="flex items-center gap-1.5"><span className="w-3 h-0.5 rounded bg-flow/60 inline-block" /> Resources</span>
            <span className="flex items-center gap-1.5"><span className="w-3 h-0.5 rounded bg-[#f472b6]/60 inline-block" /> Signals</span>
            <span className="flex items-center gap-1.5"><span className="w-3 h-0.5 rounded bg-mist/60 inline-block" /> Commons</span>
          </div>
        </ScrollReveal>

        <ScrollReveal delay={0.2}>
          <div className="my-8 rounded-2xl overflow-hidden p-4 bg-ocean/20">
            <SankeyDiagram
              data={naturalFlows}
              showLabels={true}
              speed="slow"
              showParticles={true}
              showDistortion={false}
              maxParticles={8}
            />
          </div>
        </ScrollReveal>

        <ScrollReveal delay={0.4}>
          <p className="font-caveat text-xl md:text-2xl text-foam/45 max-w-2xl mx-auto leading-relaxed">
            In living systems, value doesn&apos;t accumulate. It <span className="text-flow/70">circulates</span> — across dimensions.
          </p>
        </ScrollReveal>
      </div>
    </section>
  )
}