import {
  FolderTree,
  MousePointerClick,
  CalendarClock,
  ScanSearch,
  ShieldCheck,
  Sparkles,
} from "lucide-react";

const FEATURES = [
  {
    icon: FolderTree,
    title: "Categories, not chaos",
    desc: "Leads, clients, invoices, newsletters — sorted into folders. Your inbox shows what pays first.",
    glowClass: "from-orange-500/20 to-amber-500/20",
    delay: 0,
  },
  {
    icon: MousePointerClick,
    title: "One click to sort",
    desc: "Connect your inbox, click Sort Now. No rules to write. We read and categorize; you review.",
    glowClass: "from-emerald-500/20 to-teal-500/20",
    delay: 50,
  },
  {
    icon: CalendarClock,
    title: "Runs when you want",
    desc: "Sort on demand or set a schedule. Your inbox stays organized without you touching it.",
    glowClass: "from-blue-500/20 to-indigo-500/20",
    delay: 100,
  },
  {
    icon: ScanSearch,
    title: "Content-aware sorting",
    desc: "We look at sender, subject, and a short snippet to decide the category. No keyword lists.",
    glowClass: "from-violet-500/20 to-purple-500/20",
    delay: 150,
  },
  {
    icon: ShieldCheck,
    title: "Minimal data",
    desc: "We only read what we need to categorize. No storing email body or attachments. GDPR compliant.",
    glowClass: "from-green-500/20 to-emerald-500/20",
    delay: 200,
  },
  {
    icon: Sparkles,
    title: "Less time on triage",
    desc: "Spend less time deciding what's important. Inbox shows clients and leads first.",
    glowClass: "from-cyan-500/20 to-blue-500/20",
    delay: 250,
  },
];

function FeatureItem({ icon: Icon, title, desc, glowClass, delay }) {
  return (
    <div
      className="group relative"
      style={{ animationDelay: `${delay}ms` }}
    >
      <div
        aria-hidden="true"
        className={`absolute inset-0 bg-gradient-to-br ${glowClass} rounded-xl opacity-0 group-hover:opacity-100 blur-xl transition-opacity duration-300 -z-10 scale-110`}
      />
      <div
        className="relative p-4 rounded-xl border border-border/50 bg-card/80 backdrop-blur-sm h-full
              transform-gpu transition-all duration-300 ease-out
              hover:border-primary/40 hover:shadow-lg hover:shadow-primary/5
              hover:-translate-y-1 hover:scale-[1.02]
              group-hover:bg-card/95"
      >
        <div
          aria-hidden="true"
          className="absolute inset-0 rounded-xl overflow-hidden opacity-0 group-hover:opacity-100 transition-opacity duration-300"
        >
          <div className="absolute inset-0 -translate-x-full group-hover:translate-x-full transition-transform duration-700 ease-out bg-gradient-to-r from-transparent via-white/10 to-transparent" />
        </div>
        <div className="relative z-10">
          <div className="flex items-start gap-3 mb-3">
            <div
              className="p-2.5 bg-primary/10 rounded-xl text-primary shrink-0
                    transition-all duration-300 ease-out
                    group-hover:bg-primary group-hover:text-primary-foreground
                    group-hover:scale-110 group-hover:rotate-3 group-hover:shadow-lg group-hover:shadow-primary/25"
            >
              <Icon className="h-6 w-6" aria-hidden strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
            </div>
            <h4 className="text-base font-semibold text-foreground transition-colors duration-300 group-hover:text-primary pt-0.5">
              {title}
            </h4>
          </div>
          <p
            className="text-sm text-muted-foreground leading-relaxed transition-all duration-300
                    opacity-90 group-hover:opacity-100 group-hover:text-foreground/90"
          >
            {desc}
          </p>
        </div>
      </div>
    </div>
  );
}

export function EngineeringImpactCard() {
  return (
    <div
      data-slot="card"
      className="bg-card/80 text-card-foreground flex flex-col gap-6 rounded-2xl border backdrop-blur-md shadow-lg shadow-black/5 dark:bg-card/60 dark:shadow-black/20 transform-gpu relative transition-all duration-300 ease-out hover:shadow-2xl hover:shadow-primary/10 hover:border-primary/30 dark:hover:shadow-primary/20 before:absolute before:inset-0 before:rounded-2xl before:p-[1.5px] before:bg-gradient-to-br before:from-primary/50 before:via-accent/30 before:to-primary/50 before:-z-10 before:opacity-0 before:transition-opacity before:duration-500 hover:before:opacity-100 after:absolute after:inset-0 after:rounded-2xl after:-z-20 after:bg-gradient-to-br after:from-primary/5 after:via-transparent after:to-accent/5 after:opacity-0 after:transition-opacity after:duration-500 hover:after:opacity-100 p-6 md:p-8 overflow-hidden"
    >
      <div className="mb-8 text-center">
        <h3 className="text-2xl font-bold mb-2">What it does</h3>
        <p className="text-muted-foreground max-w-xl mx-auto">
          Sort incoming mail into categories so your inbox shows what matters first. No rules to write.
        </p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {FEATURES.map((feature, i) => (
          <FeatureItem key={i} {...feature} />
        ))}
      </div>

      <div
        className="mt-8 p-5 bg-gradient-to-r from-primary/10 via-accent/10 to-secondary/10 rounded-xl border border-primary/20
        relative overflow-hidden group/featured transition-all duration-300 hover:border-primary/40 hover:shadow-lg hover:shadow-primary/10"
      >
        <div
          aria-hidden="true"
          className="absolute inset-0 rounded-xl opacity-0 group-hover/featured:opacity-100 transition-opacity duration-500"
        >
          <div className="absolute inset-[-1px] rounded-xl bg-gradient-to-r from-primary via-accent to-primary bg-[length:200%_100%] animate-gradient-x opacity-30" />
        </div>
        <div className="relative flex flex-col md:flex-row items-stretch md:items-center gap-6 md:gap-8">
          <div className="flex-1 flex flex-col md:flex-row items-center gap-4 md:gap-6 p-4 rounded-xl bg-background/50 border border-border/50">
            <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Before</span>
            <div className="text-center md:text-left">
              <p className="font-bold text-foreground text-lg">Inbox chaos</p>
              <p className="text-3xl md:text-4xl font-bold text-primary mt-1">847</p>
              <p className="text-sm text-muted-foreground">unread emails</p>
            </div>
          </div>
          <div className="flex items-center justify-center shrink-0 text-muted-foreground group-hover/featured:text-primary transition-colors duration-300">
            <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
          </div>
          <div className="flex-1 flex flex-col md:flex-row items-center gap-4 md:gap-6 p-4 rounded-xl bg-primary/10 border border-primary/20">
            <span className="text-xs font-semibold uppercase tracking-wider text-primary">After</span>
            <div className="text-center md:text-left">
              <p className="font-bold text-foreground text-lg">All sorted</p>
              <p className="text-3xl md:text-4xl font-bold text-primary mt-1">12</p>
              <p className="text-sm text-muted-foreground">important emails</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
