/* SpeakMind — app shell: nav, hero switcher, tweaks, scroll reveals */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroStyle": "split",
  "accent": "#d9481f",
  "paper": "#f3eee6",
  "motion": true,
  "showSwitcher": true,
  "inkwash": true,
  "kineticType": true,
  "typeBanner": true,
  "printDetails": true,
  "microPolish": true,
  "liveTranscript": false
}/*EDITMODE-END*/;

/* coordinated warm-paper ramps. swatch value = page background. */
const PAPERS = {
  "#f3eee6": { bg: "#f3eee6", bg2: "#f8f5ef", surface: "#fdfbf7", surface2: "#e9e2d7", glass: "rgba(250,247,241,0.8)" },   // MiMo cream
  "#e9e1cf": { bg: "#e9e1cf", bg2: "#f1ebdd", surface: "#faf5ea", surface2: "#e5dcc7", glass: "rgba(247,242,231,0.78)" }, // Oat (original)
  "#eceae4": { bg: "#eceae4", bg2: "#f4f2ec", surface: "#fcfbf7", surface2: "#e2dfd6", glass: "rgba(250,249,244,0.8)" },   // Cool stone
  "#ffffff": { bg: "#ffffff", bg2: "#f3f3f1", surface: "#ffffff", surface2: "#ebebe9", glass: "rgba(255,255,255,0.82)" }, // Clean white (variant B)
};

function setPaper(hex) {
  const p = PAPERS[hex] || PAPERS["#f3eee6"];
  const root = document.documentElement;
  root.style.setProperty("--bg", p.bg);
  root.style.setProperty("--bg2", p.bg2);
  root.style.setProperty("--surface", p.surface);
  root.style.setProperty("--surface2", p.surface2);
  root.style.setProperty("--glass", p.glass);
}

function setAccent(hex) {
  const root = document.documentElement;
  const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
  const d = (x) => Math.round(x * 0.76);
  root.style.setProperty("--accent", hex);
  root.style.setProperty("--accent-deep", `rgb(${d(r)},${d(g)},${d(b)})`);
  root.style.setProperty("--accent-soft", `rgba(${r},${g},${b},0.13)`);
  root.style.setProperty("--accent-line", `rgba(${r},${g},${b},0.5)`);
  root.style.setProperty("--accent-glow", `rgba(${r},${g},${b},0.16)`);
}

function useScrollReveals(dep) {
  useEffect(() => {
    const els = document.querySelectorAll(".reveal:not(.in)");
    const o = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("in"); o.unobserve(e.target); } });
    }, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" });
    els.forEach((el) => o.observe(el));
    return () => o.disconnect();
  }, [dep]);
}

function LocaleToggle({ locale, onLocale }) {
  return (
    <select className="lang-select" value={locale} onChange={(e) => onLocale(e.target.value)} aria-label="Language">
      {window.SM.SUPPORTED_LANGS.map((l) => (
        <option key={l} value={l}>{window.SM.LANG_LABELS[l]}</option>
      ))}
    </select>
  );
}

function Nav({ locale, onLocale }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const t = window.SM.t;
  return (
    <nav className={"nav" + (scrolled ? " scrolled" : "")}>
      <a className="brand" href="#top"><span className="mark" /> SpeakMind</a>
      <div className="nav-links">
        <a href="#how">{t("How it works")}</a>
        <a href="#personas">{t("Use cases")}</a>
        <a href="#pricing">{t("Pricing")}</a>
        <a href="#loved">{t("Loved")}</a>
      </div>
      <div className="nav-cta">
        <LocaleToggle locale={locale} onLocale={onLocale} />
        <a className="btn btn-primary" href="#download" style={{ padding: "10px 18px", fontSize: "14px" }}>
          <span className="apple"></span> {t("Download")}
        </a>
      </div>
    </nav>
  );
}

function HeroSwitcher({ value, onChange }) {
  const { HERO_VARIANTS } = window.SMHero;
  return (
    <div className="hero-switch">
      <span className="lbl">Hero</span>
      {Object.entries(HERO_VARIANTS).map(([k, v]) => (
        <button key={k} className={value === k ? "on" : ""} onClick={() => onChange(k)}>{v.label}</button>
      ))}
    </div>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [locale, setLoc] = useState(window.SM.locale || "en");
  const onLocale = (loc) => {
    if (loc === locale) return;
    window.SM.setLocale(loc);
    setLoc(window.SM.locale);
  };
  const { HERO_VARIANTS } = window.SMHero;
  const { Features, Stats, Pricing, Testimonials, FooterCTA } = window.SMSections;

  useEffect(() => { setAccent(t.accent); }, [t.accent]);
  useEffect(() => { setPaper(t.paper); }, [t.paper]);
  useEffect(() => { document.body.classList.toggle("no-motion", !t.motion); }, [t.motion]);
  useEffect(() => { document.body.classList.toggle("inkwash", !!t.inkwash); }, [t.inkwash]);
  useEffect(() => { document.body.classList.toggle("print-details", !!t.printDetails); }, [t.printDetails]);
  useEffect(() => { document.body.classList.toggle("micro-polish", !!t.microPolish); }, [t.microPolish]);
  useEffect(() => { document.body.classList.toggle("show-transcript", !!t.liveTranscript); }, [t.liveTranscript]);
  window.SMTrends.useKineticType(t.kineticType && t.motion);
  useScrollReveals(t.heroStyle + "·" + locale);

  const HeroComp = (HERO_VARIANTS[t.heroStyle] || HERO_VARIANTS.centered).Comp;
  const { AppMarquee, HeroStats, Chapter, Languages } = window.SMx;
  const { AutoEdits, Personas } = window.SMpro;
  const { TypeBanner, PrintMarks } = window.SMTrends;

  return (
    <div id="top">
      <Nav locale={locale} onLocale={onLocale} />
      <main key={locale}>
        <div className="hero-stage">
          <div className="aurora" aria-hidden="true"><b></b><b></b><b></b></div>
          <div className="wrap">
            <HeroComp />
          </div>
        </div>
        <HeroStats />
        <Chapter word={window.SM.t("Dictate")} sub={window.SM.t("Messy speech in. Clean, finished text out — anywhere you write.")} />
        <AutoEdits />
        <Personas />
        <Features />
        <AppMarquee />
        <Chapter word={window.SM.t("Translate")} sub={window.SM.t("Think in one language. Ship clean text in another.")} />
        <Languages />
        <Stats />
        {t.typeBanner && <TypeBanner />}
        <Pricing />
        <Testimonials />
        <FooterCTA />
      </main>

      {t.printDetails && <PrintMarks />}
      {t.showSwitcher && <HeroSwitcher value={t.heroStyle} onChange={(v) => setTweak("heroStyle", v)} />}

      <TweaksPanel>
        <TweakSection label="Style" />
        <TweakToggle label="东方水墨 · Ink wash" value={t.inkwash} onChange={(v) => setTweak("inkwash", v)} />
        <TweakSection label="Hero" />
        <TweakRadio label="Treatment" value={t.heroStyle}
          options={["split", "centered", "editorial"]}
          onChange={(v) => setTweak("heroStyle", v)} />
        <TweakToggle label="Show hero switcher" value={t.showSwitcher} onChange={(v) => setTweak("showSwitcher", v)} />
        <TweakSection label="Brand palette" />
        <TweakColor label="背景 · Paper" value={t.paper}
          options={["#f3eee6", "#e9e1cf", "#eceae4"]}
          onChange={(v) => setTweak("paper", v)} />
        <TweakColor label="Accent" value={t.accent}
          options={["#d9481f", "#bd7a1e", "#3f6a4f", "#34507e", "#9c3322"]}
          onChange={(v) => setTweak("accent", v)} />
        <TweakSection label="2026 trends" />
        <TweakToggle label="滚动字重 · Kinetic type" value={t.kineticType} onChange={(v) => setTweak("kineticType", v)} />
        <TweakToggle label="巨字横幅 · Type banner" value={t.typeBanner} onChange={(v) => setTweak("typeBanner", v)} />
        <TweakToggle label="印刷细节 · Print details" value={t.printDetails} onChange={(v) => setTweak("printDetails", v)} />
        <TweakToggle label="微交互 · Micro polish" value={t.microPolish} onChange={(v) => setTweak("microPolish", v)} />
        <TweakToggle label="逐字转写(演示用) · Live transcript" value={t.liveTranscript} onChange={(v) => setTweak("liveTranscript", v)} />
        <TweakSection label="Motion" />
        <TweakToggle label="Animations" value={t.motion} onChange={(v) => setTweak("motion", v)} />
      </TweaksPanel>
    </div>
  );
}

/* A/B: mount.jsx picks A or B. Expose A + the shared Nav for the B shell. */
window.SMNav = Nav;
window.SMAppA = App;