// tweaks-app.jsx — expressive tweaks for 塗装業者LP
// 3 source colors (primary / background / ink) drive every shade.
// Curated palette buttons set the trio at once; individual color pickers
// override any one color. All secondary shades are derived.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "primary": "#E8893D",
  "bg": "#FDF6EA",
  "ink": "#2A2418",
  "voice": "maru",
  "air": "regular"
}/*EDITMODE-END*/;

// 4 curated [primary, background, ink] trios.
const TRIOS = {
  warm:   ['#E8893D', '#FDF6EA', '#2A2418'], // あたたか
  trust:  ['#2E6B9E', '#F2EFE6', '#1B2A3D'], // 信頼
  nature: ['#6A9355', '#F4F1E5', '#1F2E1A'], // 自然
  modern: ['#E8553D', '#EFECE5', '#1F1B17'], // モダン
};

const VOICES = {
  maru:  { display: "'Zen Maru Gothic', system-ui, sans-serif",
           body:    "'Noto Sans JP', system-ui, sans-serif",
           letter:  "0.01em" },
  sans:  { display: "'Noto Sans JP', system-ui, sans-serif",
           body:    "'Noto Sans JP', system-ui, sans-serif",
           letter:  "0.04em" },
  serif: { display: "'Noto Serif JP', 'Hiragino Mincho ProN', serif",
           body:    "'Noto Serif JP', 'Hiragino Mincho ProN', serif",
           letter:  "0.02em" },
};

const AIR = {
  tight:   { sectionPad:'68px',  sectionPadM:'48px', cardPad:'26px 22px', radLg:'12px', radMd:'8px',  radSm:'6px' },
  regular: { sectionPad:'96px',  sectionPadM:'64px', cardPad:'36px 28px', radLg:'28px', radMd:'20px', radSm:'12px' },
  airy:    { sectionPad:'128px', sectionPadM:'80px', cardPad:'48px 36px', radLg:'40px', radMd:'30px', radSm:'18px' },
};

// ── color helpers ──────────────────────────────────────────────────────
const hexToRgb = (h) => {
  const x = (h || '#000000').replace('#','');
  return [parseInt(x.slice(0,2),16), parseInt(x.slice(2,4),16), parseInt(x.slice(4,6),16)];
};
const rgbToHex = ([r,g,b]) =>
  '#' + [r,g,b].map(n => Math.max(0,Math.min(255,Math.round(n))).toString(16).padStart(2,'0')).join('');
const mix = (a, b, t) => a.map((v,i) => v*(1-t) + b[i]*t);
const darken  = (hex, t) => rgbToHex(mix(hexToRgb(hex), [0,0,0],     t));
const lighten = (hex, t) => rgbToHex(mix(hexToRgb(hex), [255,255,255], t));
const blend   = (a, b, t) => rgbToHex(mix(hexToRgb(a), hexToRgb(b), t));

function applyTweaks(t) {
  const primary = t.primary || '#E8893D';
  const bg      = t.bg      || '#FDF6EA';
  const ink     = t.ink     || '#2A2418';
  const v = VOICES[t.voice] || VOICES.maru;
  const a = AIR[t.air]      || AIR.regular;

  const r = document.documentElement.style;
  // Color tokens — derived from the 3 source colors so custom picks stay harmonious
  r.setProperty('--orange',       primary);
  r.setProperty('--orange-deep',  darken(primary, 0.22));
  r.setProperty('--orange-soft',  lighten(primary, 0.40));
  r.setProperty('--orange-pale',  lighten(primary, 0.78));
  r.setProperty('--cream',        bg);
  r.setProperty('--cream-deep',   darken(bg, 0.08));
  r.setProperty('--paper',        lighten(bg, 0.45));
  r.setProperty('--ink',          ink);
  r.setProperty('--ink-soft',     blend(ink, bg, 0.32));
  r.setProperty('--ink-mute',     blend(ink, bg, 0.55));
  r.setProperty('--border',       blend(ink, bg, 0.85));

  // Spacing / radius
  r.setProperty('--section-pad',        a.sectionPad);
  r.setProperty('--section-pad-mobile', a.sectionPadM);
  r.setProperty('--card-pad',           a.cardPad);
  r.setProperty('--radius-lg',          a.radLg);
  r.setProperty('--radius-md',          a.radMd);
  r.setProperty('--radius-sm',          a.radSm);

  // Font swap via injected stylesheet
  let s = document.getElementById('twk-font-override');
  if (!s) { s = document.createElement('style'); s.id = 'twk-font-override'; document.head.appendChild(s); }
  s.textContent = `
    body { font-family: ${v.body} !important; }
    .display-font, h1, h2, h3, h4,
    .logo-text .name, .header-cta .phone .num,
    .worry-card .num, .details-table th, .price-highlight,
    .faq-item summary, .faq-item summary .q, .faq-body .a,
    .phone-block .num, .footer-col h4, .floating-badge .dot,
    .eyebrow, .btn {
      font-family: ${v.display} !important;
      letter-spacing: ${v.letter};
    }
    ${t.voice === 'serif' ? `
      h1, h2, h3 { line-height: 1.4; }
      .hero h1 { letter-spacing: 0; }
    ` : ''}
  `;
}

function trioLabel(primary, bg, ink) {
  const match = Object.entries(TRIOS).find(([, c]) =>
    c[0].toLowerCase() === (primary||'').toLowerCase() &&
    c[1].toLowerCase() === (bg||'').toLowerCase() &&
    c[2].toLowerCase() === (ink||'').toLowerCase()
  );
  const names = { warm: 'あたたか', trust: '信頼', nature: '自然', modern: 'モダン' };
  return match ? names[match[0]] : 'カスタム';
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(() => { applyTweaks(t); }, [t]);

  return (
    <TweaksPanel>
      <TweakSection label="配色テーマ" />
      <TweakColor
        label="palette"
        value={[t.primary, t.bg, t.ink]}
        options={Object.values(TRIOS)}
        onChange={(arr) => setTweak({ primary: arr[0], bg: arr[1], ink: arr[2] })}
      />
      <div style={{
        fontSize: 10.5, color: 'rgba(41,38,27,.55)',
        marginTop: -4, paddingLeft: 2,
      }}>
        現在: {trioLabel(t.primary, t.bg, t.ink)}
      </div>

      <TweakSection label="色を編集" />
      <TweakColor label="アクセント"
        value={t.primary} onChange={(v) => setTweak('primary', v)} />
      <TweakColor label="背景"
        value={t.bg} onChange={(v) => setTweak('bg', v)} />
      <TweakColor label="文字"
        value={t.ink} onChange={(v) => setTweak('ink', v)} />
      <div style={{ marginTop: 2 }}>
        <TweakButton
          label="テーマに戻す"
          secondary
          onClick={() => setTweak({
            primary: TRIOS.warm[0], bg: TRIOS.warm[1], ink: TRIOS.warm[2],
          })}
        />
      </div>

      <TweakSection label="書体の人格" />
      <TweakRadio
        label="font"
        value={t.voice}
        options={[
          { value: 'maru',  label: '丸ゴシック' },
          { value: 'sans',  label: '角ゴシック' },
          { value: 'serif', label: '明朝' },
        ]}
        onChange={(v) => setTweak('voice', v)}
      />

      <TweakSection label="空気感" />
      <TweakRadio
        label="density"
        value={t.air}
        options={[
          { value: 'tight',   label: 'キリッ' },
          { value: 'regular', label: '標準' },
          { value: 'airy',    label: 'ゆったり' },
        ]}
        onChange={(v) => setTweak('air', v)}
      />
    </TweaksPanel>
  );
}

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