import Link from 'next/link';
import { SITE } from '@/lib/site';
import { HeaderSearch } from './HeaderSearch';
import { HeaderNav } from './HeaderNav';
import { ArrowUpRightIcon, InfoIcon, LockIcon, ShieldCheckIcon } from './Icons';

/** The Justice Choice mark: balanced scales with a brass fulcrum */
export function BrandMark({ className = 'h-8 w-8' }: { className?: string }) {
  return (
    <span className={`relative grid shrink-0 place-items-center rounded-[10px] bg-ledger text-ledger-ink shadow-sm ${className}`}>
      <svg aria-hidden viewBox="0 0 64 64" className="h-[62%] w-[62%]" fill="none" stroke="currentColor" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round">
        <path d="M32 14v34M23 50h18M17 22h30" />
        <path d="m17 22-6 13a6.5 6.5 0 0 0 12 0l-6-13ZM47 22l-6 13a6.5 6.5 0 0 0 12 0l-6-13Z" />
      </svg>
      <span aria-hidden className="absolute left-1/2 top-[19%] h-[13%] w-[13%] -translate-x-1/2 rounded-full bg-[#e0b35f]" />
    </span>
  );
}

export function Wordmark({ size = 'md' }: { size?: 'md' | 'lg' }) {
  return (
    <Link href="/" className="group inline-flex shrink-0 items-center gap-2.5 rounded-md text-ink no-underline" aria-label={`${SITE.name} home`}>
      <span className="transition-transform duration-200 group-hover:-rotate-3 group-hover:scale-105">
        <BrandMark className={size === 'lg' ? 'h-10 w-10' : 'h-8 w-8'} />
      </span>
      <span className={`font-serif font-semibold tracking-tight ${size === 'lg' ? 'text-2xl' : 'text-xl'}`}>
        Justice<span className="text-ledger"> Choice</span>
      </span>
    </Link>
  );
}

export function SiteHeader({ withSearch = true }: { withSearch?: boolean }) {
  return (
    <header className="sticky top-0 z-30 border-b border-rule bg-surface/85 backdrop-blur-md supports-[backdrop-filter]:bg-surface/75">
      <div className="relative mx-auto flex min-h-[var(--header-h)] max-w-6xl flex-wrap items-center gap-x-6 gap-y-3 px-4 py-2.5 sm:px-6">
        <Wordmark />
        {withSearch && (
          <div className="order-3 w-full empty:hidden md:order-none md:w-auto md:max-w-sm md:flex-1 lg:max-w-md">
            <HeaderSearch />
          </div>
        )}
        <HeaderNav />
      </div>
    </header>
  );
}

export function DemoNotice() {
  if (!SITE.demo) return null;
  return (
    <div className="border-b border-brass/25 bg-brass-soft text-ink-2">
      <p className="mx-auto flex max-w-6xl items-start gap-2 px-4 py-2 text-xs leading-relaxed sm:items-center sm:px-6">
        <InfoIcon className="mt-px h-3.5 w-3.5 text-brass sm:mt-0" />
        <span>
          <strong className="font-semibold text-ink">Demo data.</strong> Every lawyer, firm, review and award shown here is fictional fixture data used to demonstrate the platform. Do not rely on it.
        </span>
      </p>
    </div>
  );
}

export function SiteFooter() {
  return (
    <footer className="mt-24 border-t border-rule bg-surface">
      <div className="mx-auto grid max-w-6xl gap-10 px-4 py-14 sm:grid-cols-2 sm:px-6 lg:grid-cols-[1.5fr_1fr_1fr_1fr]">
        <div className="space-y-4 sm:col-span-2 lg:col-span-1">
          <Wordmark />
          <p className="max-w-sm text-sm leading-relaxed text-muted">
            Justice Choice is an independent lawyer directory. We are not a law firm, we do not give legal advice, and paying us never changes a lawyer’s organic ranking.
          </p>
          <ul className="flex flex-wrap gap-2 text-xs font-medium text-ink-2">
            <li className="inline-flex items-center gap-1.5 rounded-full border border-rule bg-paper px-2.5 py-1">
              <ShieldCheckIcon className="h-3.5 w-3.5 text-ledger" /> Verified licences
            </li>
            <li className="inline-flex items-center gap-1.5 rounded-full border border-rule bg-paper px-2.5 py-1">
              <LockIcon className="h-3.5 w-3.5 text-ledger" /> Rankings not for sale
            </li>
          </ul>
        </div>
        <FooterCol
          title="Directory"
          links={[
            ['United States', '/us/'],
            ['Canada', '/ca/'],
            ['United Kingdom', '/uk/'],
            ['Australia', '/au/'],
            ['All practice areas', '/practice-areas/'],
            ['Search lawyers', '/search/'],
          ]}
        />
        <FooterCol
          title="Trust"
          links={[
            ['Ranking methodology', '/methodology/'],
            ['Sponsored placements', '/methodology/#sponsored'],
            ['Report a correction', '/methodology/#corrections'],
            ['About Justice Choice', '/about/'],
          ]}
        />
        <FooterCol
          title="Legal"
          links={[
            ['For lawyers', '/for-lawyers/'],
            ['Disclaimer', '/disclaimer/'],
            ['Privacy', '/privacy/'],
              ['Terms of Use', '/terms/'],
            ['Sitemap', '/sitemap.xml', true],
          ]}
        />
      </div>
      <div className="border-t border-rule">
        <div className="mx-auto flex max-w-6xl flex-col gap-2 px-4 py-5 text-xs leading-relaxed text-muted sm:flex-row sm:items-center sm:justify-between sm:px-6">
          <p>
            © {new Date().getFullYear()} {SITE.name}. Information on this site is general and may be out of date — check a lawyer’s licence with the issuing body before hiring.
          </p>
          <Link href="/" className="shrink-0 font-semibold text-ink-2 hover:text-ledger">
            {SITE.domain}
          </Link>
        </div>
      </div>
    </footer>
  );
}

function FooterCol({ title, links }: { title: string; links: [string, string, boolean?][] }) {
  return (
    <div>
      <h2 className="mb-4 text-xs font-bold uppercase tracking-[0.08em] text-muted">{title}</h2>
      <ul className="space-y-2.5 text-sm text-ink-2">
        {links.map(([label, href, external]) => (
          <li key={href}>
            {external ? (
              <a href={href} className="group inline-flex items-center gap-1 hover:text-ledger">
                {label}
                <ArrowUpRightIcon className="h-3 w-3 opacity-0 transition-opacity group-hover:opacity-100" />
              </a>
            ) : (
              <Link href={href} className="inline-flex items-center hover:text-ledger hover:underline">
                {label}
              </Link>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}