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

const BOOKING_URL = "https://dingdongpingpong.podplay.app/book"; // Live-Buchung

const ANLAESSE = [
{
  id: "firmenfeier",
  title: "Firmenfeier &\nTeamevent",
  blurb: "Onboarding, Sommerfest, Weihnachtsfeier. Eure Crew, unser Setup.",
  color: "green",
  bg: "url('assets/firmenfeier.png')",
  href: "firmenfeier.html"
},
{
  id: "kindergeburtstag",
  title: "Kinder-\ngeburtstag",
  blurb: "Pizza, Kuchen, Pingpong. Das Geburtstagskind gewinnt. Versprochen.",
  color: "cyan",
  bg: "url('assets/kindergeburtstag.png')",
  href: "kindergeburtstag.html"
},
{
  id: "private",
  title: "Private\nEvents",
  blurb: "Geburtstag, JGA, Familienfeier. Dein Tag, deine Regeln.",
  color: "orange",
  bg: "url('assets/private-events.png')",
  href: "private-events.html"
}];


function Hero() {
  return (
    <section className="hero-landing">
      <div className="inner">
        <div className="eyebrow">JETZT DEIN EINZIGARTIGES TISCHTENNIS-EVENT BUCHEN</div>
        <h1>
          DING DONG!<br />
          <span className="alt">AB DEM 27.05. IST ES ZEIT FÜR PING PONG. </span>
        </h1>
        <p className="lede">Vier Profi-Tische und ein Ballroboter direkt neben in der Kulturbrauerei. Schmettern bei allen Wettern - mit bis zu 16 Freunden, Kolleg:innen oder Geburtstagsgästen.

        </p>
        <div className="actions">
          <a className="btn btn-orange btn-xl" href={BOOKING_URL} target="_blank" rel="noopener noreferrer">Tisch buchen →</a>
        </div>
        <div className="hero-meta">
          <div><span className="k">4</span><span className="v">Profi-Tische</span></div>
          <div><span className="k">1</span><span className="v">Ballroboter</span></div>
          <div><span className="k">16</span><span className="v">Personen max.</span></div>
          <div><span className="k">24/7</span><span className="v">geöffnet</span></div>
        </div>
      </div>
      <div className="hero-bg"></div>
    </section>);

}

function EventsSection() {
  return (
    <section className="section events" id="events">
      <div className="section-eyebrow">DU WILLST WAS FEIERN?</div>
      <h2>Wir machen Events.</h2>
      <p className="intro">
        Du willst mehr als einen einzelnen Tisch buchen? Wir richten dir den ganzen Laden ein — mit Paketpreisen, Coaching und Ballroboter.
      </p>
      <div className="event-tiles">
        {ANLAESSE.map((a) =>
        <a key={a.id} href={a.href} className={`event-tile ${a.color}`}>
            <div className="vis" style={{ background: a.bg, backgroundSize: "cover", backgroundPosition: "center" }}></div>
            <div className="body">
              <h3 style={{ whiteSpace: "pre-line" }}>{a.title}</h3>
              <p>{a.blurb}</p>
              <span className="more">Mehr erfahren →</span>
            </div>
          </a>
        )}
      </div>
      <div className="events-cta">
        <a className="btn btn-orange btn-xl" href={BOOKING_URL} target="_blank" rel="noopener noreferrer">Tisch buchen →</a>
        <span className="events-cta-note">Schon klar, was du willst? Direkt zur Buchung.</span>
      </div>
    </section>);

}

function CenterCTA() {
  const mapsUrl = "https://maps.google.com/?q=Danziger+Str.+6,+10435+Berlin";
  return (
    <section className="center-cta">
      <div className="pattern"></div>
      <div className="inner">
        <h2>
          BEREIT?<br />
          <span className="alt">DANN SCHMETTER LOS.</span>
        </h2>
        <a className="btn btn-orange btn-xl" href={BOOKING_URL} target="_blank" rel="noopener noreferrer">Tisch buchen →</a>
        <p className="small">
          kulturbrauerei.dingdongpingpong.club ·{" "}
          <a href={mapsUrl} target="_blank" rel="noopener noreferrer" style={{ color: "inherit", textDecorationColor: "currentColor" }}>Danziger Str. 6 · 10435 Berlin</a>
        </p>
      </div>
    </section>);

}

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "ctaColor": "orange",
  "heroVariant": "split"
} /*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  const { TweaksPanel, TweakSection, TweakRadio } = window;

  useEffect(() => {
    document.documentElement.setAttribute("data-cta", tweaks.ctaColor);
    document.documentElement.setAttribute("data-hero", tweaks.heroVariant);
  }, [tweaks]);

  return (
    <>
      <TopBar />
      <Header active="buchungen" />
      <Hero />
      <EventsSection />
      <CenterCTA />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Hero">
          <TweakRadio
            label="Layout"
            value={tweaks.heroVariant}
            onChange={(v) => setTweak("heroVariant", v)}
            options={[
            { value: "split", label: "Split" },
            { value: "centered", label: "Zentriert" },
            { value: "fullbleed", label: "Full-bleed" }]
            } />
          
        </TweakSection>
        <TweakSection label="Farbe">
          <TweakRadio
            label="Primär-CTA"
            value={tweaks.ctaColor}
            onChange={(v) => setTweak("ctaColor", v)}
            options={[
            { value: "orange", label: "Orange" },
            { value: "cyan", label: "Cyan" },
            { value: "green", label: "Green" }]
            } />
          
        </TweakSection>
      </TweaksPanel>
    </>);

}

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