import type { Metadata } from 'next'
import Link from 'next/link'

export const metadata: Metadata = {
  title: 'FlowFi — Finance as Metabolism, Not Mechanism',
  description: 'NoFi didn\'t mean no flows. It meant no Finance-with-a-capital-F. FlowFi is the constructive emergence — finance as invisible vascular infrastructure.',
  openGraph: {
    title: 'FlowFi — Finance as Metabolism, Not Mechanism',
    description: 'NoFi didn\'t mean no flows. It meant no Finance-with-a-capital-F.',
    url: 'https://nofi.lol/flowfi',
    siteName: 'NoFi',
    type: 'website',
  },
}

export default function FlowFi() {
  return (
    <main className="min-h-screen">
      {/* Section 1 — Hero: From NoFi to FlowFi */}
      <section className="min-h-screen flex flex-col items-center justify-center relative overflow-hidden px-4">
        <div className="absolute inset-0 bg-gradient-to-b from-void via-nothing to-less opacity-80" />
        <div className="absolute inset-0 bg-gradient-to-br from-flow-green/5 via-transparent to-flow-green/3 animate-flow" />
        <div className="relative z-10 text-center max-w-4xl">
          <Link href="/" className="text-zen/30 text-sm hover:text-flow-green transition-colors duration-500 mb-8 inline-block">
            &larr; NoFi
          </Link>
          <a
            href="https://flowfi.network"
            target="_blank"
            rel="noopener noreferrer"
            className="block text-zen/25 text-xs tracking-[0.2em] mb-12 hover:text-flow-green/60 transition-all duration-1000 font-caveat"
          >
            the full experience flows at flowfi.network &rarr;
          </a>
          <p className="text-sloth text-sm tracking-[0.5em] uppercase mb-8 animate-slow-pulse">
            a movement toward movement
          </p>
          <h1 className="font-marker text-7xl md:text-9xl font-bold mb-6 tracking-tighter wobble-1 animate-breathe">
            <span className="text-flow-green">Flow</span>Fi
          </h1>
          <p className="font-caveat text-2xl md:text-3xl text-zen/70 mb-4">
            NoFi didn&apos;t mean no flows.
          </p>
          <p className="font-caveat text-xl md:text-2xl text-zen/50 mb-16">
            It meant no Finance-with-a-capital-F.
          </p>
        </div>
        <div className="absolute bottom-8 text-zen/20 text-xs animate-drift">
          keep flowing (or don&apos;t)
        </div>
      </section>

      {/* Section 2 — The Insight: Finance Became the Disease */}
      <section className="py-32 px-4 bg-nothing">
        <div className="max-w-3xl mx-auto">
          <h2 className="font-marker text-lg tracking-[0.3em] uppercase text-flow-green mb-16 text-center scrawl-underline-flow mx-auto w-fit wobble-2">
            The Insight
          </h2>
          <div className="space-y-12 text-lg leading-relaxed text-zen/60">
            <p>
              Finance was supposed to be plumbing. Invisible infrastructure that moved
              resources from where they pooled to where they were needed. Boring. Essential.
              Beneath the surface.
            </p>
            <p>
              Instead, it became a growth industry. The plumbing hired a marketing team,
              went public, and started charging you for the privilege of having pipes.
            </p>
            <p className="font-caveat text-zen/80 text-2xl border-l-2 border-flow-green pl-6 wobble-1">
              &ldquo;Your body doesn&apos;t have a Federal Reserve. It has kidneys.&rdquo;
            </p>
            <p>
              NoFi was the diagnosis. FlowFi is the prognosis: finance that dissolves
              back into infrastructure. Invisible. Metabolic. Beneath the surface
              where it belongs.
            </p>
          </div>
        </div>
      </section>

      {/* Section 3 — Living Systems Comparison Table */}
      <section className="py-32 px-4 bg-less">
        <div className="max-w-4xl mx-auto">
          <h2 className="font-marker text-lg tracking-[0.3em] uppercase text-flow-green mb-16 text-center scrawl-underline-flow mx-auto w-fit wobble-3">
            Finance vs. Living Systems
          </h2>
          <div className="overflow-x-auto">
            <table className="w-full text-left text-sm">
              <thead>
                <tr className="border-b border-zen/20">
                  <th className="pb-4 text-anti-green">Finance Pathology</th>
                  <th className="pb-4 text-flow-green">Living System Health</th>
                </tr>
              </thead>
              <tbody className="text-zen/60">
                {[
                  ['Yield optimization', 'Nutrient cycling'],
                  ['Liquidity extraction', 'Osmotic balance'],
                  ['Centralized banking', 'Distributed capillaries'],
                  ['Interest rates', 'Feedback signals'],
                  ['Capital accumulation', 'Hoarding = disease'],
                  ['"Too big to fail"', 'Monoculture = fragility'],
                  ['Governance tokens', 'Hormones nobody voted on'],
                ].map(([pathology, health], i) => (
                  <tr key={i} className="border-b border-zen/5">
                    <td className="py-4 text-anti-green/70">{pathology}</td>
                    <td className="py-4 text-flow-green/70">{health}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </section>

      {/* Section 4 — Key Reframes */}
      <section className="py-32 px-4 bg-nothing">
        <div className="max-w-3xl mx-auto text-center space-y-12">
          <h2 className="font-marker text-lg tracking-[0.3em] uppercase text-flow-green mb-16 scrawl-underline-flow mx-auto w-fit wobble-4">
            Reframes
          </h2>
          {[
            'Finance became the disease it claimed to cure.',
            'FlowFi is finance that forgot it was finance.',
            'From extractive to regenerative: finance as metabolism, not mechanism.',
            'The best financial system is the one you never notice.',
            "Capital doesn't accumulate in healthy systems. It circulates.",
          ].map((line, i) => (
            <p key={i} className={`font-caveat text-2xl md:text-3xl text-zen/70 leading-relaxed wobble-${(i % 4) + 1}`}>
              {line}
            </p>
          ))}
        </div>
      </section>

      {/* Section 5 — The Meta Statement */}
      <section className="py-32 px-4 bg-less">
        <div className="max-w-3xl mx-auto">
          <h2 className="font-marker text-lg tracking-[0.3em] uppercase text-flow-green mb-16 text-center scrawl-underline-flow mx-auto w-fit wobble-1">
            The Meta Statement
          </h2>
          <div className="space-y-12 text-lg leading-relaxed text-zen/60">
            <p className="font-caveat text-zen/80 text-2xl text-center animate-breathe">
              FlowFi doesn&apos;t need a domain. Domains are infrastructure.
              FlowFi <em>is</em> infrastructure.
            </p>
            <p className="text-zen/30 text-sm text-center">
              (We said that before we got{' '}
              <a
                href="https://flowfi.network"
                target="_blank"
                rel="noopener noreferrer"
                className="text-flow-green/40 hover:text-flow-green/70 transition-colors duration-1000 underline underline-offset-4 decoration-flow-green/20"
              >
                flowfi.network
              </a>.
              We contain multitudes. Also contradictions.)
            </p>
          </div>
        </div>
      </section>

      {/* Section 6 — Footer/CTA */}
      <section className="py-32 px-4 bg-void">
        <div className="max-w-2xl mx-auto text-center">
          <h2 className="font-marker text-4xl md:text-6xl font-bold mb-8 wobble-4">
            Ready to <span className="text-flow-green">flow</span>?
          </h2>
          <p className="text-zen/40 mb-12">
            You already are. The flows don&apos;t need your permission.
            They just need you to stop building dams and calling them features.
          </p>
          <div className="flex flex-col sm:flex-row gap-6 justify-center items-center mb-8">
            <Link
              href="/"
              className="inline-block border border-zen/20 px-12 py-6 hover:border-flow-green/50 transition-all duration-[3000ms] wobble-2"
            >
              <span className="font-caveat text-zen/50 text-lg">
                &larr; Back to Doing Nothing
              </span>
            </Link>
            <a
              href="https://flowfi.network"
              target="_blank"
              rel="noopener noreferrer"
              className="inline-block border border-flow-green/30 px-12 py-6 hover:border-flow-green/70 hover:bg-flow-green/5 transition-all duration-[3000ms] wobble-3"
            >
              <span className="font-caveat text-flow-green/70 text-lg">
                Enter flowfi.network &rarr;
              </span>
            </a>
          </div>
          <p className="text-zen/30 text-sm mt-12 font-caveat">
            NoFi &rarr; FlowFi &rarr; the full experience awaits
          </p>
          <p className="text-zen/20 text-xs mt-8">
            Part of the CoFi cinematic universe
          </p>
        </div>
      </section>

      {/* Footer */}
      <footer className="py-8 px-4 bg-void border-t border-zen/5">
        <div className="max-w-5xl mx-auto flex flex-col md:flex-row justify-between items-center text-xs text-zen/20">
          <p>FlowFi &bull; No Rights Reserved &bull; Flows Freely</p>
          <p className="mt-2 md:mt-0">
            A proud tributary of the CoFi cinematic universe
          </p>
        </div>
      </footer>
    </main>
  )
}