/* ============================================================
   L'angelot — App root
   ============================================================ */
const { useState: ap_useState, useEffect: ap_useEffect, useLayoutEffect: ap_useLayoutEffect, useRef: ap_useRef } = React;

function revealInView() {
  const vh = window.innerHeight || document.documentElement.clientHeight;
  document.querySelectorAll(".reveal:not(.in)").forEach((el) => {
    const r = el.getBoundingClientRect();
    if (r.top < vh * 0.92 && r.bottom > 0) el.classList.add("in");
  });
}

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "style": "luxe",
  "accent": "#c9a86a",
  "defaultLeather": "natural",
  "serifHeadings": true
}/*EDITMODE-END*/;

const STYLE_THEME = { luxe: "luxe", ivory: "ivory", craft: "craft" };

function useRevealObserver() {
  // Re-assert reveals before every paint so React re-renders (e.g. tweak/lang
  // changes) can never leave content stuck at opacity:0.
  ap_useLayoutEffect(() => { revealInView(); });
  ap_useEffect(() => {
    let raf = 0;
    const onScroll = () => { cancelAnimationFrame(raf); raf = requestAnimationFrame(revealInView); };
    const t1 = setTimeout(revealInView, 250);
    const t2 = setTimeout(revealInView, 800);
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll, { passive: true });
    return () => {
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", onScroll);
      clearTimeout(t1); clearTimeout(t2); cancelAnimationFrame(raf);
    };
  }, []);
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const C = window.LANGELOT_CONTENT;

  const [lang, setLang] = ap_useState(() => localStorage.getItem("langelot-lang") || "jp");
  ap_useEffect(() => { localStorage.setItem("langelot-lang", lang); }, [lang]);

  const content = C[lang];

  // customizer state
  const [czState, setCzState] = ap_useState({
    name: "",
    surname: "",
    phone: "",
    leather: t.defaultLeather || "natural",
    cord1: "#E3D2B0",
    cord2: "#C49A6C",
    crystal: "both",
  });
  const setCz = (k, v) => setCzState((s) => ({ ...s, [k]: v }));

  // sync default leather tweak
  ap_useEffect(() => { setCzState((s) => ({ ...s, leather: t.defaultLeather })); }, [t.defaultLeather]);

  // theme + accent + font
  ap_useEffect(() => {
    const root = document.documentElement;
    root.setAttribute("data-theme", STYLE_THEME[t.style] || "luxe");
    if (t.accent) {
      root.style.setProperty("--gold", t.accent);
      root.style.setProperty("--gold-soft", t.accent + "28");
    } else {
      root.style.removeProperty("--gold");
      root.style.removeProperty("--gold-soft");
    }
    root.style.setProperty("--serif-jp", t.serifHeadings ? "'Shippori Mincho', serif" : "'Zen Kaku Gothic New', sans-serif");
  }, [t.style, t.accent, t.serifHeadings]);

  useRevealObserver();

  const leatherOpts = window.LANGELOT_LEATHERS;

  return (
    <React.Fragment>
      <Header t={content} lang={lang} setLang={setLang} />
      <main>
        <Hero t={content} />
        <Customizer t={content} lang={lang} state={czState} set={setCz} />
        <Products t={content} />
        <OrderFlow t={content} />
        <Care t={content} />
        <Reviews t={content} />
        <FAQ t={content} />
        <Contact t={content} />
      </main>
      <Footer t={content} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="デザインの方向 / Direction" />
        <TweakRadio
          label="スタイル"
          value={t.style}
          options={["luxe", "ivory", "craft"]}
          onChange={(v) => setTweak("style", v)}
        />
        <p style={{ fontSize: "11px", lineHeight: 1.6, opacity: 0.6, margin: "2px 0 4px" }}>
          luxe = ダーク×ゴールド ／ ivory = アイボリー ミニマル ／ craft = 暖かいクラフト
        </p>
        <TweakColor
          label="アクセント"
          value={t.accent}
          options={["#c9a86a", "#b08a4f", "#a86b3c", "#9c7b8a", "#7d8a6b"]}
          onChange={(v) => setTweak("accent", v)}
        />
        <TweakSection label="タイポgrafi" />
        <TweakToggle
          label="見出しに明朝体を使う"
          value={t.serifHeadings}
          onChange={(v) => setTweak("serifHeadings", v)}
        />
        <TweakSection label="商品プレビュー" />
        <TweakSelect
          label="初期の革色"
          value={t.defaultLeather}
          options={leatherOpts.map((l) => l.id)}
          onChange={(v) => setTweak("defaultLeather", v)}
        />
      </TweaksPanel>
    </React.Fragment>
  );
}

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