import { Card } from "@/components/ui/card"
import { MessageSquare, FolderOpen, Shield, BarChart3, Coins, Lock } from "lucide-react"

const features = [
  {
    icon: Coins,
    title: "Shared Funds",
    description: "Allocate and manage community resources through transparent, customizable controls.",
    color: "text-primary",
    bgColor: "bg-primary/10",
  },
  {
    icon: MessageSquare,
    title: "Secure Messaging",
    description:
      "End-to-end encrypted communication channels for your community. Nobody can read your messages, not even us.",
    color: "text-primary",
    bgColor: "bg-primary/10",
  },
  {
    icon: FolderOpen,
    title: "File Sharing",
    description: "Share files and create collaborative views over data with localized, zero-knowledge storage.",
    color: "text-secondary",
    bgColor: "bg-secondary/10",
  },
  {
    icon: Shield,
    title: "Delegated Authority",
    description: "Manage group permissions and authority structures democratically. Your space, your rules.",
    color: "text-accent",
    bgColor: "bg-accent/10",
  },
  {
    icon: BarChart3,
    title: "Interactive Dashboards",
    description: "Multidimensional views of your data powered by folkjs - HTML as a computing substrate.",
    color: "text-secondary",
    bgColor: "bg-secondary/10",
  },
  {
    icon: Lock,
    title: "Data Privacy",
    description: "Zero-knowledge architecture ensures your data never exists unencrypted outside your control.",
    color: "text-accent",
    bgColor: "bg-accent/10",
  },
]

export function Features() {
  return (
    <section className="border-b-4 border-primary bg-card/50 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 retro-shadow-sm">
            Shared Digital Spaces for <span className="text-primary">Collaboration</span>
          </h2>
          <p className="mt-4 text-lg text-muted-foreground">
            Everything you need to build thriving communities outside big tech's surveillance apparatus
          </p>
        </div>

        <div className="mt-16 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {features.map((feature, index) => {
            const Icon = feature.icon
            return (
              <Card
                key={index}
                className="group relative overflow-hidden border-2 border-border bg-card p-6 transition-all hover:border-primary hover:-translate-y-1 hover:retro-shadow-sm"
              >
                <div
                  className={`absolute inset-0 ${feature.bgColor} opacity-0 transition-opacity group-hover:opacity-100`}
                />
                <div className="relative">
                  <div
                    className={`mb-4 inline-flex rounded-lg ${feature.bgColor} p-3 ${feature.color} border-2 border-current`}
                  >
                    <Icon className="h-6 w-6" />
                  </div>
                  <h3 className="mb-2 text-xl font-semibold text-card-foreground">{feature.title}</h3>
                  <p className="text-sm leading-relaxed text-muted-foreground">{feature.description}</p>
                </div>
              </Card>
            )
          })}
        </div>
      </div>
    </section>
  )
}