"use client";

import { trustMetrics, trustStatements } from "@/lib/home-content";
import { useReveal } from "@/hooks/use-reveal";
import { useCountUp } from "@/hooks/use-count-up";
import ScrollReveal from "@/components/ScrollReveal";
import SectionBackdrop from "@/components/ui/SectionBackdrop";
import SectionHeader from "@/components/ui/SectionHeader";

/** Trusted — verified metrics plus trust statements (no logos or ratings are shown unless real). */
export default function Trusted() {
  const { ref, visible } = useReveal<HTMLDivElement>();

  return (
    <section id="trusted" className="relative scroll-mt-24 overflow-x-clip py-20 sm:py-24 lg:py-28">
      <SectionBackdrop glow="right" tinted />

      <div className="container">
        <SectionHeader
          eyebrow="Trusted"
          title={
            <>
              Built on trust. <span className="text-accent">Driven by results.</span>
            </>
          }
          description="Years of shipping products have taught us what it takes to earn long-term trust."
        />

        <ul className="mt-6 grid gap-4 sm:grid-cols-2 lg:mt-8 lg:grid-cols-4 lg:gap-6">
          {trustStatements.map((item, i) => {
            const Icon = item.icon;
            return (
              <li key={item.title}>
                <ScrollReveal delay={i * 90} variant="scale" className="h-full">
                  <div className="group relative h-full overflow-hidden rounded-3xl border border-slate-200 bg-white p-6 shadow-card transition-all duration-300 ease-out hover:-translate-y-1 hover:border-accent-200 hover:shadow-[0_22px_48px_-22px_rgba(0,148,238,0.35)]">
                    <div aria-hidden="true" className="pointer-events-none absolute -right-8 -top-8 h-24 w-24 rounded-full bg-linear-to-br from-accent/12 to-transparent transition-transform duration-500 group-hover:scale-125" />
                    <span className="relative flex h-11 w-11 items-center justify-center rounded-xl bg-accent/10 text-accent transition-all duration-300 group-hover:scale-105 group-hover:bg-accent/15">
                      <Icon className="h-5 w-5" strokeWidth={1.75} aria-hidden />
                    </span>
                    <h3 className="relative mt-4 font-display text-base font-semibold tracking-tight text-[#0F172A]">
                      {item.title}
                    </h3>
                    <p className="relative mt-1.5 text-sm leading-[1.7] text-ink-400">{item.description}</p>
                  </div>
                </ScrollReveal>
              </li>
            );
          })}
        </ul>
      </div>
    </section>
  );
}

function MetricCard({
  metric,
  index,
  visible,
}: {
  metric: (typeof trustMetrics)[number];
  index: number;
  visible: boolean;
}) {
  const count = useCountUp(metric.value, visible);

  return (
    <div className={visible ? "animate-card-in" : "opacity-0"} style={{ animationDelay: `${index * 100}ms` }}>
      <div className="relative h-full overflow-hidden rounded-3xl border border-slate-200 bg-white px-6 py-8 text-center shadow-card">
        <div aria-hidden="true" className="pointer-events-none absolute -right-8 -top-8 h-28 w-28 rounded-full bg-linear-to-br from-accent/12 to-transparent" />
        <p className="relative font-display text-[2.6rem] font-bold leading-none tracking-tight text-accent">
          <span className="sr-only">
            {metric.value}
            {metric.suffix}
          </span>
          <span aria-hidden="true">
            {count}
            {metric.suffix}
          </span>
        </p>
        <p className="relative mt-3 text-sm font-medium text-ink-400">{metric.label}</p>
      </div>
    </div>
  );
}