import Link from 'next/link'

/**
 * Public marketing shell — approved prototype design (navy + safety amber).
 * No session required anywhere under this layout; signed-in visitors who click
 * "Sign in" are bounced straight to their dashboard by the proxy. Pages stay
 * fully static and cheap to serve at scale.
 */

function Logo({ size = 'md', dark = false }: { size?: 'sm' | 'md'; dark?: boolean }) {
  return (
    <span className="flex items-center gap-2">
      <span
        className={`grid place-items-center rounded-lg bg-navy-900 font-extrabold text-amber-brand ${
          size === 'sm' ? 'h-8 w-8 text-xs' : 'h-9 w-9 text-sm'
        }`}
      >
        H
      </span>
      <span className={`font-bold tracking-tight ${dark ? 'text-white' : 'text-ink'} ${size === 'sm' ? 'text-sm' : 'text-base'}`}>
        HeavyHaul Agent
      </span>
    </span>
  )
}

export default function MarketingLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex min-h-screen flex-col bg-white text-ink">
      <header className="sticky top-0 z-40 border-b border-line bg-white/85 backdrop-blur">
        <div className="mx-auto flex h-16 max-w-6xl items-center justify-between px-6">
          <Link href="/">
            <Logo />
          </Link>
          <nav className="hidden items-center gap-7 text-sm font-medium text-slate-body md:flex">
            <Link href="/#roles" className="hover:text-ink">Who it&apos;s for</Link>
            <Link href="/#modules" className="hover:text-ink">Intelligence modules</Link>
            <Link href="/#how" className="hover:text-ink">How it works</Link>
            <Link href="/blog" className="hover:text-ink">Blog</Link>
          </nav>
          <div className="flex items-center gap-3">
            <Link
              href="/login"
              className="hidden rounded-lg px-3.5 py-2 text-sm font-semibold text-ink hover:bg-paper sm:block"
            >
              Sign in
            </Link>
            <Link
              href="/#early-access"
              className="rounded-lg bg-navy-900 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-navy-800"
            >
              Get Early Access
            </Link>
          </div>
        </div>
      </header>

      <main className="flex-1">{children}</main>

      <footer className="border-t border-line bg-white">
        <div className="mx-auto flex max-w-6xl flex-col gap-6 px-6 py-10 md:flex-row md:items-start md:justify-between">
          <div className="space-y-3">
            <Logo size="sm" />
            <nav className="flex flex-wrap gap-5 text-xs font-medium text-slate-body">
              <Link href="/brokers" className="hover:text-ink">For Brokers</Link>
              <Link href="/carriers" className="hover:text-ink">For Carriers</Link>
              <Link href="/drivers" className="hover:text-ink">For Drivers</Link>
              <Link href="/blog" className="hover:text-ink">Blog</Link>
              <Link href="/login" className="hover:text-ink">Sign in</Link>
              <Link href="/#early-access" className="hover:text-ink">Early access</Link>
            </nav>
          </div>
          <p className="max-w-xl text-xs leading-relaxed text-slate-body">
            HeavyHaul Agent provides decision support, document organization, and interpretation
            support. It does not replace the official permit and does not guarantee compliance. The
            driver and carrier remain responsible for reading permits, understanding restrictions,
            and operating legally.
          </p>
        </div>
        <div className="border-t border-line py-4 text-center text-xs text-slate-body/70">
          © {new Date().getFullYear()} HeavyHaul Agent
        </div>
      </footer>
    </div>
  )
}