import Link from 'next/link';
import { getTranslations } from 'next-intl/server';
import { Lock, BadgeCheck, Tag, MessagesSquare } from 'lucide-react';

const PILLARS = [
  { key: 'secure', Icon: Lock },
  { key: 'confirmation', Icon: BadgeCheck },
  { key: 'pricing', Icon: Tag },
  { key: 'support', Icon: MessagesSquare },
] as const;

export async function TrustPillars({ locale }: { locale: string }) {
  const t = await getTranslations({ locale, namespace: 'home.trust' });

  return (
    <section className="border-b border-neutral-200 bg-white">
      <div className="mx-auto max-w-7xl px-4 py-14 md:py-20">
        <div className="grid gap-12 md:grid-cols-[1fr_1.4fr] md:gap-20">
          <header className="md:sticky md:top-24 md:self-start">
            <span className="text-xs font-medium uppercase tracking-[0.16em] text-neutral-500">
              {t('eyebrow')}
            </span>
            <h2 className="mt-3 font-heading text-3xl font-bold leading-tight text-neutral-900 md:text-4xl">
              {t('heading')}
            </h2>
          </header>

          <div>
            <ul className="space-y-10 list-none p-0 md:space-y-12">
              {PILLARS.map(({ key, Icon }) => (
                <li key={key} className="flex items-start gap-5">
                  <span className="flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-xl bg-neutral-100 text-neutral-700">
                    <Icon className="h-5 w-5" aria-hidden />
                  </span>
                  <div className="min-w-0">
                    <h3 className="font-heading text-lg font-semibold text-neutral-900 md:text-xl">
                      {t(`${key}_title`)}
                    </h3>
                    <p className="mt-2 max-w-prose text-sm leading-relaxed text-neutral-600 md:text-base">
                      {t(`${key}_sub`)}
                    </p>
                  </div>
                </li>
              ))}
            </ul>

            {/* Feature 054 (US6, T055) — Single "Learn about our badges" link. */}
            <p className="mt-10 text-sm">
              <Link
                href={`/${locale}/about/trust`}
                className="font-medium text-primary-700 underline-offset-4 hover:underline"
                data-testid="trust-pillars-learn-more"
              >
                {t('learn_more')}
              </Link>
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}