/* Otmix · Tweaks panel — three expressive controls that reshape the feel.
   Mounts independently from the app, controls via body[data-mood], body[data-voice], body[data-rhythm]
   and an injected <style id="tweak-overrides">. */

const OtmixTweakRoot = () => {
  const [tw, setTw] = useTweaks(/*EDITMODE-BEGIN*/{
    "mood": "otmix",
    "voice": "tech",
    "rhythm": "calm"
  }/*EDITMODE-END*/);

  React.useEffect(() => {
    document.body.dataset.mood = tw.mood;
    document.body.dataset.voice = tw.voice;
    document.body.dataset.rhythm = tw.rhythm;
  }, [tw.mood, tw.voice, tw.rhythm]);

  return (
    <TweaksPanel title="Tweaks · أوتمكس">
      <TweakSection title="Mood" hint="Palette + accent + atmosphere">
        <TweakRadio
          options={[
            { value: "otmix", label: "Otmix" },
            { value: "sand",  label: "Riyadh Sand" },
            { value: "royal", label: "Midnight Royal" },
            { value: "mono",  label: "Editorial Mono" },
          ]}
          value={tw.mood}
          onChange={(v) => setTw("mood", v)}
        />
      </TweakSection>

      <TweakSection title="Voice" hint="Headline personality + texture">
        <TweakRadio
          options={[
            { value: "tech",      label: "Tech" },
            { value: "editorial", label: "Editorial" },
            { value: "bold",      label: "Bold" },
          ]}
          value={tw.voice}
          onChange={(v) => setTw("voice", v)}
        />
      </TweakSection>

      <TweakSection title="Rhythm" hint="Spatial cadence — how much room each section breathes">
        <TweakRadio
          options={[
            { value: "dense",     label: "Dense" },
            { value: "calm",      label: "Calm" },
            { value: "cinematic", label: "Cinematic" },
          ]}
          value={tw.rhythm}
          onChange={(v) => setTw("rhythm", v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
};

/* ===== Mood / Voice / Rhythm overrides — applied via attribute selectors on <body> ===== */
const TWEAK_CSS = `
/* MOOD: Riyadh Sand — warm cream paper, deep terracotta accent */
body[data-mood="sand"]{
  --green:#C04A1B; --green-soft:#fde7dc;
  --ink:#2A1B12; --ink-2:#3a2418; --ink-3:#4a2d1f;
  --paper:#f5ecdf; --paper-2:#fbf6ec;
  --line:#e6d8c2; --muted:#8a6a4f;
  background:var(--paper-2);
}
body[data-mood="sand"] .pill{background:rgba(192,74,27,0.10);color:#7a2c0e}
body[data-mood="sand"] .features{background:#1f130c}
body[data-mood="sand"] .feat{background:#2a1a10;border-color:#3d271a}
body[data-mood="sand"] .closing-card{background:#1f130c}
body[data-mood="sand"] footer{background:#1f130c}
body[data-mood="sand"] .tier.featured{background:#2a1a10;border-color:#2a1a10}

/* MOOD: Midnight Royal — deep navy + gold */
body[data-mood="royal"]{
  --green:#E5B546; --green-soft:#fff1cf;
  --ink:#0c1530; --ink-2:#141f44; --ink-3:#1c2858;
  --paper:#eef0f7; --paper-2:#f6f7fb;
  --line:#dadfee; --muted:#5a6184;
  background:var(--paper-2);
}
body[data-mood="royal"] .pill{background:rgba(229,181,70,0.16);color:#7a5a10}
body[data-mood="royal"] .features{background:#0c1530}
body[data-mood="royal"] .feat{background:#141f44;border-color:#1d2c5c}
body[data-mood="royal"] .closing-card{background:#0c1530}
body[data-mood="royal"] footer{background:#0c1530}
body[data-mood="royal"] .tier.featured{background:#0c1530;border-color:#0c1530}

/* MOOD: Editorial Mono — pure black/white, no accent color */
body[data-mood="mono"]{
  --green:#080808; --green-soft:#ebebeb;
  --ink:#080808; --paper:#ffffff; --paper-2:#fafafa;
  --line:#d8d8d6; --muted:#666;
  background:#fafafa;
}
body[data-mood="mono"] .pill{background:#111;color:#fff}
body[data-mood="mono"] .pill .dot{background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,0.18)}
body[data-mood="mono"] .features{background:#080808}
body[data-mood="mono"] .feat-art.green{filter:grayscale(1)}
body[data-mood="mono"] .tier.featured .name,
body[data-mood="mono"] .tier.featured .feat-line svg{color:#fff}
body[data-mood="mono"] .ribbon,body[data-mood="mono"] .tag{background:#080808;color:#fff}
body[data-mood="mono"] svg circle[stroke="#4bec42"],
body[data-mood="mono"] svg path[stroke="#4bec42"]{stroke:#080808}
body[data-mood="mono"] svg [fill="#4bec42"]{fill:#080808}

/* VOICE: Editorial — serif display, looser tracking, italic emphasis */
body[data-voice="editorial"] h1,
body[data-voice="editorial"] h2,
body[data-voice="editorial"] h3,
body[data-voice="editorial"] .sec-head h2{
  font-family:'IBM Plex Sans Arabic',Georgia,'Times New Roman',serif;
  font-weight:700;
  letter-spacing:-0.015em;
  font-style:normal;
}
body[data-voice="editorial"] h1{font-weight:600}
body[data-voice="editorial"] h1 em{font-style:italic;font-weight:600}
body[data-voice="editorial"] .pill,
body[data-voice="editorial"] .eyebrow,
body[data-voice="editorial"] .mono{text-transform:none;letter-spacing:0;font-family:'IBM Plex Sans Arabic',serif}
body[data-voice="editorial"] .product,
body[data-voice="editorial"] .feat,
body[data-voice="editorial"] .tier{border-radius:4px}

/* VOICE: Bold — massive condensed type, heavy weights, tighter tracking */
body[data-voice="bold"] h1{font-weight:700;letter-spacing:-0.045em;line-height:0.95;font-size:clamp(56px,8vw,128px)}
body[data-voice="bold"] h2,
body[data-voice="bold"] .sec-head h2{font-weight:700;letter-spacing:-0.035em;line-height:0.95;font-size:clamp(48px,6vw,88px)}
body[data-voice="bold"] h3{font-weight:700;letter-spacing:-0.025em}
body[data-voice="bold"] .hero-lead,
body[data-voice="bold"] .sec-head .desc{font-weight:600}
body[data-voice="bold"] .product,
body[data-voice="bold"] .feat,
body[data-voice="bold"] .tier{border-width:2px}

/* RHYTHM: Dense — tighter padding, smaller hero */
body[data-rhythm="dense"] section{padding:48px 0 !important}
body[data-rhythm="dense"] .hero{padding:32px 0 56px !important}
body[data-rhythm="dense"] h1{font-size:clamp(36px,5vw,64px) !important}
body[data-rhythm="dense"] .sec-head h2{font-size:clamp(28px,3.6vw,48px) !important}
body[data-rhythm="dense"] .product{padding:18px 18px 18px !important;min-height:280px !important;gap:10px !important}
body[data-rhythm="dense"] .prod-art{height:88px !important}
body[data-rhythm="dense"] .feat{padding:20px !important}
body[data-rhythm="dense"] .tier{padding:22px !important}
body[data-rhythm="dense"] .container{padding:0 18px !important}

/* RHYTHM: Cinematic — generous breathing room, hero takes the screen */
body[data-rhythm="cinematic"] section{padding:140px 0 !important}
body[data-rhythm="cinematic"] .hero{padding:80px 0 160px !important;min-height:88vh}
body[data-rhythm="cinematic"] h1{font-size:clamp(64px,9vw,148px) !important}
body[data-rhythm="cinematic"] .sec-head{margin-bottom:80px !important}
body[data-rhythm="cinematic"] .sec-head h2{font-size:clamp(48px,6.8vw,96px) !important}
body[data-rhythm="cinematic"] .product{padding:42px !important;min-height:420px !important;gap:22px !important}
body[data-rhythm="cinematic"] .prod-art{height:160px !important}
body[data-rhythm="cinematic"] .feat{padding:48px !important}
body[data-rhythm="cinematic"] .feat-art{height:200px !important}
body[data-rhythm="cinematic"] .tier{padding:42px !important}
body[data-rhythm="cinematic"] .container{padding:0 56px !important}
`;

(() => {
  const s = document.createElement('style');
  s.id = 'tweak-overrides';
  s.textContent = TWEAK_CSS;
  document.head.appendChild(s);
})();

const __tweakRoot = document.createElement('div');
__tweakRoot.id = '__tweak_root';
document.body.appendChild(__tweakRoot);
ReactDOM.createRoot(__tweakRoot).render(<OtmixTweakRoot />);
