import Link from 'next/link';
import type { Metadata } from 'next';
import { api } from '@/lib/api';
import { staticMetadata } from '@/lib/meta';
import { Breadcrumbs } from '@/components/Breadcrumbs';
import { ArrowRightIcon, BadgeCheckIcon, BookOpenIcon, ChartIcon, CheckIcon, InfoIcon, LockIcon, MessageIcon, SparklesIcon, UserIcon } from '@/components/Icons';

export const dynamic = 'force-dynamic';

export const metadata: Metadata = staticMetadata({
  title: 'For Lawyers and Law Firms',
  description: 'Claim your free Justice Choice profile, verify your licence, correct your details and answer client enquiries. Optional paid plans never affect organic rankings.',
  path: '/for-lawyers/',
});

type Plans = { plans: Record<string, { name: string; price: number; features: readonly string[] }>; paymentsEnabled: boolean; note: string };

const BENEFITS = [
  { Icon: UserIcon, t: 'Claim and correct', d: 'Find your profile, choose “Claim this profile”, confirm your email — then fix details and add a photo and biography.' },
  { Icon: BadgeCheckIcon, t: 'Get verified', d: 'We check your licence with the issuing body — verified credentials are 20% of the score.' },
  { Icon: MessageIcon, t: 'Answer enquiries', d: 'Accept or decline matched enquiries; quick replies lift your client-experience score.' },
  { Icon: ChartIcon, t: 'See your standing', d: 'Profile views, ranking positions and the evidence behind every component.' },
];

export default async function ForLawyers() {
  const p = await api<Plans>('/billing/plans', { revalidate: 3600 });
  const admin = process.env.NEXT_PUBLIC_ADMIN_URL ?? 'http://localhost:3001';
  const plans = Object.entries(p.plans);
  return (
    <div className="mx-auto max-w-6xl px-4 py-8 sm:px-6 sm:py-10">
      <Breadcrumbs items={[{ label: 'Home', href: '/' }, { label: 'For lawyers', href: '/for-lawyers/' }]} />
      <header className="mt-6 max-w-3xl">
        <p className="eyebrow">
          <SparklesIcon className="h-3.5 w-3.5" /> Justice Choice for lawyers and firms
        </p>
        <h1 className="mt-3 font-serif text-[2.25rem] font-semibold leading-[1.1] tracking-tight sm:text-[2.9rem]">
          Your profile is free. <span className="text-ledger">Your ranking is not for sale.</span>
        </h1>
        <p className="mt-4 text-lg leading-relaxed text-ink-2">
          Claim your Justice Choice profile to correct details, add verified credentials and answer enquiries from people who found you. Paid plans add tools and visibility, clearly labelled, and never change your organic score.
        </p>
        <div className="mt-7 flex flex-wrap gap-3">
          <Link href="/search/" className="btn btn-primary btn-lg">
            Find and claim your profile <ArrowRightIcon className="h-4 w-4" />
          </Link>
          <a href={`${admin}/login`} className="btn btn-quiet btn-lg">
            Sign in to your dashboard
          </a>
          <Link href="/methodology/" className="btn btn-quiet btn-lg">
            <BookOpenIcon className="h-4 w-4" /> See how rankings work
          </Link>
        </div>
      </header>

      <ul className="mt-14 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        {BENEFITS.map(({ Icon, t, d }) => (
          <li key={t} className="card p-5">
            <span className="grid h-10 w-10 place-items-center rounded-lg bg-ledger-soft text-ledger">
              <Icon className="h-5 w-5" />
            </span>
            <p className="mt-4 font-semibold">{t}</p>
            <p className="mt-1 text-sm leading-relaxed text-ink-2">{d}</p>
          </li>
        ))}
      </ul>

      <section aria-labelledby="plans-h" className="mt-16">
        <h2 id="plans-h" className="font-serif text-3xl font-semibold tracking-tight">
          Plans
        </h2>
        <p className="mt-2 text-ink-2">Every plan, including free, is ranked by exactly the same rules.</p>
        <ul className="mt-8 grid gap-4 md:grid-cols-2 lg:grid-cols-4">
          {plans.map(([key, plan], i) => {
            const featured = i === 1 && plans.length > 2;
            return (
              <li key={key} className={`card relative flex flex-col p-6 ${featured ? 'border-ledger shadow-md ring-1 ring-ledger' : ''}`}>
                {featured && <span className="absolute -top-3 left-6 rounded-full bg-ledger px-3 py-0.5 text-xs font-semibold text-ledger-ink">Most popular</span>}
                <h3 className="font-serif text-xl font-semibold">{plan.name}</h3>
                <p className="num mt-3 font-serif text-4xl font-semibold leading-none">
                  {plan.price ? `$${plan.price}` : 'Free'}
                  {plan.price > 0 && <span className="text-base font-normal text-muted"> / month</span>}
                </p>
                <ul className="mt-6 flex-1 space-y-2.5 text-sm text-ink-2">
                  {plan.features.map((f) => (
                    <li key={f} className="flex gap-2.5">
                      <span className="mt-0.5 grid h-4 w-4 shrink-0 place-items-center rounded-full bg-ledger-soft text-ledger">
                        <CheckIcon className="h-3 w-3" strokeWidth={2.5} />
                      </span>
                      {f}
                    </li>
                  ))}
                </ul>
                {plan.price ? (
                  <a href={`${admin}/login`} className={`btn mt-6 w-full ${featured ? 'btn-primary' : 'btn-quiet'}`}>
                    Choose plan
                  </a>
                ) : (
                  <Link href="/search/" className={`btn mt-6 w-full ${featured ? 'btn-primary' : 'btn-quiet'}`}>
                    Find and claim your profile
                  </Link>
                )}
              </li>
            );
          })}
        </ul>
        <p className="mt-6 flex items-start gap-2 text-sm text-muted">
          <InfoIcon className="mt-0.5 h-4 w-4" />
          {p.note} Paid plans are offered only where local lawyer-advertising rules allow.
        </p>
        <p className="mt-2 flex items-start gap-2 text-sm text-muted">
          <LockIcon className="mt-0.5 h-4 w-4" />
          The ranking engine has no access to subscription or advertising data.
        </p>
      </section>
    </div>
  );
}