// mobile-blocks.jsx — mobile-optimized variant of every content block (Tailwind).
// Each block matches the desktop block's content but reflows for ~390px width.
const MOBILE_W = 390;
// Container that wraps each mobile block in the canvas with consistent setup
function MobileBlock({name, variant, showMeta = true, children, bg = 'white'}) {
return (
{showMeta && }
{children}
);
}
// ─── 1) Hero — simple ──────────────────────────────────────────────
function MHeroSimple({
showMeta = true,
title = "Gotthard-Rundfahrt",
body = "Legendäre Passroute über den historischen Gotthard — Geschichte, Panorama und Abenteuer.",
bgClass = "img-ph",
}) {
return (
{title}
{body}
);
}
// ─── 2) Hero — with widget ─────────────────────────────────────────
function MHeroWithWidget({showMeta = true, bgClass = "img-ph"}) {
return (
Unterwegs mit Auto AG Uri
Ihr zuverlässiger Mobilitätspartner im Kanton Uri.
);
}
// ─── 3) Call to action ─────────────────────────────────────────────
function MCTA({showMeta = true}) {
return (
Jetzt bewerben
Werde Teil unseres Teams
Offene Stellen bei Auto AG Uri — vom Chauffeur bis zur Mechatronikerin.
);
}
// ─── 8) News grid ─────────────────────────────────────────────────
function MNewsGrid({showMeta = true}) {
const items = [
{date: '12. April 2026', title: 'Neue Elektrobusse im Einsatz', body: 'Die Auto AG Uri setzt einen weiteren Schritt in Richtung Nachhaltigkeit…'},
{date: '05. April 2026', title: 'Fahrplanwechsel Sommer', body: 'Bitte beachten Sie die neuen Abfahrtszeiten auf diversen Linien…'},
];
return (
);
}
// ─── 9) Image + Text ──────────────────────────────────────────────
function MImageText({
showMeta = true,
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.",
bullets = ['100% Anschluss an SBB-Knoten', 'Elektroflotte bis 2030', 'Ausbildungsbetrieb mit 12 Lehrstellen'],
buttonLabel = "Mehr über uns",
}) {
return (
{eyebrow &&
{eyebrow}
}
{title}
{body}
{bullets.map((b, i) => (
{b}
))}
);
}
// ─── 10) FAQ ──────────────────────────────────────────────────────
function MFAQ({
showMeta = true,
title = "Häufige Fragen",
eyebrow = "FAQ",
items = [
{q: 'Wo kann ich Billette kaufen?', a: 'Billette gibt es online, in unserer App, an den Verkaufsstellen sowie direkt im Bus beim Chauffeur.', open: true},
{q: 'Sind Hunde im Bus erlaubt?'},
{q: 'Wie funktioniert das Tarifsystem?'},
{q: 'Gibt es Rabatte für Schulen?'},
],
}) {
return (
«Ohne die AAGU käme mein Sohn nie pünktlich in die Schule.»
AG
Andrea Gisler
Pendlerin · Bürglen
);
}
// ─── 12) Section header ───────────────────────────────────────────
function MSectionHeader({
showMeta = true,
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.",
}) {
return (
{title}
{body}
);
}
// ─── 13) Rich text ────────────────────────────────────────────────
function MRichText({showMeta = true}) {
return (
Eine Reise durch die Urner Geschichte
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.
Was Sie unterwegs erleben
Unsere Chauffeur:innen kennen jede Kurve und teilen ihr Wissen gerne. Halten Sie in Andermatt für einen Kaffee oder besuchen Sie das Museum.
Tipp: Reservieren Sie an Wochenenden vor — die Fahrt ist beliebt.
);
}
// ─── 16) Steps — mobile (vertical) ──────────────────────────────
function MStepsBlock({showMeta = true, eyebrow = "So funktionierts", title = "In vier Schritten zur Gruppenreise", steps}) {
const items = steps || [
{n: '1', title: 'Anfrage ausfüllen', body: 'Online-Formular einreichen, spätestens 2 Werktage vor Abreise.'},
{n: '2', title: 'Bestätigung erhalten', body: 'Wir prüfen die Verbindung und melden uns.'},
{n: '3', title: 'Billett beziehen', body: 'Am AAGU-Schalter, im Bus oder über die SBB.'},
{n: '4', title: 'Losfahren', body: 'Steigen Sie an der Haltestelle ein.'},
];
return (
{eyebrow}
{title}
{/* vertical connector */}
{items.map((s, i) => (
{s.n}
{s.title}
{s.body}
))}
);
}
// ─── 17) Form block — mobile (stacked) ────────────────────────────
function MFormField({label, placeholder, value, required = false, multiline = false, select = false}) {
return (
);
}
function MFormBlock({showMeta = true}) {
return (
Kontakt
Gruppenreise anfragen
Wir erstellen Ihnen ein unverbindliches Angebot — Antwort innert 2 Werktagen.
);
}
// ─── 18) Call to action — banner ─────────────────────────────────
function MCTABanner({
showMeta = true,
showButton = true,
title = "Gruppenreisen für jeden Anlass",
body = "Schulausflug, Vereinsreise, Hochzeit oder Firmenanlass — chartern Sie einen Bus mit eigenem Chauffeur.",
buttonLabel = "Offerte anfragen",
buttonIcon = ,
}) {
return (