import Link from 'next/link';
import type { Metadata } from 'next';
import { paths } from '@justice-choice/seo-engine';
import { SCORE_COMPONENT_LABELS } from '@justice-choice/types';
import { api } from '@/lib/api';
import { fmtDate, fmtNumber } from '@/lib/format';
import { OG_IMAGE, SITE, abs } from '@/lib/site';
import type { RankingPageData } from '@/lib/types';
import { SearchBox } from '@/components/SearchBox';
import { ScoreLedger } from '@/components/ScoreLedger';
import { Monogram, VerificationBadge } from '@/components/Badges';
import { Faq } from '@/components/Faq';
import { JsonLd } from '@/components/JsonLd';
import { COMPONENT_COLOR, DEFAULT_WEIGHTS, LEDGER_GROUPS } from '@/components/ledger';
import {
  ArrowRightIcon,
  BadgeCheckIcon,
  ChartIcon,
  DatabaseIcon,
  GlobeIcon,
  LayersIcon,
  LockIcon,
  MapPinIcon,
  PracticeAreaIcon,
  ScaleIcon,
  SearchIcon,
  ShieldCheckIcon,
  SparklesIcon,
  UsersIcon,
} from '@/components/Icons';

export const dynamic = 'force-dynamic';

export const metadata: Metadata = {
  title: { absolute: 'Justice Choice: Compare Verified Lawyers by City and Practice' },
  description:
    'Justice Choice ranks lawyers on verified licences, relevant experience and sourced reviews. Compare lawyers by city and practice area — rankings are never for sale.',
  alternates: { canonical: abs('/') },
  openGraph: {
    type: 'website',
    siteName: SITE.name,
    locale: 'en_US',
    url: abs('/'),
    title: 'Justice Choice: Compare Verified Lawyers by City and Practice',
    description: 'Find the right lawyer with Justice Choice. Every ranking is split into nine published parts traced to licences, court records and verified reviews.',
    images: [OG_IMAGE],
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Justice Choice: Compare Verified Lawyers by City and Practice',
    description: 'Find the right lawyer with Justice Choice — lawyers ranked on evidence you can check, never on payment.',
    images: [OG_IMAGE.url],
  },
};

const HOME_FAQ = [
  {
    q: 'What is Justice Choice?',
    a: 'Justice Choice is an independent lawyer directory at justicechoice.com. It helps you find and compare licensed lawyers by city and practice area, and shows the evidence behind every ranking so you can check it yourself.',
  },
  {
    q: 'How does Justice Choice rank lawyers?',
    a: 'Every lawyer is scored on nine published components — credentials, relevant experience, specialization, verified reputation, recognition, track record, client experience, profile quality and data freshness. The weights are fixed and the same for everyone in a ranking.',
  },
  {
    q: 'Can lawyers pay to rank higher on Justice Choice?',
    a: 'No. Payment never enters the calculation. Lawyers can buy a premium profile or a sponsored slot, but sponsored listings sit in a separate, clearly labelled box and never change anyone’s organic position.',
  },
  {
    q: 'Is Justice Choice free to use?',
    a: 'Yes. Searching, comparing lawyers and sending an enquiry are free. Lawyers can also claim their profile for free to correct details and answer enquiries.',
  },
  {
    q: 'Does Justice Choice give legal advice?',
    a: 'No. Justice Choice is a directory, not a law firm. Rankings summarise available evidence to help you choose; always confirm a lawyer’s licence with the issuing body before hiring.',
  },
];

type Country = { id: number; name: string; slug: string; cities: number; lawyers: number; path: string; eligible: boolean };
type Area = { id: number; name: string; slug: string; description: string | null; parent_id: number | null; lawyers: number; cities: number; path: string };
type CountryPage = { cities: { name: string; slug: string; lawyers: number; eligible: boolean; path: string }[] };

const POPULAR: [string, string, string][] = [
  ['Divorce · New York', '/us/new-york/divorce-lawyers/', 'divorce'],
  ['Personal injury · Los Angeles', '/us/los-angeles/personal-injury-lawyers/', 'personal-injury'],
  ['Criminal defense · Chicago', '/us/chicago/criminal-lawyers/', 'criminal'],
  ['Immigration · Houston', '/us/houston/immigration-lawyers/', 'immigration'],
];

const STEPS = [
  { t: 'Collect', d: 'Licensing registries, court records and review sources are stored exactly as fetched.', Icon: DatabaseIcon },
  { t: 'Verify', d: 'Licences are matched to the issuing body; duplicates are merged by a person, not a guess.', Icon: ShieldCheckIcon },
  { t: 'Score', d: 'Nine components, fixed weights, time decay for stale data and a cap on any single review source.', Icon: ChartIcon },
  { t: 'Publish', d: 'A page goes live only when it has enough verified lawyers and genuinely local information.', Icon: GlobeIcon },
];

export default async function Home() {
  const [stats, countries, areas, us, example] = await Promise.all([
    api<{ lawyers: number; verified: number; cities: number; countries: number; practice_areas: number }>('/stats'),
    api<Country[]>('/countries'),
    api<Area[]>('/practice-areas'),
    api<CountryPage>('/countries/us'),
    api<RankingPageData>('/rankings/new-york/divorce?country=us&limit=3', { allow404: true }),
  ]);
  const top = example?.ranked[0];
  const weights = example?.weights ?? DEFAULT_WEIGHTS;
  const groupPts = top
    ? LEDGER_GROUPS.map((g) => ({ ...g, pts: g.components.reduce((s, k) => s + top.components[k] * weights[k], 0) }))
    : [];
  const strongest = top ? (Object.keys(top.components) as (keyof typeof top.components)[]).sort((a, b) => top.components[b] - top.components[a])[0] : null;
  const verifiedShare = stats.lawyers ? Math.round((stats.verified / stats.lawyers) * 100) : 0;
  const topAreas = areas.filter((a) => !a.parent_id);

  return (
    <>
      <JsonLd
        data={{
          '@context': 'https://schema.org',
          '@type': 'WebSite',
          '@id': `${SITE.url}/#website`,
          name: SITE.name,
          alternateName: SITE.domain,
          url: abs('/'),
          description: SITE.description,
          inLanguage: 'en',
          publisher: { '@id': `${SITE.url}/#organization` },
          potentialAction: { '@type': 'SearchAction', target: `${abs('/search/')}?q={search_term_string}`, 'query-input': 'required name=search_term_string' },
        }}
      />

      {/* ───────────── Hero */}
      <section aria-labelledby="hero-h" className="hero-backdrop relative isolate overflow-hidden border-b border-rule">
        <div aria-hidden className="hero-grid pointer-events-none absolute inset-0 -z-10" />
        <div aria-hidden className="hero-orb pointer-events-none absolute -right-32 top-10 -z-10 h-[28rem] w-[28rem] rounded-full bg-ledger/10 blur-3xl" />
        <div className="mx-auto grid max-w-6xl gap-12 px-4 pb-16 pt-10 sm:px-6 lg:grid-cols-[1.08fr_1fr] lg:gap-14 lg:pb-24 lg:pt-16">
          <div className="fade-up flex flex-col justify-center">
            <p className="inline-flex w-fit items-center gap-2 rounded-full border border-ledger/20 bg-surface/80 py-1 pl-1 pr-3 text-xs font-semibold text-ink-2 shadow-xs backdrop-blur">
              <span className="inline-flex items-center gap-1 rounded-full bg-ledger px-2 py-0.5 text-[11px] font-bold text-ledger-ink">
                <SparklesIcon className="h-3 w-3" /> Free
              </span>
              Independent lawyer rankings · never for sale
            </p>
            <h1 id="hero-h" className="mt-5 font-serif text-[2.6rem] font-semibold leading-[1.04] tracking-tight text-ink sm:text-[3.6rem]">
              <span className="brand-gradient">Justice Choice</span>
              <span className="mt-1 block text-[0.62em] leading-[1.12] text-ink">Compare lawyers ranked on evidence you can check.</span>
            </h1>
            <p className="mt-6 max-w-xl text-lg leading-relaxed text-ink-2">
              <strong className="font-semibold text-ink"><Link href="/">Justice Choice</Link></strong> helps you find and compare {fmtNumber(stats.lawyers)} licensed lawyers across {stats.cities} cities. Every ranking is split into
              nine published parts — verified licences, relevant experience and sourced reputation — so you choose a lawyer on facts, not advertising.
            </p>
            <div className="mt-8 max-w-xl">
              <SearchBox />
            </div>
            <div className="mt-5 max-w-xl">
              <p className="mb-2 text-xs font-semibold uppercase tracking-[0.08em] text-muted">Popular rankings</p>
              <ul className="flex flex-wrap gap-2">
                {POPULAR.map(([label, href, slug]) => (
                  <li key={href}>
                    <Link href={href} className="chip">
                      <PracticeAreaIcon slug={slug} className="h-3.5 w-3.5 text-ledger" />
                      {label}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
            {example && example.ranked.length > 0 && (
              <div className="mt-8 flex max-w-xl items-center gap-4 border-t border-rule pt-6">
                <div className="flex -space-x-2.5" aria-hidden>
                  {example.ranked.slice(0, 3).map((l) => (
                    <span key={l.id} className="rounded-full ring-2 ring-surface">
                      <Monogram name={l.name} size={38} />
                    </span>
                  ))}
                  <span className="grid h-[38px] w-[38px] place-items-center rounded-full bg-ledger text-[11px] font-bold text-ledger-ink ring-2 ring-surface">{(() => {
                      const rest = Math.max(0, stats.verified - 3);
                      return rest >= 1000 ? `${Math.floor(rest / 1000)}k+` : `+${rest}`;
                    })()}</span>
                </div>
                <p className="text-sm leading-snug text-ink-2">
                  <span className="num font-semibold text-ink">{fmtNumber(stats.verified)} lawyers</span> with a licence checked against the issuing body
                </p>
              </div>
            )}
            <ul className="mt-6 grid max-w-xl grid-cols-1 gap-3 text-sm text-ink-2 sm:grid-cols-3">
              {[
                [BadgeCheckIcon, 'Licences checked at source'],
                [LayersIcon, '9 published components'],
                [LockIcon, 'Payment never moves a rank'],
              ].map(([Icon, label]) => {
                const I = Icon as typeof LockIcon;
                return (
                  <li key={label as string} className="flex items-center gap-2">
                    <I className="h-4 w-4 text-ledger" />
                    {label as string}
                  </li>
                );
              })}
            </ul>
          </div>

          {top && example && (
            <figure className="fade-up relative self-center lg:pb-16" aria-label="Example Justice Choice ranking">
              <div aria-hidden className="absolute -inset-3 -z-10 rounded-[1.75rem] bg-gradient-to-br from-ledger/15 via-transparent to-brass/15 blur-xl" />
              {/* Ranks 2 and 3 peek out from behind the leader, like a real ranked list */}
              {example.ranked.slice(1, 3).map((l, i) => (
                <div
                  key={l.id}
                  aria-hidden
                  className="card absolute inset-x-0 hidden h-24 items-end gap-3 rounded-2xl px-6 pb-2 shadow-md lg:flex"
                  style={{ bottom: `${2 - i * 2}rem`, transform: `scale(${0.95 - i * 0.05})`, zIndex: -1 - i, opacity: 1 - i * 0.3 }}
                >
                  <span className="rank-figure text-2xl">{l.rank}</span>
                  <span className="truncate font-serif font-semibold">{l.name}</span>
                  <span className="num ml-auto font-semibold text-ink-2">{l.score.toFixed(1)}</span>
                </div>
              ))}
              <span className="absolute -right-4 top-[5.25rem] z-10 hidden items-center gap-1.5 rounded-full border border-rule bg-surface px-3 py-1.5 text-xs font-semibold text-ink shadow-md lg:inline-flex">
                <BadgeCheckIcon className="h-4 w-4 text-ledger" /> Licence verified
              </span>
              <span className="absolute -right-3 bottom-24 z-10 hidden items-center gap-1.5 rounded-full border border-rule bg-surface px-3 py-1.5 text-xs font-semibold text-ink shadow-md lg:inline-flex">
                <LockIcon className="h-3.5 w-3.5 text-brass" /> No pay-to-rank
              </span>
              <div className="card relative rounded-2xl p-6 shadow-lg sm:p-7">
                <figcaption className="flex flex-wrap items-center justify-between gap-2 text-sm text-muted">
                  <Link href={paths.cityPractice('us', 'new-york', 'divorce')} className="inline-flex items-center gap-1.5 font-medium text-ink-2 hover:text-ledger">
                    <MapPinIcon className="h-4 w-4 text-ledger" />
                    Top divorce lawyers in New York
                  </Link>
                  <span className="inline-flex items-center gap-1.5 rounded-full bg-ledger-soft px-2.5 py-0.5 text-xs font-semibold text-ledger">
                    <span className="relative flex h-1.5 w-1.5">
                      <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-ledger opacity-60" />
                      <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-ledger" />
                    </span>
                    Updated {fmtDate(example.calculatedAt)}
                  </span>
                </figcaption>
                <div className="mt-6 flex items-start gap-4">
                  <span className="rank-figure text-6xl">1</span>
                  <div className="min-w-0">
                    <Link href={paths.lawyer(top.slug)} className="font-serif text-2xl font-semibold leading-tight hover:text-ledger hover:underline">
                      {top.name}
                    </Link>
                    <div className="mt-2 flex flex-wrap items-center gap-2 text-sm text-ink-2">
                      <VerificationBadge status={top.verificationStatus} compact />
                      {top.yearsExperience != null && <span className="num">{top.yearsExperience} years in practice</span>}
                    </div>
                  </div>
                </div>
                <div className="mt-6">
                  <ScoreLedger components={top.components} weights={weights} total={top.score} size="lg" animate label={`${top.name}'s score`} />
                </div>
                <dl className="mt-6 grid grid-cols-3 gap-3 border-t border-rule pt-5">
                  {groupPts.map((g) => (
                    <div key={g.key} className="min-w-0">
                      <dt className="flex items-center gap-1.5 truncate text-xs font-medium text-ink-2">
                        <span aria-hidden className="inline-block h-2 w-2 shrink-0 rounded-sm" style={{ background: COMPONENT_COLOR[g.components[0]] }} />
                        {g.label}
                      </dt>
                      <dd className="num mt-1 font-serif text-2xl font-semibold">
                        {g.pts.toFixed(1)}
                        <span className="text-sm font-normal text-muted"> / {Math.round(g.components.reduce((s, k) => s + weights[k], 0) * 100)}</span>
                      </dd>
                    </div>
                  ))}
                </dl>
                {strongest && (
                  <p className="mt-5 rounded-lg bg-paper px-3.5 py-3 text-sm leading-relaxed text-ink-2">
                    Strongest part: <strong className="font-semibold text-ink">{SCORE_COMPONENT_LABELS[strongest].toLowerCase()}</strong> ({top.components[strongest].toFixed(0)}/100).{' '}
                    <Link href={`${paths.lawyer(top.slug)}#score`} className="link inline-flex items-center gap-1 whitespace-nowrap">
                      Open the full score ledger <ArrowRightIcon className="h-3.5 w-3.5" />
                    </Link>
                  </p>
                )}
              </div>
            </figure>
          )}
        </div>
      </section>

      {/* ───────────── Stats band */}
      <section aria-label="Directory at a glance" className="border-b border-rule bg-surface">
        <dl className="mx-auto grid max-w-6xl grid-cols-2 divide-rule px-4 sm:px-6 md:grid-cols-4 md:divide-x">
          {[
            [UsersIcon, fmtNumber(stats.lawyers), 'lawyers listed'],
            [BadgeCheckIcon, `${verifiedShare}%`, 'with a verified licence'],
            [MapPinIcon, fmtNumber(stats.cities), `cities in ${stats.countries} countries`],
            [ScaleIcon, fmtNumber(stats.practice_areas), 'practice areas'],
          ].map(([Icon, v, l]) => {
            const I = Icon as typeof UsersIcon;
            return (
              <div key={l as string} className="flex items-center gap-3.5 px-2 py-6 md:px-6">
                <span className="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-ledger-soft text-ledger">
                  <I className="h-5 w-5" />
                </span>
                <div className="flex min-w-0 flex-col-reverse">
                  <dt className="mt-1 text-sm text-muted">{l as string}</dt>
                  <dd className="num font-serif text-2xl font-semibold leading-none text-ink">{v as string}</dd>
                </div>
              </div>
            );
          })}
        </dl>
      </section>

      <div className="mx-auto max-w-6xl space-y-24 px-4 py-20 sm:px-6">
        {/* ───────────── Cities */}
        <section aria-labelledby="cities-h">
          <div className="mb-8 flex flex-wrap items-end justify-between gap-4">
            <div>
              <p className="eyebrow">
                <MapPinIcon className="h-3.5 w-3.5" /> Browse by location
              </p>
              <h2 id="cities-h" className="mt-2 font-serif text-3xl font-semibold tracking-tight">
                Find a lawyer in your city
              </h2>
            </div>
            <p className="text-sm text-muted">
              <span className="num font-semibold text-ink">{fmtNumber(stats.verified)}</span> of {fmtNumber(stats.lawyers)} profiles have a verified licence
            </p>
          </div>
          <ul className="grid grid-cols-2 gap-2.5 sm:gap-3 lg:grid-cols-3">
            {us.cities.map((c) => (
              <li key={c.slug}>
                <Link href={c.path} className="card card-hover group flex items-center gap-3 p-3 sm:gap-4 sm:p-4">
                  <span className="hidden h-10 w-10 shrink-0 place-items-center rounded-lg bg-sunken text-muted transition-colors group-hover:bg-ledger-soft group-hover:text-ledger sm:grid">
                    <MapPinIcon className="h-5 w-5" />
                  </span>
                  <span className="min-w-0 flex-1">
                    <span className="block truncate font-semibold text-ink">{c.name}</span>
                    <span className="num block text-sm text-muted">{fmtNumber(c.lawyers)} lawyers</span>
                  </span>
                  <ArrowRightIcon className="h-4 w-4 -translate-x-1 text-muted opacity-0 transition-all group-hover:translate-x-0 group-hover:text-ledger group-hover:opacity-100" />
                </Link>
              </li>
            ))}
          </ul>
          {countries.length > 1 && (
            <div className="mt-6 flex flex-wrap items-center gap-2 text-sm text-ink-2">
              <span className="mr-1 inline-flex items-center gap-1.5 text-muted">
                <GlobeIcon className="h-4 w-4" /> Also in:
              </span>
              {countries
                .filter((c) => c.slug !== 'us')
                .map((c) => (
                  <Link key={c.slug} href={c.path} className="chip">
                    {c.name}
                    <span className="num text-xs text-muted">{fmtNumber(c.lawyers)}</span>
                  </Link>
                ))}
            </div>
          )}
          <p className="mt-3 text-xs text-muted">We add a country only when reliable licensing data and a compliant model exist there.</p>
        </section>

        {/* ───────────── Practice areas */}
        <section aria-labelledby="areas-h">
          <div className="mb-8 flex flex-wrap items-end justify-between gap-4">
            <div>
              <p className="eyebrow">
                <ScaleIcon className="h-3.5 w-3.5" /> Browse by need
              </p>
              <h2 id="areas-h" className="mt-2 font-serif text-3xl font-semibold tracking-tight">
                Compare lawyers by practice area
              </h2>
            </div>
            <Link href="/practice-areas/" className="btn btn-quiet btn-sm">
              All practice areas <ArrowRightIcon className="h-4 w-4" />
            </Link>
          </div>
          <ul className="grid grid-cols-2 gap-2.5 sm:gap-4 lg:grid-cols-3">
            {topAreas.map((a) => (
              <li key={a.slug}>
                <Link href={a.path} className="card card-hover group flex h-full flex-col p-4 sm:p-5">
                  <div className="flex items-start justify-between gap-2">
                    <span className="grid h-10 w-10 place-items-center rounded-xl bg-ledger-soft text-ledger transition-colors group-hover:bg-ledger group-hover:text-ledger-ink sm:h-11 sm:w-11">
                      <PracticeAreaIcon slug={a.slug} className="h-5 w-5" />
                    </span>
                    <span className="num hidden rounded-full bg-sunken px-2.5 py-1 text-xs font-medium text-ink-2 sm:inline">{fmtNumber(a.lawyers)} lawyers</span>
                  </div>
                  <span className="mt-3 font-serif text-base font-semibold leading-snug text-ink sm:mt-4 sm:text-lg">{a.name}</span>
                  <span className="num text-xs text-muted sm:hidden">{fmtNumber(a.lawyers)} lawyers</span>
                  <p className="mt-1 line-clamp-2 flex-1 text-sm leading-relaxed text-ink-2 max-sm:hidden">{a.description}</p>
                  <span className="mt-4 hidden items-center gap-1 text-sm font-semibold text-ledger sm:inline-flex">
                    Compare lawyers <ArrowRightIcon className="h-4 w-4 transition-transform group-hover:translate-x-1" />
                  </span>
                </Link>
              </li>
            ))}
          </ul>
        </section>

        {/* ───────────── Method */}
        <section aria-labelledby="how-h" className="grid gap-10 lg:grid-cols-[1fr_1.35fr] lg:items-center">
          <div>
            <p className="eyebrow">
              <ChartIcon className="h-3.5 w-3.5" /> Methodology
            </p>
            <h2 id="how-h" className="mt-2 font-serif text-3xl font-semibold tracking-tight">
              How Justice Choice builds a ranking
            </h2>
            <p className="mt-4 max-w-md leading-relaxed text-ink-2">
              The same published rules apply to every lawyer. A ranking can be recalculated from stored evidence at any time, and each run is versioned so past results can be reproduced.
            </p>
            <div className="mt-6 flex flex-wrap gap-3">
              <Link href="/methodology/" className="btn btn-primary">
                Read the methodology <ArrowRightIcon className="h-4 w-4" />
              </Link>
              <Link href="/search/" className="btn btn-quiet">
                <SearchIcon className="h-4 w-4" /> Search lawyers
              </Link>
            </div>
          </div>
          <ol className="grid gap-4 sm:grid-cols-2">
            {STEPS.map(({ t, d, Icon }, i) => (
              <li key={t} className="card relative overflow-hidden p-5">
                <span aria-hidden className="num absolute right-4 top-2 font-serif text-5xl font-semibold leading-none text-rule">
                  {i + 1}
                </span>
                <span className="relative grid h-10 w-10 place-items-center rounded-lg bg-brass-soft text-brass">
                  <Icon className="h-5 w-5" />
                </span>
                <p className="relative mt-4 text-xs font-bold uppercase tracking-[0.08em] text-brass">Step {i + 1}</p>
                <p className="relative mt-1 font-serif text-lg font-semibold">{t}</p>
                <p className="relative mt-1 text-sm leading-relaxed text-ink-2">{d}</p>
              </li>
            ))}
          </ol>
        </section>

        {/* ───────────── Why Justice Choice */}
        <section aria-labelledby="why-h">
          <div className="mx-auto max-w-2xl text-center">
            <p className="eyebrow justify-center">
              <BadgeCheckIcon className="h-3.5 w-3.5" /> Why Justice Choice
            </p>
            <h2 id="why-h" className="mt-2 font-serif text-3xl font-semibold tracking-tight sm:text-4xl">
              A lawyer directory built on proof, not promotion
            </h2>
            <p className="mt-4 leading-relaxed text-ink-2">
              Most directories sell the top spot. Justice Choice shows you why each lawyer ranks where they do — and lets you check every piece of evidence yourself.
            </p>
          </div>
          <ul className="mt-10 grid gap-4 md:grid-cols-3">
            {[
              { Icon: ShieldCheckIcon, t: 'Verified at the source', d: 'Licences are matched to the issuing body. Suspended or revoked licences remove a lawyer from rankings entirely.' },
              { Icon: LayersIcon, t: 'Every score explained', d: 'Nine published components with fixed weights. Open any profile to see the records behind each part of the score.' },
              { Icon: LockIcon, t: 'Rankings never for sale', d: 'Sponsored listings are labelled and kept apart. The ranking engine has no access to payment or advertising data.' },
            ].map(({ Icon, t, d }) => (
              <li key={t} className="card card-hover p-6">
                <span className="grid h-12 w-12 place-items-center rounded-xl bg-gradient-to-br from-ledger to-[#2f7d64] text-ledger-ink shadow-sm">
                  <Icon className="h-6 w-6" />
                </span>
                <h3 className="mt-5 font-serif text-xl font-semibold">{t}</h3>
                <p className="mt-2 text-sm leading-relaxed text-ink-2">{d}</p>
              </li>
            ))}
          </ul>
        </section>

        {/* ───────────── FAQ */}
        <div className="mx-auto max-w-3xl">
          <Faq items={HOME_FAQ} title="Justice Choice — frequently asked questions" />
        </div>

        {/* ───────────── Trust callout */}
        <section className="relative overflow-hidden rounded-2xl bg-ledger p-8 text-ledger-ink sm:p-10">
          <div aria-hidden className="pointer-events-none absolute -right-20 -top-24 h-72 w-72 rounded-full bg-white/10 blur-2xl" />
          <div className="relative grid gap-8 lg:grid-cols-[1.4fr_1fr] lg:items-center">
            <div>
              <span className="grid h-12 w-12 place-items-center rounded-xl bg-white/15">
                <LockIcon className="h-6 w-6" />
              </span>
              <h2 className="mt-5 font-serif text-2xl font-semibold sm:text-3xl">What payment can’t buy on Justice Choice</h2>
              <p className="mt-3 max-w-2xl leading-relaxed opacity-90">
                Lawyers can pay for a premium profile or a sponsored slot. Sponsored listings sit in a separate, labelled box above the ranking and never change anyone’s organic score or position. Pay-to-play awards are shown on profiles for transparency but score zero.
              </p>
            </div>
            <div className="flex flex-wrap gap-3 lg:justify-end">
              <Link href="/methodology/#sponsored" className="btn border-white/30 bg-white/10 text-current hover:bg-white/20">
                How sponsorship works
              </Link>
              <Link href="/for-lawyers/" className="btn bg-white text-[#1e4d3f] hover:bg-white/90">
                For lawyers <ArrowRightIcon className="h-4 w-4" />
              </Link>
            </div>
          </div>
        </section>
      </div>
    </>
  );
}