/* Friendly Civic — App shell, nav, tweaks, mount */

const { useState: useStateA, useEffect: useEffectA } = React;

const FC_DEFAULTS = /*EDITMODE-BEGIN*/{
  "furigana": false,
  "softGradient": true,
  "buttonShape": "pill",
  "watermarkOpacity": 100,
  "showFloatCTA": true,
  "accent": "coral"
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = useTweaks(FC_DEFAULTS);
  const [furigana, setFurigana] = useStateA(tweaks.furigana);

  // sync furigana on body
  useEffectA(() => {
    document.body.classList.toggle("furigana-on", furigana);
  }, [furigana]);

  // sync tweak -> local state
  useEffectA(() => { setFurigana(tweaks.furigana); }, [tweaks.furigana]);

  // accent override
  useEffectA(() => {
    const root = document.documentElement;
    if (tweaks.accent === "coral") {
      root.style.setProperty("--brand-coral", "#E5654A");
      root.style.setProperty("--brand-coral-soft", "#FAD9CD");
    } else if (tweaks.accent === "mint") {
      root.style.setProperty("--brand-coral", "#3F9C8B");
      root.style.setProperty("--brand-coral-soft", "#C8E5DD");
    } else if (tweaks.accent === "navy") {
      root.style.setProperty("--brand-coral", "#152340");
      root.style.setProperty("--brand-coral-soft", "#D6DCE8");
    }
  }, [tweaks.accent]);

  // button shape override
  useEffectA(() => {
    const root = document.documentElement;
    root.style.setProperty("--radius-pill", tweaks.buttonShape === "pill" ? "9999px" : "12px");
  }, [tweaks.buttonShape]);

  // watermark opacity
  useEffectA(() => {
    document.querySelectorAll(".watermark").forEach(el => {
      el.style.opacity = (tweaks.watermarkOpacity / 100) * 0.85;
    });
  });

  return (
    <>
      {/* nav */}
      <nav className="nav">
        <div className="nav__inner">
          <a className="nav__brand" href="#entrance">
            <img className="nav__brand-logo" src="assets/logo-pspo.png" alt="P・SPO EVERYDAY MATCHING FOR YOUR LIFE" />
            <span className="nav__brand-text">
              <span className="name">CHITACOH</span>
              <span className="sub">知多半田駅前店</span>
            </span>
          </a>
          <div className="nav__menu">
            <a href="#places">場所</a>
            <a href="#routes">通学パターン</a>
            <a href="#strengths">3つの強み</a>
            <a href="#network">3拠点</a>
            <a href="#pricing">料金</a>
            <a href="#faq">FAQ</a>
          </div>
          <div className="nav__actions">
            <a className="btn btn--primary" href="#contact" style={{ padding: "10px 18px", fontSize: 13 }}>
              見学予約 <span className="arrow">→</span>
            </a>
          </div>
        </div>
      </nav>

      <Entrance />
      <Places />
      <Reframe />
      <Routes />
      <Strengths />
      <Network />
      <Catchment />
      <Facilities />
      <Pricing />
      <FAQs />
      <Steps />
      <Contact />

      {tweaks.showFloatCTA && <FloatingCTA />}

      {/* Tweaks panel */}
      <TweaksPanel title="Tweaks">
        <TweakSection title="表示">
          <TweakToggle label="ふりがな ON" value={tweaks.furigana} onChange={(v) => setTweak("furigana", v)} />
          <TweakToggle label="フローティングCTA" value={tweaks.showFloatCTA} onChange={(v) => setTweak("showFloatCTA", v)} />
        </TweakSection>
        <TweakSection title="フォルム">
          <TweakRadio
            label="ボタンの形"
            value={tweaks.buttonShape}
            options={[{ label: "ピル", value: "pill" }, { label: "角丸", value: "rounded" }]}
            onChange={(v) => setTweak("buttonShape", v)}
          />
          <TweakSlider label="背景透かし強さ" value={tweaks.watermarkOpacity}
            min={0} max={100} step={5}
            onChange={(v) => setTweak("watermarkOpacity", v)} />
        </TweakSection>
        <TweakSection title="アクセント">
          <TweakRadio
            label="アクセント色"
            value={tweaks.accent}
            options={[
              { label: "コーラル", value: "coral" },
              { label: "ミント", value: "mint" },
              { label: "ネイビー", value: "navy" },
            ]}
            onChange={(v) => setTweak("accent", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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