/* Tweaks app for Highlight Partners HP
   - 3 palettes (sumi-gold / yuki-ai / kinari-shu)
   - per-section visibility toggles
   - CTA heading variant A/B/C
*/

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "sumi-gold",
  "ctaVariant": "A",
  "showProblem": true,
  "showFeatures": true,
  "showService": true,
  "showVmv": true,
  "showMessage": true,
  "showFaq": true,
  "headlineSerif": "serif"
}/*EDITMODE-END*/;

// Palette previews (for the TweakColor swatch UI)
const PALETTES = {
  "sumi-gold":  ["#1B2A4A", "#B8963E", "#F7F5F2"],
  "yuki-ai":    ["#14233a", "#9b8552", "#f1f1ec"],
  "kinari-shu": ["#8c2d1f", "#2a1812", "#f3ead9"],
};
const PALETTE_LABELS = {
  "sumi-gold":  "紺 × 金",
  "yuki-ai":    "雪 × 藍",
  "kinari-shu": "生成 × 朱",
};

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

  // Apply palette + CTA + visibility to the document
  React.useEffect(() => {
    document.documentElement.setAttribute("data-palette", t.palette);
  }, [t.palette]);
  React.useEffect(() => {
    document.body.setAttribute("data-cta", t.ctaVariant);
  }, [t.ctaVariant]);
  React.useEffect(() => {
    document.body.setAttribute("data-show-problem",  String(!!t.showProblem));
    document.body.setAttribute("data-show-features", String(!!t.showFeatures));
    document.body.setAttribute("data-show-service",  String(!!t.showService));
    document.body.setAttribute("data-show-vmv",      String(!!t.showVmv));
    document.body.setAttribute("data-show-message",  String(!!t.showMessage));
    document.body.setAttribute("data-show-faq",      String(!!t.showFaq));
  }, [t.showProblem, t.showFeatures, t.showService, t.showVmv, t.showMessage, t.showFaq]);
  React.useEffect(() => {
    // Switch the hero headline font family between Serif (明朝) and Sans (ゴシック)
    document.documentElement.style.setProperty(
      "--headline-font",
      t.headlineSerif === "sans"
        ? "'Noto Sans JP', sans-serif"
        : "'Noto Serif JP', serif"
    );
    document.querySelectorAll(".hero-headline__col, .section-title, .feature__title, .service-title, .message-quote, .cta-title, .vmv-block__statement, .problem-card__q, .hero__lede")
      .forEach(el => { el.style.fontFamily = "var(--headline-font)"; });
  }, [t.headlineSerif]);

  // Find palette value for TweakColor
  const paletteOptions = Object.keys(PALETTES).map(k => PALETTES[k]);
  const currentPalette = PALETTES[t.palette];
  const onPaletteChange = (arr) => {
    const key = Object.keys(PALETTES).find(k => JSON.stringify(PALETTES[k]) === JSON.stringify(arr));
    if (key) setTweak("palette", key);
  };

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="カラーパレット" />
      <TweakColor
        label={PALETTE_LABELS[t.palette]}
        value={currentPalette}
        options={paletteOptions}
        onChange={onPaletteChange}
      />

      <TweakSection label="見出しの書体" />
      <TweakRadio
        label="Headline"
        value={t.headlineSerif}
        options={[
          { value: "serif", label: "明朝" },
          { value: "sans",  label: "ゴシック" },
        ]}
        onChange={(v) => setTweak("headlineSerif", v)}
      />

      <TweakSection label="CTA 見出し" />
      <TweakRadio
        label="Variant"
        value={t.ctaVariant}
        options={[
          { value: "A", label: "A" },
          { value: "B", label: "B" },
          { value: "C", label: "C" },
        ]}
        onChange={(v) => setTweak("ctaVariant", v)}
      />
      <div style={{
        font: "11px/1.7 var(--font-sans, sans-serif)",
        color: "rgba(41,38,27,.55)",
        padding: "2px 0 0", letterSpacing: ".04em"
      }}>
        {t.ctaVariant === "A" && "案A：まずは、ご相談ください。"}
        {t.ctaVariant === "B" && "案B：経営のことを、一度整理してみませんか。"}
        {t.ctaVariant === "C" && "案C：一社一社の経営に、真摯に向き合います。"}
      </div>

      <TweakSection label="セクションの表示" />
      <TweakToggle label="01 課題提起"   value={t.showProblem}  onChange={(v)=>setTweak("showProblem",  v)} />
      <TweakToggle label="02 強み"        value={t.showFeatures} onChange={(v)=>setTweak("showFeatures", v)} />
      <TweakToggle label="03 サービス"    value={t.showService}  onChange={(v)=>setTweak("showService",  v)} />
      <TweakToggle label="04 理念"        value={t.showVmv}      onChange={(v)=>setTweak("showVmv",      v)} />
      <TweakToggle label="05 代表挨拶"    value={t.showMessage}  onChange={(v)=>setTweak("showMessage",  v)} />
      <TweakToggle label="06 FAQ"         value={t.showFaq}      onChange={(v)=>setTweak("showFaq",      v)} />
    </TweaksPanel>
  );
}

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