import {
  Languages,
  Cpu,
  LayoutTemplate,
  ShieldCheck,
  Star,
} from "lucide-react"

const STATS = [
  {
    icon: Languages,
    value: "60+",
    label: "Languages supported",
  },
  {
    icon: Cpu,
    value: "7",
    label: "Translation engines",
  },
  {
    icon: LayoutTemplate,
    value: "100%",
    label: "Formatting preserved",
  },
  {
    icon: ShieldCheck,
    value: "≤ 2 h",
    label: "Max file retention",
  },
]

const TESTIMONIALS = [
  {
    quote:
      "We translated a 40-page Excel pricing matrix in minutes and every formula and merged cell survived intact. It used to take our translators two days.",
    name: "M. Laurent",
    role: "Operations Lead, logistics (FR → EN)",
  },
  {
    quote:
      "The custom glossary is the killer feature for us. Our HVAC terminology is now consistent across every document we ship to clients.",
    name: "S. Chen",
    role: "Technical writer, engineering consultancy",
  },
  {
    quote:
      "Being able to pick the engine per document — cheap for drafts, premium LLM for client deliverables — fits how our agency actually works.",
    name: "A. Dubois",
    role: "Translation agency owner",
  },
]

export function SocialProofSection() {
  return (
    <section className="flex flex-col items-center gap-10 px-6 py-16 md:py-20">
      <div className="grid w-full max-w-4xl grid-cols-2 gap-4 md:grid-cols-4">
        {STATS.map((stat) => (
          <div
            key={stat.label}
            className="flex flex-col items-center gap-2 rounded-xl border border-border bg-card p-5 text-center shadow-sm"
          >
            <div className="flex size-9 items-center justify-center rounded-lg bg-secondary">
              <stat.icon className="size-4.5 text-foreground" />
            </div>
            <span className="text-2xl font-bold tracking-tight text-foreground">
              {stat.value}
            </span>
            <span className="text-xs text-muted-foreground">{stat.label}</span>
          </div>
        ))}
      </div>

      <div className="flex w-full max-w-5xl flex-col items-center gap-6">
        <div className="flex flex-col items-center gap-2 text-center">
          <div className="flex items-center gap-1 text-amber-500">
            {Array.from({ length: 5 }).map((_, i) => (
              <Star key={i} className="size-4 fill-current" />
            ))}
          </div>
          <h2 className="text-balance text-2xl font-bold tracking-tight text-foreground md:text-3xl">
            Teams that translate, ship faster
          </h2>
          <p className="max-w-xl text-pretty text-sm text-muted-foreground">
            From solo consultants to international operations, Office Translator
            keeps the format, the formulas and the meaning.
          </p>
        </div>

        <div className="grid w-full grid-cols-1 gap-4 md:grid-cols-3">
          {TESTIMONIALS.map((t) => (
            <figure
              key={t.name}
              className="flex flex-col gap-3 rounded-xl border border-border bg-card p-5 shadow-sm"
            >
              <div className="flex items-center gap-0.5 text-amber-500">
                {Array.from({ length: 5 }).map((_, i) => (
                  <Star key={i} className="size-3 fill-current" />
                ))}
              </div>
              <blockquote className="flex-1 text-sm leading-relaxed text-foreground/90">
                &ldquo;{t.quote}&rdquo;
              </blockquote>
              <figcaption className="flex items-center gap-2 text-xs">
                <span className="font-semibold text-foreground">{t.name}</span>
                <span className="text-muted-foreground">{t.role}</span>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  )
}