import { Code2, Database, Cpu } from "lucide-react"

const steps = [
  {
    number: "01",
    icon: Code2,
    title: "Built on folkjs",
    description:
      "HTML as a computing substrate. Interactive, reactive interfaces using familiar web technologies - no complex frameworks required.",
  },
  {
    number: "02",
    icon: Database,
    title: "Local-First Storage",
    description:
      "Your data lives on your device. Distributed sync protocols keep your rspace updated across the mesh without centralized servers.",
  },
  {
    number: "03",
    icon: Cpu,
    title: "Zero-Knowledge Architecture",
    description:
      "All encryption happens on your device. Share selectively through cryptographic proofs. Nobody can access what they shouldn't see.",
  },
]

export function HowItWorks() {
  return (
    <section className="border-b border-border bg-card/30 py-24">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="text-center">
          <h2 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">Built Different</h2>
          <p className="mt-4 text-lg text-muted-foreground">A new substrate for digital collaboration</p>
        </div>

        <div className="mt-16 grid gap-8 md:grid-cols-3">
          {steps.map((step, index) => {
            const Icon = step.icon
            return (
              <div key={index} className="relative">
                <div className="flex flex-col items-start">
                  <div className="mb-4 text-7xl font-bold text-primary/10">{step.number}</div>
                  <div className="mb-4 inline-flex rounded-lg bg-primary/10 p-3 text-primary">
                    <Icon className="h-6 w-6" />
                  </div>
                  <h3 className="mb-3 text-xl font-semibold text-foreground">{step.title}</h3>
                  <p className="text-sm leading-relaxed text-muted-foreground">{step.description}</p>
                </div>
              </div>
            )
          })}
        </div>

        <div className="mt-16 rounded-lg border border-border bg-card p-8">
          <div className="text-center">
            <p className="text-lg font-medium text-foreground">
              Powered by <span className="font-mono text-primary">folkjs</span> - bringing the internet back to what it
              was always meant to be
            </p>
            <p className="mt-2 text-sm text-muted-foreground">
              A basic HTML computing substrate for building truly interactive, local-first applications
            </p>
          </div>
        </div>
      </div>
    </section>
  )
}