"use client";

import { useTranslations } from "next-intl";
import { ShieldCheck, Lock, CreditCard, Ban } from "lucide-react";
import { Link } from "@/i18n/navigation";

/**
 * Sits directly under the hero. Two jobs, in one band:
 * 1. Concrete numbers that answer "how long will this take my client?"
 * 2. The data-handling promises a clinician needs before entering a client's
 *    name — each linked to the policy page that states it in full.
 */
export default function ProofBar() {
  const t = useTranslations("proofBar");

  const stats = [
    { value: t("stats.scalesValue"), label: t("stats.scalesLabel") },
    { value: t("stats.itemsValue"), label: t("stats.itemsLabel") },
    { value: t("stats.minutesValue"), label: t("stats.minutesLabel") },
    { value: t("stats.languagesValue"), label: t("stats.languagesLabel") },
  ];

  const trustItems = [
    { icon: ShieldCheck, label: t("trust.hipaa"), href: "/privacy-policy" },
    { icon: Lock, label: t("trust.encrypted"), href: "/privacy-policy" },
    { icon: CreditCard, label: t("trust.stripe"), href: "/terms" },
    { icon: Ban, label: t("trust.neverSold"), href: "/privacy-policy" },
  ];

  return (
    <section aria-labelledby="proof-bar-heading" className="bg-white border-b border-gray-200">
      <h2 id="proof-bar-heading" className="sr-only">
        {t("heading")}
      </h2>

      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Numbers */}
        <dl className="grid grid-cols-2 lg:grid-cols-4 gap-x-6 gap-y-6 py-8">
          {stats.map((stat) => (
            <div key={stat.label} className="text-center lg:text-left">
              <dt className="sr-only">{stat.label}</dt>
              <dd>
                <span className="block text-3xl sm:text-4xl font-bold text-[#2E8EBE] tabular-nums">
                  {stat.value}
                </span>
                <span className="mt-1 block text-[13px] text-gray-600 leading-snug">
                  {stat.label}
                </span>
              </dd>
            </div>
          ))}
        </dl>

        {/* Data-handling promises */}
        <ul className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-x-6 gap-y-3 border-t border-gray-100 py-5">
          {trustItems.map(({ icon: Icon, label, href }) => (
            <li key={label}>
              <Link
                href={href}
                className="group flex items-center gap-2.5 text-[13px] text-gray-600 rounded-md transition hover:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#2E8EBE]"
              >
                <Icon
                  className="h-4 w-4 shrink-0 text-[#2E8EBE]"
                  strokeWidth={2}
                  aria-hidden="true"
                />
                <span className="underline decoration-transparent underline-offset-2 transition group-hover:decoration-gray-300">
                  {label}
                </span>
              </Link>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}