'use client'

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

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

      {/* Red pollution tint — subtle, unsettling */}
      <div className="absolute inset-0" style={{ background: 'radial-gradient(ellipse at 50% 40%, rgba(233, 69, 96, 0.06) 0%, transparent 60%)' }} />

      <div className="relative z-10 max-w-5xl w-full text-center">
        <SectionHeader className="text-anti-green/80">The Extractive Pattern</SectionHeader>

        <ScrollReveal delay={0.2}>
          <div className="my-14 rounded-2xl overflow-hidden p-4 bg-current/30 border border-anti-green/10">
            <SankeyDiagram
              data={extractiveFlows}
              showLabels={true}
              speed="fast"
              showParticles={true}
              showDistortion={false}
              maxParticles={6}
            />
          </div>
        </ScrollReveal>

        <ScrollReveal delay={0.4}>
          <blockquote className="font-caveat text-xl md:text-2xl text-foam/40 max-w-2xl mx-auto border-l-2 border-anti-green/25 pl-6 leading-relaxed">
            The plumbing hired a marketing team and <span className="text-anti-green/60">went public</span>.
          </blockquote>
        </ScrollReveal>
      </div>
    </section>
  )
}
