// tweaks-app.jsx — Tweaks UI for CAFE mock homepage
// All adjustable values live as CSS custom properties on :root.
// JS only writes via document.documentElement.style.setProperty(...).

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "classic",
  "bg": "#F5EFE6",
  "text": "#1C1A17",
  "heading": "#1C1A17",
  "accent": "#B36A3C",
  "line": "#D9CFBE",
  "footerBg": "#1C1A17",

  "fontPair": "serif-sans",
  "baseSize": 15,
  "headingWeight": 500,
  "headingTracking": -1,
  "logoTracking": 32,

  "contentWidth": 1180,
  "sectionPad": 6,
  "radius": 4,

  "heroHeight": 560,
  "heroMono": 0,
  "heroDark": 35,
  "heroAlign": "center",
  "kicker": "ESTABLISHED · WORKSHOP MOCK",
  "headline": "A quiet cup, a slower hour.",
  "subcopy": "練習用のモックページです。コーヒーと焼き菓子と、長いカウンター。",

  "menuDivider": "dotted",
  "menuRowHeight": 14,
  "menuCardOpacity": 100
}/*EDITMODE-END*/;

const PRESETS = {
  classic: { bg: "#F5EFE6", text: "#1C1A17", heading: "#1C1A17", accent: "#B36A3C", line: "#D9CFBE", footerBg: "#1C1A17" },
  cream:   { bg: "#FAF6EE", text: "#2A241B", heading: "#2A241B", accent: "#C98A4B", line: "#E5DCC9", footerBg: "#2A241B" },
  mist:    { bg: "#EEF1F2", text: "#1F2426", heading: "#1F2426", accent: "#5B7C8A", line: "#D2D9DC", footerBg: "#1F2426" },
  moss:    { bg: "#EDF0E6", text: "#1F2A1B", heading: "#1F2A1B", accent: "#6F8A4B", line: "#D0D6BD", footerBg: "#1F2A1B" },
  dark:    { bg: "#161412", text: "#EDE6D8", heading: "#FFFFFF", accent: "#D9A26A", line: "#3A332B", footerBg: "#0C0B0A" },
};

const FONT_PAIRS = {
  "serif-sans": { display: "'Fraunces', 'Shippori Mincho', serif", body: "'Inter', 'Shippori Mincho', system-ui, sans-serif" },
  "serif":      { display: "'Fraunces', 'Shippori Mincho', serif", body: "'Fraunces', 'Shippori Mincho', serif" },
  "sans":       { display: "'Inter', 'Shippori Mincho', sans-serif", body: "'Inter', 'Shippori Mincho', system-ui, sans-serif" },
  "mincho":     { display: "'Shippori Mincho', 'Fraunces', serif", body: "'Shippori Mincho', 'Fraunces', serif" },
};

const DIVIDER_BORDER = {
  dotted: "1px dotted var(--line)",
  dashed: "1px dashed var(--line)",
  solid:  "1px solid var(--line)",
  none:   "1px solid transparent",
};

const HERO_ALIGN_JUSTIFY = {
  top:    "flex-start",
  center: "center",
  bottom: "flex-end",
};

function applyTweaks(t) {
  const r = document.documentElement.style;
  // colors
  r.setProperty('--bg', t.bg);
  r.setProperty('--text', t.text);
  r.setProperty('--heading', t.heading);
  r.setProperty('--accent', t.accent);
  r.setProperty('--line', t.line);
  r.setProperty('--footer-bg', t.footerBg);

  // fonts
  const fp = FONT_PAIRS[t.fontPair] || FONT_PAIRS["serif-sans"];
  r.setProperty('--font-display', fp.display);
  r.setProperty('--font-body', fp.body);
  r.setProperty('--base-size', t.baseSize + 'px');
  r.setProperty('--heading-weight', String(t.headingWeight));
  r.setProperty('--heading-tracking', (t.headingTracking / 100) + 'em');
  r.setProperty('--logo-tracking', (t.logoTracking / 100) + 'em');

  // layout
  r.setProperty('--content-width', t.contentWidth + 'px');
  r.setProperty('--section-pad', t.sectionPad + 'rem');
  r.setProperty('--radius', t.radius + 'px');

  // hero
  r.setProperty('--hero-height', t.heroHeight + 'px');
  r.setProperty('--hero-mono', (t.heroMono / 100));
  r.setProperty('--hero-dark', (t.heroDark / 100));
  r.setProperty('--hero-justify', HERO_ALIGN_JUSTIFY[t.heroAlign] || 'center');

  // menu
  r.setProperty('--menu-divider', DIVIDER_BORDER[t.menuDivider] || DIVIDER_BORDER.dotted);
  r.setProperty('--menu-row-pad', t.menuRowHeight + 'px');
  r.setProperty('--menu-card-opacity', (t.menuCardOpacity / 100));

  // text content
  const setText = (sel, txt) => {
    document.querySelectorAll(sel).forEach(el => { el.textContent = txt; });
  };
  setText('[data-twk="kicker"]', t.kicker);
  setText('[data-twk="headline"]', t.headline);
  setText('[data-twk="subcopy"]', t.subcopy);
}

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

  // Apply on every change.
  React.useEffect(() => { applyTweaks(t); }, [t]);

  const applyPreset = (name) => {
    const p = PRESETS[name];
    if (!p) return setTweak('palette', name);
    setTweak({ palette: name, ...p });
  };

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Palette" />
      <TweakSelect
        label="Preset"
        value={t.palette}
        options={[
          { value: 'classic', label: 'Classic' },
          { value: 'cream',   label: 'Cream' },
          { value: 'mist',    label: 'Mist' },
          { value: 'moss',    label: 'Moss' },
          { value: 'dark',    label: 'Dark' },
        ]}
        onChange={applyPreset}
      />
      <TweakColor label="Background"  value={t.bg}        onChange={(v)=>setTweak('bg', v)} />
      <TweakColor label="Body text"   value={t.text}      onChange={(v)=>setTweak('text', v)} />
      <TweakColor label="Heading"     value={t.heading}   onChange={(v)=>setTweak('heading', v)} />
      <TweakColor label="Accent"      value={t.accent}    onChange={(v)=>setTweak('accent', v)} />
      <TweakColor label="Line"        value={t.line}      onChange={(v)=>setTweak('line', v)} />
      <TweakColor label="Footer bg"   value={t.footerBg}  onChange={(v)=>setTweak('footerBg', v)} />

      <TweakSection label="Typography" />
      <TweakRadio
        label="Pairing"
        value={t.fontPair}
        options={[
          { value: 'serif-sans', label: 'Serif+Sans' },
          { value: 'serif',      label: 'Serif' },
          { value: 'sans',       label: 'Sans' },
          { value: 'mincho',     label: '明朝' },
        ]}
        onChange={(v) => setTweak('fontPair', v)}
      />
      <TweakSlider label="Base size"        value={t.baseSize}        min={13} max={20} unit="px" onChange={(v)=>setTweak('baseSize', v)} />
      <TweakSlider label="Heading weight"   value={t.headingWeight}   min={300} max={700} step={100} onChange={(v)=>setTweak('headingWeight', v)} />
      <TweakSlider label="Heading tracking" value={t.headingTracking} min={-3} max={15} unit="/100em" onChange={(v)=>setTweak('headingTracking', v)} />
      <TweakSlider label="Logo tracking"    value={t.logoTracking}    min={0} max={80} unit="/100em" onChange={(v)=>setTweak('logoTracking', v)} />

      <TweakSection label="Layout" />
      <TweakSlider label="Content width" value={t.contentWidth} min={720} max={1280} step={10} unit="px" onChange={(v)=>setTweak('contentWidth', v)} />
      <TweakSlider label="Section pad"   value={t.sectionPad}   min={3} max={12} step={0.5} unit="rem" onChange={(v)=>setTweak('sectionPad', v)} />
      <TweakSlider label="Corner radius" value={t.radius}       min={0} max={28} unit="px" onChange={(v)=>setTweak('radius', v)} />

      <TweakSection label="Hero" />
      <TweakSlider label="Height"     value={t.heroHeight} min={320} max={820} step={10} unit="px" onChange={(v)=>setTweak('heroHeight', v)} />
      <TweakSlider label="Monochrome" value={t.heroMono}   min={0} max={100} unit="%" onChange={(v)=>setTweak('heroMono', v)} />
      <TweakSlider label="Darkness"   value={t.heroDark}   min={0} max={75}  unit="%" onChange={(v)=>setTweak('heroDark', v)} />
      <TweakRadio
        label="Copy position"
        value={t.heroAlign}
        options={[
          { value: 'top', label: 'Top' },
          { value: 'center', label: 'Mid' },
          { value: 'bottom', label: 'Btm' },
        ]}
        onChange={(v)=>setTweak('heroAlign', v)}
      />
      <TweakText label="Kicker"   value={t.kicker}   onChange={(v)=>setTweak('kicker', v)} />
      <TweakText label="Headline" value={t.headline} onChange={(v)=>setTweak('headline', v)} />
      <TweakText label="Subcopy"  value={t.subcopy}  onChange={(v)=>setTweak('subcopy', v)} />

      <TweakSection label="Menu" />
      <TweakRadio
        label="Divider"
        value={t.menuDivider}
        options={[
          { value: 'dotted', label: '· · ·' },
          { value: 'dashed', label: '- - -' },
          { value: 'solid',  label: '———' },
          { value: 'none',   label: 'None' },
        ]}
        onChange={(v)=>setTweak('menuDivider', v)}
      />
      <TweakSlider label="Row padding"  value={t.menuRowHeight}    min={6} max={28} unit="px" onChange={(v)=>setTweak('menuRowHeight', v)} />
      <TweakSlider label="Card opacity" value={t.menuCardOpacity}  min={50} max={100} unit="%" onChange={(v)=>setTweak('menuCardOpacity', v)} />
    </TweaksPanel>
  );
}

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