import type { Metadata } from 'next'
import Link from 'next/link'
import {
  ArrowRight,
  Briefcase,
  Clock,
  FileCheck,
  Headphones,
  Languages,
  Map,
  MessageSquare,
  Navigation,
  Play,
  Radar,
  ShieldCheck,
  Truck,
  Upload,
  Users,
} from 'lucide-react'
import { getAllPosts } from '@/lib/blog'
import { SITE_DOMAIN } from '@/lib/app-url'
import { EarlyAccessForm } from '@/components/marketing/early-access-form'
import { VideoExplainer } from '@/components/marketing/video-explainer'

export const metadata: Metadata = {
  title: 'HeavyHaul Agent — every oversize load gets its own intelligent workspace',
  description:
    'The operational intelligence platform for oversize and overweight transportation. One place for the rate confirmation, permits, routes, curfews, escorts, participants, and AI answers — shared by broker, dispatcher, carrier, and driver.',
}

const EXPLAINER_VIDEO_ID = 'nJSSNaAG1w4'

const ROLES = [
  {
    role: 'Brokers',
    icon: Briefcase,
    headline: 'Stop chasing permits. Start seeing the trip.',
    body: 'Create a trip request, invite the dispatcher, and gain controlled visibility into permits, routes, and restrictions — without controlling carrier operations.',
    href: '/brokers',
    cta: 'How it works for brokers',
  },
  {
    role: 'Carriers',
    icon: Truck,
    headline: 'Prevent curfew violations before they happen.',
    body: 'Give your safety team one place to see every permit, every trip, every driver question, and every compliance warning.',
    href: '/carriers',
    cta: 'How it works for carriers',
  },
  {
    role: 'Dispatchers',
    icon: Headphones,
    headline: 'Manage every oversize trip from one workspace.',
    body: 'Accept broker requests, upload permits, assign drivers — and stop answering the same permit questions over and over.',
    href: '/carriers',
    cta: 'How it works for dispatchers',
  },
  {
    role: 'Drivers',
    icon: Navigation,
    headline: 'Ask questions about your permit before you move.',
    body: 'Upload your permit — from any source — and check curfews, escorts, validity, and restrictions right from your phone.',
    href: '/drivers',
    cta: 'How it works for drivers',
  },
]

const MODULES = [
  {
    icon: FileCheck,
    name: 'Permit Intelligence',
    desc: 'Reads uploaded permits, extracts states, dimensions, dates, and restrictions, and flags mismatches against the load.',
  },
  {
    icon: MessageSquare,
    name: 'Trip Intelligence',
    desc: 'Every load gets a structured workspace: rate confirmation, permits, routes, participants, and conversation history.',
  },
  {
    icon: Clock,
    name: 'Curfew Intelligence',
    desc: 'Watches your truck against your permit curfews and alerts you before a costly mistake happens.',
  },
  {
    icon: ShieldCheck,
    name: 'Escort Intelligence',
    desc: 'Answers whether the load requires pilot cars, where, and under what route conditions — by state and route type.',
  },
  {
    icon: Map,
    name: 'Route Intelligence',
    desc: 'Express and Extended visual routes — purchased once, visible to every authorized trip participant.',
  },
]

const STEPS = [
  {
    icon: Upload,
    who: 'The broker starts the workspace',
    what: 'Upload the rate confirmation, enter the dispatcher email, and send a collaboration request. The trip enters "Waiting on Permits."',
  },
  {
    icon: FileCheck,
    who: 'The dispatcher activates the trip',
    what: 'Accept the request, upload permits, assign the driver. The first uploaded permit transitions the trip to Active.',
  },
  {
    icon: Radar,
    who: 'The driver executes with support',
    what: 'Open the trip, review permits, ask questions, and check curfews and escorts before moving.',
  },
]

export default function HomePage() {
  const posts = getAllPosts().slice(0, 3)

  return (
    <>
      {/* ================= Hero ================= */}
      <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 grid max-w-6xl items-center gap-12 px-6 pb-16 pt-16 md:pt-20 lg:grid-cols-[1.05fr_1fr] lg:pb-24">
          <div>
            <p className="mb-5 inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/5 px-3.5 py-1.5 text-xs font-semibold tracking-wide text-amber-brand">
              <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-amber-brand" />
              Early access — onboarding a pilot group now
            </p>
            <h1 className="text-4xl font-extrabold leading-[1.08] tracking-tight md:text-[3.4rem]">
              Every oversize load gets its own{' '}
              <span className="text-amber-brand">intelligent workspace.</span>
            </h1>
            <p className="mt-5 max-w-xl text-lg leading-relaxed text-navy-100">
              One place for the rate confirmation, permits, routes, curfews, escorts, and AI
              answers — shared by the broker, dispatcher, carrier, and driver.
            </p>
            <div className="mt-8 flex flex-wrap items-center gap-4">
              <Link
                href="#early-access"
                className="rounded-lg bg-amber-brand px-6 py-3 text-sm font-bold text-navy-950 shadow-lg shadow-amber-brand/25 transition hover:-translate-y-0.5 hover:bg-amber-deep"
              >
                Get Early Access
              </Link>
              <Link
                href="#explainer"
                className="inline-flex items-center gap-2 rounded-lg border border-white/20 px-5 py-3 text-sm font-semibold text-white transition hover:bg-white/5"
              >
                <Play className="h-4 w-4 fill-current" aria-hidden />
                Watch how it works
              </Link>
            </div>

            {/* Trust strip */}
            <div className="mt-10 grid max-w-lg grid-cols-2 gap-x-6 gap-y-3 text-sm text-navy-100">
              {['One load, one workspace', 'Everyone sees only their trips', 'Works with permits from anywhere', 'Every answer shows its sources'].map((t) => (
                <div key={t} className="flex items-start gap-2">
                  <span className="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-amber-brand" />
                  {t}
                </div>
              ))}
            </div>
          </div>

          {/* Video explainer */}
          <div id="explainer" className="scroll-mt-24">
            <VideoExplainer videoId={EXPLAINER_VIDEO_ID} title="See HeavyHaul Agent in 2 minutes" />
            <p className="mt-3 text-center text-xs text-navy-100/70">
              The 2-minute overview — what the workspace does for brokers, carriers, and drivers.
            </p>
          </div>
        </div>

        {/* Roles ribbon */}
        <div className="relative border-t border-white/10 bg-white/[0.03]">
          <div className="mx-auto flex max-w-6xl flex-wrap items-center justify-center gap-x-10 gap-y-2 px-6 py-4 text-sm font-semibold text-navy-100/90">
            <span className="text-xs uppercase tracking-[0.14em] text-navy-100/50">Built for</span>
            {[
              [Briefcase, 'Brokers'],
              [Truck, 'Carriers'],
              [Headphones, 'Dispatchers'],
              [Navigation, 'Drivers'],
            ].map(([Icon, label]) => {
              const I = Icon as typeof Briefcase
              return (
                <span key={label as string} className="inline-flex items-center gap-2">
                  <I className="h-4 w-4 text-amber-brand" aria-hidden />
                  {label as string}
                </span>
              )
            })}
          </div>
        </div>
      </section>

      {/* ================= Workspace showcase ================= */}
      <section className="border-b border-line bg-paper">
        <div className="mx-auto max-w-6xl px-6 py-20">
          <div className="text-center">
            <p className="text-sm font-bold uppercase tracking-[0.14em] text-amber-deep">The workspace</p>
            <h2 className="mx-auto mt-3 max-w-2xl text-3xl font-extrabold tracking-tight md:text-4xl">
              Your trips. Your agent. Your permits. One screen.
            </h2>
          </div>

          {/* CSS product mock — mirrors the real 3-panel trip workspace */}
          <div className="mx-auto mt-12 max-w-5xl overflow-hidden rounded-2xl border border-line bg-white shadow-xl">
            <div className="flex items-center gap-1.5 border-b border-line bg-neutral-50 px-4 py-2.5">
              <span className="h-2.5 w-2.5 rounded-full bg-red-300" />
              <span className="h-2.5 w-2.5 rounded-full bg-amber-300" />
              <span className="h-2.5 w-2.5 rounded-full bg-green-300" />
              <span className="ml-3 rounded-md bg-white px-3 py-0.5 text-[11px] text-slate-body ring-1 ring-line">
                {SITE_DOMAIN}/trips/HH-2041
              </span>
            </div>
            <div className="grid grid-cols-[1fr_2fr] text-left sm:grid-cols-[1fr_2fr_2fr]">
              {/* Mini trips panel */}
              <div className="space-y-2 border-r border-line bg-white p-3">
                <p className="text-[9px] font-bold uppercase tracking-[0.14em] text-slate-body/60">My trips</p>
                {[
                  ['Houston → Chicago', 'Active', true],
                  ['Gary → Kansas City', 'Waiting', false],
                  ['Tulsa → Denver', 'Active', false],
                ].map(([lane, status, current]) => (
                  <div
                    key={lane as string}
                    className={`rounded-lg border p-2 ${current ? 'border-amber-brand/60 bg-amber-brand/5' : 'border-transparent'}`}
                  >
                    <p className="truncate text-[10px] font-bold">{lane as string}</p>
                    <p className={`text-[9px] font-semibold ${status === 'Active' ? 'text-ok' : 'text-warn'}`}>
                      {status as string}
                    </p>
                  </div>
                ))}
              </div>
              {/* Mini chat panel */}
              <div className="flex flex-col justify-between border-r border-line bg-neutral-50/50 p-3">
                <div className="space-y-2">
                  <div className="ml-auto w-fit max-w-[85%] rounded-xl rounded-tr-sm bg-navy-900 px-2.5 py-1.5 text-[10px] text-white">
                    Do I need escorts in Oklahoma?
                  </div>
                  <div className="w-fit max-w-[90%] rounded-xl rounded-tl-sm border border-amber-200 bg-amber-50 px-2.5 py-1.5 text-[10px] text-ink">
                    🤖 Yes — one front escort on two-lane roads at your width, per your OK permit.
                    <span className="mt-1 block text-[8px] font-semibold text-slate-body">
                      Confidence: High · Sources: OK permit, provisions
                    </span>
                  </div>
                </div>
                <div className="mt-3 flex items-center gap-1.5 rounded-lg border border-line bg-white px-2.5 py-1.5 text-[9px] text-slate-body/60">
                  Ask about this trip… <span className="ml-auto rounded bg-amber-brand px-1.5 py-0.5 font-bold text-navy-950">Ask</span>
                </div>
              </div>
              {/* Mini info panel */}
              <div className="hidden space-y-2 bg-white p-3 sm:block">
                <p className="text-[9px] font-bold uppercase tracking-[0.14em] text-slate-body/60">Trip info</p>
                <div className="flex flex-wrap gap-1">
                  {['TX ✓', 'OK ✓', 'MO ✓', 'IL ✓'].map((s) => (
                    <span key={s} className="rounded bg-ok-bg px-1.5 py-0.5 font-mono text-[9px] font-bold text-ok">
                      {s}
                    </span>
                  ))}
                </div>
                <div className="rounded-lg border border-amber-200 bg-amber-50 p-2 text-[9px] font-semibold text-amber-800">
                  ⚠ Curfew — Chicago metro 4:00–6:00 PM
                </div>
                <div className="rounded-lg border border-red-200 bg-red-50 p-2 text-[9px] font-semibold text-red-800">
                  ⚠ Permit width 144&quot; &lt; load 150&quot;
                </div>
                <div className="rounded-lg bg-navy-900 p-2 text-center text-[9px] font-bold text-white">
                  Order route · $1.99
                </div>
              </div>
            </div>
          </div>
          <p className="mx-auto mt-6 max-w-xl text-center text-sm text-slate-body">
            Trips on the left. The agent in the middle. Permits, warnings, and routes on the right —
            nobody reads a 10-page permit again.
          </p>
        </div>
      </section>

      {/* ================= Role cards ================= */}
      <section id="roles" className="mx-auto max-w-6xl scroll-mt-20 px-6 py-20">
        <p className="text-sm font-bold uppercase tracking-[0.14em] text-amber-deep">Who it&apos;s for</p>
        <h2 className="mt-3 max-w-2xl text-3xl font-extrabold tracking-tight md:text-4xl">
          One shared workspace. A different experience for every role.
        </h2>
        <div className="mt-12 grid gap-6 md:grid-cols-2">
          {ROLES.map((m) => (
            <Link
              key={m.role + m.cta}
              href={m.href}
              className="group flex flex-col rounded-2xl border border-line bg-paper p-8 transition hover:-translate-y-1 hover:border-amber-brand/50 hover:shadow-xl hover:shadow-amber-brand/5"
            >
              <div className="flex items-center gap-3">
                <span className="grid h-10 w-10 place-items-center rounded-xl bg-navy-900 text-amber-brand">
                  <m.icon className="h-5 w-5" aria-hidden />
                </span>
                <p className="text-xs font-bold uppercase tracking-[0.14em] text-amber-deep">{m.role}</p>
              </div>
              <h3 className="mt-4 text-xl font-bold tracking-tight">{m.headline}</h3>
              <p className="mt-3 flex-1 text-[15px] leading-relaxed text-slate-body">{m.body}</p>
              <span className="mt-6 inline-flex items-center gap-1.5 text-sm font-bold text-navy-900 transition group-hover:gap-2.5 group-hover:text-amber-deep">
                {m.cta} <ArrowRight className="h-4 w-4" aria-hidden />
              </span>
            </Link>
          ))}
        </div>
      </section>

      {/* ================= How it works ================= */}
      <section id="how" className="scroll-mt-20 border-y border-line bg-paper">
        <div className="mx-auto max-w-6xl px-6 py-20">
          <p className="text-sm font-bold uppercase tracking-[0.14em] text-amber-deep">How it works</p>
          <h2 className="mt-3 max-w-2xl text-3xl font-extrabold tracking-tight md:text-4xl">
            Start the trip the moment you book the load.
          </h2>
          <div className="relative mt-12 grid gap-8 md:grid-cols-3">
            {/* connector line */}
            <div className="absolute left-0 right-0 top-9 hidden h-px bg-gradient-to-r from-transparent via-amber-brand/50 to-transparent md:block" aria-hidden />
            {STEPS.map((s, i) => (
              <div key={s.who} className="relative rounded-2xl border border-line bg-white p-8">
                <div className="flex items-center gap-3">
                  <span className="grid h-11 w-11 place-items-center rounded-full bg-navy-900 text-amber-brand ring-4 ring-paper">
                    <s.icon className="h-5 w-5" aria-hidden />
                  </span>
                  <span className="font-mono text-sm font-semibold text-amber-deep">0{i + 1}</span>
                </div>
                <h3 className="mt-4 text-lg font-bold tracking-tight">{s.who}</h3>
                <p className="mt-2 text-[15px] leading-relaxed text-slate-body">{s.what}</p>
              </div>
            ))}
          </div>
          <p className="mt-10 max-w-2xl text-sm leading-relaxed text-slate-body">
            No permits yet? The trip simply shows &ldquo;Waiting on Permits&rdquo; until they land —
            the workspace never shows data it doesn&apos;t have.
          </p>
        </div>
      </section>

      {/* ================= Modules ================= */}
      <section id="modules" className="mx-auto max-w-6xl scroll-mt-20 px-6 py-20">
        <p className="text-sm font-bold uppercase tracking-[0.14em] text-amber-deep">Intelligence modules</p>
        <h2 className="mt-3 max-w-2xl text-3xl font-extrabold tracking-tight md:text-4xl">
          More than a chatbot. It runs the whole trip, not just the chat.
        </h2>
        <div className="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {MODULES.map((m) => (
            <div
              key={m.name}
              className="group rounded-2xl border border-line p-7 transition hover:border-navy-500/40 hover:shadow-md"
            >
              <span className="grid h-10 w-10 place-items-center rounded-xl bg-navy-50 text-navy-900 transition group-hover:bg-navy-900 group-hover:text-amber-brand">
                <m.icon className="h-5 w-5" aria-hidden />
              </span>
              <h3 className="mt-4 font-bold tracking-tight text-navy-900">{m.name}</h3>
              <p className="mt-2 text-sm leading-relaxed text-slate-body">{m.desc}</p>
            </div>
          ))}
          <div className="rounded-2xl bg-navy-900 p-7 text-white">
            <span className="grid h-10 w-10 place-items-center rounded-xl bg-white/10 text-amber-brand">
              <Languages className="h-5 w-5" aria-hidden />
            </span>
            <h3 className="mt-4 font-bold tracking-tight text-amber-brand">Multilingual Agents</h3>
            <p className="mt-2 text-sm leading-relaxed text-navy-100">
              English, Spanish, Russian, and Romanian — ask in your language while answers stay
              grounded in the same permit and trip context.
            </p>
          </div>
        </div>
      </section>

      {/* ================= Blog teaser ================= */}
      {posts.length > 0 && (
        <section className="border-t border-line bg-paper">
          <div className="mx-auto max-w-6xl px-6 py-20">
            <div className="flex items-end justify-between">
              <div>
                <p className="text-sm font-bold uppercase tracking-[0.14em] text-amber-deep">From the blog</p>
                <h2 className="mt-3 text-3xl font-extrabold tracking-tight">Practical heavy-haul guides</h2>
              </div>
              <Link
                href="/blog"
                className="inline-flex items-center gap-1.5 text-sm font-bold text-navy-900 hover:text-amber-deep"
              >
                All posts <ArrowRight className="h-4 w-4" aria-hidden />
              </Link>
            </div>
            <div className="mt-10 grid gap-6 md:grid-cols-3">
              {posts.map((p) => (
                <Link
                  key={p.slug}
                  href={`/blog/${p.slug}`}
                  className="group rounded-2xl border border-line bg-white p-6 transition hover:-translate-y-1 hover:border-amber-brand/50 hover:shadow-lg"
                >
                  <p className="text-xs text-slate-body/70">{p.date}</p>
                  <h3 className="mt-2 font-bold tracking-tight group-hover:text-navy-900">{p.title}</h3>
                  <p className="mt-2 line-clamp-3 text-sm leading-relaxed text-slate-body">{p.excerpt}</p>
                </Link>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* ================= Early access ================= */}
      <section id="early-access" className="scroll-mt-20 bg-navy-950 text-white">
        <div className="mx-auto max-w-6xl px-6 py-20 text-center">
          <span className="mx-auto grid h-12 w-12 place-items-center rounded-2xl bg-amber-brand/15 text-amber-brand">
            <Users className="h-6 w-6" aria-hidden />
          </span>
          <h2 className="mx-auto mt-5 max-w-2xl text-3xl font-extrabold tracking-tight md:text-4xl">
            Stop chasing permits. Give every oversize load its own workspace.
          </h2>
          <p className="mx-auto mt-4 max-w-xl text-navy-100">
            Upload the rate confirmation. Invite the dispatcher. Let the carrier upload permits.
            Ask AI questions about the trip. Keep every trip in your history.
          </p>
          <EarlyAccessForm />
          <p className="mt-4 text-xs text-navy-100/70">
            We&apos;re onboarding a small pilot group of brokers and carriers — join the list and
            we&apos;ll reach out with your access.
          </p>
        </div>
      </section>
    </>
  )
}