const { useState: uSL, useEffect: uEL, useRef: uRL } = window.React;

function Reveal({ children }) {
  const ref = uRL(null);
  const [vis, setVis] = uSL(false);
  uEL(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) setVis(true); }, { threshold: 0.15 });
    obs.observe(el);
    return () => obs.disconnect();
  }, []);
  return (
    <div ref={ref} style={{
      transform: vis ? "scale(1)" : "scale(0.97)",
      opacity: vis ? 1 : 0.6,
      transition: "transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.8s ease",
    }}>{children}</div>
  );
}

/* TWEAKS default block */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#C9583C",
  "theme": "light",
  "heroStyle": "A",
  "typeFamily": "instrument-serif",
  "density": "airy"
}/*EDITMODE-END*/;

const FONTS = {
  "instrument-serif": { serif: '"Instrument Serif", serif', sans: '"IBM Plex Sans", sans-serif' },
  "source-serif":     { serif: '"Source Serif 4", serif', sans: '"IBM Plex Sans", sans-serif' },
  "fraunces":         { serif: '"Fraunces", serif', sans: '"IBM Plex Sans", sans-serif' },
  "eb-garamond":      { serif: '"EB Garamond", serif', sans: '"IBM Plex Sans", sans-serif' },
};

const ACCENTS = [
  { v: "#C9583C", n: "Rust" },
  { v: "#B8864A", n: "Ochre" },
  { v: "#7A9A85", n: "Sage" },
  { v: "#536A8A", n: "Slate" },
  { v: "#8F6FA3", n: "Lavender" },
];

function applyTweaks(t) {
  document.documentElement.setAttribute("data-theme", t.theme);
  document.documentElement.setAttribute("data-density", t.density);
  document.documentElement.style.setProperty("--accent", t.accent);
  document.documentElement.style.setProperty("--accent-soft", t.accent + "22");
  const f = FONTS[t.typeFamily] || FONTS["instrument-serif"];
  document.documentElement.style.setProperty("--font-serif", f.serif);
  document.documentElement.style.setProperty("--font-sans", f.sans);
}

function Landing() {
  const [lang, setLang] = uSL(() =>
    typeof window !== "undefined" && window.location.pathname.startsWith("/ja") ? "ja" : "en"
  );
  const [tweaks, setTweaks] = uSL(TWEAK_DEFAULTS);
  const [editMode, setEditMode] = uSL(false);

  uEL(() => applyTweaks(tweaks), [tweaks]);

  uEL(() => {
    const onMsg = (e) => {
      if (e.data?.type === "__activate_edit_mode") setEditMode(true);
      if (e.data?.type === "__deactivate_edit_mode") setEditMode(false);
    };
    window.addEventListener("message", onMsg);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", onMsg);
  }, []);

  const setTweak = (key, value) => {
    const next = { ...tweaks, [key]: value };
    setTweaks(next);
    window.parent.postMessage({ type: "__edit_mode_set_keys", edits: { [key]: value } }, "*");
  };

  const Hero = tweaks.heroStyle === "A" ? HeroA : tweaks.heroStyle === "B" ? HeroB : HeroC;

  return (
    <>
      <Nav lang={lang} setLang={setLang}/>
      <div style={{
        textAlign: "center", padding: "14px 20px", marginTop: 68,
        fontFamily: "var(--font-mono)", fontSize: 14, letterSpacing: "0.12em",
        textTransform: "uppercase", color: "var(--accent)", fontWeight: 600,
      }}>
        {lang === "ja" ? "✨ v2.4 公開中 · Chrome ウェブストアで無料配信" : "✨ v2.4 NOW LIVE · FREE ON CHROME WEB STORE"}
      </div>
      <Hero lang={lang}/>
      <Reveal><HowItWorks lang={lang}/></Reveal>
      <FeaturesGrid lang={lang}/>
      <Reveal><ThinkingProfile lang={lang}/></Reveal>
      <Reveal><MindTracing lang={lang}/></Reveal>
      <Reveal><CategoryExplainer lang={lang}/></Reveal>
      <Reveal><LiveDemo lang={lang}/></Reveal>
      <Reveal><Pricing lang={lang}/></Reveal>
      <Reveal><BigCTA lang={lang}/></Reveal>
      <Footer lang={lang}/>

      {editMode && (
        <TweaksPanel tweaks={tweaks} setTweak={setTweak}/>
      )}
    </>
  );
}

function TweaksPanel({ tweaks, setTweak }) {
  return (
    <div style={{
      position: "fixed", right: 20, bottom: 20, zIndex: 100, width: 280,
      background: "var(--bg-raised)", border: "1px solid var(--rule)", borderRadius: 14,
      padding: 18, boxShadow: "0 20px 50px -10px var(--ink-20)",
      fontFamily: "var(--font-sans)",
    }}>
      <div className="mono-hi" style={{ marginBottom: 14 }}>TWEAKS</div>

      <Row label="Hero style">
        {["A", "B", "C"].map(s => (
          <button key={s} onClick={() => setTweak("heroStyle", s)} style={pillBtn(tweaks.heroStyle === s)}>{s}</button>
        ))}
      </Row>

      <Row label="Theme">
        {["light", "dark"].map(t => (
          <button key={t} onClick={() => setTweak("theme", t)} style={pillBtn(tweaks.theme === t)}>{t.toUpperCase()}</button>
        ))}
      </Row>

      <Row label="Density">
        {["airy", "tight"].map(d => (
          <button key={d} onClick={() => setTweak("density", d)} style={pillBtn(tweaks.density === d)}>{d.toUpperCase()}</button>
        ))}
      </Row>

      <Row label="Accent">
        <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
          {ACCENTS.map(a => (
            <button key={a.v} onClick={() => setTweak("accent", a.v)} title={a.n} style={{
              width: 22, height: 22, borderRadius: "50%", border: 0, cursor: "pointer",
              background: a.v,
              outline: tweaks.accent === a.v ? "2px solid var(--ink)" : "none",
              outlineOffset: 2,
            }}/>
          ))}
        </div>
      </Row>

      <Row label="Type">
        <select value={tweaks.typeFamily} onChange={e => setTweak("typeFamily", e.target.value)} style={{
          width: "100%", padding: "8px 10px", border: "1px solid var(--rule)", borderRadius: 8,
          background: "var(--bg)", color: "var(--ink)",
          font: "500 12px/1 var(--font-sans)", cursor: "pointer",
        }}>
          <option value="instrument-serif">Instrument Serif</option>
          <option value="source-serif">Source Serif 4</option>
          <option value="fraunces">Fraunces</option>
          <option value="eb-garamond">EB Garamond</option>
        </select>
      </Row>
    </div>
  );
}

const Row = ({ label, children }) => (
  <div style={{ marginBottom: 14 }}>
    <div className="mono" style={{ color: "var(--ink-40)", marginBottom: 6, fontSize: 10, letterSpacing: "0.1em", textTransform: "uppercase" }}>{label}</div>
    <div style={{ display: "flex", gap: 6, alignItems: "center" }}>{children}</div>
  </div>
);

const pillBtn = (active) => ({
  padding: "5px 10px", borderRadius: 999, border: 0, cursor: "pointer",
  font: "500 10px/1 var(--font-mono)", letterSpacing: "0.08em", textTransform: "uppercase",
  background: active ? "var(--ink)" : "transparent",
  color: active ? "var(--bg)" : "var(--ink-60)",
  boxShadow: active ? "none" : "inset 0 0 0 1px var(--ink-20)",
});

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