/* app.jsx — assembles the LP + wires the Tweaks panel */

const CTA_COLORS = {
  "#3B82F6": { hover: "#2563EB", ring: "rgba(59,130,246,.30)" },
  "#2563EB": { hover: "#1D4FD7", ring: "rgba(37,99,235,.30)" },
  "#0A84FF": { hover: "#0066DB", ring: "rgba(10,132,255,.30)" },
  "#1D9B6B": { hover: "#15875B", ring: "rgba(29,155,107,.30)" },
};
const NAVY_COLORS = {
  "#14274A": { deep: "#0E1D38", soft: "#2A3E63" },
  "#0B2440": { deep: "#071A33", soft: "#27406A" },
  "#1A2E5A": { deep: "#111F40", soft: "#33477A" },
  "#1E2A3F": { deep: "#141D2D", soft: "#3A4860" },
};
const FONTS = {
  "Noto Sans JP": '"Noto Sans JP", system-ui, sans-serif',
  "Zen Kaku Gothic New": '"Zen Kaku Gothic New", "Noto Sans JP", sans-serif',
  "IBM Plex Sans JP": '"IBM Plex Sans JP", "Noto Sans JP", sans-serif',
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "direction": "a",
  "ctaColor": "#3B82F6",
  "navyColor": "#14274A",
  "headingFont": "Noto Sans JP",
  "sectionSpacing": 104
}/*EDITMODE-END*/;

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

  React.useEffect(() => {
    const root = document.documentElement;
    root.setAttribute("data-direction", t.direction);
    const cta = CTA_COLORS[t.ctaColor] || CTA_COLORS["#3B82F6"];
    root.style.setProperty("--cta", t.ctaColor);
    root.style.setProperty("--cta-hover", cta.hover);
    root.style.setProperty("--cta-ring", cta.ring);
    root.style.setProperty("--shadow-cta", `0 8px 20px ${cta.ring}`);
    const navy = NAVY_COLORS[t.navyColor] || NAVY_COLORS["#14274A"];
    root.style.setProperty("--navy", t.navyColor);
    root.style.setProperty("--navy-deep", navy.deep);
    root.style.setProperty("--navy-soft", navy.soft);
    root.style.setProperty("--font-head", FONTS[t.headingFont] || FONTS["Noto Sans JP"]);
    root.style.setProperty("--section-y", t.sectionSpacing + "px");
  }, [t]);

  return (
    <React.Fragment>
      <Header />
      <main>
        <Hero />
        <Problems />
        <Solution />
        <Features />
        <WidgetBand />
        <QRBand />
        <Pricing />
        <FinalCTA />
        <FAQ />
      </main>
      <Footer />

      <TweaksPanel>
        <TweakSection label="デザインの方向性" />
        <TweakRadio label="全体トーン" value={t.direction}
          options={[{ label: "A案 クリーン", value: "a" }, { label: "B案 ストラクチャード", value: "b" }]}
          onChange={(v) => setTweak("direction", v)} />

        <TweakSection label="カラー" />
        <TweakColor label="CTAブルー" value={t.ctaColor}
          options={Object.keys(CTA_COLORS)} onChange={(v) => setTweak("ctaColor", v)} />
        <TweakColor label="ベースネイビー" value={t.navyColor}
          options={Object.keys(NAVY_COLORS)} onChange={(v) => setTweak("navyColor", v)} />

        <TweakSection label="タイポグラフィ・余白" />
        <TweakSelect label="見出しフォント" value={t.headingFont}
          options={Object.keys(FONTS)} onChange={(v) => setTweak("headingFont", v)} />
        <TweakSlider label="セクション余白" value={t.sectionSpacing} min={64} max={140} step={4} unit="px"
          onChange={(v) => setTweak("sectionSpacing", v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

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