// App shell — branded reservation modal, header with single dropdown, page router
const NAV_ITEMS = [
  { id: "home", label: "Início" },
  { id: "bolo", label: "Bolos" },
  { id: "catering", label: "Catering" },
  { id: "menu", label: "Menu" },
  { id: "contactos", label: "Contactos" },
];

const App = () => {
  const [page, setPage] = React.useState("home");
  const [mode, setMode] = React.useState("public");
  const [orderOpen, setOrderOpen] = React.useState(false);
  const [floatOpen, setFloatOpen] = React.useState(false);
  const [resOpen, setResOpen] = React.useState(false);

  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "view": "public",
    "page": "home",
    "boloMode": "inline",
    "cateringMode": "inline",
    "marqueeSpeed": 48,
    "showFab": true
  }/*EDITMODE-END*/;
  const [t, setTweak] = window.useTweaks ? window.useTweaks(TWEAK_DEFAULTS) : [TWEAK_DEFAULTS, () => {}];

  React.useEffect(() => {
    if (t.view) setMode(t.view);
    if (t.page) setPage(t.page);
  }, [t.view, t.page]);

  React.useEffect(() => {
    document.querySelectorAll(".marquee-track").forEach(el => {
      el.style.animationDuration = `${t.marqueeSpeed || 48}s`;
    });
  }, [t.marqueeSpeed, page]);

  React.useEffect(() => {
    document.body.style.overflow = resOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [resOpen]);

  const go = (p) => {
    setPage(p);
    setTweak({ page: p });
    setOrderOpen(false);
    window.scrollTo({ top: 0, behavior: "smooth" });
  };
  const switchMode = (m) => {
    setMode(m);
    setTweak({ view: m });
    window.scrollTo({ top: 0 });
  };

  const launchOrder = (kind) => {
    setOrderOpen(false);
    if (kind === "reserve") { setResOpen(true); return; }
    const m = kind === "bolo" ? t.boloMode : t.cateringMode;
    if (m === "floating") setFloatOpen({ kind });
    else go(kind);
  };

  // ADMIN VIEW
  if (mode === "admin") {
    return (
      <>
        <window.DashboardPage go={(p) => { switchMode("public"); go(p); }} />
        <TweaksUI t={t} setTweak={setTweak} switchMode={switchMode} go={go} />
      </>
    );
  }

  // PUBLIC VIEW
  return (
    <>
      <header className="site-header">
        <a className="brand-mark" href="#" onClick={(e) => { e.preventDefault(); go("home"); }}>
          <img src="assets/creeks-logo.jpg" alt="Creek's Caffé" />
          <span>
            <strong>Creek's Caffé</strong>
            <small>Venda do Pinheiro</small>
          </span>
        </a>
        <nav className="main-nav">
          {NAV_ITEMS.map(n => (
            <button key={n.id} className={page === n.id ? "active" : ""} onClick={() => go(n.id)}>
              {n.label}
            </button>
          ))}
        </nav>
        <div className="header-actions">
          <div className="order-dropdown">
            <button className="btn primary" onClick={() => setOrderOpen(o => !o)}>
              <Icon name="sparkles" size={14} /> Pedir
              <Icon name={orderOpen ? "arrowUp" : "arrowDown"} size={14} />
            </button>
            {orderOpen && (
              <>
                <button className="order-dropdown-backdrop" onClick={() => setOrderOpen(false)} aria-label="Fechar" />
                <div className="order-dropdown-menu">
                  <button className="reserve" onClick={() => launchOrder("reserve")}>
                    <span className="opt-icon"><Icon name="calendar" size={18} /></span>
                    <span className="opt-text">
                      <strong>Reservar mesa</strong>
                      <span>Brunch, almoço ou lanche</span>
                    </span>
                    <span className="opt-arrow"><Icon name="arrowRight" size={16} /></span>
                  </button>
                  <button className="cake" onClick={() => launchOrder("bolo")}>
                    <span className="opt-icon"><Icon name="cake" size={18} /></span>
                    <span className="opt-text">
                      <strong>Pedir bolo</strong>
                      <span>Personalizado, levantamento na loja</span>
                    </span>
                    <span className="opt-arrow"><Icon name="arrowRight" size={16} /></span>
                  </button>
                  <button className="catering" onClick={() => launchOrder("catering")}>
                    <span className="opt-icon"><Icon name="catering" size={18} /></span>
                    <span className="opt-text">
                      <strong>Pedir catering</strong>
                      <span>Eventos, coffee breaks, empresas</span>
                    </span>
                    <span className="opt-arrow"><Icon name="arrowRight" size={16} /></span>
                  </button>
                </div>
              </>
            )}
          </div>
        </div>
      </header>

      <main>
        {page === "home" && <window.HomePage go={go} openReserve={() => setResOpen(true)} />}
        {page === "bolo" && <window.BoloPage go={go} />}
        {page === "catering" && <window.CateringPage go={go} />}
        {page === "menu" && <window.MenuPage go={go} openReserve={() => setResOpen(true)} />}
        {page === "contactos" && <window.ContactosPage go={go} openReserve={() => setResOpen(true)} />}
      </main>

      <footer className="site-footer">
        <div className="footer-inner">
          <div className="footer-block">
            <div className="footer-brand">
              <img src="assets/creeks-logo.jpg" alt="Creek's" />
              <div>
                <h3>Creek's Caffé</h3>
                <small>food & fun · desde 2015</small>
              </div>
            </div>
            <p style={{ color: "#fffdf5b3", fontSize: "0.92rem", marginTop: 6 }}>
              Brunch, pastelaria artesanal, bolos personalizados e catering na Venda do Pinheiro.
            </p>
            <div style={{ display: "flex", gap: 10, marginTop: 14 }}>
              <a href="https://www.instagram.com/creekscaffe/" target="_blank" rel="noreferrer" style={{ width: 38, height: 38, borderRadius: "50%", border: "1px solid #fffdf538", display: "grid", placeItems: "center", color: "var(--warm-white)" }}><Icon name="instagram" size={16} /></a>
              <a href="https://www.facebook.com/creekscaffe" target="_blank" rel="noreferrer" style={{ width: 38, height: 38, borderRadius: "50%", border: "1px solid #fffdf538", display: "grid", placeItems: "center", color: "var(--warm-white)" }}><Icon name="facebook" size={16} /></a>
            </div>
          </div>
          <div className="footer-block">
            <h4>Visite-nos</h4>
            <a href="https://www.google.com/maps/search/?api=1&query=Av.%209%20de%20Julho%2C%2094B%2C%202665-522%20Venda%20do%20Pinheiro" target="_blank" rel="noreferrer"><Icon name="mapPin" size={14} /> Av. 9 de Julho, 94B, Venda do Pinheiro</a>
            <a href="tel:211334336"><Icon name="phone" size={14} /> 211 334 336</a>
            <a href="#"><Icon name="clock" size={14} /> Seg–Sex 07h45–16h00 · Sáb 08h30–15h00 · Dom Encerrado</a>
          </div>
          <div className="footer-block">
            <h4>Encomende</h4>
            <a href="#" onClick={(e) => { e.preventDefault(); setResOpen(true); }}>Reservar mesa</a>
            <a href="#" onClick={(e) => { e.preventDefault(); go("bolo"); }}>Bolos personalizados</a>
            <a href="#" onClick={(e) => { e.preventDefault(); go("catering"); }}>Catering & eventos</a>
            <a href="#" onClick={(e) => { e.preventDefault(); go("menu"); }}>Menu da casa</a>
          </div>
          <div className="footer-block">
            <h4>Legal</h4>
            <a href="#">Política de privacidade</a>
            <a href="#">Termos & condições</a>
            <a href="#" onClick={(e) => { e.preventDefault(); switchMode("admin"); }} style={{ color: "#fffdf555", fontSize: "0.82rem", marginTop: 6 }}>
              <Icon name="settings" size={12} /> Área de gestão
            </a>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Creek's Caffé. Todos os direitos reservados.</span>
          <span>Made with ☕ na Venda do Pinheiro</span>
        </div>
      </footer>

      {/* Floating reserve FAB — always present */}
      {t.showFab && !resOpen && !floatOpen && (
        <button className="reserve-fab" onClick={() => setResOpen(true)}>
          <span className="pulse" />
          <Icon name="calendar" size={16} /> Reservar mesa
        </button>
      )}

      {floatOpen && (
        <window.FloatingOrderWindow kind={floatOpen.kind} onClose={() => setFloatOpen(false)} go={go} />
      )}

      {resOpen && <window.ReservationModal onClose={() => setResOpen(false)} />}

      <TweaksUI t={t} setTweak={setTweak} switchMode={switchMode} go={go} />
    </>
  );
};

const TweaksUI = ({ t, setTweak, switchMode, go }) => {
  if (!window.TweaksPanel) return null;
  const { TweaksPanel, TweakSection, TweakRadio, TweakSlider, TweakSelect, TweakToggle } = window;
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Vista">
        <TweakRadio label="Modo" value={t.view} onChange={(v) => { setTweak({ view: v }); switchMode(v); }} options={[
          { value: "public", label: "Site público" },
          { value: "admin", label: "Backoffice" },
        ]} />
        {t.view === "public" && (
          <TweakSelect label="Página" value={t.page} onChange={(v) => { setTweak({ page: v }); go(v); }} options={[
            { value: "home", label: "Início" },
            { value: "bolo", label: "Pedir Bolo" },
            { value: "catering", label: "Catering" },
            { value: "menu", label: "Menu" },
            { value: "contactos", label: "Contactos" },
          ]} />
        )}
      </TweakSection>
      <TweakSection title="Pedido — apresentação">
        <TweakRadio label="Pedir Bolo" value={t.boloMode} onChange={(v) => setTweak({ boloMode: v })} options={[
          { value: "inline", label: "Página inteira" },
          { value: "floating", label: "Janela flutuante" },
        ]} />
        <TweakRadio label="Pedir Catering" value={t.cateringMode} onChange={(v) => setTweak({ cateringMode: v })} options={[
          { value: "inline", label: "Página inteira" },
          { value: "floating", label: "Janela flutuante" },
        ]} />
        <TweakToggle label={`Botão flutuante "Reservar"`} value={t.showFab} onChange={(v) => setTweak({ showFab: v })} />
      </TweakSection>
      <TweakSection title="Carrossel Catering">
        <TweakSlider label="Velocidade (s)" min={20} max={90} step={2} value={t.marqueeSpeed} onChange={(v) => setTweak({ marqueeSpeed: v })} />
      </TweakSection>
    </TweaksPanel>
  );
};

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

// Reveal animations via IntersectionObserver
(function() {
  const io = new IntersectionObserver(function(entries) {
    entries.forEach(function(e) {
      if (e.isIntersecting) { e.target.classList.add('visible'); io.unobserve(e.target); }
    });
  }, { threshold: 0.12 });
  function observe() {
    document.querySelectorAll('.reveal:not(.visible)').forEach(function(el) { io.observe(el); });
  }
  observe();
  new MutationObserver(observe).observe(document.getElementById('root'), { subtree: true, childList: true });
})();