/* global React, ReactDOM, Splash, Logo, Btn, Marquee, Reveal, CustomCursor,
   HomePage, MenuPage, StandortePage, CateringPage, ContactPage,
   ImpressumPage, DatenschutzPage, AGBPage */
const { useState: useStateApp, useEffect: useEffectApp } = React;

const ROUTES = [
{ id: "home", path: "", label: "Start" },
{ id: "menue", path: "menue", label: "Menü" },
{ id: "standorte", path: "standorte", label: "Standorte" },
{ id: "catering", path: "catering", label: "Catering" },
{ id: "kontakt", path: "kontakt", label: "Kontakt" }];

/* Rechtsseiten — eigene Routen, nicht in der Hauptnavigation */
const LEGAL_ROUTES = [
{ id: "impressum", path: "impressum", label: "Impressum" },
{ id: "datenschutz", path: "datenschutz", label: "Datenschutz" },
{ id: "agb", path: "agb", label: "AGB" }];

const ALL_ROUTES = [...ROUTES, ...LEGAL_ROUTES];

function pageFromHash() {
  const raw = (window.location.hash || "#/").replace(/^#\/?/, "").split("/")[0];
  const found = ALL_ROUTES.find((r) => r.path === raw);
  return found ? found.id : "home";
}

/* ============== Header ============== */
function Header({ page, go, mobileOpen, setMobileOpen }) {
  const [scrolled, setScrolled] = useStateApp(false);
  useEffectApp(() => {
    const on = () => setScrolled(window.scrollY > 30);
    on();
    window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);

  return (
    <>
      <header className={`header ${scrolled || mobileOpen ? "scrolled" : ""}`} data-screen-label="Header">
        <div className="container header__inner">
          <Logo onClick={() => go("home")} />
          <nav className="header__nav">
            {ROUTES.map((r) =>
            <a
              key={r.id}
              className={`header__link ${page === r.id ? "active" : ""}`}
              onClick={() => go(r.id)}>
              
                {r.label}
              </a>
            )}
          </nav>
          <div className="header__cta">
            <Btn variant="primary" href="https://app.ordering.sumup.com/holy-smash/bamenohl">
              Jetzt bestellen
            </Btn>
          </div>
          <button
            className={`header__burger ${mobileOpen ? "open" : ""}`}
            onClick={() => setMobileOpen((v) => !v)}
            aria-label="Menü">
            
            <span></span>
            <span></span>
            <span></span>
          </button>
        </div>
      </header>

      <div className={`mobile-overlay ${mobileOpen ? "open" : ""}`}>
        <Splash className="mobile-overlay__splash" />
        {ROUTES.map((r) =>
        <a
          key={r.id}
          className={`mobile-overlay__link display ${page === r.id ? "active" : ""}`}
          onClick={() => {
            go(r.id);
            setMobileOpen(false);
          }}>
          
            {r.label}
          </a>
        )}
        <div className="mobile-overlay__cta">
          <Btn variant="primary" size="lg" href="https://app.ordering.sumup.com/holy-smash/bamenohl">
            Jetzt bestellen →
          </Btn>
        </div>
      </div>
    </>);

}

/* ============== Footer ============== */
function Footer({ go }) {
  return (
    <footer className="footer" data-screen-label="Footer">
      <div className="container">
        <div className="footer__grid">
          <div className="footer__brand">
            <img src={window.ASSET("assets-min/logo.webp")} alt="Holy Smash Burgers" />
            <p className="footer__tag">Frisch gepresste Smashburger aus dem Sauerland. Frisch gewolftes Beef. Holy Good.

            </p>
            <div className="footer__socials">
              <a className="footer__social" href="https://instagram.com/holy_smashburgers" target="_blank" rel="noreferrer" aria-label="Instagram">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <rect x="2" y="2" width="20" height="20" rx="5" />
                  <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
                  <line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
                </svg>
              </a>
              <a className="footer__social" href="tel:+4901759618981" aria-label="Telefon">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.72 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.35 1.85.59 2.81.72A2 2 0 0 1 22 16.92z" />
                </svg>
              </a>
              <a className="footer__social" href="https://wa.me/4901759618981" target="_blank" rel="noreferrer" aria-label="WhatsApp">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2zm0 1.82c2.16 0 4.18.84 5.71 2.37a8.03 8.03 0 0 1 2.37 5.72c0 4.54-3.7 8.23-8.24 8.23a8.2 8.2 0 0 1-4.18-1.14l-.3-.18-3.12.82.83-3.04-.2-.31a8.13 8.13 0 0 1-1.26-4.38c0-4.54 3.7-8.24 8.24-8.24zm-4.5 4.36c-.2 0-.53.08-.81.38-.28.3-1.07 1.04-1.07 2.55 0 1.5 1.1 2.96 1.25 3.16.15.2 2.16 3.3 5.32 4.49.74.32 1.32.51 1.77.65.74.24 1.42.2 1.96.12.6-.09 1.84-.75 2.1-1.48.26-.73.26-1.35.18-1.48-.08-.13-.28-.2-.58-.36-.3-.15-1.84-.91-2.12-1.01-.28-.1-.49-.15-.69.15-.2.3-.79 1-.97 1.2-.18.2-.36.23-.66.08-.3-.15-1.27-.47-2.42-1.49-.9-.8-1.5-1.78-1.68-2.08-.18-.3-.02-.47.13-.62.14-.14.3-.36.45-.54.15-.18.2-.3.3-.5.1-.2.05-.38-.02-.53-.08-.15-.66-1.66-.92-2.27-.24-.6-.49-.51-.67-.52l-.57-.01z"/>
                </svg>
              </a>
              <a className="footer__social" href="mailto:kontakt@holysmashburger.de" aria-label="E-Mail">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <rect x="2" y="4" width="20" height="16" rx="2" />
                  <path d="m22 6-10 7L2 6" />
                </svg>
              </a>
            </div>
          </div>
          <div className="footer__col">
            <h4>Navigation</h4>
            <ul>
              {ROUTES.map((r) =>
              <li key={r.id}><a onClick={() => go(r.id)}>{r.label}</a></li>
              )}
              <li><a href="https://app.ordering.sumup.com/holy-smash/bamenohl" target="_blank" rel="noreferrer">Online bestellen</a></li>
            </ul>
          </div>
          <div className="footer__col">
            <h4>Kontakt</h4>
            <ul>
              <li><a>Schützenhalle Bamenohl</a></li>
              <li><a>57413 Finnentrop · NRW</a></li>
              <li><a href="tel:+4901759618981">0175 9618981</a></li>
              <li><a href="mailto:kontakt@holysmashburger.de">kontakt@holysmashburger.de</a></li>
              <li style={{ marginTop: 14, color: "var(--teal)" }}><a>Fr · Sa · So</a></li>
              <li style={{ color: "var(--teal)" }}><a>17–21 Uhr</a></li>
            </ul>
          </div>
        </div>
        <div className="footer__bottom">
          <div>© {new Date().getFullYear()} Holy Smash Burgers · Bamenohl · Made with grease &amp; love.</div>
          <div style={{ display: "flex", gap: 18 }}>
            <button className="footer__legal" onClick={() => go("impressum")}>Impressum</button>
            <button className="footer__legal" onClick={() => go("datenschutz")}>Datenschutz</button>
            <button className="footer__legal" onClick={() => go("agb")}>AGB</button>
          </div>
        </div>
      </div>
    </footer>);

}

/* ============== Tweaks config ============== */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "mood": "teal",
  "headline": "Anton",
  "texture": "balanced"
} /*EDITMODE-END*/;

const MOODS = {
  teal: { teal: "#3dd6d0", deep: "#1ea59f", glow: "rgba(61,214,208,0.35)", ink: "#06201f" },
  inferno: { teal: "#ff6a2b", deep: "#c8451a", glow: "rgba(255,106,43,0.34)", ink: "#2a0d05" },
  acid: { teal: "#c6f04e", deep: "#94bf2c", glow: "rgba(198,240,78,0.32)", ink: "#16210a" },
  mono: { teal: "#f5f5f0", deep: "#b8b8b0", glow: "rgba(245,245,240,0.22)", ink: "#0a0a0a" }
};
const FONT_STACKS = {
  "Anton": '"Anton", "Arial Narrow", sans-serif',
  "Bebas Neue": '"Bebas Neue", "Anton", sans-serif',
  "Archivo Black": '"Archivo Black", "Arial Black", sans-serif'
};

/* ============== App ============== */
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [page, setPage] = useStateApp(pageFromHash());
  const [mobileOpen, setMobileOpen] = useStateApp(false);
  const [transitionKey, setTransitionKey] = useStateApp(0);

  useEffectApp(() => {
    const root = document.documentElement;
    const m = MOODS[t.mood] || MOODS.teal;
    root.style.setProperty("--teal", m.teal);
    root.style.setProperty("--teal-deep", m.deep);
    root.style.setProperty("--teal-glow", m.glow);
    root.style.setProperty("--ink", m.ink);
    root.style.setProperty("--display", FONT_STACKS[t.headline] || FONT_STACKS["Anton"]);
    root.setAttribute("data-texture", t.texture);
  }, [t.mood, t.headline, t.texture]);

  useEffectApp(() => {
    const onHash = () => {
      setPage(pageFromHash());
      setTransitionKey((k) => k + 1);
      window.scrollTo({ top: 0, behavior: "instant" });
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  const go = (id) => {
    const route = ALL_ROUTES.find((r) => r.id === id);
    if (!route) return;
    window.location.hash = "#/" + route.path;
  };

  const screenLabel = {
    home: "Startseite",
    menue: "Menü",
    standorte: "Standorte",
    catering: "Catering",
    kontakt: "Kontakt",
    impressum: "Impressum",
    datenschutz: "Datenschutz",
    agb: "AGB"
  }[page];

  return (
    <div className="app">
      <CustomCursor />
      <Header page={page} go={go} mobileOpen={mobileOpen} setMobileOpen={setMobileOpen} />
      <main key={transitionKey} data-screen-label={screenLabel}>
        {page === "home" && <HomePage go={go} />}
        {page === "menue" && <MenuPage />}
        {page === "standorte" && <StandortePage />}
        {page === "catering" && <CateringPage />}
        {page === "kontakt" && <ContactPage />}
        {page === "impressum" && <ImpressumPage />}
        {page === "datenschutz" && <DatenschutzPage />}
        {page === "agb" && <AGBPage />}
      </main>
      <Footer go={go} />

      {/* Mobile Sticky CTA */}
      <div className="sticky-order">
        <Btn variant="primary" href="https://app.ordering.sumup.com/holy-smash/bamenohl">
          Jetzt bestellen <span className="arrow">→</span>
        </Btn>
      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Mood" hint="Swap the whole accent system" />
        <TweakRadio
          label="Accent"
          value={t.mood}
          options={[
          { value: "teal", label: "Holy Teal" },
          { value: "inferno", label: "Inferno" },
          { value: "acid", label: "Acid" },
          { value: "mono", label: "Mono" }]
          }
          onChange={(v) => setTweak("mood", v)} />
        
        <TweakSection label="Headline" hint="The personality of every title" />
        <TweakSelect
          label="Display font"
          value={t.headline}
          options={["Anton", "Bebas Neue", "Archivo Black"]}
          onChange={(v) => setTweak("headline", v)} />
        
        <TweakSection label="Texture" hint="From refined to full street" />
        <TweakRadio
          label="Vibe"
          value={t.texture}
          options={[
          { value: "clean", label: "Clean" },
          { value: "balanced", label: "Balanced" },
          { value: "street", label: "Street" }]
          }
          onChange={(v) => setTweak("texture", v)} />
        
      </TweaksPanel>
    </div>);

}

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