import { Shield, Network, Users, Lock, Zap, Globe } from "lucide-react"

const features = [
  {
    icon: Network,
    title: "Distributed Architecture",
    description: "No central servers. No single point of failure. Your data lives on the mesh.",
  },
  {
    icon: Lock,
    title: "Zero Knowledge",
    description: "End-to-end encrypted by default. Nobody can see your data, not even us.",
  },
  {
    icon: Users,
    title: "Collaborative First",
    description: "Built for cooperation. Share resources, knowledge, and compute power.",
  },
  {
    icon: Shield,
    title: "Democratic Governance",
    description: "Community-driven decisions. No corporate overlords controlling your experience.",
  },
  {
    icon: Zap,
    title: "Local First",
    description: "Work offline. Sync when connected. Your data is always accessible.",
  },
  {
    icon: Globe,
    title: "New Economic Models",
    description: "Fair value distribution. Contributors are rewarded, not exploited.",
  },
]

export function Features() {
  return (
    <section className="py-32 bg-background">
      <div className="container px-4">
        <div className="max-w-3xl mx-auto text-center mb-20">
          <h2 className="text-5xl md:text-6xl font-bold mb-6 text-balance">A New Digital Foundation</h2>
          <p className="text-xl text-muted-foreground text-balance leading-relaxed">
            Built on principles of freedom, privacy, and collective ownership. The internet as it should have been.
          </p>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
          {features.map((feature, index) => (
            <div
              key={index}
              className="group p-8 border border-border hover:border-foreground transition-colors bg-card"
            >
              <div className="mb-6">
                <div className="inline-flex p-3 bg-foreground text-background">
                  <feature.icon className="w-6 h-6" />
                </div>
              </div>
              <h3 className="text-2xl font-bold mb-3">{feature.title}</h3>
              <p className="text-muted-foreground leading-relaxed">{feature.description}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}