// App entry: wires everything together

function App() {
  const [lane, setLane] = React.useState("personal");
  const [hero, setHero] = React.useState("video");
  const [tweaksOpen, setTweaksOpen] = React.useState(false);

  // Tweaks protocol
  React.useEffect(() => {
    const handler = (e) => {
      if (!e.data) return;
      if (e.data.type === "__activate_edit_mode") setTweaksOpen(true);
      if (e.data.type === "__deactivate_edit_mode") setTweaksOpen(false);
    };
    window.addEventListener("message", handler);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", handler);
  }, []);

  // Clock for ticker + footer session
  React.useEffect(() => {
    const tick = () => {
      const now = new Date();
      const hh = String(now.getHours()).padStart(2, "0");
      const mm = String(now.getMinutes()).padStart(2, "0");
      const ss = String(now.getSeconds()).padStart(2, "0");
      const clock = document.getElementById("tickerClock");
      if (clock) clock.textContent = `NYC · ${hh}:${mm}:${ss}`;
      const fsess = document.getElementById("fsess");
      if (fsess) fsess.textContent = `${hh}${mm}.${ss}`;
    };
    tick();
    const id = setInterval(tick, 1000);
    return () => clearInterval(id);
  }, []);

  // Theme body-level class so lane re-themes the page
  React.useEffect(() => {
    document.body.dataset.lane = lane;
    document.body.dataset.hero = hero;
  }, [lane, hero]);

  const setHeroTreatment = (t) => {
    setHero(t);
    window.parent.postMessage({
      type: "__edit_mode_set_keys",
      edits: { heroTreatment: t },
    }, "*");
  };

  // Read initial from TWEAK_DEFAULTS (for persistence)
  React.useEffect(() => {
    if (window.__TWEAK_DEFAULTS?.heroTreatment) {
      setHero(window.__TWEAK_DEFAULTS.heroTreatment);
    }
  }, []);

  return (
    <div className="site" data-lane={lane}>
      <Ticker />
      <Nav lane={lane} setLane={setLane} />
      <Hero treatment={hero} lane={lane} />
      <ChooseLane lane={lane} setLane={setLane} />
      <TopicList lane={lane} />
      <ExpertCards lane={lane} setLane={setLane} />
      <FeaturedWriter lane={lane} />
      <Footer />

      {/* Tweaks panel */}
      <div className={`tweaks ${tweaksOpen ? "is-open" : ""}`}>
        <div className="tweaks__head">
          <span>TWEAKS</span>
          <button onClick={() => setTweaksOpen(false)} style={{color: "var(--pistachio)"}}>✕</button>
        </div>
        <div className="tweaks__body">
          <div>
            <span className="tweaks__k">HERO TREATMENT</span>
            <div className="tweaks__options">
              {[
                ["solid", "01 GRID"],
                ["chart", "02 CHART"],
                ["split", "03 SPLIT"],
                ["photo", "04 EDITORIAL"],
              ].map(([k, label]) => (
                <button
                  key={k}
                  className={`tweaks__opt ${hero === k ? "is-on" : ""}`}
                  onClick={() => setHeroTreatment(k)}
                >{label}</button>
              ))}
            </div>
          </div>
          <div>
            <span className="tweaks__k">ACTIVE LANE</span>
            <div className="tweaks__options">
              {[
                ["personal", "01 PERSONAL"],
                ["business", "02 BUSINESS"],
              ].map(([k, label]) => (
                <button
                  key={k}
                  className={`tweaks__opt ${lane === k ? "is-on" : ""}`}
                  onClick={() => setLane(k)}
                >{label}</button>
              ))}
            </div>
          </div>
        </div>
        <div className="tweaks__foot">FINANCE EDITION · 2026.04</div>
      </div>
    </div>
  );
}

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