import {
  FolderTree,
  MousePointerClick,
  CalendarClock,
  ScanSearch,
  ShieldCheck,
  Sparkles,
  Filter,
} 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,
}: {
  icon: React.ElementType
  title: string
  desc: string
  glowClass: string
  delay: number
}) {
  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-slate-200 dark:border-slate-700 bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm h-full
              transform-gpu transition-all duration-300 ease-out
              hover:border-primary-400/40 dark:hover:border-primary-500/40 hover:shadow-lg hover:shadow-primary-500/5
              hover:-translate-y-1 hover:scale-[1.02]
              group-hover:bg-white dark:group-hover:bg-slate-800/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 dark:via-white/5 to-transparent" />
        </div>
        <div className="relative z-10">
          <div className="flex items-start gap-3 mb-3">
            <div
              className="p-2.5 bg-primary-500/10 rounded-xl text-primary-600 dark:text-primary-400 shrink-0
                    transition-all duration-300 ease-out
                    group-hover:bg-primary-500 group-hover:text-white
                    group-hover:scale-110 group-hover:rotate-3 group-hover:shadow-lg group-hover:shadow-primary-500/25"
            >
              <Icon className="h-6 w-6" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden />
            </div>
            <h4 className="text-base font-semibold text-slate-900 dark:text-slate-100 transition-colors duration-300 group-hover:text-primary-600 dark:group-hover:text-primary-400 pt-0.5">
              {title}
            </h4>
          </div>
          <p
            className="text-sm text-slate-500 dark:text-slate-400 leading-relaxed transition-all duration-300
                    opacity-90 group-hover:opacity-100 group-hover:text-slate-700 dark:group-hover:text-slate-300"
          >
            {desc}
          </p>
        </div>
      </div>
    </div>
  )
}

export function Features() {
  return (
    <section id="features" className="py-24 bg-slate-50 dark:bg-slate-900">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Single card in engineering-card style */}
        <div
          data-slot="card"
          className="relative bg-white/80 dark:bg-slate-800/60 text-slate-900 dark:text-slate-100 flex flex-col gap-6 rounded-2xl border border-slate-200 dark:border-slate-700 backdrop-blur-md shadow-lg shadow-black/5 dark:shadow-black/20 transform-gpu transition-all duration-300 ease-out hover:shadow-2xl hover:shadow-primary-500/10 hover:border-primary-400/30 dark:hover:border-primary-500/20 overflow-hidden
            before:absolute before:inset-0 before:rounded-2xl before:p-[1.5px] before:bg-gradient-to-br before:from-primary-500/50 before:via-accent-500/30 before:to-primary-500/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-500/5 after:via-transparent after:to-accent-500/5 after:opacity-0 after:transition-opacity after:duration-500 hover:after:opacity-100
            p-6 md:p-8"
        >
          <div className="mb-8 text-center">
            <h3 className="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-2">What it does</h3>
            <p className="text-slate-600 dark:text-slate-400 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>

          {/* Before → After strip (engineering-card style) */}
          <div
            className="mt-8 p-5 bg-gradient-to-r from-primary-500/10 via-accent-500/10 to-primary-500/10 rounded-xl border border-primary-500/20
        relative overflow-hidden group/featured transition-all duration-300 hover:border-primary-500/40 hover:shadow-lg hover:shadow-primary-500/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-500 via-accent-500 to-primary-500 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-slate-50/50 dark:bg-slate-900/50 border border-slate-200/50 dark:border-slate-700/50">
                <span className="text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Before</span>
                <div className="text-center md:text-left">
                  <p className="font-bold text-slate-900 dark:text-slate-100 text-lg">Inbox chaos</p>
                  <p className="text-3xl md:text-4xl font-bold text-primary-600 dark:text-primary-400 mt-1">847</p>
                  <p className="text-sm text-slate-500 dark:text-slate-400">unread emails</p>
                </div>
              </div>
              <div className="flex items-center justify-center shrink-0 text-slate-400 dark:text-slate-500 group-hover/featured:text-primary-500 transition-colors duration-300">
                <Filter className="w-7 h-7" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden />
              </div>
              <div className="flex-1 flex flex-col md:flex-row items-center gap-4 md:gap-6 p-4 rounded-xl bg-primary-500/10 border border-primary-500/20">
                <span className="text-xs font-semibold uppercase tracking-wider text-primary-600 dark:text-primary-400">After</span>
                <div className="text-center md:text-left">
                  <p className="font-bold text-slate-900 dark:text-slate-100 text-lg">All sorted</p>
                  <p className="text-3xl md:text-4xl font-bold text-primary-600 dark:text-primary-400 mt-1">12</p>
                  <p className="text-sm text-slate-500 dark:text-slate-400">important emails</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
