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

const BOOKING_URL = "/app"; // Geräte-Detection → App Store / Play Store

function SubHero() {
  return (
    <section className="sub-hero">
      <div className="inner">
        <div>
          <div className="crumbs">
            <a href="index.html">{window.t("ff.crumb_book")}</a>
            <span className="sep">/</span>
            <span>{window.t("ff.crumb")}</span>
          </div>
          <h1>
            Ding Dong,<br/>
            <span className="alt">{window.t("ff.title_alt")}</span>
          </h1>
          <p className="lede">
            {window.t("ff.lede")}
          </p>
          <div style={{display: "flex", gap: 12, flexWrap: "wrap"}}>
            <a className="btn btn-orange btn-xl" href={BOOKING_URL} target="_blank" rel="noopener noreferrer">{window.t("cta.book_arrow")}</a>
          </div>
          <div className="quick">
            <div className="item">
              <span className="lbl">{window.t("ff.quick.group_lbl")}</span>
              <span className="val">{window.t("ff.quick.group_val")}</span>
            </div>
            <div className="item">
              <span className="lbl">{window.t("ff.quick.duration_lbl")}</span>
              <span className="val">{window.t("ff.quick.duration_val")}</span>
            </div>
          </div>
        </div>
        <div className="photo" style={{ backgroundImage: "url('assets/sub-firmenfeier.webp')", backgroundSize: "cover", backgroundPosition: "center" }}>
        </div>
      </div>
    </section>
  );
}

const INCLUDES = [
  { t: window.t("ff.inc.0.t"), b: window.t("ff.inc.0.b") },
  { t: window.t("ff.inc.1.t"), b: window.t("ff.inc.1.b") },
  { t: window.t("ff.inc.2.t"), b: window.t("ff.inc.2.b") },
  { t: window.t("ff.inc.3.t"), b: window.t("ff.inc.3.b") },
  { t: window.t("ff.inc.4.t"), b: window.t("ff.inc.4.b") },
  { t: window.t("ff.inc.5.t"), b: window.t("ff.inc.5.b") },
];

function IncludesSection() {
  return (
    <section className="section">
      <div className="section-eyebrow">{window.t("ff.includes_eyebrow")}</div>
      <h2>{window.t("ff.includes_heading")}</h2>
      <p className="intro">
        {window.t("ff.includes_intro")}
      </p>
      <div className="includes">
        {INCLUDES.map((i, idx) => (
          <div className="include" key={idx}>
            <h4>{i.t}</h4>
            <p>{i.b}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

const PACKAGES = [
  {
    name: "Schmetter\nClassic",
    price: 39, per: window.t("ff.pkg.per"),
    feats: [
      window.t("ff.pkg.classic.0"),
      window.t("ff.pkg.classic.1"),
      window.t("ff.pkg.classic.2"),
      window.t("ff.pkg.classic.3"),
      window.t("ff.pkg.classic.4"),
    ],
  },
  {
    name: "Schmetter\nDeluxe",
    price: 69, per: window.t("ff.pkg.per"), featured: true, ribbon: window.t("ff.pkg.ribbon"),
    feats: [
      window.t("ff.pkg.deluxe.0"),
      window.t("ff.pkg.deluxe.1"),
      window.t("ff.pkg.deluxe.2"),
      window.t("ff.pkg.deluxe.3"),
      window.t("ff.pkg.deluxe.4"),
    ],
  },
  {
    name: "Schmetter\nFull House",
    price: 119, per: window.t("ff.pkg.per"),
    feats: [
      window.t("ff.pkg.full.0"),
      window.t("ff.pkg.full.1"),
      window.t("ff.pkg.full.2"),
      window.t("ff.pkg.full.3"),
      window.t("ff.pkg.full.4"),
    ],
  },
];

function PackagesSection() {
  return (
    <section className="section" id="pakete">
      <div className="section-eyebrow">{window.t("ff.packages_eyebrow")}</div>
      <h2>{window.t("ff.packages_heading")}</h2>
      <p className="intro">
        {window.t("ff.packages_intro")}
      </p>
      <div className="packages">
        {PACKAGES.map((p, i) => (
          <div key={i} className={`pkg ${p.featured ? "featured" : ""}`}>
            {p.ribbon && <div className="ribbon">{p.ribbon}</div>}
            <h3 style={{whiteSpace: "pre-line"}}>{p.name}</h3>
            <div className="price">
              <span className="currency">€</span>
              {p.price}
              <span className="per" style={{marginLeft: 8}}>{p.per}</span>
            </div>
            <ul>
              {p.feats.map((f, j) => <li key={j}>{f}</li>)}
            </ul>
            <a className={p.featured ? "btn btn-orange" : "btn btn-ghost-green"} href={BOOKING_URL} target="_blank" rel="noopener noreferrer" style={{marginTop: 8, justifyContent: "center"}}>
              {window.t("cta.book_arrow")}
            </a>
          </div>
        ))}
      </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.firmenfeier");
  }, []);

  return (
    <>
      <TopBar />
      <Header active="firmenfeiern" />
      <SubHero />
      <section className="section" style={{paddingTop: 0, paddingBottom: 32, textAlign: "center"}}>
        <a className="btn btn-ghost-green btn-lg" href="firmenfeier-buchung.html">
          {window.t("ff.cta_configure")}
        </a>
      </section>
      <IncludesSection />
      <PackagesSection />
      <FooterCTA
        heading={<>{window.t("ff.footercta_pre")}<br/><span className="alt">{window.t("ff.footercta_alt")}</span></>}
        sub={window.t("footercta.sub")}
        cta={window.t("ff.cta_configure")}
        ctaHref="firmenfeier-buchung.html"
      />
      <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 />);