// chrome.jsx — Header (desktop + mobile), Footer. Tailwind utilities.

function Header({ sticky = false }) {
  return (
    <header className={`${sticky ? 'sticky' : 'relative'} top-0 z-50 bg-white border-b border-solid border-line`}>
      {/* Utility row */}
      <div className="bg-gray-900 text-white/[0.75] text-[13px] px-14 py-2 flex justify-between items-center font-body">
        <div className="flex gap-[22px] items-center">
          <span className="inline-flex gap-1.5 items-center">
            <I.Mail /> Kontaktformular
          </span>
        </div>
        <div className="flex gap-[18px] items-center">
          <a href="#" className="text-inherit no-underline">Schulen</a>
          <a href="#" className="text-inherit no-underline">Medien</a>
          <a href="#" className="text-inherit no-underline">Karriere</a>
        </div>
      </div>

      {/* Main nav */}
      <div className="px-14 py-[18px] flex items-center gap-12">
        <Logo size="md" />
        <nav className="flex gap-9 ml-auto items-center font-display font-medium text-[17px] text-gray-900">
          {['Fahrplan', 'Angebot', 'Unternehmung', 'Kontakt'].map((label, i) =>
          <a key={label} href="#" className="no-underline relative py-1.5" style={{
            color: i === 0 ? 'var(--brand-orange-dark)' : 'inherit',
            borderBottom: i === 0 ? '2px solid var(--brand-orange)' : '2px solid transparent'
          }}>{label}</a>
          )}
        </nav>
        <button className="btn btn-primary">
          <I.Search /> Suchen
        </button>
      </div>
      {/* Orange accent rule */}
      <div className="h-1 bg-brand-orange" />
    </header>);

}

function HeaderMobile() {
  return (
    <header className="bg-white border-b border-solid border-line">
      <div className="px-[18px] py-3.5 flex items-center justify-between">
        <Logo size="sm" />
        <div className="flex items-center gap-2.5">
          <button className="w-[42px] h-[42px] rounded-[12px] bg-brand-orange text-white border-0 flex items-center justify-center"><I.Search /></button>
          <button className="w-[42px] h-[42px] rounded-[12px] bg-bg text-gray-900 border-0 flex items-center justify-center"><I.Menu /></button>
        </div>
      </div>
      <div className="h-[3px] bg-brand-orange" />
    </header>);

}

function HeaderMobileOpen() {
  const items = [
  { label: 'Fahrplan', icon: <I.Search />, active: true },
  { label: 'Angebot', icon: <I.Ticket /> },
  { label: 'Unternehmung', icon: <I.Briefcase /> },
  { label: 'Kontakt', icon: <I.Mail /> }];

  return (
    <div className="bg-white h-full flex flex-col">
      <div className="px-[18px] py-3.5 flex items-center justify-between border-b border-solid border-line">
        <Logo size="sm" />
        <button className="w-[42px] h-[42px] rounded-[12px] bg-bg text-gray-900 border-0 flex items-center justify-center"><I.Close /></button>
      </div>
      <nav className="px-[18px] py-3 flex-1">
        {items.map((item, i) =>
        <a key={i} href="#" className="flex items-center gap-4 px-3.5 py-4 rounded-[12px] no-underline font-display font-semibold text-[17px]" style={{
          background: item.active ? 'var(--brand-orange-tint)' : 'transparent',
          color: item.active ? 'var(--brand-orange-dark)' : 'var(--gray-900)'
        }}>
            <span className="w-9 h-9 inline-flex items-center justify-center rounded-[10px]" style={{
            background: item.active ? 'white' : 'var(--bg)',
            color: item.active ? 'var(--brand-orange-dark)' : 'var(--gray-600)'
          }}>{item.icon}</span>
            <span className="flex-1">{item.label}</span>
            <I.Arrow />
          </a>
        )}
      </nav>
      <div className="px-[18px] py-5 border-t border-solid border-line bg-bg">
        <div className="flex gap-2.5 mb-3.5">
          <button className="btn btn-primary flex-1 justify-center">
            <I.Search /> Suchen
          </button>
          <button className="btn btn-ghost justify-center px-[18px] py-3.5">
            <I.Lang /> DE
          </button>
        </div>
        <div className="text-[13px] text-gray-600 text-center">
          +41 41 874 78 78 · info@aagu.ch
        </div>
      </div>
    </div>);

}

function Footer() {
  const cols = [
  { title: 'Fahrplan', items: ['Online-Fahrplan', 'Linienübersicht', 'Haltestellen', 'Echtzeit', 'Störungen'] },
  { title: 'Tickets', items: ['Einzelbillette', 'Mehrfahrtenkarten', 'Abonnemente', 'Verkaufsstellen', 'Tarifzonen'] },
  { title: 'Freizeit', items: ['Gotthard-Rundfahrt', 'Klausenpass', 'Schneespass', 'Urnersee-Ticket', 'Gruppenreisen'] },
  { title: 'Unternehmen', items: ['Über uns', 'Karriere', 'Medien', 'Nachhaltigkeit', 'Kontakt'] }];

  return (
    <footer className="bg-gray-900 text-white/[0.75]">
      <div className="max-w-[1240px] mx-auto px-14 pt-16 pb-8">
        <div className="grid grid-cols-[1.4fr_repeat(4,1fr)] gap-12 pb-12 border-b border-solid border-white/10" style={{ borderStyle: "none" }}>
          <div>
            <Logo size="md" invert />
            <p className="mt-[18px] text-sm leading-[1.6] max-w-[280px]">
              Ihr Mobilitätspartner im Kanton Uri — seit 1922 verbindet die Auto AG Uri Dörfer, Täler und Menschen.
            </p>
            <p className="mt-3.5 text-[13px] leading-[1.6] text-white/[0.55]">
              Ried 1, 6467 Schattdorf<br />
              +41 41 874 78 78 · info@aagu.ch
            </p>
            <div className="flex gap-2.5 mt-[22px]">
              <a href="#" className={socialLink}><I.Facebook /></a>
              <a href="#" className={socialLink}><I.Instagram /></a>
              <a href="#" className={socialLink}><I.LinkedIn /></a>
            </div>
          </div>
          {cols.map((col) =>
          <div key={col.title}>
              <h4 className="text-white font-display font-bold text-[15px] uppercase mb-[18px]">{col.title}</h4>
              <ul className="list-none p-0 m-0 flex flex-col gap-2.5">
                {col.items.map((it) =>
              <li key={it}><a href="#" className="text-inherit no-underline text-sm">{it}</a></li>
              )}
              </ul>
            </div>
          )}
        </div>
        <div className="flex justify-between items-center pt-6 text-[13px]">
          <div>© 2026 Auto AG Uri · Ried 1, 6467 Schattdorf</div>
          <div className="flex gap-6">
            <a href="#" className="text-inherit no-underline">Impressum</a>
            <a href="#" className="text-inherit no-underline">Datenschutz</a>
            <a href="#" className="text-inherit no-underline">AGB</a>
          </div>
        </div>
      </div>
      <div className="h-1 bg-brand-orange" />
    </footer>);

}

const socialLink = "w-10 h-10 rounded-[12px] bg-white/[0.08] inline-flex items-center justify-center text-white no-underline";

Object.assign(window, { Header, HeaderMobile, HeaderMobileOpen, Footer });