/* global React */
/* DDPP Buchungen — shared layout components */

function TopBar() {
  const mapsUrl = "https://maps.google.com/?q=Danziger+Str.+6,+10435+Berlin";
  const appStoreUrl = "https://apps.apple.com/de/app/ding-dong-ping-pong/id6743864131";
  const playStoreUrl = "https://play.google.com/store/apps/details?id=com.dingdongpingpong.app";
  return (
    <div className="topbar">
      <div className="inner">
        <div className="links">
          <a href={mapsUrl} target="_blank" rel="noopener noreferrer">Tischtennis an der Kulturbrauerei - Danziger Str. 6 · 10435 Berlin</a>
        </div>
        <div className="app-pills">
          <a className="app-pill" href={appStoreUrl} target="_blank" rel="noopener noreferrer">
            <svg width="14" height="16" viewBox="0 0 14 16" fill="currentColor" aria-hidden="true"><path d="M11.5 8.5c0-1.7 1.4-2.5 1.5-2.5-.8-1.2-2.1-1.4-2.5-1.4-1.1-.1-2.1.6-2.6.6S6.6 4.6 5.7 4.6c-1.2 0-2.3.7-2.9 1.8-1.2 2.1-.3 5.2.9 6.9.6.8 1.3 1.7 2.2 1.7s1.2-.6 2.3-.6 1.4.6 2.3.6c1 0 1.6-.8 2.2-1.7.7-1 1-2 1-2-.1 0-1.9-.7-1.9-2.8zM9.6 3.5c.5-.6.8-1.4.7-2.3-.7 0-1.6.5-2.1 1.1-.5.5-.9 1.4-.7 2.2.8.1 1.6-.4 2.1-1z" /></svg>
            <span>App Store</span>
          </a>
          <a className="app-pill" href={playStoreUrl} target="_blank" rel="noopener noreferrer">
            <svg width="14" height="16" viewBox="0 0 14 16" fill="currentColor" aria-hidden="true"><path d="M1.2 1.1c-.2.2-.3.5-.3.9v12c0 .4.1.7.3.9L8 8 1.2 1.1zm7.7 7.6l1.9 1.9-7.5 4.3c-.2.1-.4.2-.5.2L8.9 8.7zm0-1.4L2.8 0c.2 0 .4.1.5.2l7.5 4.3-1.9 1.8zm4.6 1L11.6 9.6 9.7 7.7l1.8-1.8 1.9 1.1c.5.3.5.9.1 1.3z" /></svg>
            <span>Play Store</span>
          </a>
        </div>
      </div>
    </div>);

}

function Header({ active }) {
  const bookingUrl = "https://dingdongpingpong.podplay.app/book";
  return (
    <header className="site-header">
      <div className="inner">
        <a href="index.html" style={{ display: "flex", alignItems: "center" }}>
          <img className="logo" src="assets/logo_wordmark_green.svg" alt="Ding Dong Ping Pong" />
        </a>
        <nav className="nav-pills">
          <a href="events.html?type=events" className={`nav-pill ${active === "events" ? "active" : ""}`}>Events</a>
          <a href="events.html?type=geburtstage" className={`nav-pill ${active === "geburtstage" ? "active" : ""}`}>Geburtstage</a>
          <a href="events.html?type=firmenfeiern" className={`nav-pill ${active === "firmenfeiern" ? "active" : ""}`}>Firmenfeiern</a>
        </nav>
        <div className="actions">
          <a className="btn btn-orange" href={bookingUrl} target="_blank" rel="noopener noreferrer">Tisch buchen</a>
        </div>
      </div>
    </header>);

}

function Ticker({ words }) {
  const items = words || ["DING", "·", "DONG", "·", "FIRMENFEIER", "·", "GEBURTSTAG", "·", "TURNIER", "·", "SCHMETTERN", "·"];
  const doubled = [...items, ...items, ...items];
  return (
    <div className="ticker-wrap">
      <div className="ticker">
        {doubled.map((w, i) =>
        <span key={i} className={w === "·" ? "dot" : ""}>{w}</span>
        )}
      </div>
    </div>);

}

function FooterCTA({ heading, sub, cta, ctaHref }) {
  const bookingUrl = "https://dingdongpingpong.podplay.app/book";
  const href = ctaHref || bookingUrl;
  const isExternal = /^https?:/.test(href);
  return (
    <section className="footer-cta">
      <div className="pattern"></div>
      <div className="inner">
        <h2>
          {heading || <>DING DONG!<br /><span className="alt">ZEIT FÜR'S EVENT!</span></>}
        </h2>
        <p>{sub || "Klick auf den Button, wähle Datum und Uhrzeit — der Rest geht im Buchungstool."}</p>
        <a className="btn btn-green btn-lg" href={href} {...(isExternal ? { target: "_blank", rel: "noopener noreferrer" } : {})}>{cta || "Tisch buchen →"}</a>
      </div>
    </section>);

}

function Footer() {
  const mapsUrl = "https://maps.google.com/?q=Danziger+Str.+6,+10435+Berlin";
  const appStoreUrl = "https://apps.apple.com/de/app/ding-dong-ping-pong/id6743864131";
  const playStoreUrl = "https://play.google.com/store/apps/details?id=com.dingdongpingpong.app";
  return (
    <footer className="site-footer">
      <div className="app-promo">
        <div className="app-promo-inner">
          <div className="app-promo-text">
            <div className="section-eyebrow" style={{ margin: 0, color: "var(--ddpp-cyan)" }}>DIE DDPP APP</div>
            <h3>Spielpartner:innen finden,<br />Matches buchen, Replays sehen.</h3>
          </div>
          <div className="app-promo-buttons">
            <a className="app-btn" href={appStoreUrl} target="_blank" rel="noopener noreferrer">
              <svg viewBox="0 0 24 28" width="28" height="32" fill="currentColor" aria-hidden="true"><path d="M19.7 14.7c0-2.9 2.4-4.3 2.5-4.4-1.4-2-3.5-2.3-4.3-2.3-1.8-.2-3.5 1-4.5 1s-2.3-1-3.9-1c-2 0-3.9 1.2-4.9 3-2.1 3.7-.5 9.1 1.5 12.1 1 1.5 2.2 3.1 3.8 3.1s2.1-1 4-1 2.4 1 4 1c1.7-.1 2.7-1.5 3.7-3 1.2-1.7 1.7-3.4 1.7-3.5-.1 0-3.2-1.2-3.2-4.8zM16.5 6.2c.9-1.1 1.5-2.6 1.3-4.2C16.5 2 14.8 3 13.9 4c-.8.9-1.6 2.4-1.4 4 1.5.1 2.9-.8 4-1.8z" /></svg>
              <span>
                <small>Laden im</small>
                <strong>App Store</strong>
              </span>
            </a>
            <a className="app-btn" href={playStoreUrl} target="_blank" rel="noopener noreferrer">
              <svg viewBox="0 0 28 28" width="28" height="32" fill="currentColor" aria-hidden="true"><path d="M3.6 1.4C3.2 1.7 3 2.3 3 3v22c0 .7.2 1.3.6 1.6L16 14 3.6 1.4zm15 13.7l3.5 3.5L8 26.6c-.4.2-.7.3-1 .3L18.6 15.1zm0-2.6L7 .4c.3 0 .6.1 1 .3l14.1 8L18.6 12.5zm8.4 1.8L23.6 16.4l-3.5-3.5 3.4-3.4 3.5 2c1 .5 1 1.7.1 2.4z" /></svg>
              <span>
                <small>Jetzt bei</small>
                <strong>Google Play</strong>
              </span>
            </a>
          </div>
        </div>
      </div>
      <div className="inner">
        <div className="links">
          <a href="#">Impressum</a>
          <a href="#">Datenschutz</a>
          <a href="#">AGB</a>
          <a href="mailto:hallo@dingdongpingpong.club">Kontakt</a>
          <a href={mapsUrl} target="_blank" rel="noopener noreferrer">Anfahrt</a>
        </div>
        <div className="legal-inline">
          <span>© 2026 Ding Dong Ping Pong Club</span>
          <span>Danziger Str. 6 · 10435 Berlin · Kulturbrauerei</span>
        </div>
      </div>
    </footer>);

}

/* Booking widget placeholder — wired up later to real tool */
function BookingWidget({ defaultAnlass, onSubmit }) {
  const [anlass, setAnlass] = React.useState(defaultAnlass || "Firmenfeier");
  const [people, setPeople] = React.useState(12);
  const [date, setDate] = React.useState("");
  const [time, setTime] = React.useState("19:00");
  const [duration, setDuration] = React.useState("3 Std.");
  const [name, setName] = React.useState("");
  const [email, setEmail] = React.useState("");

  const handle = (e) => {
    e.preventDefault();
    onSubmit && onSubmit({ anlass, people, date, time, duration, name, email });
  };

  return (
    <form className="widget" onSubmit={handle}>
      <div className="w-head">
        <h3>Anfrage starten</h3>
        <span className="badge">Platzhalter</span>
      </div>
      <div className="row">
        <div>
          <label>Anlass</label>
          <select value={anlass} onChange={(e) => setAnlass(e.target.value)}>
            <option>Firmenfeier</option>
            <option>Kindergeburtstag</option>
            <option>Geburtstag</option>
            <option>Turnier</option>
            <option>Schul-/Vereinsausflug</option>
            <option>Coaching-Event</option>
          </select>
        </div>
        <div>
          <label>Personen</label>
          <input type="number" min="2" max="80" value={people} onChange={(e) => setPeople(e.target.value)} />
        </div>
      </div>
      <div className="row three">
        <div>
          <label>Datum</label>
          <input type="date" value={date} onChange={(e) => setDate(e.target.value)} />
        </div>
        <div>
          <label>Uhrzeit</label>
          <input type="time" value={time} onChange={(e) => setTime(e.target.value)} />
        </div>
        <div>
          <label>Dauer</label>
          <select value={duration} onChange={(e) => setDuration(e.target.value)}>
            <option>2 Std.</option>
            <option>3 Std.</option>
            <option>4 Std.</option>
            <option>Ganzer Abend</option>
          </select>
        </div>
      </div>
      <div className="row">
        <div>
          <label>Name</label>
          <input value={name} onChange={(e) => setName(e.target.value)} placeholder="Wie heißt du?" />
        </div>
        <div>
          <label>E-Mail</label>
          <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="du@firma.de" />
        </div>
      </div>
      <button type="submit" className="btn btn-orange submit">Anfrage absenden</button>
      <div className="placeholder-note">
        <span>↓ Hier wird später das Buchungstool eingebettet</span>
        <span>go.dingdongpingpong.club</span>
      </div>
    </form>);

}

Object.assign(window, { TopBar, Header, Ticker, FooterCTA, Footer, BookingWidget });