import type { Metadata } from 'next'
import Link from 'next/link'
import {
  RolePageCta,
  RoleHero,
  PainList,
  Section,
  NumberedSteps,
  StatusFlow,
  CanCannot,
} from '../role-page'
import { SITE_DOMAIN } from '@/lib/app-url'

export const metadata: Metadata = {
  title: 'HeavyHaul Agent for Brokers',
  description:
    'Stop chasing permits. Start seeing the trip. Create a trip request, invite the dispatcher, and gain controlled visibility into permits, routes, and restrictions.',
}

export default function BrokersPage() {
  return (
    <>
      <RoleHero
        role="For Brokers"
        headline="Stop chasing permits. Start seeing the trip."
        sub="You book the load and send the rate confirmation — then visibility disappears. HeavyHaul Agent gives every oversize load you broker its own permit workspace, so you see the operational side without controlling carrier operations."
        loginHref="/login?role=broker"
        loginText="Broker sign in"
      />

      {/* The problem */}
      <Section
        label="The broker's problem today"
        title="After the load is tendered, you're managing the customer with incomplete information."
      >
        <PainList
          items={[
            'Are the permits complete — every state on the route?',
            'What do the permits say about curfews and travel hours?',
            'Are escorts required, and are they booked?',
            'Does the permit match the actual load dimensions?',
            'Can the driver legally move today?',
            'Is the delay a permit issue, an escort issue, a route issue — or nobody told you?',
          ]}
          footer="Every one of those answers costs a phone call and a wait. The shipper is asking you — and you're asking the carrier. In oversize freight, uncertainty is risk."
        />
      </Section>

      {/* The broker-initiated model */}
      <Section
        label="Start the trip yourself"
        title="You don't wait for the carrier to get organized. You start the workspace."
        tone="paper"
      >
        <p className="mt-5 max-w-2xl text-[15px] leading-relaxed text-slate-body">
          The rate confirmation is <span className="font-semibold text-ink">your</span> document —
          and it&apos;s the anchor that starts the trip. Here&apos;s the whole flow:
        </p>
        <NumberedSteps
          items={[
            {
              t: 'Create a trip request',
              d: 'One button from your dashboard. Upload the rate confirmation — pickup, delivery, commodity, dates, and dimensions fill in the trip.',
            },
            {
              t: 'Invite the dispatcher',
              d: "Enter the dispatcher's email and send the collaboration request. They get a clear operational request tied to a real load — not a random signup link.",
            },
            {
              t: 'Add your notes',
              d: '"Please upload all permits once available." "Driver must be added before pickup." Your instructions travel with the trip.',
            },
            {
              t: 'Watch the status',
              d: 'See whether your request was sent, viewed, accepted, or declined — and whether permits have arrived. No more chasing updates.',
            },
            {
              t: 'Upload permits yourself',
              d: "Already have the permits? You're never blocked waiting for the dispatcher — upload them and the trip activates immediately.",
            },
            {
              t: 'Work from the shared workspace',
              d: 'Permits, warnings, participants, chat, and history — one link everyone on the load shares, forever searchable.',
            },
          ]}
        />
        <p className="mt-10 text-sm font-bold uppercase tracking-[0.14em] text-amber-deep">
          The request lifecycle
        </p>
        <StatusFlow
          statuses={['Draft', 'Sent', 'Viewed', 'Accepted', 'Waiting on Permits', 'Active', 'Completed']}
        />
        <p className="mt-5 max-w-2xl text-sm leading-relaxed text-slate-body">
          &ldquo;Waiting on Permits&rdquo; just means the documents haven&apos;t landed yet — the
          workspace never shows data it doesn&apos;t have. The first uploaded permit brings the
          trip to life.
        </p>
      </Section>

      {/* Intake link */}
      <Section label="Your personal intake page" title="One link that turns your carriers into organized submissions.">
        <div className="mt-8 grid items-center gap-10 lg:grid-cols-2">
          <div className="space-y-4 text-[15px] leading-relaxed text-slate-body">
            <p>
              Every broker gets an automatic public intake page —{' '}
              <span className="font-mono text-sm font-semibold text-navy-900">{SITE_DOMAIN}/intake/your-company</span>.
              A carrier opens it, uploads the rate confirmation, enters dispatcher contact info,
              and picks a permit path: <span className="font-semibold text-ink">upload existing permits from any provider</span>,
              or <span className="font-semibold text-ink">order permits</span>.
            </p>
            <p>
              No account required to submit — friction kills adoption, so account creation happens
              naturally after the submission. Every submission becomes a pending trip under your
              name, and you&apos;re notified the moment it lands.
            </p>
            <p className="text-sm">
              Where brokers use the link: load confirmation emails, the email signature, dispatch
              instructions, onboarding packets, or a text to the carrier — &ldquo;upload your rate
              con here and the permit process starts.&rdquo;
            </p>
          </div>
          <IntakePreview />
        </div>
      </Section>

      {/* Co-ownership */}
      <Section
        label="Co-ownership, built on trust"
        title="You start the trip. The permits activate it. The carrier keeps their operation."
        tone="paper"
      >
        <p className="mt-5 max-w-2xl text-[15px] leading-relaxed text-slate-body">
          The broker owns the <span className="font-semibold text-ink">visibility layer</span>; the
          dispatcher owns the <span className="font-semibold text-ink">operational layer</span>.
          That balance is what makes carriers comfortable joining your workspace — and what keeps
          your relationships protected in both directions.
        </p>
        <CanCannot
          canTitle="As a broker, you can"
          can={[
            'Create trip requests and upload rate confirmations',
            'Invite dispatchers — and shippers or receivers where appropriate',
            'View uploaded permits, routes, and trip status',
            'Ask AI questions about the trip and its permits',
            'Upload permits directly when you already have them',
            'Keep and search every trip in your history',
          ]}
          cannotTitle="You never have to worry about"
          cannot={[
            'Brokers do not assign or control drivers',
            'Brokers do not manage carrier-side operational documents',
            "Contact details stay inside each role's permitted circle — relationships aren't exposed",
            'Carrier operations stay with the carrier — visibility without interference',
          ]}
        />
      </Section>

      {/* Dashboard preview */}
      <Section label="Your dashboard" title="Every load you broker, identified in seconds.">
        <div className="mt-8 grid gap-4 md:grid-cols-2">
          <TripCardPreview
            lane="Gary, IN → Kansas City, MO"
            commodity="Wheel loader · 12'6&quot; W"
            carrier="Stratan Dispatch"
            status="Waiting on Permits"
            statusTone="warn"
            note="Request accepted · dispatcher uploading permits"
          />
          <TripCardPreview
            lane="Houston, TX → Chicago, IL"
            commodity="Excavator · 145,000 lbs"
            carrier="ABC Trucking"
            status="Active"
            statusTone="ok"
            note="4 permits · TX, OK, MO, IL · 1 curfew warning"
          />
        </div>
        <p className="mt-6 max-w-2xl text-sm leading-relaxed text-slate-body">
          Filter by pending, waiting on permits, active, or history. Search by carrier, lane,
          commodity, or date. Completed trips never disappear — they become your permanent record.
        </p>
      </Section>

      {/* Why it matters */}
      <Section label="Why brokers join" title="Visibility for you. Growth for your network." tone="paper">
        <div className="mt-8 grid gap-6 md:grid-cols-3">
          {[
            {
              t: 'Fewer calls, faster answers',
              d: 'Stop chasing the dispatcher for permit copies and screenshots. Open the trip, see the documents, ask the Agent.',
            },
            {
              t: 'Answer your customer immediately',
              d: 'When the shipper asks why the load is delayed, you see whether it’s permits, escorts, or curfews — before you call anyone.',
            },
            {
              t: 'A permanent record',
              d: 'Every permit conversation, document, and decision stays on the trip. Disputes and repeat lanes get easier every month.',
            },
          ].map((b) => (
            <div key={b.t} className="rounded-2xl border border-line bg-white p-7">
              <h3 className="font-bold tracking-tight text-navy-900">{b.t}</h3>
              <p className="mt-2.5 text-sm leading-relaxed text-slate-body">{b.d}</p>
            </div>
          ))}
        </div>
        <p className="mt-8 max-w-2xl text-sm text-slate-body">
          Read more on the blog:{' '}
          <Link href="/blog/one-trip-one-workspace" className="font-semibold text-navy-900 underline">
            One Trip, One Workspace — why we built HeavyHaul Agent
          </Link>
        </p>
      </Section>

      <RolePageCta
        headline="Give every oversize load its own workspace."
        loginHref="/login?role=broker"
        loginText="Broker sign in"
      />
    </>
  )
}

/** Static mock of a broker trip card. */
function TripCardPreview({
  lane,
  commodity,
  carrier,
  status,
  statusTone,
  note,
}: {
  lane: string
  commodity: string
  carrier: string
  status: string
  statusTone: 'ok' | 'warn'
  note: string
}) {
  return (
    <div className="rounded-2xl border border-line bg-white p-5 shadow-sm">
      <div className="flex items-start justify-between gap-3">
        <div>
          <p className="font-bold tracking-tight">{lane}</p>
          <p className="mt-0.5 text-sm text-slate-body">{commodity}</p>
        </div>
        <span
          className={`rounded-full px-2.5 py-1 text-[10px] font-bold ring-1 ring-inset ${
            statusTone === 'ok' ? 'bg-ok-bg text-ok ring-green-200' : 'bg-warn-bg text-warn ring-amber-200'
          }`}
        >
          {status}
        </span>
      </div>
      <div className="mt-4 flex items-center justify-between border-t border-line pt-3.5 text-xs text-slate-body">
        <span>
          Carrier: <span className="font-semibold text-ink">{carrier}</span>
        </span>
        <span>Today</span>
      </div>
      <p className="mt-2 text-xs text-slate-body">{note}</p>
    </div>
  )
}

/** Static mock of the public intake page. */
function IntakePreview() {
  return (
    <div className="rounded-2xl border border-line bg-white p-6 shadow-lg">
      <div className="flex items-center gap-2 border-b border-line pb-4">
        <span className="grid h-8 w-8 place-items-center rounded-lg bg-navy-900 text-xs font-extrabold text-amber-brand">H</span>
        <div>
          <p className="text-sm font-bold">Your Company — Permit Intake</p>
          <p className="text-[11px] text-slate-body">Powered by HeavyHaul Agent</p>
        </div>
      </div>
      <div className="mt-4 rounded-xl border-2 border-dashed border-line bg-paper p-6 text-center text-xs text-slate-body">
        Drag &amp; drop the rate confirmation here
        <p className="mt-1 text-[10px] text-slate-body/70">PDF, JPG, PNG accepted</p>
      </div>
      <div className="mt-3 grid grid-cols-2 gap-2">
        <div className="rounded-lg bg-navy-900 p-2.5 text-center text-[11px] font-bold text-white">
          I have my own permits
        </div>
        <div className="rounded-lg border border-line p-2.5 text-center text-[11px] font-semibold text-slate-body">
          Order permits
        </div>
      </div>
      <div className="mt-3 space-y-2">
        {['Carrier company', 'Dispatcher email', 'Phone'].map((f) => (
          <div key={f} className="rounded-lg border border-line bg-paper px-3 py-2 text-[11px] text-slate-body/70">
            {f}
          </div>
        ))}
      </div>
      <div className="mt-3 rounded-lg bg-amber-brand py-2.5 text-center text-xs font-bold text-navy-950">
        Submit Request
      </div>
    </div>
  )
}