// pages.jsx — assembled Home + Subpage + Mobile (Tailwind for bespoke sections)

const HOME_STATIONS = [
  {id: 'start',      label: 'Start'},
  {id: 'news',       label: 'Aktuelles'},
  {id: 'plan',       label: 'Reise planen'},
  {id: 'angebote',   label: 'Angebote'},
  {id: 'ablauf',     label: 'So funktionierts'},
  {id: 'zahlen',     label: 'In Zahlen'},
  {id: 'ueber',      label: 'Über uns'},
  {id: 'lines',      label: 'Liniennetz'},
  {id: 'karriere',   label: 'Karriere'},
  {id: 'stimmen',    label: 'Stimmen'},
];

function HomePage() {
  return (
    <div className="page-frame with-rail relative">
      <HomeScrollRail stations={HOME_STATIONS}/>
      <div data-station-id="start"><Header/>
        <HeroWithWidget showMeta={false} height={680} bgClass="bg-photo bg-photo-sunset"/></div>
      <div data-station-id="news"><NewsGrid showMeta={false}/></div>
      <div data-station-id="plan"><CardsLinks
        showMeta={false}
        eyebrow="Schnellzugriff"
        title="So planen Sie Ihre Fahrt"
      /></div>
      <div data-station-id="angebote"><CardsGrid showMeta={false}/></div>
      <div data-station-id="ablauf"><StopsBlock showMeta={false}/></div>
      <div data-station-id="zahlen"><StatsInline showMeta={false}/></div>
      <div data-station-id="ueber"><ImageText showMeta={false}/></div>
      <div data-station-id="lines"><LinesBlock showMeta={false}/></div>
      <div data-station-id="karriere"><CTABlock showMeta={false}/></div>
      <div data-station-id="stimmen"><QuoteBlock showMeta={false}/></div>
      <Footer/>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// SubPage — Angebot & Dienstleistung overview hub
// ─────────────────────────────────────────────────────────────
function SubPage() {
  return (
    <div className="page-frame">
      <Header/>
      <HeroSimple
        showMeta={false}
        eyebrow="Übersicht"
        title="Angebot & Dienstleistung"
        body="Reisen mit Spezialbilletten, Tellbus, FAIRTIQ und vieles mehr — alle Services der Auto AG Uri auf einen Blick."
        height={520}
        bgClass="bg-photo bg-photo-winter"
      />
      <SectionHeader
        showMeta={false}
        crumbs={['Home', 'Angebot & Dienstleistung']}
        title="Entdecken Sie unser vielseitiges Angebot"
        body="Neben dem offiziellen Liniennetz betreibt die Auto AG Uri die Schnellbusverbindungen Tellbus und Andermatt (Wintersaison). Daneben bietet die AAGU auch Transferfahrten innerhalb des Kantons Uri für Firmen- und Vereinsausflüge, Hochzeitsgesellschaften und Seniorenreisen an — die professionelle Begleitung bis zum Zielort."
      />
      <CardsGrid
        showMeta={false}
        eyebrow="Tickets & Reisen"
        title="Unsere wichtigsten Angebote"
        more="Alle Tarife & Billette"
        cards={[
          {title: 'öV Billette',         body: 'Einfache Fahrt, Hin- und Rückfahrt oder Rundfahrt — die Klassiker des NDV-Sortiments. Erhältlich an allen Verkaufsstellen, im Bus oder via FAIRTIQ.',   bg: 'bg-mountain-day'},
          {title: 'FAIRTIQ',              body: 'Die Mobile-Ticketing-App für den öffentlichen Verkehr — mit einem «Wisch» einchecken, den Rest errechnet die App.',                                  bg: 'bg-bus-night'},
          {title: 'Tellbus',              body: 'Schnellbus Altdorf – Luzern via Seelisbergtunnel. Fahrzeit knapp 45 Minuten, direkt vom Bahnhof.',                                                    bg: 'bg-lake'},
          {title: 'Spezialbillette',      body: 'Entdecken Sie den kleinen Kanton mit der grossen Kulisse — Kombi-Billette mit Urner Seilbahnen, Skigebieten und Partner-Transportunternehmen.',      bg: 'bg-mountain-sunset'},
        ]}
      />
      <ImageText
        showMeta={false}
        eyebrow="Lucerne Travel Pass"
        title="Die Zentralschweiz unkompliziert entdecken"
        body="Mit dem Lucerne Travel Pass kaufen Sie nur ein Ticket und geniessen freie Fahrt auf einem grossen Teil des öV-Netzes in der Zentralschweiz — inklusive Buslinien der Auto AG Uri."
        bullets={[
          'Gültig auf Bus, Bahn und Schiff in der Region Luzern',
          'Auto AG Uri-Linien im Geltungsbereich enthalten',
          '2., 4. oder 6 Tage Gültigkeit',
          'Vergünstigte Ermässigungen bei Partnerbergbahnen',
        ]}
        imgClass="bg-lake"
        imageRight={true}
      />
      <CardsLinks
        showMeta={false}
        eyebrow="Weitere Services"
        title="Praktisches rund um Ihre Reise"
        cards={[
          {icon: <I.Bus/>,       title: 'Velotransport',  body: 'Ihr Velo darf unter gewissen Voraussetzungen mit — gültiges öV-Ticket inklusive.'},
          {icon: <I.Users/>,     title: 'Handicap',       body: 'Reisende mit eingeschränkter Mobilität sollen das Busnetz ohne Hürden nutzen können.'},
          {icon: <I.Briefcase/>, title: 'Fundbüro',       body: 'Fundgegenstände aus den Linienbussen können am Folgetag ab 9.30 Uhr abgeholt werden.'},
          {icon: <I.Star/>,      title: 'Buswerbung',     body: 'Wirkungsvolle Werbeplattform auf allen wichtigen Verkehrsachsen in Uri.'},
        ]}
      />
      <CTABanner
        showMeta={false}
        title="Reisen ausserhalb des Liniennetzes?"
        body="Mit unseren Transferfahrten begleiten wir Firmen, Vereine und Hochzeitsgesellschaften zuverlässig ans Ziel — auf Wunsch bis zur Türe."
        cta="Transfer anfragen"
        ctaIcon={<I.Mail/>}
      />
      <FAQ
        showMeta={false}
        title="Häufige Fragen zum Angebot"
        items={[
          {q: 'Wo kaufe ich am einfachsten ein Billett?', a: 'Online via FAIRTIQ oder SBB-Mobile-App, an Billettautomaten, beim Fahrpersonal im Bus oder am AAGU-Schalter in Schattdorf.', open: true},
          {q: 'Welche Zahlungsmittel akzeptieren Sie im Bus?', a: 'Bar, alle gängigen Kredit- und Debitkarten sowie TWINT. Im Bus können Beträge bis CHF 80.– mit Karte bezahlt werden.'},
          {q: 'Gibt es Vergünstigungen für mehrere Tage?', a: 'Ja — der Lucerne Travel Pass und das UriTicket bieten freie Fahrt über mehrere Tage in der Region.'},
          {q: 'Werden Velos im Bus mitgenommen?', a: 'Ihr Velo darf unter gewissen Voraussetzungen mit auf die Reise und benötigt ein gültiges öV-Ticket.'},
        ]}
      />
      <Footer/>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Mobile homepage — same blocks, mobile chrome + adapted layout
// ─────────────────────────────────────────────────────────────
function HomePageMobile() {
  return (
    <div className="page-frame text-[15px]">
      <HeaderMobile/>
      {/* Hero */}
      <div className="bg-photo bg-photo-sunset relative min-h-[380px] px-[22px] py-10 flex flex-col justify-end">
        <div className="absolute inset-0" style={{background: 'linear-gradient(180deg, rgba(15,22,35,0.2) 30%, rgba(15,22,35,0.85) 100%)'}}/>
        <div className="relative">
          <h1 className="text-4xl font-extrabold text-white leading-[1.05] mb-3 tracking-[-0.02em]">
            Unterwegs mit<br/><span className="text-brand-orange">Auto AG Uri</span>
          </h1>
          <p className="text-white/[0.85] text-sm leading-[1.5]">
            Ihr zuverlässiger Mobilitätspartner im Kanton Uri.
          </p>
          <button className="btn btn-primary mt-4">Mehr erfahren <I.Arrow/></button>
        </div>
      </div>

      {/* Sticky-ish Fahrplan widget overlapping */}
      <div className="px-4 -mt-9 relative z-[2]">
        <FahrplanWidget mode="fahrplan"/>
      </div>

      {/* Störungen banner */}
      <div className="px-4 pt-3">
        <div className="p-4 rounded-[14px] flex items-center gap-3" style={{background: '#fff7ea', border: '1px solid #fadc9b'}}>
          <span className="w-9 h-9 rounded-[10px] bg-warning text-white inline-flex items-center justify-center"><I.Alert/></span>
          <div className="flex-1">
            <div className="font-display font-bold text-sm">2 Störungen aktiv</div>
            <div className="text-xs text-gray-600">Linien 402 & 108</div>
          </div>
          <I.Arrow/>
        </div>
      </div>

      {/* Quick links */}
      <div className="px-4 py-3.5">
        <h3 className="font-display font-extrabold text-[22px] mb-3.5 tracking-[-0.015em]">Schnellzugriff</h3>
        <div className="grid grid-cols-2 gap-2.5">
          {[
            {icon: <I.Ticket/>,    title: 'Tickets'},
            {icon: <I.Bus/>,       title: 'Linien'},
            {icon: <I.Calendar/>,  title: 'Fahrplan'},
            {icon: <I.Briefcase/>, title: 'Karriere'},
          ].map((c, i) => (
            <div key={i} className="p-[18px] bg-white border border-solid border-line rounded-[14px]">
              <span className="w-11 h-11 rounded-[12px] bg-brand-orange-tint text-brand-orange-dark inline-flex items-center justify-center mb-3">{c.icon}</span>
              <div className="font-display font-bold text-base">{c.title}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Stats inline (2 col) */}
      <div className="bg-bg px-4 py-5">
        <div className="grid grid-cols-2 gap-6">
          {[
            {icon: <I.Route/>, value: '28', unit: '', label: 'Linien'},
            {icon: <I.Pin/>, value: '180', unit: '', label: 'Haltestellen'},
            {icon: <I.Users/>, value: '3', unit: 'Mio.', label: 'Fahrgäste / Jahr'},
            {icon: <I.Clock/>, value: '100', unit: '%', label: 'Pünktlichkeit'},
          ].map((s, i) => (
            <div key={i} className="text-center">
              <div className="w-11 h-11 mx-auto mb-2.5 rounded-[12px] bg-brand-orange-tint text-brand-orange inline-flex items-center justify-center">{s.icon}</div>
              <div className="font-display font-extrabold text-4xl text-brand-orange tracking-[-0.02em] leading-none">
                {s.value}<span className="text-base">{s.unit}</span>
              </div>
              <div className="text-[13px] text-gray-600 mt-1.5">{s.label}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Cards grid (horizontal scroll) */}
      <div className="pl-4 pt-4 pb-[18px]">
        <h3 className="font-display font-extrabold text-[22px] mb-3 tracking-[-0.015em]">Spezialangebote</h3>
        <div className="flex gap-3 overflow-x-auto pr-4">
          {[
            {title: 'Gotthard-Rundfahrt', bg: 'bg-mountain-sunset'},
            {title: 'Urnersee-Ticket',    bg: 'bg-lake'},
            {title: 'Schneespass',        bg: 'bg-ski'},
          ].map((c, i) => (
            <div key={i} className="min-w-[240px] bg-white rounded-[16px] overflow-hidden shadow-card flex-[0_0_auto]">
              <div className={`${c.bg} aspect-[4/3] relative`}/>
              <div className="p-3.5">
                <div className="font-display font-bold text-base mb-1">{c.title}</div>
                <a className="link-arrow text-[13px]" href="#">Mehr <I.Arrow/></a>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* News */}
      <div className="pt-1 px-4 pb-[18px]">
        <div className="flex justify-between items-center mb-3.5">
          <h3 className="font-display font-extrabold text-[22px] tracking-[-0.015em]">News</h3>
          <a href="#" className="link-arrow text-[13px]">Alle <I.Arrow/></a>
        </div>
        <div className="flex flex-col gap-3">
          {[
            {date: '12. April', title: 'Neue Elektrobusse im Einsatz', bg: 'bg-bus-night'},
            {date: '05. April', title: 'Fahrplanwechsel Sommer', bg: 'bg-mountain-day'},
          ].map((it, i) => (
            <article key={i} className="grid grid-cols-[110px_1fr] bg-white border border-solid border-line rounded-[14px] overflow-hidden">
              <div className={`${it.bg} min-h-[96px]`}/>
              <div className="p-3.5">
                <div className="text-xs text-brand-orange-dark font-semibold mb-1">{it.date}</div>
                <div className="font-display font-bold text-[15px] leading-[1.3]">{it.title}</div>
              </div>
            </article>
          ))}
        </div>
      </div>

      {/* Stops — metro-style how-it-works */}
      <MStopsBlock showMeta={false}/>

      {/* CTA - mobile */}
      <div className="px-4 pb-[18px]">
        <div className="bg-bus-night rounded-[18px] p-[22px] relative overflow-hidden">
          <div className="font-display font-bold text-xs tracking-[0.14em] uppercase text-brand-orange mb-3.5">Jetzt bewerben</div>
          <h3 className="text-[26px] font-extrabold text-white leading-[1.1] mb-2.5 tracking-[-0.02em]">Werde Teil unseres Teams</h3>
          <p className="text-white/[0.7] text-sm leading-[1.5] mb-[18px]">Offene Stellen bei Auto AG Uri — vom Chauffeur bis zur Mechatronikerin.</p>
          <button className="btn btn-primary text-sm"><I.Briefcase/> Alle Jobs</button>
        </div>
      </div>

      {/* Footer compact */}
      <div className="bg-gray-900 text-white/[0.7] px-[18px] pt-7 pb-6">
        <Logo size="sm" invert/>
        <p className="text-[13px] mt-3.5 leading-[1.6]">Ihr Mobilitätspartner im Kanton Uri — seit 1922.</p>
        <div className="flex gap-2.5 mt-[18px]">
          <a href="#" className="w-9 h-9 rounded-[10px] bg-white/[0.08] inline-flex items-center justify-center text-white"><I.Facebook/></a>
          <a href="#" className="w-9 h-9 rounded-[10px] bg-white/[0.08] inline-flex items-center justify-center text-white"><I.Instagram/></a>
          <a href="#" className="w-9 h-9 rounded-[10px] bg-white/[0.08] inline-flex items-center justify-center text-white"><I.LinkedIn/></a>
        </div>
        <div className="mt-[22px] text-xs pt-4 border-t border-solid border-white/10">© 2026 Auto AG Uri</div>
      </div>
      <div className="h-[3px] bg-brand-orange"/>
    </div>
  );
}

Object.assign(window, { HomePage, SubPage, HomePageMobile, GruppenreisenPage, SaisonalePage, MGruppenreisenPage, MSaisonalePage });

// ─────────────────────────────────────────────────────────────
// Gruppenreisen page (desktop)
// ─────────────────────────────────────────────────────────────
function GruppenreisenPage() {
  return (
    <div className="page-frame">
      <Header/>
      <HeroSimple
        showMeta={false}
        eyebrow="Buchbar"
        title="Gruppenreisen"
        body="Unbeschwertes Reisen in Gruppen ab 10 Personen — mit 30 % Rabatt auf die Fahrt mit dem öffentlichen Verkehr."
        height={520}
        bgClass="bg-photo bg-photo-skifamily"
      />
      <SectionHeader
        showMeta={false}
        crumbs={['Home', 'Reisen', 'Gruppenreisen']}
        title="Unbeschwertes Reisen in Gruppen"
        body="Schulausflüge, Vereinsreisen, Firmenanlässe — wir bringen Ihre Gruppe zuverlässig ans Ziel. Anmeldung bis spätestens 2 Werktage vor Abreise."
      />
      <StatsBoxed
        showMeta={false}
        stats={[
          {icon: <I.Users/>,    value: 'ab 10',         label: 'Personen'},
          {icon: <I.Ticket/>,   value: '−30 %',         label: 'Gruppenrabatt'},
          {icon: <I.Calendar/>, value: '2 Werktage',    label: 'Vorlaufzeit'},
          {icon: <I.Pin/>,      value: 'Schattdorf',    label: 'AAGU-Schalter'},
        ]}
      />
      <StepsBlock showMeta={false}/>
      <ImageText
        showMeta={false}
        eyebrow="Gruppenbillett"
        title="Mehr Leute, günstiger fahren"
        body="Mit dem Gruppenbillett erhalten Reisegruppen ab 10 Personen 30 % Rabatt auf die Fahrt mit dem öffentlichen Verkehr — gültig auf allen Linien der Auto AG Uri."
        bullets={[
          'AAGU-Schalter Schattdorf',
          'Gästeinformation Altdorf (Uri Tourismus)',
          'Beim Fahrpersonal direkt im Bus',
          'SBB-Reisezentrum & SBB-Webshop',
        ]}
        imgClass="bg-mountain-day"
        imageRight={true}
      />
      <RichText showMeta={false}/>
      <FormBlock
        showMeta={false}
        eyebrow="Anmeldung"
        title="Gruppenreise anmelden"
        body="Reichen Sie Ihre Reise bis 12.00 Uhr des vorangehenden Werktags ein. Wir bestätigen die Buchung in der Regel innert 24 Stunden."
        contact={[
          {icon: <I.Phone/>, label: 'Telefon', value: '+41 41 874 72 72'},
          {icon: <I.Mail/>,  label: 'E-Mail',  value: 'gruppen@aagu.ch'},
          {icon: <I.Pin/>,   label: 'Schalter', value: 'Ried 1, 6467 Schattdorf'},
        ]}
      />
      <FAQ
        showMeta={false}
        title="Häufige Fragen zu Gruppenreisen"
        items={[
          {q: 'Wie lange im Voraus muss ich anmelden?', a: 'Die Anmeldung für Gruppen ab 10 Personen ist spätestens 2 Werktage vor Abreise erforderlich.', open: true},
          {q: 'Ist ein Sitzplatz garantiert?', a: 'Unsere Linienbusse bieten viele Stehplätze. Eine Sitzplatzgarantie auf Kursen können wir leider nicht gewährleisten.'},
          {q: 'Kann ich auf Rechnung bezahlen?', a: 'Gruppenbillette stellen wir bei persönlicher Abholung am Schalter Schattdorf auf Wunsch gerne auf Rechnung aus. Aus Sicherheitsgründen versenden wir keine Billette per Post.'},
          {q: 'Was passiert bei einer Absage?', a: 'Absagen müssen am vorangehenden Werktag bis 12.00 Uhr telefonisch oder per Mail bekanntgegeben werden. Verschiebedaten werden nicht automatisch reserviert.'},
        ]}
      />
      <CTABanner
        showMeta={false}
        title="Auch ausserhalb des Liniennetzes unterwegs?"
        body="Für Reisen mit anderen Transportunternehmen (Zug, andere Busbetriebe) erfassen Sie Ihre Reise direkt über die SBB-Gruppenanmeldung."
        cta="Zur SBB-Gruppenanmeldung"
        ctaIcon={<I.Arrow/>}
      />
      <Footer/>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Saisonale Angebote / Schächentaler Höhenweg (desktop)
// ─────────────────────────────────────────────────────────────
function SaisonalePage() {
  return (
    <div className="page-frame">
      <Header/>
      <HeroSimple
        showMeta={false}
        eyebrow="Saisonangebot"
        title="Schächentaler Höhenweg"
        body="Atemberaubende Panoramen auf der Sonnenseite des Schächentals — vier Luftseilbahnen, eine Buslinie und Ihre Wunschroute."
        height={580}
        bgClass="bg-photo bg-photo-klausenpass"
      />
      <SectionHeader
        showMeta={false}
        crumbs={['Home', 'Angebot & Dienstleistung', 'Schächentaler Höhenweg']}
        title="Wandern im Klausenpassgebiet"
        body="Das Klausenpassgebiet zählt zu den beeindruckendsten Passlandschaften der Schweiz. Mit unseren Kombibilletten gestalten Sie Ihre Wanderung ganz nach Ihren Wünschen."
      />
      <StatsBoxed
        showMeta={false}
        stats={[
          {icon: <I.Mountain/>, value: '4 Luftseilbahnen', label: 'Eggberge · Ruogig · Biel-Kinzig · Ratzi'},
          {icon: <I.Bus/>,      value: 'Linie 408',         label: 'Flüelen – Linthal'},
          {icon: <I.Calendar/>, value: 'Mai – Okt',         label: 'Saisonal'},
          {icon: <I.Clock/>,    value: 'flexibel',          label: 'Berg- oder Talfahrt'},
        ]}
      />
      <ImageText
        showMeta={false}
        eyebrow="Auf einen Blick"
        title="Im Kombi-Billett enthalten"
        body="Das Kombi-Billett berechtigt zu einer Tal- und Bergfahrt mit einer der vier Luftseilbahnen sowie zu einer Busfahrt in eine Richtung. Sie entscheiden, wie gemütlich oder abenteuerlich Ihre Route wird."
        bullets={[
          'Bus AAGU · Flüelen → Eggberge Talstation → Unterschächen, Untere Balm',
          'Luftseilbahn Eggberge',
          'Luftseilbahn Ruogig',
          'Luftseilbahn Biel-Kinzig',
          'Luftseilbahn Ratzi',
        ]}
        imgClass="bg-mountain-day"
        imageRight={false}
      />
      <RichText showMeta={false}/>
      <CardsGrid
        showMeta={false}
        eyebrow="Weitere Saisonangebote"
        title="Auch entdeckenswert"
        more="Alle Freizeitangebote"
        cards={[
          {title: 'Silener Höhenweg',     body: 'Aussichtsreiche Höhenwanderung über Silenen mit Luftseilbahnen und Buslinien-Kombi.',          bg: 'bg-mountain-day'},
          {title: 'Klausenpass-Linie',    body: 'Spektakuläre Alpenkulisse — die Linie 408 verbindet Uri mit Glarus über den Klausenpass.',       bg: 'bg-mountain-sunset'},
          {title: 'Gotthard-Rundfahrt',   body: 'Legendäre Passroute über den historischen Gotthard — durch die Tremola bis zum Hospiz.',         bg: 'bg-mountain-sunset'},
          {title: 'Urnersee-Ticket',      body: 'Bus & Schiff kombiniert — rund um den wunderschönen Urnersee mit Alpenpanorama.',                bg: 'bg-lake'},
        ]}
      />
      <CTABanner
        showMeta={false}
        title="Reduzierter Betrieb 22. Sep – 19. Okt 2025"
        body="Ab dem 22. September bis 19. Oktober 2025 ist die Strecke Urigen – Linthal reduziert befahren. Prüfen Sie vor jeder Abfahrt Ihre Verbindung im Online-Fahrplan."
        cta="Online-Fahrplan öffnen"
        ctaIcon={<I.Calendar/>}
      />
      <FAQ
        showMeta={false}
        title="Häufige Fragen zum Höhenweg"
        items={[
          {q: 'Bis wann fährt der Bus über den Klausenpass?', a: 'Der Busbetrieb über den Klausenpass ist saisonal — von Mai bis Oktober. Ab dem 22. September 2025 verkehrt die Strecke Urigen – Linthal in reduziertem Umfang.', open: true},
          {q: 'Wo kann ich das Kombi-Billett kaufen?',         a: 'Billette sind beim Fahrpersonal in den Bussen sowie bei den vier Luftseilbahnen erhältlich.'},
          {q: 'Kann ich auch nur die Luftseilbahnen nutzen?',  a: 'Ja, es gibt ein günstigeres Billett ohne Bus — siehe Tarife oben.'},
          {q: 'Sind Hunde erlaubt?',                            a: 'Hunde sind in Bussen und Luftseilbahnen herzlich willkommen. Die Tarife finden Sie in der Preistabelle.'},
        ]}
      />
      <Footer/>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Mobile: Gruppenreisen
// ─────────────────────────────────────────────────────────────
function MGruppenreisenPage() {
  return (
    <div className="page-frame text-[15px]">
      <HeaderMobile/>
      <MHeroSimple
        showMeta={false}
        title="Gruppenreisen"
        body="Unbeschwertes Reisen ab 10 Personen — mit 30 % Rabatt auf die Fahrt mit dem öffentlichen Verkehr."
        bgClass="bg-photo bg-photo-skifamily"
      />
      <MSectionHeader
        showMeta={false}
        crumbs={['Home', 'Reisen', 'Gruppenreisen']}
        title="Unbeschwertes Reisen in Gruppen"
        body="Schulausflüge, Vereinsreisen, Firmenanlässe — wir bringen Ihre Gruppe ans Ziel. Anmeldung bis 2 Werktage vor Abreise."
      />
      <MStatsBoxed showMeta={false} stats={[
        {icon: <I.Users/>,    value: 'ab 10',     label: 'Personen'},
        {icon: <I.Ticket/>,   value: '−30 %',     label: 'Gruppenrabatt'},
        {icon: <I.Calendar/>, value: '2 Werktage',label: 'Vorlaufzeit'},
        {icon: <I.Pin/>,      value: 'Schattdorf',label: 'Schalter'},
      ]}/>
      <MStepsBlock showMeta={false}/>
      <MImageText
        showMeta={false}
        eyebrow="Gruppenbillett"
        title="Mehr Leute, günstiger fahren"
        body="Mit dem Gruppenbillett erhalten Reisegruppen ab 10 Personen 30 % Rabatt auf die Fahrt mit dem öffentlichen Verkehr."
        bullets={[
          'AAGU-Schalter Schattdorf',
          'Gästeinformation Altdorf',
          'Fahrpersonal im Bus',
          'SBB-Reisezentrum & Webshop',
        ]}
        buttonLabel="Mehr zum Tarif"
      />
      <MFormBlock showMeta={false}/>
      <MFAQ
        showMeta={false}
        title="Fragen zu Gruppenreisen"
        items={[
          {q: 'Wie lange im Voraus anmelden?', a: 'Die Anmeldung für Gruppen ab 10 Personen ist spätestens 2 Werktage vor Abreise erforderlich.', open: true},
          {q: 'Ist ein Sitzplatz garantiert?'},
          {q: 'Kann ich auf Rechnung bezahlen?'},
          {q: 'Was passiert bei einer Absage?'},
        ]}
      />
      <MCTABanner
        showMeta={false}
        title="Auch ausserhalb des Liniennetzes?"
        body="Für Reisen mit anderen Transportunternehmen erfassen Sie alles über SBB-Gruppenanmeldung."
        buttonLabel="Zur SBB-Anmeldung"
        buttonIcon={<I.Arrow/>}
      />
      <MFooter showMeta={false}/>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Mobile: Saisonale Angebote / Schächentaler Höhenweg
// ─────────────────────────────────────────────────────────────
function MSaisonalePage() {
  return (
    <div className="page-frame text-[15px]">
      <HeaderMobile/>
      <MHeroSimple
        showMeta={false}
        title="Schächentaler Höhenweg"
        body="Atemberaubende Panoramen auf der Sonnenseite des Schächentals — vier Luftseilbahnen, eine Buslinie, Ihre Wunschroute."
        bgClass="bg-photo bg-photo-klausenpass"
      />
      <MSectionHeader
        showMeta={false}
        crumbs={['Home', 'Angebot', 'Schächentaler Höhenweg']}
        title="Wandern im Klausenpassgebiet"
        body="Mit unseren Kombibilletten gestalten Sie Ihre Wanderung ganz nach Ihren Wünschen — flexibel zwischen Bus und Seilbahn."
      />
      <MStatsBoxed showMeta={false} stats={[
        {icon: <I.Mountain/>, value: '4 Bahnen',  label: 'Luftseilbahnen'},
        {icon: <I.Bus/>,      value: 'Linie 408', label: 'Flüelen – Linthal'},
        {icon: <I.Calendar/>, value: 'Mai–Okt',   label: 'Saisonal'},
        {icon: <I.Clock/>,    value: 'flexibel',  label: 'Route'},
      ]}/>
      <MImageText
        showMeta={false}
        eyebrow="Auf einen Blick"
        title="Im Kombi-Billett enthalten"
        body="Eine Tal- und Bergfahrt mit einer Luftseilbahn sowie eine Busfahrt in eine Richtung — Sie entscheiden die Route."
        bullets={[
          'Bus Linie 408 (Flüelen – Linthal)',
          'Luftseilbahn Eggberge',
          'Luftseilbahn Ruogig',
          'Luftseilbahn Biel-Kinzig',
          'Luftseilbahn Ratzi',
        ]}
        buttonLabel="Tarife ansehen"
      />
      <MCardsGrid
        showMeta={false}
        eyebrow="Weitere Saisonangebote"
        title="Auch entdeckenswert"
        cards={[
          {title: 'Silener Höhenweg'},
          {title: 'Klausenpass-Linie'},
          {title: 'Gotthard-Rundfahrt'},
          {title: 'Urnersee-Ticket'},
        ]}
      />
      <MCTABanner
        showMeta={false}
        title="Reduzierter Betrieb 22. Sep – 19. Okt"
        body="Strecke Urigen – Linthal reduziert befahren. Prüfen Sie vor jeder Abfahrt Ihre Verbindung."
        buttonLabel="Fahrplan öffnen"
        buttonIcon={<I.Calendar/>}
      />
      <MFAQ
        showMeta={false}
        title="Fragen zum Höhenweg"
        items={[
          {q: 'Bis wann fährt der Bus über den Klausenpass?', a: 'Der Busbetrieb ist saisonal von Mai bis Oktober. Ab 22. September verkehrt die Strecke Urigen – Linthal reduziert.', open: true},
          {q: 'Wo kann ich das Kombi-Billett kaufen?'},
          {q: 'Kann ich nur die Luftseilbahnen nutzen?'},
          {q: 'Sind Hunde erlaubt?'},
        ]}
      />
      <MFooter showMeta={false}/>
    </div>
  );
}