trippin-website/components/structural-addiction-section.tsx

import { Flame, Droplets, Swords, Landmark, ArrowRight, Sprout } from "lucide-react"

export function StructuralAddictionSection() {
  return (
    <section className="py-20 relative overflow-hidden">
      {/* Subtle background texture */}
      <div className="absolute inset-0 bg-gradient-to-b from-destructive/5 via-transparent to-primary/5" />

      <div className="container mx-auto px-4 relative z-10">
        <div className="text-center mb-16">
          <h2 className="text-4xl md:text-5xl font-bold mb-6 text-balance">
            {"Addicted to "}
            <span className="text-destructive">Extraction</span>
          </h2>
          <p className="text-xl text-muted-foreground max-w-3xl mx-auto text-pretty leading-relaxed">
            {"War. Oil. Exploitation. These aren't bugs in the system — they're features. "}
            {"Our society is structurally addicted to extraction over stewardship, and the pusher is our financial architecture itself."}
          </p>
        </div>

        {/* The Addiction Loop */}
        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-16">
          <div className="bg-card border border-destructive/20 rounded-lg p-6 hover:border-destructive/40 transition-colors">
            <Swords className="h-8 w-8 text-destructive mb-4" />
            <h3 className="text-lg font-bold mb-2">Addiction to War</h3>
            <p className="text-muted-foreground text-sm leading-relaxed">
              Perpetual conflict feeds the extractive machine. Military-industrial complexes demand endless growth in destruction — because peace doesn't generate quarterly returns.
            </p>
          </div>

          <div className="bg-card border border-destructive/20 rounded-lg p-6 hover:border-destructive/40 transition-colors">
            <Droplets className="h-8 w-8 text-destructive mb-4" />
            <h3 className="text-lg font-bold mb-2">Addiction to Oil</h3>
            <p className="text-muted-foreground text-sm leading-relaxed">
              Fossil fuel dependency isn't just an energy problem — it's a financial one. Petrodollar hegemony locks us into ecological destruction as monetary policy.
            </p>
          </div>

          <div className="bg-card border border-destructive/20 rounded-lg p-6 hover:border-destructive/40 transition-colors">
            <Flame className="h-8 w-8 text-destructive mb-4" />
            <h3 className="text-lg font-bold mb-2">Addiction to Exploitation</h3>
            <p className="text-muted-foreground text-sm leading-relaxed">
              Cheap labor, land grabs, resource extraction from the Global South — colonialism never ended, it just got rebranded as "development" and "free trade."
            </p>
          </div>

          <div className="bg-card border border-destructive/20 rounded-lg p-6 hover:border-destructive/40 transition-colors">
            <Landmark className="h-8 w-8 text-destructive mb-4" />
            <h3 className="text-lg font-bold mb-2">The Structural Root</h3>
            <p className="text-muted-foreground text-sm leading-relaxed">
              All of this is enabled by our choice of extractive private financial institutions over open public protocols for distributing resources and capital.
            </p>
          </div>
        </div>

        {/* The Bridge: From Extraction to Mycelium */}
        <div className="max-w-4xl mx-auto">
          <div className="bg-gradient-to-r from-destructive/10 via-primary/10 to-primary/20 border border-primary/30 rounded-lg p-8 md:p-12">
            <div className="flex items-center gap-3 mb-6">
              <div className="h-px flex-1 bg-gradient-to-r from-destructive/40 to-transparent" />
              <ArrowRight className="h-6 w-6 text-primary" />
              <Sprout className="h-8 w-8 text-primary" />
              <div className="h-px flex-1 bg-gradient-to-l from-primary/40 to-transparent" />
            </div>

            <h3 className="text-2xl md:text-3xl font-bold mb-6 text-center text-primary">
              But There Is an Ancient Alternative
            </h3>

            <div className="space-y-4 text-lg leading-relaxed">
              <p>
                {"For over a "}
                <span className="text-primary font-semibold">billion years</span>
                {", fungi have been running the most successful resource distribution network on the planet. "}
                {"No central banks. No extractive intermediaries. No hoarding. "}
                {"Just open protocols of redistribution — breaking down the dead to feed the living."}
              </p>
              <p>
                {"Mycelial networks pre-distribute and re-distribute nutrients, water, and chemical signals across entire ecosystems. "}
                {"They don't accumulate — they circulate. They don't exploit — they regenerate. "}
                {"Every forest you've ever walked through exists because fungi figured out public infrastructure before we even evolved."}
              </p>
              <p className="text-primary font-medium text-xl text-center pt-4">
                {"This is why we're here. This is why the mushrooms matter. "}
                <br className="hidden md:block" />
                {"So let's learn from them."}
              </p>
            </div>
          </div>
        </div>

        {/* Quote */}
        <div className="mt-16 text-center">
          <blockquote className="text-xl md:text-2xl font-medium italic max-w-3xl mx-auto text-balance text-muted-foreground">
            {"The choice between extractive private institutions and open public protocols "}
            {"isn't just economic — it's the choice between a world that devours itself "}
            {"and one that regenerates."}
          </blockquote>
        </div>
      </div>
    </section>
  )
}