import { Lock, HardDrive, Radio, Users } from 'lucide-react'

const features = [
  {
    icon: Lock,
    title: 'Zero-Knowledge Security',
    description: 'Metadata-encrypted. Your data, your keys, your sovereignty.',
  },
  {
    icon: HardDrive,
    title: 'Local Edge Storage',
    description: 'Sovereign data hosting. Media servers. All at the edge.',
  },
  {
    icon: Radio,
    title: 'Secure Communications',
    description: 'Encrypted channels. Private by default. Owned by you.',
  },
  {
    icon: Users,
    title: 'Collaborative Spaces',
    description: 'Powered by folkjs.org. Real connection, no extraction.',
  },
]

export function DeviceSection() {
  return (
    <section className="py-24 px-4 border-t border-border">
      <div className="max-w-6xl mx-auto">
        <div className="text-center mb-16">
          <div className="text-xs font-mono text-primary tracking-widest uppercase mb-4">
            The Node
          </div>
          <h2 className="text-3xl md:text-5xl font-bold mb-6 font-mono text-balance">
            Regenerative Sovereign Infrastructure
          </h2>
          <p className="text-muted-foreground max-w-2xl mx-auto leading-relaxed text-pretty">
            A local edge node that puts power back where it belongs. Secure, affordable, and built
            for the regenerative future.
          </p>
        </div>

        <div className="grid md:grid-cols-2 gap-6 mb-12">
          {features.map((feature) => (
            <div
              key={feature.title}
              className="bg-card border border-border p-6 hover:border-primary/50 transition-colors"
            >
              <feature.icon className="w-8 h-8 text-primary mb-4" />
              <h3 className="text-xl font-semibold mb-2">{feature.title}</h3>
              <p className="text-muted-foreground leading-relaxed">{feature.description}</p>
            </div>
          ))}
        </div>

        <div className="bg-secondary/50 border border-primary/30 p-8 text-center">
          <div className="text-sm font-mono text-primary mb-2 tracking-wider uppercase">
            Exclusive First Run
          </div>
          <p className="text-lg text-foreground">
            Limited initial devices. Early access for those who found the underground first.
          </p>
        </div>
      </div>
    </section>
  )
}