'use client'

import ScrollReveal from '@/components/ui/ScrollReveal'

const lines = [
  { text: 'NoFi was the diagnosis.', accent: false },
  { text: 'FlowFi is the prognosis.', accent: true },
  { text: 'Not no flows — better flows.', accent: false },
  { text: 'Not no finance — living finance.', accent: false },
  { text: 'Finance as metabolism, not mechanism.', accent: true },
]

export default function TransitionSection() {
  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" />

      {/* Flowing light streak */}
      <div
        className="absolute top-0 left-0 w-full h-px"
        style={{ background: 'linear-gradient(90deg, transparent, rgba(45, 212, 191, 0.2), transparent)' }}
      />

      <div className="relative z-10 max-w-3xl w-full space-y-14 text-center">
        {lines.map((line, i) => (
          <ScrollReveal key={i} delay={i * 0.12}>
            <p className={`font-caveat text-2xl md:text-4xl leading-relaxed transition-colors duration-700 ${
              line.accent ? 'text-flow/60' : 'text-foam/50'
            }`}>
              {line.text}
            </p>
          </ScrollReveal>
        ))}
      </div>

      <div
        className="absolute bottom-0 left-0 w-full h-px"
        style={{ background: 'linear-gradient(90deg, transparent, rgba(45, 212, 191, 0.2), transparent)' }}
      />
    </section>
  )
}