import type { Metadata } from 'next'
import Link from 'next/link'
import {
  RolePageCta,
  RoleHero,
  Section,
  FeatureGrid,
  ExampleAnswer,
} from '../role-page'

export const metadata: Metadata = {
  title: 'HeavyHaul Agent for Carriers & Dispatchers',
  description:
    'Prevent curfew violations before they happen. A permit compliance control tower for trucking companies: every permit, every trip, every driver question, and every warning in one place.',
}

const SCATTERED = [
  'Emails',
  'Text messages',
  "Dispatcher's computer",
  'Driver phones',
  'Printed copies in the truck',
  'Broker portals',
  'State portals',
  'PDF folders',
]

const SUPERPOWERS = [
  { t: 'Every permit in one place', d: 'One system for all permits — regardless of where they were purchased. Permit-source neutral by design.' },
  { t: 'Every trip becomes visible', d: 'Active, pending, completed, and risky trips — with driver, unit, lane, states, and permit count on every row.' },
  { t: 'Drivers get instant help', d: 'Drivers ask the Agent about curfews, escorts, and restrictions instead of calling dispatch for every small question.' },
  { t: 'Safety sees risk early', d: 'Curfews, escorts, expiring permits, missing documents, and mismatches are flagged before movement — not after the stop.' },
  { t: 'Permit mistake detection', d: 'Permit width 12\'0" but the load is 12\'6"? The system compares permit data against load data and flags it.' },
  { t: 'Chat audit trail', d: 'Every driver question, every answer, its sources and confidence — saved on the trip for safety review and training.' },
  { t: 'Routes attached to trips', d: 'Purchased routes belong to the trip, visible to everyone authorized — no duplicate purchases.' },
  { t: 'One operating standard', d: '"Before the truck moves, upload the permit." One simple company rule creates one consistent process.' },
]

export default function CarriersPage() {
  return (
    <>
      <RoleHero
        role="For Carriers & Dispatchers"
        headline="Prevent curfew violations before they happen."
        sub="A carrier with 20 drivers has 20 permits, states, curfews, and escort rules in play at once — scattered across emails, phones, and printed PDFs. HeavyHaul Agent is the permit compliance control tower that puts all of it on one screen."
        loginHref="/login?role=carrier"
        loginText="Carrier sign in"
      />

      {/* The scattered problem */}
      <Section
        label="The carrier's problem today"
        title="The permits exist. The visibility doesn't."
      >
        <p className="mt-5 max-w-2xl text-[15px] leading-relaxed text-slate-body">
          Right now, your company&apos;s permit information lives in:
        </p>
        <div className="mt-6 flex flex-wrap gap-2.5">
          {SCATTERED.map((s) => (
            <span key={s} className="rounded-full border border-line bg-paper px-4 py-2 text-sm font-medium text-slate-body">
              {s}
            </span>
          ))}
        </div>
        <p className="mt-8 max-w-2xl text-[15px] leading-relaxed text-slate-body">
          So when the safety manager asks{' '}
          <span className="font-semibold text-ink">
            &ldquo;which permits expire tomorrow?&rdquo;
          </span>{' '}
          or{' '}
          <span className="font-semibold text-ink">
            &ldquo;which loads have curfews today?&rdquo;
          </span>{' '}
          — the answer is phone calls, screenshots, and guesswork. In oversize transportation, one
          missed restriction means fines, shutdowns, and expensive delays.
        </p>
        <div className="mt-8 rounded-2xl border border-amber-brand/40 bg-amber-50 p-6">
          <p className="text-sm font-bold uppercase tracking-[0.14em] text-amber-deep">One company rule changes everything</p>
          <p className="mt-2 text-xl font-extrabold tracking-tight text-ink">
            &ldquo;Before the truck moves, upload the permit into HeavyHaul Agent — no matter where
            it was purchased.&rdquo;
          </p>
          <p className="mt-2 text-sm leading-relaxed text-slate-body">
            That one rule turns scattered PDFs into a live compliance workspace your whole company
            shares. The driver uploads; the system reads, organizes, warns — and management finally sees.
          </p>
        </div>
      </Section>

      {/* Control tower preview */}
      <Section
        label="The control tower"
        title='One screen that answers: "Where are the risks?"'
        tone="paper"
      >
        <ControlTowerPreview />
        <p className="mt-6 max-w-2xl text-sm leading-relaxed text-slate-body">
          The manager should not have to hunt for problems — the system surfaces them first. The{' '}
          <span className="font-semibold text-ink">Needs Review</span> list is the safety
          team&apos;s daily operating list: expiring permits, dimension mismatches, curfew and
          escort warnings, and unanswered driver questions, ranked by urgency.
        </p>
      </Section>

      {/* Superpowers */}
      <Section label="The carrier superpowers" title="What your company gets from day one.">
        <FeatureGrid items={SUPERPOWERS} />
      </Section>

      {/* Audit trail */}
      <Section
        label="Chat visibility & audit trail"
        title="Know what your drivers asked — and what they were told."
        tone="paper"
      >
        <div className="mt-8 grid items-start gap-10 lg:grid-cols-2">
          <div className="space-y-4 text-[15px] leading-relaxed text-slate-body">
            <p>
              When a driver asks the Agent a question, the question, the answer, the sources, the
              confidence level, and the timestamp are all saved on the trip. Your safety team sees
              the guidance that was given — a compliance record and a training tool in one.
            </p>
            <p>
              If many drivers ask the same question about the same state, you know where to focus
              training. If low-confidence answers cluster in one state, the knowledge base gets
              improved. The company gets smarter every week.
            </p>
            <p className="text-sm">
              Disputed answers go to human review by permitting professionals — driver feedback
              never silently rewrites the knowledge base.
            </p>
          </div>
          <ExampleAnswer
            question="Can I travel through Atlanta at 5 PM?"
            answer="Based on the uploaded Georgia permit and state provisions, oversize movement is restricted through the Atlanta metro during weekday rush hours (4:00–6:00 PM). Plan to be parked before entering the restricted area."
            confidence="High"
            sources="Uploaded permit, state provisions, internal notes"
          />
        </div>
      </Section>

      {/* Who cares + dispatcher */}
      <Section label="Built for the whole company" title="Different chairs, same control tower.">
        <div className="mt-8 grid gap-6 md:grid-cols-2 lg:grid-cols-4">
          {[
            { t: 'Owner / GM', d: 'Less chaos, real visibility: what’s active, what’s risky, what needs attention — in 10 seconds.' },
            { t: 'Safety manager', d: 'The Needs Review list, alert history, and the audit trail of every driver question and answer.' },
            { t: 'Dispatcher', d: 'Accept broker requests, upload permits, assign drivers — and stop answering the same permit questions.' },
            { t: 'Driver', d: 'A simple mobile trip screen: permits, curfews, escorts, and answers — without waiting on dispatch.' },
          ].map((r) => (
            <div key={r.t} className="rounded-2xl border border-line bg-white p-6">
              <h3 className="font-bold tracking-tight text-navy-900">{r.t}</h3>
              <p className="mt-2 text-sm leading-relaxed text-slate-body">{r.d}</p>
            </div>
          ))}
        </div>
        <p className="mt-8 max-w-2xl text-sm text-slate-body">
          Read more on the blog:{' '}
          <Link href="/blog/curfews-and-escorts" className="font-semibold text-navy-900 underline">
            Curfews and Escorts — the two questions that delay every heavy haul
          </Link>
        </p>
      </Section>

      <RolePageCta
        headline="Give your safety team one place to see every permit, trip, and warning."
        loginHref="/login?role=carrier"
        loginText="Carrier sign in"
      />
    </>
  )
}

/** Static mock of the carrier control tower. */
function ControlTowerPreview() {
  const stats = [
    ['18', 'Active trips'],
    ['12', 'Drivers moving today'],
    ['4', 'Trips with alerts'],
    ['3', 'Permits expiring soon'],
    ['1', 'Curfew warning'],
    ['2', 'Escort warnings'],
  ]
  const reviews = [
    ['URGENT', 'Permit width 144 in is smaller than load width 150 in', 'Houston, TX → Chicago, IL · Unit TRK-88', 'bg-danger-bg text-danger ring-red-200'],
    ['WARNING', 'IL permit expires tomorrow', 'Gary, IN → Kansas City, MO · Unit TRK-12', 'bg-warn-bg text-warn ring-amber-200'],
    ['WARNING', 'No travel through Chicago metro 4:00–6:00 PM', 'Houston, TX → Chicago, IL · Unit TRK-88', 'bg-warn-bg text-warn ring-amber-200'],
  ]
  return (
    <div className="mt-10 overflow-hidden rounded-2xl border border-line bg-white shadow-lg">
      <div className="flex items-center justify-between bg-navy-950 px-5 py-3 text-white">
        <div className="flex items-center gap-2">
          <span className="grid h-7 w-7 place-items-center rounded-lg bg-amber-brand text-xs font-extrabold text-navy-950">H</span>
          <span className="text-sm font-bold">Carrier Control Tower</span>
        </div>
        <span className="rounded-full bg-white/10 px-3 py-1 text-[10px] font-bold text-navy-100 ring-1 ring-inset ring-white/15">
          Your Trucking Co.
        </span>
      </div>
      <div className="grid grid-cols-3 gap-2.5 p-5 sm:grid-cols-6">
        {stats.map(([v, l]) => (
          <div key={l} className="rounded-xl border border-line bg-paper p-3">
            <p className="text-xl font-extrabold tabular-nums text-navy-900">{v}</p>
            <p className="mt-0.5 text-[10px] font-medium leading-tight text-slate-body">{l}</p>
          </div>
        ))}
      </div>
      <div className="border-t border-line px-5 py-4">
        <p className="text-[10px] font-bold uppercase tracking-[0.14em] text-slate-body/70">
          Needs Review — the safety team&apos;s daily operating list
        </p>
        <div className="mt-3 space-y-2">
          {reviews.map(([sev, msg, trip, tone]) => (
            <div key={msg} className="flex flex-wrap items-center justify-between gap-2 rounded-xl border border-line p-3">
              <div className="flex items-center gap-2.5">
                <span className={`rounded-full px-2 py-0.5 text-[9px] font-bold ring-1 ring-inset ${tone}`}>{sev}</span>
                <div>
                  <p className="text-xs font-bold">{msg}</p>
                  <p className="text-[10px] text-slate-body">{trip}</p>
                </div>
              </div>
              <span className="rounded-lg bg-navy-900 px-2.5 py-1 text-[10px] font-bold text-white">Open Trip</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}