export default function Home() {
  return (
    <main className="min-h-screen">
      {/* Hero */}
      <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="relative z-10 text-center max-w-4xl">
          <p className="text-sloth text-sm tracking-[0.5em] uppercase mb-8 animate-slow-pulse">
            a movement against movements
          </p>
          <h1 className="font-marker text-7xl md:text-9xl font-bold mb-6 tracking-tighter wobble-1">
            <span className="text-anti-green">No</span>Fi
          </h1>
          <p className="font-caveat text-3xl md:text-5xl text-zen/70 mb-4">
            No Finance. No Money. No Tokens.
          </p>
          <p className="font-caveat text-2xl md:text-3xl text-sloth mb-16">
            Just Do Less.
          </p>
          <div className="inline-block border border-zen/20 px-8 py-4 hover:border-anti-green/50 transition-all duration-[3000ms] wobble-3">
            <span className="font-caveat text-zen/50 text-lg">
              Don&apos;t click anything. That&apos;s the spirit.
            </span>
          </div>
        </div>
        <div className="absolute bottom-8 text-zen/20 text-xs animate-drift">
          scroll down (or don&apos;t)
        </div>
      </section>

      {/* Anti-Whitepaper */}
      <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-anti-green mb-16 text-center scrawl-underline mx-auto w-fit wobble-2">
            The Anti-Whitepaper
          </h2>
          <div className="space-y-12 text-lg leading-relaxed text-zen/60">
            <p>
              For too long, the world has been plagued by <span className="strikethrough-animate text-zen">innovation</span>.
              Every problem spawns ten solutions, each with its own token, governance model,
              and 47-page whitepaper explaining why <em>this time</em> finance will be different.
            </p>
            <p>
              It won&apos;t. So we stopped trying.
            </p>
            <p className="font-caveat text-zen/80 text-2xl border-l-2 border-anti-green pl-6 wobble-1">
              NoFi is the radical proposition that the best financial system
              is no financial system. The best token is no token.
              The best thing to do with your money is to not have any.
            </p>
            <p>
              We are not DeFi. We are not TradFi. We are not even CoFi
              (though we love them dearly). We are the logical conclusion
              of every financial movement: the complete cessation of finance itself.
            </p>
          </div>
        </div>
      </section>

      {/* Features (Anti-Features) */}
      <section className="py-32 px-4 bg-less">
        <div className="max-w-5xl mx-auto">
          <h2 className="font-marker text-lg tracking-[0.3em] uppercase text-anti-green mb-16 text-center scrawl-underline mx-auto w-fit wobble-3">
            Features We Don&apos;t Have
          </h2>
          <div className="grid md:grid-cols-3 gap-8">
            {[
              {
                icon: "0",
                title: "Zero Yield",
                desc: "Our yield is 0%. Always. We guarantee it. This is not a bug."
              },
              {
                icon: "!",
                title: "No Governance",
                desc: "No votes. No proposals. No quorum. Nobody decides anything. It's beautiful."
              },
              {
                icon: "~",
                title: "Infinite Vesting",
                desc: "Your tokens vest never, because they don't exist. You're already fully vested in nothing."
              },
              {
                icon: "-",
                title: "No Roadmap",
                desc: "Where are we going? Nowhere. When will we get there? We're already here."
              },
              {
                icon: ".",
                title: "Zero TVL",
                desc: "Total Value Locked: $0.00. Total Value Unlocked: also $0.00. Total Value: the friends we made."
              },
              {
                icon: " ",
                title: "No Team",
                desc: "We have no team, no advisors, no investors. We barely have a website. Look at us underachieve."
              }
            ].map((f, i) => (
              <div key={i} className={`border border-zen/10 p-8 hover:border-anti-green/30 transition-all duration-1000 wobble-${(i % 4) + 1}`}>
                <div className="font-marker text-4xl text-anti-green mb-4 font-bold">{f.icon}</div>
                <h3 className="font-marker text-lg mb-3 text-zen/80">{f.title}</h3>
                <p className="text-sm text-zen/40 leading-relaxed">{f.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Tokenomics */}
      <section className="py-32 px-4 bg-nothing">
        <div className="max-w-3xl mx-auto text-center">
          <h2 className="font-marker text-lg tracking-[0.3em] uppercase text-anti-green mb-16 scrawl-underline mx-auto w-fit wobble-4">
            Tokenomics
          </h2>
          <div className="space-y-8">
            <div className="font-marker text-8xl font-bold text-zen/10">$0</div>
            <p className="text-xl text-zen/60">Total Supply: 0</p>
            <p className="text-xl text-zen/60">Circulating Supply: 0</p>
            <p className="text-xl text-zen/60">Market Cap: 0</p>
            <p className="text-xl text-zen/60">Fully Diluted Valuation: 0</p>
            <p className="text-sm text-sloth mt-8">
              (We considered making a token but then we remembered the whole point)
            </p>
          </div>
        </div>
      </section>

      {/* Comparisons */}
      <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-anti-green mb-16 text-center scrawl-underline mx-auto w-fit wobble-1">
            NoFi vs. Everything Else
          </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-zen/40"></th>
                  <th className="pb-4 text-zen/40">TradFi</th>
                  <th className="pb-4 text-zen/40">DeFi</th>
                  <th className="pb-4 text-zen/40">CoFi</th>
                  <th className="pb-4 text-anti-green">NoFi</th>
                </tr>
              </thead>
              <tbody className="text-zen/60">
                <tr className="border-b border-zen/5">
                  <td className="py-4 text-zen/40">Tokens</td>
                  <td className="py-4">Stocks, bonds</td>
                  <td className="py-4">10,000+</td>
                  <td className="py-4">A few, carefully</td>
                  <td className="py-4 text-anti-green">Absolutely not</td>
                </tr>
                <tr className="border-b border-zen/5">
                  <td className="py-4 text-zen/40">Middlemen</td>
                  <td className="py-4">Banks, brokers</td>
                  <td className="py-4">Smart contracts</td>
                  <td className="py-4">Communities</td>
                  <td className="py-4 text-anti-green">Nobody</td>
                </tr>
                <tr className="border-b border-zen/5">
                  <td className="py-4 text-zen/40">Risk</td>
                  <td className="py-4">Market crashes</td>
                  <td className="py-4">Rug pulls</td>
                  <td className="py-4">Coordination failure</td>
                  <td className="py-4 text-anti-green">What risk?</td>
                </tr>
                <tr className="border-b border-zen/5">
                  <td className="py-4 text-zen/40">Returns</td>
                  <td className="py-4">7% annually</td>
                  <td className="py-4">-90% to 10000%</td>
                  <td className="py-4">Social capital</td>
                  <td className="py-4 text-anti-green">Inner peace</td>
                </tr>
                <tr className="border-b border-zen/5">
                  <td className="py-4 text-zen/40">Whitepaper</td>
                  <td className="py-4">Annual report</td>
                  <td className="py-4">47 pages</td>
                  <td className="py-4">Research papers</td>
                  <td className="py-4 text-anti-green">This website</td>
                </tr>
                <tr>
                  <td className="py-4 text-zen/40">Effort Required</td>
                  <td className="py-4">A lot</td>
                  <td className="py-4">Constant vigilance</td>
                  <td className="py-4">Community work</td>
                  <td className="py-4 text-anti-green">Less than this</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </section>

      {/* Manifesto */}
      <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-anti-green mb-16 text-center scrawl-underline mx-auto w-fit wobble-2">
            The NoFi Manifesto
          </h2>
          <div className="space-y-6 text-center text-2xl leading-relaxed text-zen/70 font-caveat">
            <p>We believe in doing less.</p>
            <p>We believe the best investment is a nap.</p>
            <p>We believe every problem caused by money<br/>can be solved by less money.</p>
            <p>We believe the optimal portfolio allocation is<br/>0% everything.</p>
            <p className="text-zen/40 text-sm pt-8">
              (We would have written more but that felt like too much effort)
            </p>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <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-anti-green mb-16 text-center scrawl-underline mx-auto w-fit wobble-3">
            Frequently Unasked Questions
          </h2>
          <div className="space-y-12">
            {[
              {
                q: "When token?",
                a: "Never. Next question."
              },
              {
                q: "When mainnet?",
                a: "We are already on mainnet. The main net is the network of people who have collectively decided to stop building financial instruments. You're on it right now."
              },
              {
                q: "Who is the team?",
                a: "The team is everyone who has ever closed a crypto tab and gone outside instead. Arguably the largest team in Web3."
              },
              {
                q: "Is this a joke?",
                a: "Everything in finance is a joke. We're just the only ones being honest about it."
              },
              {
                q: "How do I get involved?",
                a: "You're already involved. In fact, you were involved before you got here. The less you do, the more involved you become. You're doing great."
              },
              {
                q: "What's the utility?",
                a: "The utility of NoFi is inversely proportional to the number of utilities it has. Currently at maximum utility."
              },
              {
                q: "Can I invest?",
                a: "You cannot invest in NoFi. You can only divest from everything else. Same thing, really."
              }
            ].map((faq, i) => (
              <div key={i}>
                <h3 className="font-marker text-zen/80 mb-3">{faq.q}</h3>
                <p className="font-caveat text-zen/40 text-lg leading-relaxed pl-4 border-l border-zen/10">{faq.a}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 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 do <span className="text-anti-green">nothing</span>?
          </h2>
          <p className="text-zen/40 mb-12">
            You already are. Congratulations. You&apos;ve reached the end of the website
            and accomplished exactly as much as we intended.
          </p>
          <div className="inline-block border border-zen/20 px-12 py-6 cursor-not-allowed opacity-50 wobble-2">
            <span className="font-caveat text-zen/30 text-lg tracking-widest">
              Button Intentionally Disabled
            </span>
          </div>
          <p className="text-zen/20 text-xs mt-8">
            est. whenever &bull; abandoned with love
          </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>NoFi &bull; No Rights Reserved &bull; Please Don&apos;t Steal This (There&apos;s Nothing To Steal)</p>
          <p className="mt-2 md:mt-0">
            A proud member of the CoFi cinematic universe
          </p>
        </div>
      </footer>
    </main>
  )
}