import { Button } from "@/components/ui/button"
import { ArrowRight, Network, Shield, Users } from "lucide-react"

export function PostAppitalismSection() {
  return (
    <section className="py-16 px-4 bg-muted/50 border-y border-primary/30 shadow-lg">
      <div className="container mx-auto max-w-6xl">
        <div className="text-center mb-16">
          <h2 className="text-4xl md:text-5xl font-bold mb-3 bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
            Post-Appitalism
          </h2>
          <h3 className="text-2xl md:text-3xl font-semibold mb-6 text-muted-foreground">Decomposing the App Silo</h3>
          {/* </CHANGE> */}
          <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
            Post-capitalism brings about new opportunities to think beyond the traditional business model of the app
            silo. Welcome to Post-Appitalism.
          </p>
        </div>

        <div className="grid md:grid-cols-2 gap-12 items-center mb-16">
          <div className="space-y-6">
            <div className="prose prose-lg">
              <p className="text-lg leading-relaxed">
                Just as mycelium decomposes dead matter to create fertile soil for new growth, we are witnessing the{" "}
                <span className="text-primary font-semibold">composting of capitalism</span> and the{" "}
                <span className="text-secondary font-semibold">decomposition of app silos</span>.
              </p>
              <p className="text-lg leading-relaxed">
                This isn't just metaphor—it's a technological reality unfolding before us. The centralized platforms
                that extract our data, attention, and agency are beginning to break down, creating the conditions for
                something radically new.
              </p>
            </div>
          </div>

          <div className="bg-card border border-primary/20 rounded-lg p-8 shadow-lg">
            <h3 className="text-2xl font-bold mb-6 text-primary">The Decomposition Process</h3>
            <div className="space-y-4">
              <div className="flex items-start gap-3">
                <div className="w-2 h-2 rounded-full bg-primary mt-2 flex-shrink-0" />
                <p className="text-muted-foreground">Extractive platforms and institutions losing legitimacy and trust</p>
              </div>
              <div className="flex items-start gap-3">
                <div className="w-2 h-2 rounded-full bg-primary mt-2 flex-shrink-0" />
                <p className="text-muted-foreground">Open, distributed protocols emerging as viable alternatives    </p>
              </div>
              <div className="flex items-start gap-3">
                <div className="w-2 h-2 rounded-full bg-primary mt-2 flex-shrink-0" />
                <p className="text-muted-foreground">Forming new substrates for collaborative coordination </p>
              </div>
              <div className="flex items-start gap-3">
                <div className="w-2 h-2 rounded-full bg-primary mt-2 flex-shrink-0" />
                <p className="text-muted-foreground">{"Individuals and collectives reclaiming digital sovereignty"}</p>
              </div>
            </div>
          </div>
        </div>

        <div className="mb-16">
          <h3 className="text-3xl font-bold mb-8 text-center">The Post-Appitalist Future</h3>
          <div className="grid md:grid-cols-3 gap-8">
            <div className="bg-gradient-to-br from-primary/10 to-primary/5 rounded-lg p-6 border border-primary/20">
              <div className="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center mb-4">
                <Shield className="w-6 h-6 text-primary" />
              </div>
              <h4 className="text-xl font-bold mb-3">Localized, Secure Data</h4>
              <p className="text-muted-foreground leading-relaxed">
                Your data lives where you live—under your control, encrypted, and sovereign. No more extraction by
                distant platforms.
              </p>
            </div>

            <div className="bg-gradient-to-br from-secondary/10 to-secondary/5 rounded-lg p-6 border border-secondary/20">
              <div className="w-12 h-12 rounded-full bg-secondary/20 flex items-center justify-center mb-4">
                <Users className="w-6 h-6 text-secondary" />
              </div>
              <h4 className="text-xl font-bold mb-3">Collaborative Democracy</h4>
              <p className="text-muted-foreground leading-relaxed">
                Decision-making tools that enable genuine participation, from local communities to global coordination
                networks.
              </p>
            </div>

            <div className="bg-gradient-to-br from-accent/10 to-accent/5 rounded-lg p-6 border border-accent/20">
              <div className="w-12 h-12 rounded-full bg-accent/20 flex items-center justify-center mb-4">
                <Network className="w-6 h-6 text-accent" />
              </div>
              <h4 className="text-xl font-bold mb-3">Composable Tooling</h4>
              <p className="text-muted-foreground leading-relaxed">
                Interoperable economic and computational tools that work together like mycelial networks—distributed,
                resilient, regenerative.
              </p>
            </div>
          </div>
        </div>

        <div className="bg-gradient-to-r from-primary/10 via-secondary/10 to-accent/10 rounded-lg p-8 text-center border border-primary/20">
          <p className="text-xl mb-6 leading-relaxed max-w-3xl mx-auto">
            The infrastructure for post-appitalism is being built right now. The question isn't whether it's
            possible—it's whether we'll participate in shaping it.
          </p>
          <Button size="lg" className="bg-primary hover:bg-primary/90 text-primary-foreground font-semibold" asChild>
            <a
              href="https://post-appitalism.app"
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center gap-2"
            >
              Explore Post-Appitalism
              <ArrowRight className="w-5 h-5" />
            </a>
          </Button>
        </div>
      </div>
    </section>
  )
}