"use client"

import { Badge } from "@/components/ui/badge"
import {
  Zap, ShieldCheck, Layers, BarChart3, Headset, Cloud, Settings2, CloudCog, Link2, TrendingUp,
} from "lucide-react"
import { SectionReveal } from "@/components/ui/section-reveal"
import homeData from "@/data/home.json"

const iconMap: Record<string, React.ReactNode> = {
  "zap":           <Zap className="w-5 h-5" />,
  "shield-check":  <ShieldCheck className="w-5 h-5" />,
  "layers":        <Layers className="w-5 h-5" />,
  "bar-chart-3":   <BarChart3 className="w-5 h-5" />,
  "headset":       <Headset className="w-5 h-5" />,
  "cloud":         <Cloud className="w-5 h-5" />,
  "Zap":           <Zap className="w-5 h-5" />,
  "Settings2":     <Settings2 className="w-5 h-5" />,
  "CloudCog":      <CloudCog className="w-5 h-5" />,
  "Headphones":    <Headset className="w-5 h-5" />,
  "Link2":         <Link2 className="w-5 h-5" />,
  "TrendingUp":    <TrendingUp className="w-5 h-5" />,
}

export function AdvantagesSection() {
  const { advantages } = homeData

  return (
    <section
      id="advantages"
      className="section-panel overflow-hidden"
      style={{ background: "oklch(0.97 0.006 260)" }}
    >
      {/* Subtle background decoration */}
      <div
        className="absolute top-0 left-1/2 -translate-x-1/2 w-[900px] h-[400px] opacity-[0.06] pointer-events-none"
        aria-hidden="true"
        style={{
          background: "radial-gradient(ellipse at center, oklch(0.46 0.22 264) 0%, transparent 70%)",
        }}
      />

      <SectionReveal className="w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative" delay={60}>

        {/* Header */}
        <div className="text-center max-w-2xl mx-auto mb-16">
          <Badge variant="secondary" className="mb-4 text-primary border-primary/20 bg-primary/8 px-3 py-1">
            {advantages.sectionBadge ?? advantages.sectionTag}
          </Badge>
          <h2 className="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-foreground text-balance mb-4 tracking-tight">
            {advantages.title}
          </h2>
          <p className="text-muted-foreground text-lg leading-relaxed text-pretty">
            {advantages.subtitle}
          </p>
        </div>

        {/* Grid */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
          {advantages.items.map((item, i) => (
            <article
              key={item.title}
              className="group relative bg-white border border-border rounded-2xl p-7 hover:shadow-xl hover:shadow-primary/8 hover:-translate-y-1 transition-all duration-300"
            >
              {/* Number watermark */}
              <span
                className="absolute top-5 right-6 text-6xl font-black text-muted/20 leading-none select-none pointer-events-none"
                aria-hidden="true"
              >
                {String(i + 1).padStart(2, "0")}
              </span>

              {/* Icon */}
              <div className="w-12 h-12 rounded-2xl bg-primary/8 text-primary flex items-center justify-center mb-5 group-hover:bg-primary group-hover:text-white transition-colors duration-300">
                {iconMap[item.icon] ?? iconMap.zap}
              </div>

              <h3 className="text-lg font-bold text-foreground mb-2">{item.title}</h3>
              <p className="text-muted-foreground text-sm leading-relaxed">{item.description}</p>

              {/* Bottom accent line */}
              <div className="absolute bottom-0 left-6 right-6 h-px bg-primary scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left rounded-full" />
            </article>
          ))}
        </div>

      </SectionReveal>
    </section>
  )
}