/* === App shell — router, tweaks, modals === */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "ivory",
  "accent": "#C9A24B",
  "heroLayout": "split",
  "showBottomBar": true,
  "displayFont": "Cormorant Garamond"
}/*EDITMODE-END*/;

function WAModal({ open, onClose }) {
  if (!open) return null;
  const D = window.MONILI;
  return (
    <div style={{
      position: "fixed", inset: 0, zIndex: 100,
      background: "rgba(20, 17, 15, 0.55)", backdropFilter: "blur(4px)",
      display: "flex", alignItems: "center", justifyContent: "center", padding: 24,
    }} onClick={onClose}>
      <div style={{
        background: "var(--ivory)", width: "100%", maxWidth: 480,
        border: "1px solid var(--line)", padding: 28,
        animation: "fadeUp .35s ease both",
      }} onClick={e => e.stopPropagation()}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 18 }}>
          <span className="eyebrow eyebrow-gold">WhatsApp · Concierge</span>
          <button className="nav-icon-btn" onClick={onClose}><Icon name="close" size={16}/></button>
        </div>
        <h3 className="serif" style={{ fontSize: 28, fontWeight: 500, lineHeight: 1.15, margin: "0 0 12px 0" }}>
          Which showroom would you like to reach?
        </h3>
        <p style={{ fontSize: 13.5, color: "var(--charcoal)", margin: 0, lineHeight: 1.6 }}>
          We typically reply within the hour during showroom hours. (Demo only — your message won't actually send from this prototype.)
        </p>
        <div style={{ display: "flex", flexDirection: "column", gap: 10, marginTop: 22 }}>
          {D.showrooms.map(s => (
            <button key={s.id} className="btn btn-ghost" style={{ justifyContent: "space-between", paddingRight: 16 }}>
              <span style={{ display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 2, textTransform: "none", letterSpacing: 0 }}>
                <span style={{ fontSize: 14, fontWeight: 500 }}>{s.name}{s.flagship ? " · Flagship" : ""}</span>
                <span style={{ fontSize: 11.5, color: "var(--charcoal)", fontWeight: 400 }}>{s.mobile || s.phone}</span>
              </span>
              <Icon name="wa" size={16}/>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

function MoniliTweaks({ t, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Theme"/>
      <TweakRadio label="Palette" value={t.palette}
        options={["ivory", "onyx"]}
        onChange={v => setTweak("palette", v)}/>
      <TweakColor label="Accent" value={t.accent}
        options={["#C9A24B", "#A4823A", "#1F5C46", "#7B6B96", "#A23B3B"]}
        onChange={v => setTweak("accent", v)}/>
      <TweakSection label="Typography"/>
      <TweakSelect label="Display font" value={t.displayFont}
        options={["Cormorant Garamond", "Playfair Display", "EB Garamond", "Libre Caslon Text", "Italiana"]}
        onChange={v => setTweak("displayFont", v)}/>
      <TweakSection label="Behaviour"/>
      <TweakToggle label="Sticky bottom CTA" value={t.showBottomBar}
        onChange={v => setTweak("showBottomBar", v)}/>
    </TweaksPanel>
  );
}

function App() {
  const initialPage = window.__BYTESGLUE_SHOWCASE_ROUTE || "home";
  const [page, setPage] = useState(initialPage);
  const [consultOpen, setConsultOpen] = useState(false);
  const [waOpen, setWaOpen] = useState(false);
  const [bottomVisible, setBottomVisible] = useState(false);
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply tweaks via CSS vars
  useEffect(() => {
    document.documentElement.dataset.palette = t.palette;
    document.documentElement.style.setProperty("--champagne", t.accent);
    // derive a slightly darker shade for hover
    document.documentElement.style.setProperty("--champagne-deep", darken(t.accent, 0.12));
    document.documentElement.style.setProperty("--serif", `"${t.displayFont}", "EB Garamond", serif`);
  }, [t.palette, t.accent, t.displayFont]);

  // Scroll-aware sticky CTA
  useEffect(() => {
    const onScroll = () => setBottomVisible(window.scrollY > 600);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // Scroll to top on page change
  useEffect(() => { window.scrollTo({ top: 0, behavior: "instant" }); }, [page]);

  const openConsult = () => setConsultOpen(true);
  const openWA = () => setWaOpen(true);

  let PageEl = null;
  switch (page) {
    case "home": PageEl = <Home setPage={setPage} openConsult={openConsult} openWA={openWA}/>; break;
    case "collections": PageEl = <Collections setPage={setPage} openConsult={openConsult}/>; break;
    case "bespoke": PageEl = <Bespoke setPage={setPage} openConsult={openConsult} openWA={openWA}/>; break;
    case "showrooms": PageEl = <Showrooms openConsult={openConsult} openWA={openWA}/>; break;
    case "heritage": PageEl = <Heritage setPage={setPage} openConsult={openConsult}/>; break;
    case "visit": PageEl = <Visit openConsult={openConsult} openWA={openWA}/>; break;
    default: PageEl = <Home setPage={setPage} openConsult={openConsult} openWA={openWA}/>;
  }

  return (
    <>
      <Nav page={page} setPage={setPage} openConsult={openConsult} openWA={openWA}/>
      {PageEl}
      <Footer setPage={setPage} openConsult={openConsult}/>
      <WhatsAppFAB onClick={openWA}/>
      {t.showBottomBar && <BottomBar visible={bottomVisible && page !== "visit"} openConsult={openConsult} openWA={openWA}/>}
      <ConsultModal open={consultOpen} onClose={() => setConsultOpen(false)}/>
      <WAModal open={waOpen} onClose={() => setWaOpen(false)}/>
      <MoniliTweaks t={t} setTweak={setTweak}/>
    </>
  );
}

// utility: darken hex
function darken(hex, amt) {
  try {
    const n = parseInt(hex.replace("#",""), 16);
    let r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255;
    r = Math.max(0, Math.round(r * (1 - amt)));
    g = Math.max(0, Math.round(g * (1 - amt)));
    b = Math.max(0, Math.round(b * (1 - amt)));
    return "#" + [r,g,b].map(x => x.toString(16).padStart(2,"0")).join("");
  } catch (e) { return hex; }
}

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