import { FileText, Lock, Users } from "lucide-react";

const features = [
  {
    icon: FileText,
    title: "Unified Ledger",
    description:
      "Real-time tracking of association financials, bank balances, and owner accounts in one central ledger.",
    color: "text-primary",
    bg: "bg-primary/10",
    hoverBorder: "hover:border-primary/30",
  },
  {
    icon: Lock,
    title: "Enterprise Security",
    description:
      "Bank-grade encryption and strict access controls ensure your association's data remains private and protected.",
    color: "text-emerald-600",
    bg: "bg-emerald-500/10",
    hoverBorder: "hover:border-emerald-300",
  },
  {
    icon: Users,
    title: "Homeowner Portal",
    description:
      "Intuitive self-service tools for residents to pay assessments, submit requests, and view official documents.",
    color: "text-violet-600",
    bg: "bg-violet-500/10",
    hoverBorder: "hover:border-violet-300",
  },
];

export function FeatureCards() {
  return (
    <section className="py-16 md:py-24">
      <div className="container">
        <div className="grid gap-8 md:grid-cols-3">
          {features.map((feature) => (
            <div
              key={feature.title}
              className={`bg-card p-8 rounded-3xl shadow-[0_8px_30px_rgb(0,0,0,0.04)] border border-border ${feature.hoverBorder} transition-all duration-300 group`}
            >
              <div className={`${feature.bg} w-14 h-14 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-all`}>
                <feature.icon className={`w-7 h-7 ${feature.color}`} />
              </div>
              <h3 className="text-xl font-bold text-foreground mb-3">{feature.title}</h3>
              <p className="text-muted-foreground leading-relaxed text-sm">{feature.description}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
