import Link from 'next/link'

/** Shared building blocks for the public role pages (/brokers, /carriers, /drivers). */

export function RoleHero({
  role,
  headline,
  sub,
  loginHref,
  loginText,
}: {
  role: string
  headline: string
  sub: string
  loginHref: string
  loginText: string
}) {
  return (
    <section className="relative overflow-hidden bg-navy-950 text-white">
      <div
        className="pointer-events-none absolute inset-0 opacity-[0.35]"
        style={{
          backgroundImage:
            'radial-gradient(60rem 30rem at 80% -10%, rgba(245,166,35,0.25), transparent 60%), radial-gradient(50rem 28rem at 10% 110%, rgba(61,90,133,0.5), transparent 60%)',
        }}
      />
      <div className="relative mx-auto max-w-6xl px-6 py-20 md:py-24">
        <p className="text-sm font-bold uppercase tracking-[0.14em] text-amber-brand">{role}</p>
        <h1 className="mt-4 max-w-3xl text-4xl font-extrabold leading-[1.1] tracking-tight md:text-5xl">
          {headline}
        </h1>
        <p className="mt-5 max-w-2xl text-lg leading-relaxed text-navy-100">{sub}</p>
        <div className="mt-8 flex flex-wrap gap-4">
          <Link
            href={loginHref}
            className="rounded-lg bg-amber-brand px-6 py-3 text-sm font-bold text-navy-950 shadow-lg shadow-amber-brand/20 transition hover:bg-amber-deep"
          >
            {loginText}
          </Link>
          <Link
            href="/#early-access"
            className="rounded-lg border border-white/20 px-6 py-3 text-sm font-semibold text-white transition hover:bg-white/5"
          >
            Get Early Access
          </Link>
        </div>
      </div>
    </section>
  )
}

export function Section({
  label,
  title,
  children,
  tone = 'white',
  wide = false,
}: {
  label: string
  title: string
  children: React.ReactNode
  tone?: 'white' | 'paper' | 'navy'
  wide?: boolean
}) {
  const outer =
    tone === 'paper'
      ? 'border-y border-line bg-paper'
      : tone === 'navy'
        ? 'bg-navy-950 text-white'
        : ''
  return (
    <section className={outer}>
      <div className={`mx-auto px-6 py-16 md:py-20 ${wide ? 'max-w-7xl' : 'max-w-6xl'}`}>
        <p className={`text-sm font-bold uppercase tracking-[0.14em] ${tone === 'navy' ? 'text-amber-brand' : 'text-amber-deep'}`}>
          {label}
        </p>
        <h2 className="mt-3 max-w-3xl text-3xl font-extrabold tracking-tight md:text-4xl">{title}</h2>
        {children}
      </div>
    </section>
  )
}

/** Numbered walkthrough steps (e.g. what the broker does during trip initiation). */
export function NumberedSteps({ items }: { items: { t: string; d: string }[] }) {
  return (
    <div className="mt-10 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
      {items.map((s, i) => (
        <div key={s.t} className="rounded-2xl border border-line bg-white p-6">
          <span className="font-mono text-sm font-semibold text-amber-deep">
            {String(i + 1).padStart(2, '0')}
          </span>
          <h3 className="mt-2 font-bold tracking-tight">{s.t}</h3>
          <p className="mt-2 text-sm leading-relaxed text-slate-body">{s.d}</p>
        </div>
      ))}
    </div>
  )
}

/** Status lifecycle strip (Draft → Sent → … ). */
export function StatusFlow({ statuses }: { statuses: string[] }) {
  return (
    <div className="mt-8 flex flex-wrap items-center gap-2">
      {statuses.map((s, i) => (
        <span key={s} className="flex items-center gap-2">
          <span className="rounded-full border border-line bg-white px-3.5 py-1.5 text-xs font-bold text-navy-900">
            {s}
          </span>
          {i < statuses.length - 1 && <span className="text-slate-body/50">→</span>}
        </span>
      ))}
    </div>
  )
}

/** "Can do" / "does not" trust columns. */
export function CanCannot({
  canTitle,
  can,
  cannotTitle,
  cannot,
}: {
  canTitle: string
  can: string[]
  cannotTitle: string
  cannot: string[]
}) {
  return (
    <div className="mt-10 grid gap-6 md:grid-cols-2">
      <div className="rounded-2xl border border-line bg-white p-7">
        <h3 className="font-bold text-ok">✓ {canTitle}</h3>
        <ul className="mt-4 space-y-2.5 text-sm leading-relaxed text-slate-body">
          {can.map((c) => (
            <li key={c} className="flex gap-2.5">
              <span className="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-ok" />
              {c}
            </li>
          ))}
        </ul>
      </div>
      <div className="rounded-2xl border border-line bg-white p-7">
        <h3 className="font-bold text-slate-body">✕ {cannotTitle}</h3>
        <ul className="mt-4 space-y-2.5 text-sm leading-relaxed text-slate-body">
          {cannot.map((c) => (
            <li key={c} className="flex gap-2.5">
              <span className="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-slate-body/40" />
              {c}
            </li>
          ))}
        </ul>
      </div>
    </div>
  )
}

/** Example AI answer with confidence + sources — the trust format from the articles. */
export function ExampleAnswer({
  question,
  answer,
  confidence,
  sources,
}: {
  question: string
  answer: string
  confidence: 'High' | 'Partial' | 'Low'
  sources: string
}) {
  const tone =
    confidence === 'High' ? 'bg-ok-bg text-ok ring-green-200' : confidence === 'Partial' ? 'bg-warn-bg text-warn ring-amber-200' : 'bg-danger-bg text-danger ring-red-200'
  return (
    <div className="rounded-2xl border border-line bg-white p-6 text-left shadow-sm">
      <p className="text-xs font-bold text-slate-body/70">Driver asks:</p>
      <p className="mt-1 text-sm font-semibold text-ink">&ldquo;{question}&rdquo;</p>
      <div className="mt-4 rounded-xl border border-amber-200 bg-amber-50 p-4">
        <p className="text-xs font-bold text-slate-body/70">🤖 HeavyHaul Agent:</p>
        <p className="mt-1.5 text-sm leading-relaxed text-ink">{answer}</p>
        <div className="mt-3 flex flex-wrap items-center gap-2 border-t border-amber-200/70 pt-2.5 text-[11px] text-slate-body">
          <span className={`rounded-full px-2 py-0.5 font-bold ring-1 ring-inset ${tone}`}>
            Confidence: {confidence}
          </span>
          <span>Sources checked: {sources}</span>
        </div>
      </div>
      <p className="mt-3 text-[11px] text-slate-body/70">
        The original permit remains the controlling document — review it before moving.
      </p>
    </div>
  )
}

export function PainList({ items, footer }: { items: string[]; footer?: string }) {
  return (
    <div className="mt-8">
      <ul className="grid gap-3 sm:grid-cols-2">
        {items.map((p) => (
          <li key={p} className="flex items-start gap-3 rounded-xl border border-line bg-white p-4 text-[15px] leading-relaxed text-slate-body">
            <span className="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-amber-brand" />
            {p}
          </li>
        ))}
      </ul>
      {footer && <p className="mt-6 max-w-2xl text-sm leading-relaxed text-slate-body">{footer}</p>}
    </div>
  )
}

export function FeatureGrid({ items }: { items: { t: string; d: string }[] }) {
  return (
    <div className="mt-10 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
      {items.map((f) => (
        <div key={f.t} className="rounded-2xl border border-line bg-white p-7">
          <h3 className="font-bold tracking-tight text-navy-900">{f.t}</h3>
          <p className="mt-2.5 text-sm leading-relaxed text-slate-body">{f.d}</p>
        </div>
      ))}
    </div>
  )
}

export function RolePageCta({
  headline,
  loginHref,
  loginText,
}: {
  headline: string
  loginHref: string
  loginText: string
}) {
  return (
    <section className="border-t border-line bg-navy-950 text-white">
      <div className="mx-auto max-w-6xl px-6 py-16 text-center">
        <h2 className="mx-auto max-w-2xl text-3xl font-extrabold tracking-tight">{headline}</h2>
        <div className="mt-7 flex flex-wrap justify-center gap-4">
          <Link
            href={loginHref}
            className="rounded-lg bg-amber-brand px-6 py-3 text-sm font-bold text-navy-950 shadow-lg shadow-amber-brand/20 transition hover:bg-amber-deep"
          >
            {loginText}
          </Link>
          <Link
            href="/#early-access"
            className="rounded-lg border border-white/20 px-6 py-3 text-sm font-semibold text-white transition hover:bg-white/5"
          >
            Join the pilot
          </Link>
        </div>
        <p className="mt-4 text-xs text-navy-100/70">
          Accounts are provisioned during the pilot — join the early-access list and we&apos;ll set
          you up.
        </p>
      </div>
    </section>
  )
}