/* global React, TopBar, Header, Footer, FooterCTA */
const { useEffect } = React;

const BOOKING_URL = "/app";
const APPSTORE_URL = "https://apps.apple.com/de/app/ding-dong-ping-pong/id6743864131";
const PLAYSTORE_URL = "https://play.google.com/store/apps/details?id=com.dingdongpingpong.app";

/* Lokales Dictionary — Inhalte aus der App-Fallback-Page (alle 10 Sprachen).
   Sprache kommt aus window.currentLang; Wechsel lädt die Seite neu (i18n.setLang). */
const SG = {
  de: {
    page_title: "So geht's: Tischtennis buchen – Ding Dong Ping Pong | Prenzlauer Berg Berlin",
    eyebrow: "So geht's",
    title_pre: "In sechs Schritten", title_alt: "zum Spiel.",
    lede: "Buchen, eintreten, schmettern — alles läuft über die DDPP-App. So einfach geht's:",
    download_label: "Hol dir zuerst die App:",
    appstore_top: "Laden im", playstore_top: "Jetzt bei",
    door_eyebrow: "Gut zu wissen", door_title: "Tür auf per App",
    door_text: "Du kannst die Tür bis zu 15 Minuten vor und 15 Minuten nach deiner Buchung direkt in der App öffnen — einfach antippen und rein.",
    cta: "Tisch buchen →",
    steps: [
      ["App herunterladen", "Lade die DDPP-App im App Store oder bei Google Play."],
      ["Zeitslot auswählen", "Wähle in der App deinen Wunschtermin und die Anzahl der Tische."],
      ["Account erstellen", "Registriere dich kurz mit E-Mail oder Apple/Google."],
      ["Mit Kreditkarte buchen", "Bezahle bequem direkt in der App per Kreditkarte."],
      ["Tür in der App öffnen", "Vor Ort öffnest du die Tür per Tap im App-Cockpit — bis zu 15 Minuten vor und nach deiner Buchung."],
      ["Loszocken", "Schnapp dir den Schläger und auf geht's — viel Spaß beim Schmettern."]
    ]
  },
  en: {
    page_title: "How it works: book table tennis – Ding Dong Ping Pong | Prenzlauer Berg Berlin",
    eyebrow: "How it works",
    title_pre: "In six steps", title_alt: "to the game.",
    lede: "Book, walk in, smash — it all runs through the DDPP app. Here's how:",
    download_label: "Get the app first:",
    appstore_top: "Download on the", playstore_top: "Get it on",
    door_eyebrow: "Good to know", door_title: "Open the door from the app",
    door_text: "You can open the door straight from the app up to 15 minutes before and 15 minutes after your booking — just tap and walk in.",
    cta: "Book a table →",
    steps: [
      ["Download the app", "Get the DDPP app from the App Store or Google Play."],
      ["Pick a time slot", "Choose your date and how many tables you need."],
      ["Create your account", "Quick signup with email or Apple/Google."],
      ["Pay by credit card", "Check out securely inside the app."],
      ["Open the door from the app", "On arrival, tap once in the cockpit to unlock — up to 15 minutes before and after your booking."],
      ["Start playing", "Grab a paddle and go — have fun smashing."]
    ]
  },
  fr: {
    page_title: "Mode d'emploi : réserver – Ding Dong Ping Pong | Tennis de table Prenzlauer Berg Berlin",
    eyebrow: "Mode d'emploi",
    title_pre: "En six étapes", title_alt: "et c'est parti.",
    lede: "Réserve, entre, joue — tout passe par l'appli DDPP. Voici comment :",
    download_label: "Télécharge d'abord l'appli :",
    appstore_top: "Télécharger sur", playstore_top: "Disponible sur",
    door_eyebrow: "Bon à savoir", door_title: "La porte s'ouvre depuis l'appli",
    door_text: "Tu peux ouvrir la porte directement depuis l'appli jusqu'à 15 minutes avant et 15 minutes après ta réservation — un tap et c'est bon.",
    cta: "Réserver une table →",
    steps: [
      ["Télécharger l'appli", "Téléchargez l'appli DDPP sur l'App Store ou Google Play."],
      ["Choisir un créneau", "Sélectionnez la date et le nombre de tables."],
      ["Créer un compte", "Inscription rapide par e-mail ou Apple/Google."],
      ["Payer par carte", "Réglez en toute sécurité dans l'appli."],
      ["Ouvrir la porte depuis l'appli", "Sur place, déverrouillez d'un tap dans le cockpit — jusqu'à 15 minutes avant et après votre réservation."],
      ["C'est parti !", "Attrapez une raquette et amusez-vous."]
    ]
  },
  es: {
    page_title: "Cómo funciona: reservar – Ding Dong Ping Pong | Tenis de mesa Prenzlauer Berg Berlín",
    eyebrow: "Cómo funciona",
    title_pre: "En seis pasos", title_alt: "a jugar.",
    lede: "Reserva, entra, juega — todo desde la app DDPP. Así de fácil:",
    download_label: "Primero descarga la app:",
    appstore_top: "Descárgala en el", playstore_top: "Disponible en",
    door_eyebrow: "Bueno saberlo", door_title: "Abre la puerta desde la app",
    door_text: "Puedes abrir la puerta desde la app hasta 15 minutos antes y 15 minutos después de tu reserva — solo toca y entra.",
    cta: "Reservar mesa →",
    steps: [
      ["Descarga la app", "Consigue la app DDPP en App Store o Google Play."],
      ["Elige un horario", "Selecciona el día y cuántas mesas necesitas."],
      ["Crea tu cuenta", "Registro rápido con e-mail o Apple/Google."],
      ["Paga con tarjeta", "Compra segura directamente en la app."],
      ["Abre la puerta desde la app", "Al llegar, abre con un toque desde el cockpit — hasta 15 minutos antes y después de tu reserva."],
      ["¡A jugar!", "Coge una pala y dale caña."]
    ]
  },
  tr: {
    page_title: "Nasıl çalışır: rezervasyon – Ding Dong Ping Pong | Masa Tenisi Prenzlauer Berg Berlin",
    eyebrow: "Nasıl çalışır",
    title_pre: "Altı adımda", title_alt: "oyuna.",
    lede: "Rezerve et, gir, oyna — hepsi DDPP uygulamasıyla. İşte böyle:",
    download_label: "Önce uygulamayı indir:",
    appstore_top: "İndir:", playstore_top: "Bulabileceğin yer:",
    door_eyebrow: "Bilmekte fayda var", door_title: "Kapıyı uygulamadan aç",
    door_text: "Kapıyı rezervasyonundan 15 dakika önce ve 15 dakika sonrasına kadar doğrudan uygulamadan açabilirsin — dokun ve gir.",
    cta: "Masa ayırt →",
    steps: [
      ["Uygulamayı indir", "DDPP uygulamasını App Store veya Google Play'den indir."],
      ["Zaman dilimi seç", "Tarih ve masa sayısını seç."],
      ["Hesap oluştur", "E-posta ya da Apple/Google ile hızlı kayıt."],
      ["Kartla öde", "Ödemeyi güvenle uygulamadan yap."],
      ["Uygulamadan kapıyı aç", "Geldiğinde cockpit'ten tek dokunuşla aç — rezervasyonundan 15 dakika önce ve sonrasına kadar."],
      ["Oynamaya başla", "Raketi al, başla — iyi smaçlar."]
    ]
  },
  zh: {
    page_title: "使用步骤：预订 – Ding Dong Ping Pong | 乒乓球 Prenzlauer Berg 柏林",
    eyebrow: "使用步骤",
    title_pre: "六步", title_alt: "即可开打。",
    lede: "预订、入场、开打 —— 全在 DDPP App 内完成。步骤如下：",
    download_label: "先下载 App：",
    appstore_top: "下载", playstore_top: "下载",
    door_eyebrow: "贴心提示", door_title: "用 App 开门",
    door_text: "在预订开始前 15 分钟到结束后 15 分钟内，你都可以直接在 App 里开门 —— 轻轻一点即可进入。",
    cta: "预订球桌 →",
    steps: [
      ["下载应用", "在 App Store 或 Google Play 下载 DDPP 应用。"],
      ["选择时段", "在 App 内选择日期和球桌数量。"],
      ["创建账户", "用邮箱或 Apple/Google 快速注册。"],
      ["信用卡支付", "在 App 内安全完成支付。"],
      ["用 App 开门", "到场后在 cockpit 一键开门 —— 预订前后各 15 分钟内均可。"],
      ["开始畅玩", "抓起球拍，尽情挥洒。"]
    ]
  },
  pl: {
    page_title: "Jak to działa: rezerwacja – Ding Dong Ping Pong | Tenis stołowy Prenzlauer Berg Berlin",
    eyebrow: "Jak to działa",
    title_pre: "W sześciu krokach", title_alt: "do gry.",
    lede: "Zarezerwuj, wejdź, graj — wszystko w aplikacji DDPP. Oto jak:",
    download_label: "Najpierw pobierz aplikację:",
    appstore_top: "Pobierz w", playstore_top: "Pobierz w",
    door_eyebrow: "Warto wiedzieć", door_title: "Otwórz drzwi w aplikacji",
    door_text: "Drzwi możesz otworzyć bezpośrednio w aplikacji do 15 minut przed i 15 minut po rezerwacji — wystarczy tapnąć i wejść.",
    cta: "Zarezerwuj stół →",
    steps: [
      ["Pobierz aplikację", "Pobierz DDPP z App Store lub Google Play."],
      ["Wybierz termin", "Wskaż datę i liczbę stołów."],
      ["Załóż konto", "Szybka rejestracja e-mailem lub Apple/Google."],
      ["Zapłać kartą", "Bezpieczna płatność w aplikacji."],
      ["Otwórz drzwi w aplikacji", "Na miejscu odblokuj jednym tapnięciem w cockpit — do 15 minut przed i po rezerwacji."],
      ["Zaczynaj grać", "Łap rakietkę i do dzieła."]
    ]
  },
  da: {
    page_title: "Sådan gør du: book – Ding Dong Ping Pong | Bordtennis Prenzlauer Berg Berlin",
    eyebrow: "Sådan gør du",
    title_pre: "I seks trin", title_alt: "til spil.",
    lede: "Book, gå ind, spil — det hele sker i DDPP-appen. Sådan gør du:",
    download_label: "Hent appen først:",
    appstore_top: "Hent i", playstore_top: "Hent på",
    door_eyebrow: "Godt at vide", door_title: "Åbn døren fra appen",
    door_text: "Du kan åbne døren direkte i appen op til 15 minutter før og 15 minutter efter din booking — bare tryk og gå ind.",
    cta: "Book et bord →",
    steps: [
      ["Hent appen", "Hent DDPP-appen i App Store eller Google Play."],
      ["Vælg tidsrum", "Vælg dato og antal borde."],
      ["Opret konto", "Hurtig registrering med e-mail eller Apple/Google."],
      ["Betal med kort", "Sikker betaling direkte i appen."],
      ["Åbn døren fra appen", "Ved ankomst åbner du med ét tryk i cockpittet — op til 15 minutter før og efter din booking."],
      ["Spil løs", "Grib battet og af sted."]
    ]
  },
  it: {
    page_title: "Come funziona: prenota – Ding Dong Ping Pong | Ping pong Prenzlauer Berg Berlino",
    eyebrow: "Come funziona",
    title_pre: "In sei passi", title_alt: "in campo.",
    lede: "Prenota, entra, gioca — tutto dall'app DDPP. Ecco come:",
    download_label: "Scarica prima l'app:",
    appstore_top: "Scarica su", playstore_top: "Disponibile su",
    door_eyebrow: "Buono a sapersi", door_title: "Apri la porta dall'app",
    door_text: "Puoi aprire la porta direttamente dall'app fino a 15 minuti prima e 15 minuti dopo la tua prenotazione — basta un tap ed entri.",
    cta: "Prenota un tavolo →",
    steps: [
      ["Scarica l'app", "Scarica DDPP da App Store o Google Play."],
      ["Scegli un orario", "Seleziona data e numero di tavoli."],
      ["Crea l'account", "Registrazione rapida con email o Apple/Google."],
      ["Paga con carta", "Checkout sicuro direttamente nell'app."],
      ["Apri la porta dall'app", "All'arrivo, sblocca con un tap dal cockpit — fino a 15 minuti prima e dopo la tua prenotazione."],
      ["Si gioca!", "Prendi la racchetta e via."]
    ]
  },
  nl: {
    page_title: "Zo werkt het: boeken – Ding Dong Ping Pong | Tafeltennis Prenzlauer Berg Berlijn",
    eyebrow: "Zo werkt het",
    title_pre: "In zes stappen", title_alt: "klaar voor het spel.",
    lede: "Boek, loop binnen, sla erop los — alles via de DDPP-app. Zo werkt het:",
    download_label: "Download eerst de app:",
    appstore_top: "Download in de", playstore_top: "Verkrijgbaar in",
    door_eyebrow: "Goed om te weten", door_title: "Open de deur via de app",
    door_text: "Je kunt de deur rechtstreeks in de app openen tot 15 minuten voor en 15 minuten na je boeking — gewoon tikken en naar binnen.",
    cta: "Tafel boeken →",
    steps: [
      ["Download de app", "Download de DDPP-app in de App Store of Google Play."],
      ["Kies een tijdslot", "Selecteer datum en aantal tafels."],
      ["Maak een account", "Snel registreren met e-mail of Apple/Google."],
      ["Betaal met creditcard", "Veilig afrekenen in de app."],
      ["Open de deur via de app", "Bij aankomst open je met één tik in de cockpit — tot 15 minuten voor en na je boeking."],
      ["Beginnen met spelen", "Pak een batje en gaan."]
    ]
  }
};

function StoreButtons({ d }) {
  return (
    <div className="sg-download">
      <div className="sg-download-label">{d.download_label}</div>
      <div className="sg-download-btns">
        <a className="dl-btn" href={APPSTORE_URL} target="_blank" rel="noopener noreferrer">
          <svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor" aria-hidden="true"><path d="M16.365 1.43c0 1.14-.43 2.22-1.21 3.05-.78.83-1.99 1.47-3.12 1.39-.13-1.1.42-2.25 1.16-3.04.79-.85 2.12-1.49 3.17-1.4zM20.5 17.07c-.52 1.2-.77 1.74-1.44 2.79-.93 1.45-2.25 3.26-3.88 3.28-1.45.02-1.82-.94-3.79-.93-1.96.01-2.37.95-3.82.93-1.64-.02-2.88-1.66-3.81-3.11C1.55 16.6 1 11.96 3.21 9.45c1.4-1.59 3.6-2.52 5.67-2.52 2.1 0 3.42 1.15 5.16 1.15 1.69 0 2.72-1.15 5.16-1.15 1.85 0 3.81 1.01 5.19 2.76-4.56 2.5-3.81 9.02 1.11 7.38z" /></svg>
          <span className="store-label">
            <span className="top">{d.appstore_top}</span>
            <span className="name">App Store</span>
          </span>
        </a>
        <a className="dl-btn" href={PLAYSTORE_URL} target="_blank" rel="noopener noreferrer">
          <svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor" aria-hidden="true"><path d="M3.6 1.7C3.2 1.9 3 2.3 3 2.9v18.2c0 .6.2 1 .6 1.2l10.6-10.6L3.6 1.7zm12.1 8.4L5.4 0l13.3 7.7-3 2.4zM21 11l-2.7-1.5-3.2 2.5 3.2 2.5L21 13c.7-.5.7-1.5 0-2zm-15.6 13L15.7 14l3 2.4L5.4 24z" /></svg>
          <span className="store-label">
            <span className="top">{d.playstore_top}</span>
            <span className="name">Google Play</span>
          </span>
        </a>
      </div>
    </div>);
}

function SoGehtsSteps({ d }) {
  return (
    <section className="section">
      <div className="section-eyebrow">{d.eyebrow}</div>
      <h2>{d.title_pre} {d.title_alt}</h2>
      <ol className="sg-list">
        {d.steps.map((s, i) =>
          <li key={i} className="sg-step">
            <div className="sg-num">{i + 1}</div>
            <div className="sg-body">
              <h3>{s[0]}</h3>
              <p>{s[1]}</p>
              {i === 0 ? <StoreButtons d={d} /> : null}
            </div>
          </li>
        )}
      </ol>

      <aside className="door-note">
        <div className="door-icon" aria-hidden="true">
          <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M3 21h18M6 21V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v17" /><circle cx="15" cy="12" r="1.1" fill="currentColor" stroke="none" /></svg>
        </div>
        <div>
          <div className="door-eyebrow">{d.door_eyebrow}</div>
          <h3>{d.door_title}</h3>
          <p>{d.door_text}</p>
        </div>
      </aside>
    </section>);
}

function App() {
  const lang = window.currentLang || "de";
  const d = SG[lang] || SG.de;

  useEffect(() => {
    document.title = d.page_title;
  }, []);

  return (
    <>
      <TopBar />
      <Header active="howto" />
      <SoGehtsSteps d={d} />
      <FooterCTA cta={d.cta} ctaHref={BOOKING_URL} />
      <Footer />
    </>);
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);
