// app.jsx — Kaya editorial homepage wiring + Tweaks

const KAYA_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroImage": "twilight",
  "heroLayout": "fullbleed",
  "softOverlay": false,
  "density": "default",
  "ethosBg": "black",
  "showJournalRows": true
}/*EDITMODE-END*/;

const HERO_IMAGE_OPTIONS = [
  { value: "twilight", label: "Twilight pergola" },
  { value: "firepit",  label: "Firepit · dusk" },
  { value: "living",   label: "Sunlit living room" },
  { value: "marble",   label: "Marble kitchen" },
  { value: "moody",    label: "Moody dining" },
];

const HERO_LAYOUT_OPTIONS = [
  { value: "fullbleed",        label: "Full-bleed photo" },
  { value: "ivory-above",      label: "Ivory frame · logo above" },
  { value: "burgundy-above",   label: "Burgundy frame · logo above" },
  { value: "ivory-overlay",    label: "Ivory frame · logo on image" },
  { value: "burgundy-overlay", label: "Burgundy frame · logo on image" },
];

const KayaTweaks = () => {
  const [t, setTweak] = useTweaks(KAYA_TWEAK_DEFAULTS);
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Hero">
        <TweakSelect
          label="Photograph"
          value={t.heroImage}
          options={HERO_IMAGE_OPTIONS}
          onChange={(v) => setTweak("heroImage", v)}
        />
        <TweakSelect
          label="Layout"
          value={t.heroLayout}
          options={HERO_LAYOUT_OPTIONS}
          onChange={(v) => setTweak("heroLayout", v)}
        />
        <TweakToggle
          label="Softer overlay"
          value={t.softOverlay}
          onChange={(v) => setTweak("softOverlay", v)}
        />
      </TweakSection>
      <TweakSection label="Layout">
        <TweakRadio
          label="Ethos background"
          value={t.ethosBg}
          options={[
            { value: "black",    label: "Black" },
            { value: "burgundy", label: "Burgundy" },
          ]}
          onChange={(v) => setTweak("ethosBg", v)}
        />
        <TweakRadio
          label="Density"
          value={t.density}
          options={[
            { value: "compact",  label: "Compact" },
            { value: "default",  label: "Editorial" },
            { value: "airy",     label: "Airy" },
          ]}
          onChange={(v) => setTweak("density", v)}
        />
        <TweakToggle
          label="Show Journal essay list"
          value={t.showJournalRows}
          onChange={(v) => setTweak("showJournalRows", v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
};

const App = () => {
  const [t] = useTweaks(KAYA_TWEAK_DEFAULTS);
  const [active, setActive] = React.useState("home");

  React.useEffect(() => {
    document.documentElement.setAttribute("data-density", t.density);
  }, [t.density]);

  React.useEffect(() => {
    document.documentElement.setAttribute("data-ethos-bg", t.ethosBg);
  }, [t.ethosBg]);

  React.useEffect(() => {
    // Toggle journal list visibility without re-rendering structure
    const list = document.querySelectorAll(".journal-list");
    list.forEach(el => el.style.display = t.showJournalRows ? "" : "none");
    const grid = document.querySelector(".journal-grid");
    if (grid) grid.style.gridTemplateColumns = t.showJournalRows ? "" : "1fr";
  }, [t.showJournalRows]);

  const scrollTo = (id) => {
    setActive(id);
    const el = document.getElementById(id);
    if (!el) return;
    const top = el.getBoundingClientRect().top + window.scrollY - 8;
    window.scrollTo({ top, behavior: "smooth" });
  };

  // Observe sections to update nav active state
  React.useEffect(() => {
    const ids = ["home", "journal", "refined", "ethos", "contact"];
    const map = { home: "home", journal: "journal", refined: "refined", ethos: "ethos", contact: "contact" };
    const els = ids.map(id => document.getElementById(id)).filter(Boolean);
    const io = new IntersectionObserver((entries) => {
      const top = entries
        .filter(e => e.isIntersecting)
        .sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0];
      if (top) setActive(map[top.target.id] || top.target.id);
    }, { threshold: [0.35, 0.6] });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <React.Fragment>
      <KayaNav active={active} onNavigate={scrollTo} />
      <KayaHero image={t.heroImage} softOverlay={t.softOverlay} layout={t.heroLayout} />
      <KayaJournal />
      <KayaStories />
      <KayaEthos />
      <KayaClosing />
      <KayaFooter />
      <KayaTweaks />
    </React.Fragment>
  );
};

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