/* Aifit Life Platform — main app */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "purple": "#7C6BA6",
  "headingFont": "Shippori Mincho",
  "aiColor": "#C2A55E",
  "showRail": true
}/*EDITMODE-END*/;

function App() {
  const { useState, useEffect } = React;
  const D = window.AIFIT;
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [selected, setSelected] = useState(null);

  useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty("--purple", t.purple);
    r.style.setProperty("--purple-mid", `color-mix(in srgb, ${t.purple} 82%, #2f2942)`);
    r.style.setProperty("--purple-deep", `color-mix(in srgb, ${t.purple} 62%, #2f2942)`);
  }, [t.purple]);
  useEffect(() => {
    document.documentElement.style.setProperty("--mincho",
      `"${t.headingFont}", "Hiragino Mincho ProN", "Yu Mincho", serif`);
  }, [t.headingFont]);
  useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty("--gold", t.aiColor);
    r.style.setProperty("--gold-deep", `color-mix(in srgb, ${t.aiColor} 62%, #4a3a14)`);
  }, [t.aiColor]);

  useEffect(() => {
    const io = new IntersectionObserver((es) => {
      es.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } });
    }, { threshold: 0.14 });
    document.querySelectorAll(".reveal").forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);

  const accents = {};
  D.PLATFORM.forEach((p) => { accents[p.key] = p.color; });

  return (
    <React.Fragment>
      <Header contact={D.CONTACT} nav={D.NAV} />
      {t.showRail && <SideRail contact={D.CONTACT} />}

      <main>
        <Hero platform={D.PLATFORM} selected={selected} onSelect={setSelected} contact={D.CONTACT} />
        <VoicesSection voices={D.VOICES} />
        <TrustStrip items={D.TRUST} />
        <GenreShowcase />
        <ReasonsSection reasons={D.REASONS} />
        <div id="platform"></div>
        <JourneySection cards={D.JOURNEY} accents={accents} onSelect={setSelected} />
        <PlansSection plans={D.PLANS} note={D.PLANS_NOTE} contact={D.CONTACT} shucchou={D.SHUCCHOU} />
        <LargeSection data={D.LARGE} contact={D.CONTACT} />
        <MembershipSection data={D.MEMBERSHIP} />
        <AmbassadorBand data={D.AMBASSADOR} />
        <NotesSection notes={D.NOTES} />
        <SupportSection cards={D.SUPPORT} halls={D.HALLS} contact={D.CONTACT} />
        <ChatSection worries={D.WORRIES} modes={D.CHAT_MODES} badges={D.CHAT_BADGES} questions={D.CHAT_QUESTIONS} contact={D.CONTACT} />
        <ConnectSection contact={D.CONTACT} />
        <NewsSnsSection />
      </main>

      <Footer contact={D.CONTACT} nav={D.NAV} />

      <TweaksPanel>
        <TweakSection label="トーン" />
        <TweakColor label="メインカラー" value={t.purple}
          options={["#7C6BA6", "#6E5C97", "#8A77B5", "#6A6E96", "#5E6E82"]}
          onChange={(v) => setTweak("purple", v)} />
        <TweakColor label="AIバッジの色" value={t.aiColor}
          options={["#C2A55E", "#B79A5B", "#7C6BA6", "#6E5C97"]}
          onChange={(v) => setTweak("aiColor", v)} />
        <TweakSection label="書体" />
        <TweakSelect label="見出しの明朝" value={t.headingFont}
          options={["Shippori Mincho", "Noto Serif JP", "Zen Old Mincho"]}
          onChange={(v) => setTweak("headingFont", v)} />
        <TweakSection label="表示" />
        <TweakToggle label="右サイドの操作バー" value={t.showRail}
          onChange={(v) => setTweak("showRail", v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

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