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

export const metadata: Metadata = {
  title: 'HeavyHaul Agent for Drivers',
  description:
    'Already have your permit? Upload it — from any source — and check curfews, escort requirements, validity, and restrictions from your phone before you move.',
}

const QUESTIONS = [
  'Can I move right now?',
  'Do I have a curfew today?',
  'What time do I have to stop?',
  'Do I need escorts in this state?',
  'Is my permit valid today?',
  'Can I travel at night?',
  'Can I drive on Sunday?',
  'What does this restriction mean?',
  'What route am I supposed to follow?',
  'Do I need flags and signs?',
]

export default function DriversPage() {
  return (
    <>
      <RoleHero
        role="For Drivers"
        headline="Your permit is a PDF. HeavyHaul Agent turns it into answers."
        sub="Having the permit is not the same as understanding it. Upload your permit — from any permit company, broker, dispatcher, or state portal — and get practical help with curfews, escorts, validity, routes, and restrictions, right from your phone."
        loginHref="/login?role=driver"
        loginText="Driver sign in"
      />

      {/* The real problem */}
      <Section
        label="The driver's real problem"
        title="The permit is in your hand. The answers are buried in it."
      >
        <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>
              Many drivers already have their permits — from a broker, a dispatcher, a permit
              company, or straight from the state. But a multi-state trip means multiple technical
              PDFs, each with its own routes, travel hours, curfews, escort rules, and provisions
              written for the DOT, not for a driver doing 60 on the interstate.
            </p>
            <p>
              The daily questions are practical:{' '}
              <span className="font-semibold text-ink">
                Can I move right now? Am I in a curfew zone? Do I need an escort here? Is my route
                correct?
              </span>{' '}
              Today, answering them means reading every page, calling dispatch, or guessing.
            </p>
            <p>
              HeavyHaul Agent is the <span className="font-semibold text-ink">permit companion</span>:
              the permit stays the legal document — the Agent is the interpreter, checker, and
              safety layer that sits between you and the paperwork.
            </p>
          </div>

          {/* Phone preview — the driver trip command screen */}
          <PhonePreview />
        </div>
      </Section>

      {/* Ask questions */}
      <Section
        label="Key benefit — ask anything"
        title="The questions you actually have, answered from your actual permit."
        tone="paper"
      >
        <div className="mt-8 flex flex-wrap gap-2.5">
          {QUESTIONS.map((q) => (
            <span
              key={q}
              className="rounded-full border border-line bg-white px-4 py-2 text-sm font-medium text-slate-body"
            >
              {q}
            </span>
          ))}
        </div>
        <div className="mt-10 grid gap-6 lg:grid-cols-2">
          <ExampleAnswer
            question="Can I travel through Atlanta at 5 PM?"
            answer="Based on your uploaded Georgia permit and state provisions, oversize movement is restricted through the Atlanta metro during weekday rush hours (4:00–6:00 PM). You should plan to be parked before entering the restricted area."
            confidence="High"
            sources="Uploaded permit, state provisions, internal notes"
          />
          <ExampleAnswer
            question="Do I need escorts on this segment?"
            answer="Your permit indicates one front escort is required on non-interstate roads at your width. Your exact road type could not be confirmed from current data — review your permit before movement."
            confidence="Partial"
            sources="Uploaded permit, state provisions"
          />
        </div>
        <p className="mt-6 max-w-2xl text-sm leading-relaxed text-slate-body">
          Every answer shows its <span className="font-semibold text-ink">confidence level</span> and{' '}
          <span className="font-semibold text-ink">the sources checked</span> — permit, state
          provisions, and operating notes. When confidence is low, the Agent says so honestly
          instead of guessing.
        </p>
      </Section>

      {/* All the tools */}
      <Section label="Built for the cab, not the office" title='A simple trip screen that answers: "Am I okay to move right now?"'>
        <FeatureGrid
          items={[
            {
              t: 'Works with any permit',
              d: 'Bought through your dispatcher, a broker, another permit company, or the state — upload it and it works the same. HeavyHaul Agent is permit-source neutral.',
            },
            {
              t: 'Permit validity at a glance',
              d: 'Effective dates, expiration, days remaining, and states — with a clear warning when a permit is expiring or already expired.',
            },
            {
              t: 'Curfew status',
              d: 'When can you move and when must you sit — statewide travel windows, metro curfews, weekend and holiday bans, pulled out of the fine print.',
            },
            {
              t: 'Escort requirements',
              d: 'Front, chase, height pole, or police escort — by state and road type, based on your permit and dimensions.',
            },
            {
              t: 'Dimension check',
              d: 'If the permit says 12\'0" and the load is 12\'6", you see the warning before movement — not after the stop. A second set of eyes on every trip.',
            },
            {
              t: 'Provisions, explained',
              d: '"Subject to general provisions" — but what do they say? Ask about flags, signs, lights, weather rules, and convoy restrictions in plain language.',
            },
            {
              t: 'One trip, all states',
              d: 'Houston to Chicago means TX, OK, MO, and IL permits — organized by state in one trip. Tap a state and ask about that state only.',
            },
            {
              t: 'Buy routes when you need them',
              d: 'Have the permit but need a clean, easy-to-follow visual route? Request one inside the trip — once purchased, everyone on the trip can see it.',
            },
            {
              t: 'Your team sees the same answers',
              d: 'Questions and answers are shared on the trip with your dispatcher — no more relaying restrictions over the phone.',
            },
          ]}
        />
      </Section>

      {/* Coming next */}
      <Section label="Where it's going" title="Today the answers. Next, the alerts." tone="paper">
        <div className="mt-8 grid gap-6 md:grid-cols-2">
          <div className="rounded-2xl border border-line bg-white p-7">
            <p className="text-xs font-bold uppercase tracking-[0.14em] text-ok">Available in the pilot</p>
            <ul className="mt-4 space-y-2.5 text-sm leading-relaxed text-slate-body">
              <li>• Permit upload and organization by trip and state</li>
              <li>• Permit validity, dimension, curfew, and escort visibility</li>
              <li>• Shared trip chat with your dispatcher and broker</li>
              <li>• Mobile-friendly trip command screen</li>
            </ul>
          </div>
          <div className="rounded-2xl border border-dashed border-line bg-white p-7">
            <p className="text-xs font-bold uppercase tracking-[0.14em] text-amber-deep">On the roadmap</p>
            <ul className="mt-4 space-y-2.5 text-sm leading-relaxed text-slate-body">
              <li>• &ldquo;Check my location&rdquo; — current-location curfew and escort checks</li>
              <li>• Voice questions and multilingual agents</li>
              <li>• Push alerts before you enter a restricted window</li>
              <li>• Native app with background location and offline permits</li>
            </ul>
          </div>
        </div>
        <p className="mt-8 max-w-2xl text-sm leading-relaxed text-slate-body">
          HeavyHaul Agent is a support and interpretation tool. The uploaded permit remains the
          official controlling document, and the driver and carrier remain responsible for legal
          operation.{' '}
          <Link href="/blog/oversize-permits-101" className="font-semibold text-navy-900 underline">
            New to oversize permits? Start with Permits 101 →
          </Link>
        </p>
      </Section>

      <RolePageCta
        headline="Upload your permit. Know what matters before you move."
        loginHref="/login?role=driver"
        loginText="Driver sign in"
      />
    </>
  )
}

/** Static preview of the driver trip command screen (marketing mock). */
function PhonePreview() {
  return (
    <div className="mx-auto w-full max-w-[360px] overflow-hidden rounded-[2rem] bg-paper shadow-2xl ring-8 ring-navy-900">
      <div className="bg-navy-900 px-5 pb-5 pt-6 text-white">
        <p className="text-[11px] font-bold uppercase tracking-[0.14em] text-amber-brand">
          Current Trip · Unit TRK-88
        </p>
        <p className="mt-1 text-lg font-extrabold tracking-tight">Houston, TX → Chicago, IL</p>
        <p className="mt-0.5 text-xs text-navy-100">Wheel loader · Stratan Dispatch</p>
        <div className="mt-4 grid grid-cols-4 gap-2 text-center text-[10px] font-semibold">
          {[
            ['Permits', '4 ✓', 'text-green-300'],
            ['Valid', '4 today', 'text-green-300'],
            ['Curfew', 'Warning', 'text-amber-brand'],
            ['Escort', 'Review', 'text-amber-brand'],
          ].map(([k, v, c]) => (
            <div key={k} className="rounded-lg bg-white/5 px-1 py-2 ring-1 ring-white/10">
              <p className="text-navy-100/70">{k}</p>
              <p className={`mt-0.5 text-xs font-bold ${c}`}>{v}</p>
            </div>
          ))}
        </div>
      </div>
      <div className="space-y-3 px-4 py-4">
        <div className="rounded-2xl border border-warn/30 bg-warn-bg p-3.5">
          <p className="text-[10px] font-bold uppercase tracking-[0.14em] text-slate-body/70">Curfew Status</p>
          <p className="mt-1 text-sm font-bold text-warn">⚠ Warning — restriction ahead</p>
          <p className="mt-1 text-xs leading-relaxed text-slate-body">
            No travel through Chicago metro 4:00–6:00 PM.
          </p>
        </div>
        <div className="rounded-2xl border border-line bg-white p-3.5">
          <p className="text-[10px] font-bold uppercase tracking-[0.14em] text-slate-body/70">Permit Status</p>
          <p className="mt-1 text-sm font-bold text-ok">✓ Valid today</p>
          <p className="mt-1 text-xs text-slate-body">IL-1266410 · Expires Sep 8 · TX, OK, MO, IL</p>
        </div>
        <div className="rounded-2xl border border-line bg-white p-3.5">
          <p className="text-[10px] font-bold uppercase tracking-[0.14em] text-slate-body/70">Ask HeavyHaul Agent</p>
          <div className="mt-2 flex flex-wrap gap-1.5">
            {['Can I move now?', 'Escorts here?'].map((q) => (
              <span key={q} className="rounded-full border border-line bg-paper px-2.5 py-1 text-[10px] font-medium text-slate-body">
                {q}
              </span>
            ))}
          </div>
          <div className="mt-2 rounded-xl bg-navy-900 py-2 text-center text-[11px] font-bold text-white">
            Open Trip Chat →
          </div>
        </div>
      </div>
      <div className="grid grid-cols-4 border-t border-line bg-white py-2 text-center text-[9px] font-semibold text-slate-body">
        {[['🏠', 'Home'], ['💬', 'Ask'], ['📄', 'Permits'], ['🕓', 'History']].map(([i, l], idx) => (
          <span key={l} className={idx === 0 ? 'text-amber-deep' : ''}>
            <span className="block text-base">{i}</span>
            {l}
          </span>
        ))}
      </div>
    </div>
  )
}