// App root — routing + tweaks + reveal orchestration.

const DEFAULT_HEADLINE = `Travel is a story.<br/><em>Yours deserves<br/>to be told.</em>`;
const HEADLINE_PRESETS = [
  `Travel is a story.<br/><em>Yours deserves<br/>to be told.</em>`,
  `Go further.<br/><em>Notice more.<br/>Share the rest.</em>`,
  `The world, <em>through<br/>the people<br/>who've seen it.</em>`,
];

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "cinematic",
  "heroHeadline": "Travel is a story.<br/><em>Yours deserves<br/>to be told.</em>",
  "heroImg": 0,
  "goldAccent": false,
  "revealOn": true,
  "navStyle": "transparent",
  "statsFloat": false
}/*EDITMODE-END*/;

const App = () => {
  const [route, setRoute] = React.useState(() => {
    const h = (location.hash || "").replace("#","");
    // Legacy: #journal now redirects to /trepicstories/
    if (h === "journal") { window.location.replace("/trepicstories/"); return "home"; }
    return ["home","how","creators","brands","travelers","waitlist","about","thanks"].includes(h) ? h : "home";
  });
  const [tweaks, setValue] = useTweaks(TWEAK_DEFAULTS);

  // Expose setRoute for cross-component navigation.
  React.useEffect(() => { window.__setRoute = setRoute; }, []);

  // Keep hash in sync
  React.useEffect(() => {
    history.replaceState(null, "", "#" + route);
  }, [route]);

  // Body data attrs mirror tweaks
  React.useEffect(() => {
    document.body.dataset.gold   = tweaks.goldAccent ? "on" : "off";
    document.body.dataset.reveal = tweaks.revealOn   ? "on" : "off";
  }, [tweaks.goldAccent, tweaks.revealOn]);

  // Reveal observer re-runs when route changes (new elements mount)
  React.useEffect(() => {
    if (!tweaks.revealOn) {
      document.querySelectorAll(".reveal").forEach(el => el.classList.add("in"));
      return;
    }
    const t = setTimeout(() => {
      const els = document.querySelectorAll(".reveal:not(.in)");
      const io = new IntersectionObserver((entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add("in");
            io.unobserve(e.target);
          }
        });
      }, { threshold: 0.12, rootMargin: "0px 0px -40px 0px" });
      els.forEach((el) => io.observe(el));
      return () => io.disconnect();
    }, 60);
    return () => clearTimeout(t);
  }, [route, tweaks.revealOn]);

  let Page;
  switch (route) {
    case "how":       Page = <HowPage       setRoute={setRoute}/>; break;
    case "creators":  Page = <CreatorsPage  setRoute={setRoute}/>; break;
    case "brands":    Page = <BrandsPage    setRoute={setRoute}/>; break;
    case "travelers": Page = <TravelersPage setRoute={setRoute}/>; break;
    case "waitlist":  Page = <WaitlistPage/>; break;
    case "about":     Page = <AboutPage     setRoute={setRoute}/>; break;
    case "thanks":    Page = <ThanksPage/>; break;
    default:          Page = <HomePage      tweaks={tweaks} setRoute={setRoute}/>;
  }

  return (
    <>
      <GoldDefs/>
      <Navbar route={route} setRoute={setRoute} navStyle={tweaks.navStyle}/>
      {Page}
      <Footer setRoute={setRoute}/>
      <Tria/>
      <TweaksPanel title="Tweaks">
        <TweakSection label="Hero">
          <TweakRadio
            label="Variant"
            value={tweaks.heroVariant}
            onChange={(v) => setValue("heroVariant", v)}
            options={[
              { value: "cinematic", label: "Cinematic (full-bleed photo)" },
              { value: "editorial", label: "Editorial (magazine cover)" },
            ]}
          />
          <TweakSelect
            label="Headline copy"
            value={tweaks.heroHeadline}
            onChange={(v) => setValue("heroHeadline", v)}
            options={HEADLINE_PRESETS.map((h, i) => ({
              value: h,
              label: ["Travel is a story…","Go further…","The world, through…"][i],
            }))}
          />
          <TweakRadio
            label="Background image"
            value={String(tweaks.heroImg)}
            onChange={(v) => setValue("heroImg", Number(v))}
            options={[
              { value: "0", label: "Aerial coast" },
              { value: "1", label: "Amalfi village" },
              { value: "2", label: "Maldives overwater" },
              { value: "3", label: "Kyoto temple" },
            ]}
          />
        </TweakSection>

        <TweakSection label="Layout">
          <TweakRadio
            label="Navbar"
            value={tweaks.navStyle}
            onChange={(v) => setValue("navStyle", v)}
            options={[
              { value: "transparent",      label: "Transparent overlay" },
              { value: "solid-on-scroll",  label: "Solid on scroll" },
            ]}
          />
          <TweakToggle
            label="Stats bar floats over hero"
            value={tweaks.statsFloat}
            onChange={(v) => setValue("statsFloat", v)}
          />
        </TweakSection>

        <TweakSection label="Motion & Accent">
          <TweakToggle
            label="Section reveal on scroll"
            value={tweaks.revealOn}
            onChange={(v) => setValue("revealOn", v)}
          />
          <TweakToggle
            label="Gold accent flourish"
            value={tweaks.goldAccent}
            onChange={(v) => setValue("goldAccent", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
};

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