import { Usb, Wifi, Share2 } from "lucide-react"

const steps = [
  {
    icon: Usb,
    number: "01",
    title: "Get Your USB Key",
    description:
      "A physical device that contains your identity, encryption keys, and access credentials. Your sovereignty in hardware form.",
  },
  {
    icon: Wifi,
    number: "02",
    title: "Connect to the Mesh",
    description:
      "Plug in anywhere there's a local alltornet node. Instantly access the distributed network without corporate gatekeepers.",
  },
  {
    icon: Share2,
    number: "03",
    title: "Collaborate Freely",
    description: "Share files, compute, and ideas. Contribute to the commons. Build the future together.",
  },
]

export function HowItWorks() {
  return (
    <section className="py-32 bg-black text-white relative overflow-hidden">
      {/* Subtle pattern */}
      <div className="absolute inset-0 opacity-5">
        <div className="absolute inset-0 bg-[linear-gradient(45deg,#ffffff_25%,transparent_25%,transparent_75%,#ffffff_75%),linear-gradient(45deg,#ffffff_25%,transparent_25%,transparent_75%,#ffffff_75%)] bg-[size:2rem_2rem] bg-[0_0,1rem_1rem]" />
      </div>

      <div className="container px-4 relative z-10">
        <div className="max-w-3xl mx-auto text-center mb-20">
          <h2 className="text-5xl md:text-6xl font-bold mb-6 text-balance">How It Works</h2>
          <p className="text-xl text-white/70 text-balance leading-relaxed">
            Three simple steps to break free from the legacy internet
          </p>
        </div>

        <div className="max-w-5xl mx-auto space-y-16">
          {steps.map((step, index) => (
            <div key={index} className="flex flex-col md:flex-row gap-8 items-start group">
              <div className="flex-shrink-0">
                <div className="relative">
                  <div className="text-8xl md:text-9xl font-bold text-white/5 select-none">{step.number}</div>
                  <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
                    <div className="p-6 bg-white text-black">
                      <step.icon className="w-8 h-8" />
                    </div>
                  </div>
                </div>
              </div>

              <div className="flex-1 space-y-4 pt-4">
                <h3 className="text-3xl font-bold">{step.title}</h3>
                <p className="text-xl text-white/70 leading-relaxed">{step.description}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}