/* global React, ReactDOM */
/* global Header, Footer, MobileStickyCTA, Hero, TrustBadges, Promises, Services, Compare, Price, Area, Flow, Faq, Company, ContactCta */
/* global useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakToggle, TweakColor */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#C9A86A",
  "brand": "#0B2545",
  "headingFont": "Shippori Mincho",
  "density": "standard",
  "dark": false
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    const body = document.body;
    body.style.setProperty("--color-accent", t.accent);
    body.style.setProperty("--color-brand", t.brand);
    body.style.setProperty("--color-brand-ink", shade(t.brand, -0.35));

    const fontMap = {
      "Shippori Mincho": `"Shippori Mincho", "Yu Mincho", "ヒラギノ明朝 ProN", serif`,
      "Noto Serif JP": `"Noto Serif JP", "Yu Mincho", serif`,
      "Noto Sans JP": `"Noto Sans JP", system-ui, sans-serif`,
    };
    body.style.setProperty("--font-heading", fontMap[t.headingFont] || fontMap["Shippori Mincho"]);

    body.setAttribute("data-density", t.density);
    body.setAttribute("data-dark", String(t.dark));
  }, [t]);

  return (
    <div id="top">
      <Header />
      <main>
        <Hero />
        <TrustBadges />
        <Promises />
        <Services />
        <Compare />
        <Price />
        <Area />
        <Flow />
        <Faq />
        <Company />
        <ContactCta />
      </main>
      <Footer />
      <MobileStickyCTA />

      <TweaksPanel title="Tweaks">
        <TweakSection label="ブランド" />
        <TweakColor label="Brand" value={t.brand} onChange={(v) => setTweak("brand", v)} />
        <TweakColor label="Accent" value={t.accent} onChange={(v) => setTweak("accent", v)} />

        <TweakSection label="見出しフォント" />
        <TweakRadio
          label="Font"
          value={t.headingFont}
          options={["Shippori Mincho", "Noto Serif JP", "Noto Sans JP"]}
          onChange={(v) => setTweak("headingFont", v)}
        />

        <TweakSection label="密度" />
        <TweakRadio
          label="Density"
          value={t.density}
          options={["loose", "standard", "dense"]}
          onChange={(v) => setTweak("density", v)}
        />

        <TweakSection label="モード" />
        <TweakToggle label="ダークモード" value={t.dark} onChange={(v) => setTweak("dark", v)} />
      </TweaksPanel>
    </div>
  );
}

function shade(hex, pct) {
  const m = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  if (!m) return hex;
  let [r, g, b] = [parseInt(m[1], 16), parseInt(m[2], 16), parseInt(m[3], 16)];
  const t = pct < 0 ? 0 : 255;
  const p = Math.abs(pct);
  r = Math.round((t - r) * p + r);
  g = Math.round((t - g) * p + g);
  b = Math.round((t - b) * p + b);
  const hx = (n) => n.toString(16).padStart(2, "0");
  return `#${hx(r)}${hx(g)}${hx(b)}`;
}

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