"use client"

import { Icon } from "@iconify/react"
import { LandingReveal } from "@/components/landing/landing-reveal"
import type { ProductPageData } from "@/components/landing/product/product-data"

export function ProductHighlights({
  section,
  accent,
}: {
  section: ProductPageData["highlightsSection"]
  accent: string
}) {
  return (
    <section id="pourquoi" className="scroll-mt-20 px-4 py-20 sm:px-6">
      <div className="mx-auto w-full max-w-6xl">
        <LandingReveal>
          <div className="landing-glass-strong relative overflow-hidden rounded-3xl px-6 py-12 sm:px-12 sm:py-16">
            <div
              className="pointer-events-none absolute inset-0 opacity-60"
              style={{
                background: `radial-gradient(60% 90% at 15% 0%, color-mix(in oklab, ${accent} 22%, transparent), transparent 70%), radial-gradient(50% 80% at 90% 100%, color-mix(in oklab, ${accent} 14%, transparent), transparent 70%)`,
              }}
              aria-hidden
            />
            <div className="relative flex flex-col gap-10">
              <div className="flex max-w-2xl flex-col gap-4">
                <span
                  className="inline-flex w-fit items-center gap-2 rounded-full px-3.5 py-1 text-xs font-semibold uppercase tracking-wider"
                  style={{
                    backgroundColor: `${accent}1a`,
                    color: accent,
                  }}
                >
                  <Icon icon="mdi:lightning-bolt-outline" className="size-4" aria-hidden />
                  {section.eyebrow}
                </span>
                <h2 className="text-balance text-3xl font-bold tracking-tight sm:text-4xl">
                  {section.title}
                </h2>
                <p className="text-base leading-relaxed text-[var(--landing-muted)]">
                  {section.description}
                </p>
              </div>

              <dl className="grid grid-cols-2 gap-6 lg:grid-cols-4">
                {section.highlights.map((stat, index) => (
                  <LandingReveal key={stat.label} delay={index * 0.08}>
                    <div
                      className="flex flex-col gap-1 border-l-2 pl-4"
                      style={{ borderColor: accent }}
                    >
                      <dt className="order-2 text-sm text-[var(--landing-muted)]">
                        {stat.label}
                      </dt>
                      <dd className="order-1 text-3xl font-bold tracking-tight sm:text-4xl">
                        {stat.value}
                      </dd>
                    </div>
                  </LandingReveal>
                ))}
              </dl>
            </div>
          </div>
        </LandingReveal>
      </div>
    </section>
  )
}