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

function ImpressumHero() {
  return (
    <section className="sub-hero">
      <div className="inner" style={{ gridTemplateColumns: "1fr", alignItems: "start" }}>
        <div>
          <div className="crumbs">
            <a href="index.html">{window.t("ff.crumb_book")}</a>
            <span className="sep">/</span>
            <span>{window.t("imp.crumb")}</span>
          </div>
          <h1>
            {window.t("imp.title_pre")}<br />
            <span className="alt">{window.t("imp.title_alt")}</span>
          </h1>
          <p className="lede">
            {window.t("imp.lede")}
          </p>
        </div>
      </div>
    </section>);

}

function ImpressumContent() {
  const mapsUrl = "https://maps.app.goo.gl/yfENX7rHmSqExvGZ8";
  return (
    <section className="section legal">
      <div className="legal-grid">
        <article className="legal-card">
          <div className="legal-card-eyebrow">{window.t("imp.eyebrow.anbieter")}</div>
          <h3 className="legal-card-title">Racket Room GmbH</h3>
          <address className="legal-address">
            <a href={mapsUrl} target="_blank" rel="noopener noreferrer">
              Danziger Str. 6<br />
              10435 Berlin
            </a>
          </address>
        </article>

        <article className="legal-card">
          <div className="legal-card-eyebrow">{window.t("imp.eyebrow.vertreten")}</div>
          <ul className="legal-list">
            <li>Marcus Pappert</li>
            <li>Sebastian Müller</li>
          </ul>
          <p className="legal-note">{window.t("imp.gf")}</p>
        </article>

        <article className="legal-card">
          <div className="legal-card-eyebrow">{window.t("imp.eyebrow.kontakt")}</div>
          <ul className="legal-list">
            <li>
              <a href="mailto:kulturbrauerei@dingdongpingpong.club">kulturbrauerei@dingdongpingpong.club</a>
            </li>
            <li>
              <a href={mapsUrl} target="_blank" rel="noopener noreferrer">{window.t("imp.anfahrt")}</a>
            </li>
          </ul>
        </article>
      </div>

      <div className="legal-footnote">
        <p>
          Verantwortlich für den Inhalt nach § 18 Abs. 2 MStV: Racket Room GmbH, Danziger Str. 6, 10435 Berlin.
        </p>
      </div>
    </section>);

}

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

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

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

  useEffect(() => {
    document.title = window.t("page.title.impressum");
  }, []);

  return (
    <>
      <TopBar />
      <Header active="impressum" />
      <ImpressumHero />
      <ImpressumContent />
      <Footer />

      <TweaksPanel title="Tweaks">
        <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 />);