/**
 * App — top-level layout.
 *
 * Mounts each section component, owns the reveal-on-scroll observer + toast,
 * and renders the Tweaks panel for in-prototype variations.
 *
 * RR7 port notes:
 *   - Replace `window.weddingData` with `useLoaderData()`.
 *   - Move `useReveal` / `useToast` into hooks/ files.
 *   - Drop the Tweaks panel (prototype-only).
 *   - Convert `window.X = X` glue lines to `export default X;`.
 */
const { useEffect: useEffectA, useState: useStateA } = React;

function useReveal() {
  useEffectA(() => {
    const els = document.querySelectorAll(".reveal");
    if (!els.length) return;
    // Hide elements that are below the fold so they can animate in. Elements
    // already in view stay visible (no flash).
    els.forEach((el) => {
      const r = el.getBoundingClientRect();
      const inView = r.top < window.innerHeight && r.bottom > 0;
      if (!inView) el.classList.add("is-pre");else
      el.classList.add("is-in");
    });
    const obs = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.remove("is-pre");
            e.target.classList.add("is-in");
            obs.unobserve(e.target);
          }
        });
      },
      { threshold: 0.12 }
    );
    els.forEach((el) => obs.observe(el));
    return () => obs.disconnect();
  }, []);
}

function useToast() {
  const [msg, setMsg] = useStateA(null);
  useEffectA(() => {
    if (!msg) return;
    const t = setTimeout(() => setMsg(null), 2400);
    return () => clearTimeout(t);
  }, [msg]);
  return [msg, setMsg];
}

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "default",
  "scriptFont": "Pinyon Script",
  "showCountdown": true,
  "heroFrame": "corners",
  "heroFrameColor": "light",
  "divider": "below-text",
  "flourish": "m01"
} /*EDITMODE-END*/;

function App() {
  const data = window.weddingData;
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [toast, setToast] = useToast();
  useReveal();

  useEffectA(() => {
    document.body.dataset.palette = t.palette === "default" ? "" : t.palette;
  }, [t.palette]);

  useEffectA(() => {
    document.documentElement.style.setProperty(
      "--font-script",
      `"${t.scriptFont}", "Allura", cursive`
    );
  }, [t.scriptFont]);

  return (
    <>
      <main>
        <Hero
          couple={data.couple}
          frame={t.heroFrame}
          frameColor={t.heroFrameColor} />
        

        <DateBlock
          dateDisplay={data.dateDisplay}
          intro={data.intro}
          date={data.date}
          showCountdown={t.showCountdown}
          divider={t.divider}
          flourish={t.flourish} />
        

        <PhotoBreak id="orangerie" placeholder="Orangerie photo · couple at greenhouse windows" />

        <WannWo events={data.events} flourish={t.flourish} />

        <Collage />

        <Unterkunft
          title={data.accommodation.title}
          body={data.accommodation.body}
          links={data.accommodation.links}
          divider={t.divider} />
        

        <Outro footer={data.footer} frame={t.heroFrame} />
      </main>

      <div className={`toast ${toast ? "is-on" : ""}`} role="status" aria-live="polite">
        {toast || ""}
      </div>

      <TweaksPanel>
        <TweakSection label="Hero-Rahmen" />
        <TweakSelect
          label="Rahmen"
          value={t.heroFrame}
          options={["vine", "corners", "grapes", "nouveau", "none"]}
          onChange={(v) => setTweak("heroFrame", v)} />
        
        <TweakRadio
          label="Linie"
          value={t.heroFrameColor}
          options={["light", "dark"]}
          onChange={(v) => setTweak("heroFrameColor", v)} />
        
        <TweakSelect
          label="Ornament"
          value={t.flourish}
          options={["none", "m01", "m04", "m08", "m09", "m10", "m07", "m03", "m11", "803", "810", "812"]}
          onChange={(v) => setTweak("flourish", v)} />
        
        <TweakSection label="Palette" />
        <TweakRadio
          label="Theme"
          value={t.palette}
          options={["default", "rose", "forest", "midnight"]}
          onChange={(v) => setTweak("palette", v)} />
        
        <TweakSection label="Typografie" />
        <TweakSelect
          label="Script"
          value={t.scriptFont}
          options={["Pinyon Script", "Allura", "Great Vibes", "Tangerine", "Petit Formal Script"]}
          onChange={(v) => setTweak("scriptFont", v)} />
        
        <TweakSection label="Sektionen" />
        <TweakToggle
          label="Countdown"
          value={t.showCountdown}
          onChange={(v) => setTweak("showCountdown", v)} />
        
        <TweakRadio
          label="Trenner"
          value={t.divider}
          options={["below-text", "section"]}
          onChange={(v) => setTweak("divider", v)} />
        
      </TweaksPanel>
    </>);

}

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