// blocks.jsx — all modular content blocks (Tailwind utilities).
// Each block is exported individually; pages.jsx composes them.
// Section padding stays centralised in .block-inner / .block-inner-tight
// (styles.css) so every block shares one uniform rhythm. Card interiors
// are unified to p-6 (24px). Dynamic colors (line colors, hero scrims)
// remain inline since Tailwind can't express runtime values.

// ─────────────────────────────────────────────────────────────
// Helper: BlockMeta strip — shown only in the design canvas.
// ─────────────────────────────────────────────────────────────
function BlockMeta({name, variant, notes}) {
  return (
    <div className="block-meta">
      <div className="flex items-center gap-3.5">
        <span className="tag">BLOCK</span>
        <span className="meta-name">{name}</span>
        {variant && <span className="opacity-70">· {variant}</span>}
      </div>
      {notes && <span className="opacity-60">{notes}</span>}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 1) HERO — simple with background image
// ─────────────────────────────────────────────────────────────
function HeroSimple({
  eyebrow = "Saisonhit",
  title = "Gotthard-Rundfahrt",
  body = "Legendäre Passroute über den historischen Gotthard — Geschichte, Panorama und Abenteuer in einer unvergesslichen Tour.",
  bgClass = "bg-mountain-sunset",
  height = 540,
  showMeta = true,
}) {
  return (
    <div className="block">
      {showMeta && <BlockMeta name="hero / simple" variant="background image, no widget"/>}
      <div className={`${bgClass} relative`} style={{minHeight: height}}>
        {/* Dark scrim */}
        <div className="absolute inset-0" style={{background: 'linear-gradient(180deg, rgba(0,0,0,0.0) 30%, rgba(0,0,0,0.55) 100%)'}}/>
        <div className="block-inner relative flex flex-col justify-end pb-14" style={{minHeight: height}}>
          <h1 className="text-[64px] font-extrabold text-white leading-[1.05] tracking-[-0.02em] mb-[18px]">{title}</h1>
          <p className="text-[19px] text-white/[0.88] max-w-[640px] leading-[1.5]">{body}</p>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 2) HERO — with widget (homepage hero)
// ─────────────────────────────────────────────────────────────
function HeroWithWidget({showMeta = true, height = 720, bgClass = "img-ph"}) {
  const variant = (typeof document !== 'undefined' && document.body && document.body.dataset.heroVariant) || 'dark';
  const scrims = {
    dark:   'linear-gradient(90deg, rgba(15,22,35,0.78) 0%, rgba(15,22,35,0.55) 50%, rgba(15,22,35,0.35) 100%)',
    sunset: 'linear-gradient(90deg, rgba(15,22,35,0.60) 0%, rgba(15,22,35,0.30) 50%, rgba(15,22,35,0.15) 100%)',
    day:    'linear-gradient(90deg, rgba(15,22,35,0.35) 0%, rgba(15,22,35,0.10) 60%, transparent 100%)',
  };
  const scrim = scrims[variant] || scrims.dark;
  return (
    <div className="block">
      {showMeta && <BlockMeta name="hero / with widget" variant="background image + Fahrplan widget" notes="homepage exclusive"/>}
      <div className="relative overflow-hidden" style={{minHeight: height}}>
        <div className={`${bgClass} absolute inset-0`}/>
        <div className="absolute inset-0" style={{background: scrim}}/>

        <div className="block-inner relative grid grid-cols-[1.05fr_0.95fr] items-center gap-16" style={{minHeight: height}}>
          <div>
            <h1 className="text-[76px] font-extrabold text-white leading-[1.02] tracking-[-0.025em] mb-[22px]" style={{textShadow: '0 2px 18px rgba(0,0,0,0.25)'}}>
              Unterwegs mit<br/>
              <span className="text-brand-orange">Auto AG Uri</span>
            </h1>
            <p className="text-xl text-white/[0.92] max-w-[480px] leading-[1.5] mb-8" style={{textShadow: '0 1px 8px rgba(0,0,0,0.25)'}}>
              Ihr zuverlässiger Mobilitätspartner im Kanton Uri — verbindet Dörfer, Täler und Menschen seit 1922.
            </p>
            <div className="flex gap-3 mt-4">
              <button className="btn btn-primary btn-lg">Mehr erfahren <I.Arrow/></button>
            </div>
          </div>
          <div><FahrplanWidget mode="fahrplan"/></div>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 3) CALL TO ACTION — dark with side image
// ─────────────────────────────────────────────────────────────
function CTABlock({
  title = "Werde Teil unseres Teams",
  eyebrow = "Jetzt bewerben",
  body = "Wir suchen engagierte Fachleute, die Uri mobil halten. Entdecke offene Stellen bei Auto AG Uri.",
  items = [
    {icon: <I.Bus/>, title: "Bus-Chauffeur/euse Kat. D (80–100%)", meta: "Schattdorf"},
    {icon: <I.Wrench/>, title: "Automobil-Mechatroniker/in", meta: "Schattdorf"},
  ],
  cta = "Alle Jobs ansehen",
  bgClass = "bg-bus-night",
  showMeta = true,
}) {
  return (
    <div className="block bg-bg">
      {showMeta && <BlockMeta name="call to action" variant="dark card / split image"/>}
      <div className="block-inner-tight">
        <div className="grid grid-cols-2 bg-gray-900 rounded-[24px] overflow-hidden shadow-md" style={{minHeight: 460}}>
          <div className="p-12 flex flex-col justify-center">
            <div className="font-display font-bold text-[13px] tracking-[0.14em] uppercase text-brand-orange mb-3.5">{eyebrow}</div>
            <h2 className="text-[44px] font-extrabold text-white leading-[1.05] tracking-[-0.02em] mb-4">{title}</h2>
            <p className="text-base text-white/[0.72] leading-[1.6] mb-7">{body}</p>

            <div className="flex flex-col gap-2.5 mb-[30px]">
              {items.map((it, i) => (
                <div key={i} className="flex items-center gap-3.5 p-3.5 bg-white/[0.06] rounded-md">
                  <span className="w-11 h-11 rounded-[10px] bg-brand-orange-tint text-brand-orange-dark inline-flex items-center justify-center">{it.icon}</span>
                  <div>
                    <div className="font-display font-bold text-white text-[15px]">{it.title}</div>
                    <div className="text-[13px] text-white/[0.55] inline-flex items-center gap-1 mt-0.5">
                      <I.Pin width="13" height="13"/> {it.meta}
                    </div>
                  </div>
                </div>
              ))}
            </div>

            <button className="btn btn-primary btn-lg self-start">
              <I.Briefcase/> {cta}
            </button>
          </div>
          <div className={`${bgClass} relative`}>
            <div className="absolute top-4 right-4 bg-black/[0.45] text-white/[0.85] px-2.5 py-1 rounded-xs text-[11px] font-mono">[photo: bus at depot]</div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 4) CARDS GRID — image cards with link
// ─────────────────────────────────────────────────────────────
function CardsGrid({
  eyebrow = "Mit dem Bus erleben",
  title = "Spezialangebote & Freizeit",
  more = "Alle Angebote",
  showMeta = true,
  cards = [
    {title: 'Gotthard-Rundfahrt',     body: 'Entdecken Sie die legendäre Gotthard-Route — von Altdorf durch das Urserental bis auf den Pass.', bg: 'bg-mountain-sunset'},
    {title: 'Urnersee-Ticket',        body: 'Bus & Schiff kombiniert — rund um den wunderschönen Urnersee mit traumhaftem Alpenpanorama.',   bg: 'bg-lake'},
    {title: 'Schneespass Andermatt',  body: 'Mit dem Skipass direkt in die Skiarena Andermatt — ohne Stau und Parkplatzsorgen.',              bg: 'bg-ski'},
    {title: 'Klausenpass Linie',      body: 'Spektakuläre Alpenkulisse — die Linie verbindet Uri mit Glarus über den Klausenpass auf 1948 m.',  bg: 'bg-mountain-day'},
  ],
}) {
  return (
    <div className="block bg-bg">
      {showMeta && <BlockMeta name="cards / grid with image" variant="4-up / linkable"/>}
      <div className="block-inner">
        <div className="flex items-end justify-between mb-9 gap-6">
          <div>
            {eyebrow && <div className="eyebrow mb-2.5">{eyebrow}</div>}
            <h2 className="text-[44px] font-extrabold tracking-[-0.02em]">{title}</h2>
          </div>
          {more && <a href="#" className="link-arrow">{more} <I.Arrow/></a>}
        </div>

        <div className="grid grid-cols-4 gap-5">
          {cards.map((c, i) => (
            <div key={i} className="bg-white rounded-[18px] overflow-hidden shadow-card flex flex-col">
              <div className={`${c.bg} relative aspect-[4/3]`}/>
              <div className="p-6 flex flex-col gap-2.5 flex-1">
                <h3 className="text-xl font-bold">{c.title}</h3>
                <p className="text-sm text-gray-600 leading-[1.55] flex-1">{c.body}</p>
                <a href="#" className="link-arrow mt-2">Mehr erfahren <I.Arrow/></a>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 5) CARDS COMPACT — icon + title + arrow (linkable rows)
// ─────────────────────────────────────────────────────────────
function CardsLinks({
  title = "Schnellzugriff",
  eyebrow = "",
  showMeta = true,
  cards = [
    {icon: <I.Ticket/>,   title: 'Einzelbillette',     body: 'Tickets online kaufen — gültig auf allen Linien.'},
    {icon: <I.Bus/>,      title: 'Linien & Karte',     body: 'Übersicht aller 28 Linien im Kanton Uri.'},
    {icon: <I.Calendar/>, title: 'Fahrplanwechsel',    body: 'Alle Änderungen ab dem 1. Mai 2026.'},
    {icon: <I.Briefcase/>,title: 'Karriere bei AAGU',  body: 'Offene Stellen und Lehrstellen — jetzt bewerben.'},
  ],
}) {
  return (
    <div className="block">
      {showMeta && <BlockMeta name="cards / compact links" variant="icon + title + body + arrow"/>}
      <div className="block-inner">
        {(title || eyebrow) && (
          <div className="mb-7">
            {eyebrow && <div className="eyebrow mb-2">{eyebrow}</div>}
            {title && <h2 className="text-4xl font-extrabold tracking-[-0.02em]">{title}</h2>}
          </div>
        )}
        <div className="grid grid-cols-4 gap-4">
          {cards.map((c, i) => (
            <a key={i} href="#" className="flex flex-col p-6 bg-white rounded-[18px] border border-solid border-line no-underline text-inherit transition-[border,transform] duration-150">
              <span className="w-13 h-13 rounded-md bg-brand-orange-tint text-brand-orange-dark inline-flex items-center justify-center mb-[18px] self-start">{c.icon}</span>
              <h3 className="text-lg font-bold mb-1.5">{c.title}</h3>
              <p className="text-sm text-gray-600 leading-[1.5] flex-1">{c.body}</p>
              <span className="link-arrow mt-4">Öffnen <I.Arrow/></span>
            </a>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 6) STATS — inline (icons with big numbers)
// ─────────────────────────────────────────────────────────────
function StatsInline({
  showMeta = true,
  stats = [
    {icon: <I.Route/>,    value: "28",   unit: "",      label: "Linien"},
    {icon: <I.Pin/>,      value: "180",  unit: "",      label: "Haltestellen"},
    {icon: <I.Users/>,    value: "3 Mio.", unit: "",    label: "Fahrgäste · Jahr"},
    {icon: <I.Clock/>,    value: "99,7", unit: "%",     label: "Pünktlichkeit"},
  ],
}) {
  return (
    <div className="block bg-bg">
      {showMeta && <BlockMeta name="statistics / inline" variant="icons + numbers, no card"/>}
      <div className="block-inner-tight">
        <div className="grid grid-cols-4 gap-6">
          {stats.map((s, i) => (
            <div key={i} className="text-center">
              <div className="w-14 h-14 mx-auto mb-[18px] rounded-[16px] bg-brand-orange-tint text-brand-orange inline-flex items-center justify-center">{s.icon}</div>
              <div className="font-display font-extrabold text-[52px] text-brand-orange leading-none tracking-[-0.03em]">{s.value}<span className="text-[22px] ml-1">{s.unit}</span></div>
              <div className="mt-2 text-gray-600 text-[15px]">{s.label}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 7) STATS — boxed (white cards with icon + dark number)
// ─────────────────────────────────────────────────────────────
function StatsBoxed({
  showMeta = true,
  stats = [
    {icon: <I.Clock/>,    value: "ca. 4 h",  label: "Gesamtdauer"},
    {icon: <I.Road/>,     value: "120 km",   label: "Strecke"},
    {icon: <I.Mountain/>, value: "2 106 m",  label: "Höchstpunkt"},
    {icon: <I.Calendar/>, value: "Jun–Okt",  label: "Saison"},
  ],
}) {
  return (
    <div className="block">
      {showMeta && <BlockMeta name="statistics / boxed" variant="white cards / dark numbers"/>}
      <div className="block-inner-tight">
        <div className="grid grid-cols-4 gap-4">
          {stats.map((s, i) => (
            <div key={i} className="bg-white rounded-[18px] border border-solid border-line p-6 text-center">
              <div className="w-13 h-13 mx-auto mb-4 rounded-md bg-brand-orange-tint text-brand-orange inline-flex items-center justify-center">{s.icon}</div>
              <div className="font-display font-extrabold text-[28px] text-gray-900 tracking-[-0.02em]">{s.value}</div>
              <div className="mt-1.5 text-gray-600 text-sm">{s.label}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 8) NEWS GRID — split cards (image left, text right)
// ─────────────────────────────────────────────────────────────
function NewsGrid({
  title = "Aktuelle News",
  more = "Alle News",
  showMeta = true,
  items = [
    {date: '12. April 2026', title: 'Neue Elektrobusse im Einsatz',   body: 'Die Auto AG Uri setzt einen weiteren Schritt in Richtung Nachhaltigkeit und nimmt drei neue…', bg: 'bg-bus-night'},
    {date: '05. April 2026', title: 'Fahrplanwechsel Sommer',          body: 'Bitte beachten Sie die neuen Abfahrtszeiten auf diversen Linien ab dem 1. Mai. Alle Details find…', bg: 'bg-mountain-day'},
  ],
}) {
  return (
    <div className="block bg-bg">
      {showMeta && <BlockMeta name="news / grid" variant="split cards: image + meta + title + teaser"/>}
      <div className="block-inner">
        <div className="flex items-end justify-between mb-7 pb-[18px] border-b border-solid border-line">
          <h2 className="text-4xl font-extrabold tracking-[-0.02em]">{title}</h2>
          {more && <a href="#" className="link-arrow">{more} <I.Arrow/></a>}
        </div>
        <div className="grid grid-cols-2 gap-6">
          {items.map((it, i) => (
            <article key={i} className="grid grid-cols-[0.85fr_1.15fr] bg-white rounded-[18px] overflow-hidden shadow-card">
              <div className={`${it.bg} min-h-[220px]`}/>
              <div className="p-6 flex flex-col gap-3">
                <div className="inline-flex items-center gap-2 text-brand-orange-dark text-[13px] font-semibold">
                  <I.Calendar width="16" height="16"/> {it.date}
                </div>
                <h3 className="text-[22px] font-bold leading-[1.25]">{it.title}</h3>
                <p className="text-sm text-gray-600 leading-[1.55] flex-1">{it.body}</p>
                <a href="#" className="link-arrow mt-1">Weiterlesen <I.Arrow/></a>
              </div>
            </article>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 9) IMAGE + TEXT (50/50)
// ─────────────────────────────────────────────────────────────
function ImageText({
  eyebrow = "Über uns",
  title = "Seit 1922 bewegen wir Uri",
  body = "Was als kleines Postautounternehmen begann, ist heute das zuverlässige Rückgrat der öffentlichen Mobilität im Kanton Uri. Mit 28 Linien, 180 Haltestellen und einer modernen, zunehmend elektrischen Flotte verbinden wir Stadt und Berg, Schule und Arbeit, Alltag und Abenteuer.",
  bullets = [
    "100% Anschluss an SBB-Knoten",
    "Schrittweise Umstellung auf Elektroflotte bis 2030",
    "Ausbildungsbetrieb mit 12 Lehrstellen",
  ],
  imgClass = "bg-mountain-day",
  imageRight = true,
  showMeta = true,
}) {
  const text = (
    <div className="px-2">
      {eyebrow && <div className="eyebrow mb-3">{eyebrow}</div>}
      <h2 className="text-[44px] font-extrabold tracking-[-0.02em] mb-[18px]">{title}</h2>
      <p className="text-[17px] text-gray-600 leading-[1.6] mb-6">{body}</p>
      <ul className="list-none p-0 m-0 flex flex-col gap-2.5">
        {bullets.map((b, i) => (
          <li key={i} className="flex items-center gap-3 text-gray-900 text-[15px]">
            <span className="w-[26px] h-[26px] rounded-[8px] bg-brand-orange-tint text-brand-orange-dark inline-flex items-center justify-center"><I.Check width="16" height="16"/></span>
            {b}
          </li>
        ))}
      </ul>
      <button className="btn btn-ghost mt-7">Mehr über uns <I.Arrow/></button>
    </div>
  );
  const image = (
    <div className={`${imgClass} rounded-[22px] relative aspect-[5/4]`}>
      <div className="absolute bottom-4 right-4 bg-black/[0.45] text-white/[0.85] px-2.5 py-1 rounded-xs text-[11px] font-mono">[photo: alps + depot]</div>
    </div>
  );
  return (
    <div className="block">
      {showMeta && <BlockMeta name="image + text" variant={imageRight ? "image right" : "image left"}/>}
      <div className="block-inner">
        <div className="grid grid-cols-2 gap-14 items-center">
          {imageRight ? <>{text}{image}</> : <>{image}{text}</>}
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 10) FAQ ACCORDION
// ─────────────────────────────────────────────────────────────
function FAQ({
  title = "Häufige Fragen",
  eyebrow = "FAQ",
  showMeta = true,
  items = [
    {q: 'Wo kann ich Billette kaufen?', a: 'Billette gibt es online, in unserer App, an den Verkaufsstellen sowie direkt im Bus beim Chauffeur. Wir akzeptieren bar, Karte und TWINT.', open: true},
    {q: 'Sind Hunde im Bus erlaubt?',   a: 'Ja, Hunde sind in unseren Bussen herzlich willkommen. Kleine Hunde reisen kostenlos, für grössere Hunde gilt der halbe Tarif.'},
    {q: 'Wie funktioniert das Tarifsystem?', a: 'Der Kanton Uri ist Teil des Tarifverbunds. Tickets sind zonenbasiert und gelten auf allen Linien innerhalb der gewählten Zonen.'},
    {q: 'Gibt es Rabatte für Schulen oder Gruppen?', a: 'Für Schulklassen und Gruppen ab 10 Personen bieten wir attraktive Konditionen. Kontaktieren Sie uns unter info@aagu.ch.'},
  ],
}) {
  return (
    <div className="block">
      {showMeta && <BlockMeta name="faq / accordion" variant="single column"/>}
      <div className="block-inner max-w-[880px]">
        <div className="mb-8 text-center">
          <div className="eyebrow mb-2">{eyebrow}</div>
          <h2 className="text-[40px] font-extrabold tracking-[-0.02em]">{title}</h2>
        </div>
        <div className="flex flex-col gap-3">
          {items.map((it, i) => (
            <div key={i} className="bg-white border border-solid border-line rounded-[16px] overflow-hidden">
              <div className="px-6 py-5 flex items-center gap-4 cursor-pointer" style={{background: it.open ? 'var(--brand-orange-tint)' : 'white'}}>
                <h3 className="flex-1 text-lg font-bold" style={{color: it.open ? 'var(--brand-orange-dark)' : 'var(--gray-900)'}}>{it.q}</h3>
                <span className="w-8 h-8 rounded-[8px] inline-flex items-center justify-center" style={{
                  background: it.open ? 'var(--brand-orange)' : 'var(--bg)',
                  color: it.open ? 'white' : 'var(--gray-800)',
                }}>{it.open ? <I.Minus/> : <I.Plus/>}</span>
              </div>
              {it.open && (
                <div className="px-6 pb-[22px] text-gray-600 text-[15px] leading-[1.6]">
                  {it.a}
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 11) QUOTE / TESTIMONIAL
// ─────────────────────────────────────────────────────────────
function QuoteBlock({
  quote = "«Ohne die AAGU käme mein Sohn nie pünktlich in die Schule — und ich nie zur Arbeit. Auf den gelben Bus ist einfach Verlass.»",
  author = "Andrea Gisler",
  role = "Pendlerin · Bürglen",
  showMeta = true,
}) {
  return (
    <div className="block bg-gray-900">
      {showMeta && <BlockMeta name="quote / testimonial" variant="centered, dark"/>}
      <div className="block-inner max-w-[880px] text-center text-white">
        <span className="text-brand-orange"><I.Quote/></span>
        <blockquote className="font-display text-[32px] leading-[1.3] tracking-[-0.015em] mt-3.5 mb-[26px]" style={{fontWeight: 600}}>
          {quote}
        </blockquote>
        <div className="inline-flex items-center gap-3.5">
          <div className="w-12 h-12 rounded-full inline-flex items-center justify-center text-white font-display font-bold text-lg" style={{background: 'linear-gradient(135deg, var(--brand-orange) 0%, var(--brand-orange-dark) 100%)'}}>AG</div>
          <div className="text-left">
            <div className="font-bold text-white">{author}</div>
            <div className="text-sm text-white/[0.6]">{role}</div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 12) SECTION HEADER (used on sub-pages)
// ─────────────────────────────────────────────────────────────
function SectionHeader({
  crumbs = ['Home', 'Freizeit', 'Gotthard-Rundfahrt'],
  title = "Gotthard-Rundfahrt",
  body = "Eine Tagesreise über den historischen Alpenpass — auf den Spuren der Säumer, durch Tunnel und Serpentinen bis zum Hospiz.",
  showMeta = true,
}) {
  const last = crumbs.length - 1;
  return (
    <div className="block">
      {showMeta && <BlockMeta name="section header" variant="breadcrumbs + title + intro"/>}
      <div className="block-inner-tight pt-10 pb-5">
        <nav className="flex gap-2.5 text-sm text-gray-500 mb-5">
          {crumbs.map((c, i) => (
            <React.Fragment key={i}>
              <a href="#" className="no-underline" style={{color: i === last ? 'var(--gray-900)' : 'inherit', fontWeight: i === last ? 600 : 400}}>{c}</a>
              {i < last && <span className="opacity-50">/</span>}
            </React.Fragment>
          ))}
        </nav>
        <h1 className="text-[56px] font-extrabold tracking-[-0.025em] mb-4 max-w-[800px]">{title}</h1>
        <p className="text-[19px] text-gray-600 leading-[1.55] max-w-[720px]">{body}</p>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 13) RICH TEXT (long-form copy)
// ─────────────────────────────────────────────────────────────
function RichText({showMeta = true}) {
  return (
    <div className="block">
      {showMeta && <BlockMeta name="rich text" variant="long-form prose"/>}
      <div className="block-inner-tight max-w-[780px]">
        <h2 className="text-[28px] font-bold mb-3.5">Eine Reise durch die Urner Geschichte</h2>
        <p className="text-[17px] text-gray-800 leading-[1.7] mb-4">
          Die Gotthard-Route ist mehr als nur eine Strasse — sie ist eine der ältesten Nord-Süd-Verbindungen Europas. Schon im 13. Jahrhundert führten die Säumer ihre Maultiere über den Pass. Heute fährt der Linienbus zwischen Mai und Oktober mehrmals täglich über die Tremola, die längste noch erhaltene Pflastersteinstrasse der Schweiz.
        </p>
        <h3 className="text-[22px] font-bold mt-7 mb-2.5">Was Sie unterwegs erleben</h3>
        <p className="text-[17px] text-gray-800 leading-[1.7] mb-4">
          Unsere Chauffeur:innen kennen jede Kurve und teilen ihr Wissen gerne. Halten Sie in Andermatt für einen Kaffee, besuchen Sie das Sasso-San-Gottardo-Museum oder geniessen Sie das Panorama vom Hospiz. Ab Airolo geht es zurück durch das Tessin — oder mit dem Zug durch den Basistunnel.
        </p>
        <div className="mt-7 px-[22px] py-5 bg-brand-orange-tint border-l-4 border-solid border-brand-orange rounded-[12px] text-[15px] text-gray-800">
          <strong className="text-brand-orange-dark">Tipp:</strong> Reservieren Sie an Wochenenden vor — die Fahrt ist beliebt und die Plätze sind begrenzt.
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 15) LINES — official line-color grid (CD-conformant)
// ─────────────────────────────────────────────────────────────
function LinesBlock({
  eyebrow = "Liniennetz",
  title = "Alle Linien auf einen Blick",
  more = "Zum Liniennetzplan",
  showMeta = true,
  lines = [
    {nr: '401', color: 'var(--line-401)', name: 'Flüelen – Göschenen',    info: 'Reusstal'},
    {nr: '402', color: 'var(--line-402)', name: 'Attinghausen – Bürglen', info: 'Urner Talboden'},
    {nr: '403', color: 'var(--line-403)', name: 'Seedorf – Bürglen',      info: 'Urnersee'},
    {nr: '405', color: 'var(--line-405)', name: 'Schattdorf – Isenthal',  info: 'Isenthal'},
    {nr: '407', color: 'var(--line-407)', name: 'Amsteg – Bristen',       info: 'Maderanertal'},
    {nr: '408', color: 'var(--line-408)', name: 'Attinghausen – Linthal', info: 'Klausenpass'},
    {nr: '411', color: 'var(--line-411)', name: 'Göschenen – Göscheneralp', info: 'Saisonal'},
    {nr: '412', color: 'var(--line-412)', name: 'Altdorf – Amsteg',       info: 'Stadtnetz'},
    {nr: '413', color: 'var(--line-413)', name: 'Flüelen – Altdorf',      info: 'Stadtnetz'},
    {nr: '493', color: 'var(--line-493)', name: 'Altdorf – Luzern',       info: 'Tellbus'},
  ],
}) {
  return (
    <div className="block">
      {showMeta && <BlockMeta name="lines / official routes" variant="CD-conform line colors"/>}
      <div className="block-inner">
        <div className="flex items-end justify-between mb-7 gap-6">
          <div>
            {eyebrow && <div className="eyebrow mb-2.5">{eyebrow}</div>}
            <h2 className="text-[40px] font-extrabold tracking-[-0.02em]">{title}</h2>
          </div>
          {more && <a href="#" className="link-arrow">{more} <I.Arrow/></a>}
        </div>
        <div className="grid grid-cols-5 gap-3">
          {lines.map(l => (
            <a key={l.nr} href="#" className="flex flex-col p-[18px] bg-white border border-solid border-line rounded-[16px] border-t-4 no-underline text-inherit gap-2.5" style={{borderTopColor: l.color}}>
              <span className="w-fit px-3 py-1 rounded-[8px] font-display font-extrabold text-lg" style={{
                background: l.color,
                color: l.nr === '493' ? 'white' : (l.color === 'var(--line-postauto)' ? 'var(--gray-900)' : 'white'),
              }}>{l.nr}</span>
              <div className="font-display font-bold text-[15px] leading-[1.25]">{l.name}</div>
              <div className="text-xs text-gray-500 mt-auto">{l.info}</div>
            </a>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 16) STEPS — numbered process / workflow
// ─────────────────────────────────────────────────────────────
function StepsBlock({
  eyebrow = "So funktionierts",
  title = "In vier Schritten zur Gruppenreise",
  steps = [
    {n: '1', title: 'Anfrage ausfüllen',  body: 'Reichen Sie die Anfrage über unser Online-Formular ein — spätestens 2 Werktage vor Abreise.'},
    {n: '2', title: 'Bestätigung erhalten', body: 'Wir prüfen die Verbindung und melden uns mit der Buchungsbestätigung bei Ihnen.'},
    {n: '3', title: 'Billett beziehen',   body: 'Gruppenbillette erhalten Sie am AAGU-Schalter in Schattdorf, im Bus oder über die SBB.'},
    {n: '4', title: 'Losfahren',          body: 'Steigen Sie an der angegebenen Haltestelle ein — der Chauffeur erwartet Sie.'},
  ],
  showMeta = true,
}) {
  return (
    <div className="block">
      {showMeta && <BlockMeta name="steps / process" variant="numbered workflow"/>}
      <div className="block-inner">
        <div className="text-center mb-12 max-w-[720px] mx-auto">
          {eyebrow && <div className="eyebrow mb-2.5">{eyebrow}</div>}
          <h2 className="text-[44px] font-extrabold tracking-[-0.02em]">{title}</h2>
        </div>
        <div className="grid relative" style={{gridTemplateColumns: `repeat(${steps.length}, 1fr)`}}>
          {/* Connector line behind the circles */}
          <div className="absolute h-0.5 z-0" style={{
            top: 30,
            left: `calc(${100 / (steps.length * 2)}%)`,
            right: `calc(${100 / (steps.length * 2)}%)`,
            background: 'repeating-linear-gradient(90deg, var(--brand-orange) 0 8px, transparent 8px 16px)',
          }}/>
          {steps.map((s, i) => (
            <div key={i} className="relative z-[1] px-4 text-center">
              <div className="w-[60px] h-[60px] mx-auto mb-5 rounded-full bg-brand-orange text-white font-display font-extrabold text-2xl flex items-center justify-center" style={{boxShadow: '0 0 0 6px var(--bg)'}}>{s.n}</div>
              <h3 className="font-display font-bold text-xl mb-2 tracking-[-0.01em]">{s.title}</h3>
              <p className="text-sm text-gray-600 leading-[1.55]">{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 17) FORM BLOCK — generic form (intro on left, fields on right)
// ─────────────────────────────────────────────────────────────
function FormInput({label, placeholder, value, type = 'text', required = false}) {
  return (
    <label className="flex flex-col gap-2">
      <span className="font-display text-[13px] font-semibold text-gray-800">{label}{required && <span className="text-brand-orange ml-1">*</span>}</span>
      <div className="px-4 py-3.5 bg-white border border-solid border-line rounded-[12px] text-[15px] font-body" style={{color: value ? 'var(--gray-900)' : 'var(--gray-500)'}}>{value || placeholder}</div>
    </label>
  );
}

function FormSelect({label, placeholder, value, required = false}) {
  return (
    <label className="flex flex-col gap-2">
      <span className="font-display text-[13px] font-semibold text-gray-800">{label}{required && <span className="text-brand-orange ml-1">*</span>}</span>
      <div className="px-4 py-3.5 bg-white border border-solid border-line rounded-[12px] text-[15px] flex items-center justify-between gap-3" style={{color: value ? 'var(--gray-900)' : 'var(--gray-500)'}}>
        <span>{value || placeholder}</span>
        <I.ChevronDown/>
      </div>
    </label>
  );
}

function FormTextarea({label, placeholder, value, required = false, rows = 5}) {
  return (
    <label className="flex flex-col gap-2">
      <span className="font-display text-[13px] font-semibold text-gray-800">{label}{required && <span className="text-brand-orange ml-1">*</span>}</span>
      <div className="px-4 py-3.5 bg-white border border-solid border-line rounded-[12px] text-[15px] whitespace-pre-wrap" style={{color: value ? 'var(--gray-900)' : 'var(--gray-500)', minHeight: rows * 22 + 28}}>{value || placeholder}</div>
    </label>
  );
}

function FormBlock({
  eyebrow = "Kontakt",
  title = "Gruppenreise anfragen",
  body = "Wir erstellen Ihnen ein unverbindliches Angebot für Ihren Anlass. Innerhalb von 2 Werktagen melden wir uns mit Vorschlägen bei Ihnen.",
  contact = [
    {icon: <I.Phone/>, label: 'Telefon',  value: '+41 41 874 78 78'},
    {icon: <I.Mail/>,  label: 'E-Mail',   value: 'gruppen@aagu.ch'},
    {icon: <I.Pin/>,   label: 'Adresse',  value: 'Ried 1, 6467 Schattdorf'},
  ],
  showMeta = true,
}) {
  return (
    <div className="block bg-bg">
      {showMeta && <BlockMeta name="form" variant="intro left · fields right"/>}
      <div className="block-inner">
        <div className="grid grid-cols-[0.85fr_1.15fr] gap-16 items-start">
          {/* LEFT — Intro */}
          <div className="sticky top-8">
            {eyebrow && <div className="eyebrow mb-3">{eyebrow}</div>}
            <h2 className="text-[44px] font-extrabold tracking-[-0.02em] mb-[18px] leading-[1.05]">{title}</h2>
            <p className="text-[17px] text-gray-600 leading-[1.6] mb-8">{body}</p>
            <div className="flex flex-col gap-4 pt-6 border-t border-solid border-line">
              {contact.map((c, i) => (
                <div key={i} className="flex items-center gap-3.5">
                  <span className="w-10 h-10 rounded-[12px] bg-brand-orange-tint text-brand-orange-dark inline-flex items-center justify-center">{c.icon}</span>
                  <div>
                    <div className="text-xs text-gray-500 font-semibold uppercase">{c.label}</div>
                    <div className="text-[15px] text-gray-900 font-medium">{c.value}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* RIGHT — Form */}
          <form className="bg-white p-8 rounded-lg border border-solid border-line flex flex-col gap-[18px]" onSubmit={e => e.preventDefault()}>
            <div className="grid grid-cols-2 gap-3.5">
              <FormInput label="Vorname" placeholder="Maria" required/>
              <FormInput label="Nachname" placeholder="Gisler" required/>
            </div>
            <FormInput label="E-Mail" type="email" placeholder="maria.gisler@email.ch" required/>
            <FormInput label="Telefon" type="tel" placeholder="+41 79 123 45 67"/>
            <div className="grid grid-cols-[1.5fr_1fr] gap-3.5">
              <FormSelect label="Anlass" placeholder="Bitte auswählen" required/>
              <FormInput label="Personenzahl" type="number" placeholder="z. B. 25" required/>
            </div>
            <FormInput label="Wunschdatum" type="date" placeholder="TT. Monat JJJJ" required/>
            <FormTextarea label="Bemerkungen" placeholder="Abfahrtsort, gewünschte Route, besondere Wünsche …" rows={5}/>

            {/* Checkbox row */}
            <label className="flex items-start gap-3 text-sm text-gray-600 leading-[1.5]">
              <span className="w-5 h-5 rounded-[5px] border-[1.5px] border-solid border-brand-orange bg-brand-orange text-white inline-flex items-center justify-center shrink-0 mt-0.5"><I.Check width="14" height="14"/></span>
              <span>Ich habe die <a href="#" className="text-brand-orange-dark font-semibold">Datenschutzerklärung</a> gelesen und stimme der Verarbeitung meiner Daten zu.</span>
            </label>

            <div className="flex gap-3 items-center mt-2 flex-wrap">
              <button type="submit" className="btn btn-primary btn-lg"><I.Mail/> Anfrage senden</button>
              <span className="text-[13px] text-gray-500">Antwort innert 2 Werktagen</span>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 18) CALL TO ACTION — banner variant
// Full-width primary-color banner · large heading · description · optional button
// ─────────────────────────────────────────────────────────────
function CTABanner({
  eyebrow = null,
  title = "Gruppenreisen für jeden Anlass",
  body = "Schulausflug, Vereinsreise, Hochzeit oder Firmenanlass — chartern Sie einen Bus der Auto AG Uri mit eigenem Chauffeur. Von 8 bis 100 Personen.",
  cta = "Offerte anfragen",
  ctaIcon = <I.Mail/>,
  showButton = true,
  showMeta = true,
}) {
  return (
    <div className="block">
      {showMeta && <BlockMeta name="call to action / banner" variant="full-width · primary color · single button"/>}
      <div className="bg-brand-orange text-white relative overflow-hidden">
        {/* Subtle decorative chevrons in background */}
        <svg width="100%" height="100%" viewBox="0 0 1240 320" preserveAspectRatio="none" className="absolute inset-0 opacity-10 pointer-events-none">
          <path d="M-40 40 L120 200 L-40 360 Z" fill="white"/>
          <path d="M1080 -40 L1280 160 L1080 360 Z" fill="white"/>
        </svg>

        <div className="block-inner relative grid gap-12 items-center" style={{gridTemplateColumns: showButton ? '1.5fr auto' : '1fr'}}>
          <div>
            {eyebrow && (
              <div className="font-display font-bold text-[13px] tracking-[0.18em] uppercase text-white/[0.85] mb-4">{eyebrow}</div>
            )}
            <h2 className="text-[56px] font-extrabold text-white leading-[1.05] tracking-[-0.025em] mb-[18px] max-w-[760px]">{title}</h2>
            <p className="text-[19px] text-white/[0.92] leading-[1.5] max-w-[640px]">{body}</p>
          </div>
          {showButton && (
            <button className="px-8 py-5 bg-white text-brand-orange-dark border-0 rounded-pill font-display font-bold text-[17px] tracking-[-0.005em] inline-flex items-center gap-2.5 cursor-pointer whitespace-nowrap" style={{boxShadow: '0 8px 24px rgba(0,0,0,0.12)'}}>{ctaIcon} {cta}</button>
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  HeroSimple, HeroWithWidget, CTABlock, CTABanner,
  CardsGrid, CardsLinks,
  StatsInline, StatsBoxed,
  NewsGrid, ImageText, FAQ,
  QuoteBlock, SectionHeader, RichText,
  LinesBlock, FormBlock,
  StepsBlock,
  BlockMeta,
});