"use client";

import { motion } from "framer-motion";
import {
  Bot,
  BookOpenCheck,
  ChartPie,
  DatabaseZap,
  FileDown,
  Shield,
  Workflow,
} from "lucide-react";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

const features = [
  {
    title: "AI Case Extraction",
    description: "Describe inheritance cases in natural language, then review structured heirs and estate fields.",
    icon: Bot,
  },
  {
    title: "Hanafi Rules Engine",
    description: "Pure TypeScript inheritance engine with fixed shares, exclusions, and residual distribution.",
    icon: BookOpenCheck,
  },
  {
    title: "Guided Wizard",
    description: "Step-by-step flow for estate inputs, heirs selection, review, and instant results.",
    icon: Workflow,
  },
  {
    title: "Visual Results",
    description: "Heir fractions, percentages, amounts, Quran references, and pie chart breakdown.",
    icon: ChartPie,
  },
  {
    title: "Secure Dashboard",
    description: "Google-authenticated workspace to store, review, and reopen calculations.",
    icon: Shield,
  },
  {
    title: "Persistent Records",
    description: "PostgreSQL + Prisma data model for calculations and heir line items.",
    icon: DatabaseZap,
  },
  {
    title: "PDF Export",
    description: "Download report-ready summaries with notes and references for review.",
    icon: FileDown,
  },
];

export function FeatureGrid() {
  return (
    <section className="bg-background py-14 sm:py-20">
      <div className="mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="max-w-2xl">
          <h2 className="text-2xl font-semibold text-emerald-950 sm:text-3xl">
            Trusted inheritance workflows
          </h2>
          <p className="mt-2 text-sm text-muted-foreground sm:text-base">
            Built for clarity, repeatability, and future madhab expansion.
          </p>
        </div>
        <div className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {features.map((feature, index) => (
            <motion.div
              key={feature.title}
              initial={{ opacity: 0, y: 12 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.3, delay: index * 0.04 }}
            >
              <Card className="h-full border border-border/80 bg-card">
                <CardHeader>
                  <CardTitle className="flex items-center gap-2 text-base">
                    <span className="inline-flex size-8 items-center justify-center rounded-lg bg-emerald-50 text-emerald-700">
                      <feature.icon className="size-4" />
                    </span>
                    {feature.title}
                  </CardTitle>
                </CardHeader>
                <CardContent className="text-sm text-muted-foreground">
                  {feature.description}
                </CardContent>
              </Card>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}