/* Goldplatzl — Website UI kit sections.
   Demonstrates the photo-first tile-alternation language using the DS primitives.
   Image areas are warm "oat" placeholders — swap for real photography. */
const DS = window.GoldplatzlDesignSystem_476858;
const { Button, IconButton, Badge, NavBar } = DS;

const LEAF = "assets/goldplatzl-leaf.png";
const LOGO_WHITE = "assets/goldplatzl-logo-white.png";
const LOGO_INK = "assets/goldplatzl-logo-ink.png";

/* --- External links & contact (single source of truth) --- */
const RESERVE_URL = "https://get-table.com/goldplatzl";
const MENU_PDF = "https://www.goldplatzl.at/wp-content/uploads/2026/06/Goldplatzl-Menu-2606-online.pdf";
const SHOP_URL = "https://goldblatt.at";
const SPOTIFY_URL = "https://open.spotify.com/playlist/2yhV7A5JkrvoYfTY2tqMs6?si=4f3c5e081d7846b7";
const BUS_URL = "https://www.steiermark.com/00_Regionen/02_Thermen-Vulkanland/05_Urlaub%20planen/Anreise/Thermenlandbus/Sammelmappe%20ab%2011.12.2022.pdf";
const OEBB_URL = "https://fahrplan.oebb.at/";
const MAPS_URL = "https://goo.gl/maps/qMtGv6aPqXb1fVPg9";
const HOTEL_URL = "https://www.sonntagsberghof.at/";
const VOUCHER_MAIL = "goldplatzl@goldblatt.at";
const PHONE = "+43 681 20368133";
const PHONE_TEL = "tel:+4368120368133";
const SOCIAL = { instagram: "https://instagram.com/goldblattfood", facebook: "https://facebook.com/goldblattfood", tiktok: "https://tiktok.com/@goldblattfood" };
const go = (url) => window.open(url, "_blank", "noopener");

/* Warm photo placeholder. tone: 'oat' | 'dark' | 'clay'. */
function Photo({ tone = "oat", label = "Foto folgt", src, alt = "", position = "center", height, ratio, radius = 0, shadow = false, children, style = {} }) {
  const tones = {
    oat: { background: "linear-gradient(160deg, #efe7d8, #e4d8c2)", color: "#a99a80" },
    clay: { background: "linear-gradient(160deg, #ecc9b2, #e0a180)", color: "#8a5a3c" },
    dark: { background: "linear-gradient(160deg, #322c27, #241f1b)", color: "#6b6258" },
    sage: { background: "linear-gradient(160deg, #d9e0c6, #c3cda4)", color: "#5f6a43" },
  };
  return (
    <div style={{
      position: "relative", display: "flex", alignItems: "center", justifyContent: "center",
      width: "100%", height, aspectRatio: ratio, borderRadius: radius, overflow: "hidden",
      boxShadow: shadow ? "var(--shadow-product)" : "none", ...tones[tone], ...style,
    }}>
      {src && (
        <img src={src} alt={alt} loading="lazy" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: position }} />
      )}
      {children || (!src && (
        <span style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8, opacity: 0.7 }}>
          <img src={LEAF} style={{ height: 26, opacity: 0.55 }} alt="" />
          <span style={{ fontSize: 12, letterSpacing: "0.12em", textTransform: "uppercase", fontWeight: 600 }}>{label}</span>
        </span>
      ))}
    </div>
  );
}

const PH = "assets/photos/";

/* ---- Season announcement strip (summer-only urgency) ---- */
function SeasonStrip() {
  return (
    <div style={{ background: "var(--gold-300)", color: "var(--on-gold)", display: "flex", alignItems: "center", justifyContent: "center", gap: 14, padding: "8px 24px", fontSize: 13.5, fontWeight: 600, letterSpacing: "-0.004em", textAlign: "center", flexWrap: "wrap" }}>
      <span>☀️ Nur im Sommer geöffnet — Saison 25. Juni – 13. September</span>
      <span style={{ opacity: 0.5 }}>·</span>
      <a href={RESERVE_URL} target="_blank" rel="noopener" style={{ color: "var(--on-gold)", fontWeight: 700, textDecoration: "underline", textUnderlineOffset: 2 }}>Solange die Plätze reichen — jetzt Tisch sichern →</a>
    </div>
  );
}

/* ---- Global navigation (fixed) ---- */
function SiteNav({ active, onNavigate }) {
  const links = [
    { id: "heuriger", label: "Heuriger" },
    { id: "genuss", label: "Genuss" },
    { id: "galerie", label: "Galerie" },
    { id: "manufaktur", label: "Manufaktur" },
    { id: "gutschein", label: "Gutschein" },
    { id: "anfahrt", label: "Anfahrt" },
  ];
  return (
    <header style={{ position: "sticky", top: 0, zIndex: 50 }}>
      <SeasonStrip />
      <NavBar
        variant="global"
        brand={<><img src={LEAF} style={{ height: 18 }} alt="" /><span style={{ fontWeight: 700 }}>Goldplatzl</span></>}
        links={links}
        active={active}
        onNavigate={onNavigate}
        actions={<>
          <Button size="sm" onClick={() => go(RESERVE_URL)}>Tisch sichern</Button>
        </>}
      />
    </header>
  );
}

/* ---- Hero: full-bleed dark photo tile ---- */
function Hero({ onNavigate }) {
  return (
    <section data-screen-label="Hero" style={{ position: "relative", background: "var(--surface-black)" }}>
      <Photo tone="dark" src={PH + "hero.jpg"} position="center 60%" height="82vh" label="" >
        <div style={{ position: "absolute", inset: 0, background: "radial-gradient(120% 90% at 50% 30%, rgba(22,18,14,0.28), rgba(22,18,14,0.78))" }} />
        <div style={{ position: "relative", textAlign: "center", color: "var(--on-dark)", padding: "0 24px", maxWidth: 820 }}>
          <img src={LOGO_WHITE} alt="Goldplatzl am Sonntagsberg" style={{ width: "min(460px, 80vw)", height: "auto", margin: "0 auto 28px" }} />
          <h1 className="gp-hero" style={{ fontSize: "clamp(30px, 4.4vw, 46px)", color: "var(--on-dark)" }}>Einzigartiger Genuss, komplett pflanzlich</h1>
          <p className="gp-lead" style={{ color: "var(--body-on-dark)", margin: "18px auto 0", maxWidth: 540 }}>
            Der 1. rein pflanzliche Bio-Heurige der Steiermark. Hausgemachte Jausen, feine Naturweine, chillige Beats — inmitten der schönsten Natur.
          </p>
          <div style={{ display: "flex", gap: 14, justifyContent: "center", marginTop: 32, flexWrap: "wrap" }}>
            <Button size="lg" onClick={() => go(RESERVE_URL)}>Tisch sichern</Button>
            <Button size="lg" variant="secondary" onDark onClick={() => go(MENU_PDF)}>Zur Speisekarte</Button>
          </div>
        </div>
      </Photo>
    </section>
  );
}

/* ---- Intro: light parchment statement ---- */
function Intro() {
  return (
    <section data-screen-label="Intro" style={{ background: "var(--parchment)", padding: "var(--space-section) 24px" }}>
      <div style={{ maxWidth: 820, margin: "0 auto", textAlign: "center" }}>
        <p className="gp-script" style={{ fontSize: 30, marginBottom: 8 }}>am Sonntagsberg</p>
        <h2 className="gp-display-lg" style={{ marginBottom: 18 }}>Fast alles am Tisch kommt aus unserer Goldblatt-Manufaktur.</h2>
        <p className="gp-lead-airy" style={{ color: "var(--ink-soft)", maxWidth: 640, margin: "0 auto" }}>
          Mit Liebe und Hingabe aus biologischen Zutaten zubereitet. Pflanzlich, bio &amp; hausgemacht — authentisch, nachhaltig, lecker.
        </p>
      </div>
    </section>
  );
}

/* ---- Feature tiles: two-up alternating ---- */
function FeatureTiles() {
  return (
    <section data-screen-label="Genuss" style={{ display: "grid", gridTemplateColumns: "1fr 1fr" }}>
      <div style={{ background: "var(--canvas)", padding: "var(--space-section) 56px", display: "flex", flexDirection: "column", justifyContent: "center", gap: 18 }}>
        <Badge tone="sage" style={{ alignSelf: "flex-start" }}>Brettljause</Badge>
        <h3 className="gp-display-md">Die herrliche Jause — pflanzlich gedacht.</h3>
        <p className="gp-body" style={{ color: "var(--ink-soft)", maxWidth: 380 }}>Hausgemachtes pflanzliches Karree, Wurst, Aufstriche &amp; renommierte Käsealternativen, Better Tartar und der legendäre Steirer Dog.</p>
        <Photo tone="oat" src={PH + "tile-jause-brett.jpg"} ratio="16/10" radius={20} shadow style={{ marginTop: 10 }} />
      </div>
      <div style={{ background: "var(--surface-dark)", padding: "var(--space-section) 56px", display: "flex", flexDirection: "column", justifyContent: "center", gap: 18 }}>
        <Badge tone="dark" style={{ alignSelf: "flex-start" }}>Naturwein</Badge>
        <h3 className="gp-display-md" style={{ color: "var(--on-dark)" }}>Edle Bio-Weine. Auch alkoholfrei.</h3>
        <p className="gp-body" style={{ color: "var(--body-muted-dark)", maxWidth: 380 }}>Spritzige Drinks, naturtrübe Fruchtsäfte, kaltes Naturbier und natürliche Bio-Weine aus der Region.</p>
        <Photo tone="clay" src={PH + "tile-wein-flasche.jpg"} ratio="16/10" radius={20} shadow style={{ marginTop: 10 }} />
      </div>
    </section>
  );
}

/* ---- Gallery: edge-to-edge image band ---- */
function Gallery() {
  const items = [
    { src: "gal-sonnenuntergang.jpg", label: "Sonnenuntergang auf der Terrasse" },
    { src: "gal-salat.jpg", label: "Wurstsalat" },
    { src: "gal-brot.jpg", label: "Karreebrot" },
    { src: "gal-waffel.jpg", label: "Goldblatt-Waffel" },
  ];
  return (
    <section data-screen-label="Galerie" style={{ background: "var(--canvas)", padding: "var(--space-section) 0 var(--space-2xl)" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 24px 36px", display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 24 }}>
        <div>
          <span className="gp-eyebrow">Galerie</span>
          <h2 className="gp-display-lg" style={{ marginTop: 8 }}>Stimmung am Sonntagsberg</h2>
        </div>
        <Button variant="secondary">Instagram</Button>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 4 }}>
        {items.map((it, i) => <Photo key={i} src={PH + it.src} alt={it.label} ratio="3/4" />)}
      </div>
    </section>
  );
}

/* ---- Location / hours: parchment, summer-season urgency ---- */
function Location() {
  const hours = [
    ["Donnerstag", "17 – 22 Uhr"],
    ["Freitag", "ab 15 – 22 Uhr"],
    ["Samstag", "ab 15 – 22 Uhr"],
    ["Sonntag", "ab 12 – 20 Uhr"],
  ];
  return (
    <section data-screen-label="Anfahrt" style={{ background: "var(--parchment)", padding: "var(--space-section) 24px" }}>
      <div style={{ maxWidth: 1080, margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "start" }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
          <span className="gp-eyebrow">Anfahrt &amp; Öffnungszeiten</span>
          <h2 className="gp-display-lg">Nur im Sommer — oben am Sonntagsberg.</h2>

          <div style={{ background: "var(--gold-100)", border: "1px solid var(--gold-200)", borderRadius: "var(--radius-md)", padding: "16px 18px", display: "flex", flexDirection: "column", gap: 4 }}>
            <span style={{ fontSize: 13, fontWeight: 700, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--gold-ink)" }}>Saison 2026 — nur an diesen Wochen</span>
            <span style={{ fontSize: 19, fontWeight: 700, color: "var(--ink)" }}>25. Juni – 19. Juli &amp; 6. August – 13. September</span>
            <span style={{ fontSize: 14, color: "var(--ink-soft)" }}>Wenige Wochen, begrenzte Plätze — am besten gleich reservieren.</span>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: "8px 24px" }}>
            {hours.map(([d, t]) => (
              <React.Fragment key={d}>
                <span className="gp-caption" style={{ fontWeight: 700, color: "var(--ink)" }}>{d}</span>
                <span className="gp-caption" style={{ color: "var(--ink-soft)" }}>{t}</span>
              </React.Fragment>
            ))}
            <span className="gp-caption" style={{ color: "var(--ink-muted)", gridColumn: "1 / -1", marginTop: 2 }}>Küchenschluss jeweils 1 Stunde früher.</span>
          </div>

          <p className="gp-body" style={{ color: "var(--ink-soft)" }}>Wagerberg 37, 8271 Bad Waltersdorf. Kostenloser Gäste-Parkplatz.</p>

          <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
            <Badge tone="sage">🧒 Malsachen, Sandkiste &amp; Spielplatz</Badge>
            <Badge tone="gold">🐕 Hunde willkommen</Badge>
            <Badge tone="clay">🚐 Wohnmobile / Campervans</Badge>
          </div>
          <p className="gp-caption" style={{ color: "var(--ink-muted)" }}>
            Hunde &amp; Camper bitte bei der Reservierung bekanntgeben. <strong style={{ color: "var(--ink-soft)" }}>Abholung von Speisen möglich.</strong><br />Gruppen ab 10 Personen bitte telefonisch: <a href={PHONE_TEL} style={{ color: "var(--gold-ink)", fontWeight: 600, textDecoration: "none" }}>{PHONE}</a>
          </p>

          <div style={{ display: "flex", gap: 12, marginTop: 4 }}>
            <Button onClick={() => go(RESERVE_URL)}>Tisch sichern</Button>
            <Button variant="ghost" onClick={() => go(MAPS_URL)}>Route planen</Button>
          </div>
        </div>
        <Photo tone="sage" src={PH + "aussicht.jpg"} ratio="4/5" radius={20} shadow alt="Aussicht am Sonntagsberg" />
      </div>
    </section>
  );
}

/* ---- Manufaktur ---- */
function Manufaktur() {
  return (
    <section data-screen-label="Manufaktur" style={{ background: "var(--canvas)", padding: "var(--space-section) 24px" }}>
      <div style={{ maxWidth: 1080, margin: "0 auto", display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 56, alignItems: "center" }}>
        <Photo src={PH + "manufaktur.jpg"} ratio="4/3" radius={20} shadow alt="Goldblatt Manufaktur am Sonntagsberg" />
        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          <span className="gp-eyebrow">Die Manufaktur</span>
          <h2 className="gp-display-lg">High-Protein Bio-Gerichte &amp; Feinkost — direkt ab Manufaktur.</h2>
          <p className="gp-body" style={{ color: "var(--ink-soft)" }}>
            Das Goldplatzl ist die <strong style={{ color: "var(--ink)" }}>GOLDBLATT</strong>-Manufaktur für gesunde Bio-Lebensmittel: Gerichte, Aufstriche, Feinkost. Unter der Woche kannst du mit Terminvereinbarung vorbeikommen und einkaufen.
          </p>
          <p className="gp-caption" style={{ color: "var(--ink-muted)" }}>
            Hotline <a href={PHONE_TEL} style={{ color: "var(--gold-ink)", fontWeight: 600, textDecoration: "none" }}>{PHONE}</a>
          </p>
          <div style={{ display: "flex", gap: 12, marginTop: 4 }}>
            <Button onClick={() => go(SHOP_URL)}>Zum Goldblatt Onlineshop</Button>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---- Gutschein ---- */
function Gutschein() {
  return (
    <section data-screen-label="Gutschein" style={{ background: "var(--surface-dark)", padding: "var(--space-section) 24px" }}>
      <div style={{ maxWidth: 760, margin: "0 auto", textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", gap: 16 }}>
        <span className="gp-eyebrow" style={{ color: "var(--gold-300)" }}>Geschenkgutscheine</span>
        <h2 className="gp-display-lg" style={{ color: "var(--on-dark)" }}>Genuss verschenken — als Print-at-Home-PDF.</h2>
        <p className="gp-body" style={{ color: "var(--body-muted-dark)", maxWidth: 540 }}>
          Schreib uns an <a href={"mailto:" + VOUCHER_MAIL} style={{ color: "var(--gold-300)", fontWeight: 600, textDecoration: "none" }}>{VOUCHER_MAIL}</a> und nenne uns den gewünschten Gutscheinbetrag für den veganen Heurigen — wir schicken dir den Gutschein und unsere Bankdaten für die Überweisung zu.
        </p>
        <div style={{ display: "flex", gap: 12, marginTop: 6, flexWrap: "wrap", justifyContent: "center" }}>
          <Button onClick={() => go("mailto:" + VOUCHER_MAIL)}>Hier Gutschein bestellen</Button>
        </div>
        <p className="gp-caption" style={{ color: "var(--body-muted-dark)", marginTop: 4 }}>
          Hotline für Gutscheine · <a href={PHONE_TEL} style={{ color: "var(--gold-300)", fontWeight: 600, textDecoration: "none" }}>{PHONE}</a>
        </p>
      </div>
    </section>
  );
}

/* ---- Über uns / Gründer + Social ---- */
function SocialIcon({ type }) {
  const paths = {
    instagram: "M12 2.2c3.2 0 3.6 0 4.9.07 1.2.06 1.8.25 2.2.42.6.22 1 .48 1.4.9.43.43.7.83.92 1.42.17.4.36 1 .42 2.2.06 1.3.07 1.7.07 4.9s0 3.6-.07 4.9c-.06 1.2-.25 1.8-.42 2.2-.22.6-.49 1-.92 1.42-.42.42-.82.68-1.42.9-.4.17-1 .36-2.2.42-1.3.06-1.7.07-4.9.07s-3.6 0-4.9-.07c-1.2-.06-1.8-.25-2.2-.42a3.8 3.8 0 0 1-1.42-.9 3.8 3.8 0 0 1-.9-1.42c-.17-.4-.36-1-.42-2.2C2.2 15.6 2.2 15.2 2.2 12s0-3.6.07-4.9c.06-1.2.25-1.8.42-2.2.22-.6.48-1 .9-1.42.43-.43.83-.7 1.42-.92.4-.17 1-.36 2.2-.42C8.4 2.2 8.8 2.2 12 2.2zm0 1.8c-3.1 0-3.5 0-4.7.07-1.1.05-1.7.24-2.1.4-.5.2-.9.43-1.3.83-.4.4-.64.8-.84 1.3-.16.4-.35 1-.4 2.1C2.6 9.9 2.6 10.3 2.6 12s0 2.1.06 3.3c.05 1.1.24 1.7.4 2.1.2.5.44.9.84 1.3.4.4.8.63 1.3.83.4.16 1 .35 2.1.4 1.2.06 1.6.07 4.7.07s3.5 0 4.7-.07c1.1-.05 1.7-.24 2.1-.4.5-.2.9-.43 1.3-.83.4-.4.63-.8.83-1.3.16-.4.35-1 .4-2.1.06-1.2.07-1.6.07-3.3s0-2.1-.07-3.3c-.05-1.1-.24-1.7-.4-2.1a3.5 3.5 0 0 0-.83-1.3 3.5 3.5 0 0 0-1.3-.83c-.4-.16-1-.35-2.1-.4C15.5 4 15.1 4 12 4zm0 3.05A4.95 4.95 0 1 1 12 17a4.95 4.95 0 0 1 0-9.9zm0 1.8a3.15 3.15 0 1 0 0 6.3 3.15 3.15 0 0 0 0-6.3zM17.1 6.5a1.15 1.15 0 1 1 0 2.3 1.15 1.15 0 0 1 0-2.3z",
    facebook: "M22 12.06C22 6.5 17.52 2 12 2S2 6.5 2 12.06C2 17.08 5.66 21.24 10.44 22v-7.02H7.9v-2.92h2.54V9.85c0-2.52 1.5-3.91 3.78-3.91 1.1 0 2.24.2 2.24.2v2.47h-1.26c-1.24 0-1.63.78-1.63 1.57v1.88h2.78l-.44 2.92h-2.34V22C18.34 21.24 22 17.08 22 12.06z",
    tiktok: "M16.6 5.82A4.28 4.28 0 0 1 15.5 3h-3.1v12.4a2.5 2.5 0 1 1-2-2.45V9.78a5.6 5.6 0 1 0 5.1 5.57V9.01a7.3 7.3 0 0 0 4.1 1.27V7.18a4.28 4.28 0 0 1-3-1.36z",
    spotify: "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm4.59 14.42a.62.62 0 0 1-.86.21c-2.35-1.44-5.3-1.76-8.79-.96a.62.62 0 1 1-.28-1.22c3.81-.87 7.08-.5 9.72 1.11.3.18.39.57.21.86zm1.22-2.72a.78.78 0 0 1-1.07.26c-2.69-1.65-6.79-2.13-9.97-1.16a.78.78 0 1 1-.45-1.49c3.63-1.1 8.15-.57 11.24 1.32.37.23.49.71.25 1.07zm.11-2.84C14.8 8.98 9.3 8.8 6.2 9.74a.93.93 0 1 1-.54-1.78c3.56-1.08 9.64-.87 13.44 1.39a.93.93 0 0 1-.96 1.6z",
  };
  return (
    <svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor" aria-hidden="true"><path d={paths[type]} /></svg>
  );
}

function About() {
  return (
    <section data-screen-label="Über uns" style={{ background: "var(--parchment)" }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", alignItems: "stretch" }}>
        <Photo src={PH + "gruender.jpg"} alt="Stephan, Matthias & Mel — die Goldblatt-Gründer" position="center 20%" style={{ minHeight: 420 }} />
        <div style={{ padding: "var(--space-section) 56px", display: "flex", flexDirection: "column", gap: 18, justifyContent: "center" }}>
          <span className="gp-eyebrow">Über uns</span>
          <h2 className="gp-display-md">Hinter jedem Gericht steckt eine Geschichte.</h2>
          <p className="gp-body" style={{ color: "var(--ink-soft)" }}>
            Wir haben unsere Ernährung umgestellt und nie zurückgeschaut. Pflanzliche Vollwertkost überzeugt uns jeden Tag neu. Nur eines hat uns gefehlt: gesunde Convenience mit echtem, natürlichem Geschmack.
          </p>
          <p className="gp-body" style={{ color: "var(--ink-soft)" }}>
            Also haben wir <strong style={{ color: "var(--ink)" }}>GOLDBLATT</strong> gegründet und veredeln im Goldplatzl — unserer Manufaktur und Heurigen — regionale Bio-Zutaten zu nährstoffreichen Gerichten und schmackhafter Feinkost. Komm vorbei und schmeck den Unterschied.
          </p>
          <p className="gp-script" style={{ color: "var(--clay-500)", fontSize: 26 }}>Stephan · Matthias · Mel</p>
          <div style={{ display: "flex", alignItems: "center", gap: 14, marginTop: 4 }}>
            {["instagram", "facebook", "tiktok"].map((t) => (
              <a key={t} href={SOCIAL[t]} target="_blank" rel="noopener" aria-label={t} style={{ color: "var(--ink)", display: "flex" }}><SocialIcon type={t} /></a>
            ))}
            <a href={SOCIAL.instagram} target="_blank" rel="noopener" style={{ fontSize: 15, fontWeight: 600, color: "var(--ink-soft)", textDecoration: "none" }}>@goldblattfood</a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---- Spotify playlist strip ---- */
function Playlist() {
  return (
    <section data-screen-label="Playlist" style={{ background: "var(--canvas)", padding: "var(--space-2xl) 24px" }}>
      <div style={{ maxWidth: 760, margin: "0 auto", background: "var(--surface-dark)", borderRadius: "var(--radius-xl)", padding: "40px 40px", display: "flex", alignItems: "center", gap: 28, flexWrap: "wrap", justifyContent: "center", textAlign: "center" }}>
        <div style={{ flex: "1 1 300px", display: "flex", flexDirection: "column", gap: 8, alignItems: "center" }}>
          <span className="gp-eyebrow" style={{ color: "var(--gold-300)" }}>Goldplatzl Summer Beats</span>
          <h3 className="gp-display-md" style={{ color: "var(--on-dark)" }}>Speichere dir unsere Playlist.</h3>
          <p className="gp-body" style={{ color: "var(--body-muted-dark)", maxWidth: 460 }}>
            Mehr Drum &amp; Bass als House — chillige Beats fürs gemütliche Zusammensitzen am Berg.
          </p>
          <div style={{ marginTop: 14 }}>
            <Button onClick={() => go(SPOTIFY_URL)} iconBefore={<SocialIcon type="spotify" />}>Playlist auf Spotify öffnen</Button>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---- Anreise & Übernachtung ---- */
function Anreise() {
  const blocks = [
    {
      h: "Anreise mit dem Auto",
      body: <>PKW über die A2 — aus <strong style={{ color: "var(--ink)" }}>Wien ca. 1,5 Stunden</strong>, aus <strong style={{ color: "var(--ink)" }}>Graz ca. 45 Minuten</strong>. Kostenloser Gäste-Parkplatz, Wohnmobile willkommen. Tipp: Die letzten Meter zu Fuß über die <strong style={{ color: "var(--ink)" }}>Panoramastiege</strong>, die das Goldplatzl mit dem Bio-Thermenhotel Wilfinger verbindet.</>,
      link: ["Route planen", MAPS_URL],
    },
    {
      h: "Anreise per Bus",
      body: <>Schnellste Öffi-Variante: in 1:40h mit dem Thermenlandbus von Wien nach Bad Waltersdorf, Haltestelle Heiltherme/Parkplatz — von dort 12 Minuten Spaziergang. Letzter Retourbus 19:11 Uhr.</>,
      link: ["Zum Busfahrplan", BUS_URL],
    },
    {
      h: "Anreise per Zug",
      body: <>Wien Westbahnhof → Bad Waltersdorf mit einmal Umsteigen in Wr. Neustadt, ca. 2:30h. Vom Bahnhof rund 22 Minuten Gehzeit. Letzte Retourzüge je nach Tag gegen 19:12 Uhr.</>,
      link: ["Zum ÖBB-Fahrplan", OEBB_URL],
    },
    {
      h: "Übernachten",
      body: <>Bad Waltersdorf bietet Thermenwellness, Wandern, Golf &amp; Genuss — Pensionen und Hotels gibt's direkt in der Umgebung, oft ab 60 € pro Nacht inkl. Frühstück. Direkt nebenan z. B. der <a href={HOTEL_URL} target="_blank" rel="noopener" style={{ color: "var(--gold-ink)", fontWeight: 600, textDecoration: "none" }}>Sonntagsberghof</a> (+43 664 9150509).</>,
      link: null,
    },
  ];
  return (
    <section data-screen-label="Anreise" style={{ background: "var(--canvas)", padding: "var(--space-section) 24px" }}>
      <div style={{ maxWidth: 980, margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: 48 }}>
          <span className="gp-eyebrow">Anreise &amp; Infos</span>
          <h2 className="gp-display-lg" style={{ marginTop: 8 }}>So findest du zu uns — und bleibst gerne länger.</h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40 }}>
          {blocks.map((b) => (
            <div key={b.h} style={{ display: "flex", flexDirection: "column", gap: 10, paddingTop: 22, borderTop: "1px solid var(--hairline)" }}>
              <h3 style={{ margin: 0, fontSize: 21, fontWeight: 700, letterSpacing: "-0.01em", color: "var(--ink)" }}>{b.h}</h3>
              <p className="gp-body" style={{ color: "var(--ink-soft)" }}>{b.body}</p>
              {b.link && <a href={b.link[1]} target="_blank" rel="noopener" style={{ fontSize: 15, fontWeight: 600, color: "var(--gold-ink)", textDecoration: "none" }}>{b.link[0]} →</a>}
            </div>
          ))}
        </div>
        <p className="gp-caption" style={{ color: "var(--ink-muted)", textAlign: "center", marginTop: 40 }}>
          Goldplatzl Gastro KG · Wagerberg 37 · 8271 Bad Waltersdorf, Austria
        </p>
      </div>
    </section>
  );
}

/* ---- Footer ---- */
function SiteFooter() {
  const cols = [
    { h: "Heuriger", links: [["Speisekarte", MENU_PDF], ["Reservierung", RESERVE_URL], ["Gutscheine", "mailto:" + VOUCHER_MAIL]] },
    { h: "Goldblatt", links: [["Manufaktur", SHOP_URL], ["Onlineshop", SHOP_URL], ["Über uns", SOCIAL.instagram]] },
    { h: "Besuch", links: [["Anfahrt", "https://maps.google.com/?q=Goldplatzl+Wagerberg+37+Bad+Waltersdorf"], ["Gruppen", PHONE_TEL], ["Kontakt", PHONE_TEL]] },
  ];
  return (
    <footer style={{ background: "var(--parchment)", padding: "var(--space-3xl) 24px var(--space-xl)" }}>
      <div style={{ maxWidth: 1080, margin: "0 auto", display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr", gap: 40 }}>
        <div>
          <img src={LOGO_INK} style={{ height: 44, marginBottom: 14 }} alt="Goldplatzl" />
          <p className="gp-caption" style={{ color: "var(--ink-muted)", maxWidth: 240, marginBottom: 14 }}>Der 1. rein pflanzliche Bio-Heurige der Steiermark.</p>
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            {["instagram", "facebook", "tiktok"].map((t) => (
              <a key={t} href={SOCIAL[t]} target="_blank" rel="noopener" aria-label={t} style={{ color: "var(--ink)", display: "flex" }}><SocialIcon type={t} /></a>
            ))}
          </div>
        </div>
        {cols.map((c) => (
          <div key={c.h} style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            <span style={{ fontSize: 14, fontWeight: 700, color: "var(--ink)" }}>{c.h}</span>
            {c.links.map(([l, href]) => <a key={l} href={href} target="_blank" rel="noopener" style={{ fontSize: 14, color: "var(--ink-soft)", textDecoration: "none" }}>{l}</a>)}
          </div>
        ))}
      </div>
      <div style={{ maxWidth: 1080, margin: "36px auto 0", paddingTop: 18, borderTop: "1px solid var(--hairline)", display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 10 }}>
        <span style={{ fontSize: 12, color: "var(--ink-muted)" }}>© 2026 Goldplatzl · Goldblatt Manufaktur · @goldblattfood</span>
        <span style={{ fontSize: 12, color: "var(--ink-muted)", display: "flex", gap: 14 }}>
          <span>Impressum</span>
          <a href="https://goldblatt.at/datenschutz" target="_blank" rel="noopener" style={{ color: "var(--ink-muted)", textDecoration: "none" }}>Datenschutz</a>
        </span>
      </div>
    </footer>
  );
}

Object.assign(window, { GP_Photo: Photo, GP_SiteNav: SiteNav, GP_Hero: Hero, GP_Intro: Intro, GP_FeatureTiles: FeatureTiles, GP_Gallery: Gallery, GP_Manufaktur: Manufaktur, GP_Gutschein: Gutschein, GP_About: About, GP_Location: Location, GP_Playlist: Playlist, GP_Anreise: Anreise, GP_SiteFooter: SiteFooter });