'use client'

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

const lines = [
  'NoFi was the diagnosis.',
  'FlowFi is the prognosis.',
  'Not no flows — better flows.',
  'Not no finance — living finance.',
  'Finance as metabolism, not mechanism.',
]

export default function TransitionSection() {
  return (
    <section className="min-h-screen flex flex-col items-center justify-center relative px-4 py-20">
      <div className="absolute inset-0 bg-gradient-to-b from-void via-less to-void opacity-80" />

      <div className="relative z-10 max-w-3xl w-full space-y-12 text-center">
        {lines.map((line, i) => (
          <ScrollReveal key={i} delay={i * 0.15}>
            <p className={`font-caveat text-2xl md:text-4xl text-zen/60 wobble-${(i % 4) + 1}`}>
              {line}
            </p>
          </ScrollReveal>
        ))}
      </div>
    </section>
  )
}