/* ============================================================
   Values.html — expressive Tweaks
   Three controls, each orchestrating many properties:
   • Atmosphere — the whole colour world (palette + light)
   • Voice      — rewrites the page's copy & personality
   • Composition— type scale, rhythm & density
   ============================================================ */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "atmosphere": ["#0e1822", "#e6a92e", "#faf8f3"],
  "voice": "editorial",
  "composition": "balanced"
}/*EDITMODE-END*/;

/* ---- Atmosphere: coordinated theme token sets ---- */
const VT_THEMES = [
  { id:'twilight', swatch:['#0e1822','#e6a92e','#faf8f3'], vars:{
    '--ink':'#0e1822','--ink-soft':'#14223a','--ink-2':'#1b2c45','--cream':'#faf8f3','--cream-2':'#f3ede1','--paper':'#ffffff',
    '--gold':'#e6a92e','--gold-bright':'#ffc657','--gold-deep':'#b9802a',
    '--text':'#1b2530','--text-ink':'#eef1f5','--muted':'#5d6773','--muted-ink':'#9bb0c6cc',
    '--line':'rgba(20,30,45,.12)','--line-ink':'rgba(255,255,255,.13)' } },
  { id:'daybreak', swatch:['#2b211a','#f0a92e','#fff7ec'], vars:{
    '--ink':'#2b211a','--ink-soft':'#392c22','--ink-2':'#4d3722','--cream':'#fff7ec','--cream-2':'#f8ecd8','--paper':'#fffdf8',
    '--gold':'#d98a25','--gold-bright':'#f4b03e','--gold-deep':'#a9651b',
    '--text':'#2a201a','--text-ink':'#fdf3e6','--muted':'#6e5c4b','--muted-ink':'#dcc6abcc',
    '--line':'rgba(70,45,20,.14)','--line-ink':'rgba(255,240,220,.15)' } },
  { id:'midnight', swatch:['#080b11','#c9a96a','#eef1f5'], vars:{
    '--ink':'#080b11','--ink-soft':'#0f1620','--ink-2':'#17212f','--cream':'#eef1f5','--cream-2':'#e2e7ee','--paper':'#f8fafc',
    '--gold':'#c2a467','--gold-bright':'#e6cf9c','--gold-deep':'#947c4b',
    '--text':'#1a212b','--text-ink':'#e9eef5','--muted':'#5a6473','--muted-ink':'#9fb0c4cc',
    '--line':'rgba(20,30,45,.1)','--line-ink':'rgba(255,255,255,.1)' } },
  { id:'sage', swatch:['#0f1d18','#52bd8f','#f2f6f1'], vars:{
    '--ink':'#0f1d18','--ink-soft':'#16291f','--ink-2':'#1d3829','--cream':'#f2f6f1','--cream-2':'#e6ede4','--paper':'#fbfdfa',
    '--gold':'#3f9d77','--gold-bright':'#57c193','--gold-deep':'#2e7d5c',
    '--text':'#18241f','--text-ink':'#e9f2ec','--muted':'#566b60','--muted-ink':'#9fc0afcc',
    '--line':'rgba(20,45,30,.12)','--line-ink':'rgba(220,255,235,.12)' } }
];

function vtApplyAtmosphere(arr){
  const key=JSON.stringify(arr);
  const theme=VT_THEMES.find(x=>JSON.stringify(x.swatch)===key) || VT_THEMES[0];
  const s=document.documentElement.style;
  Object.keys(theme.vars).forEach(k=>s.setProperty(k, theme.vars[k]));
  document.documentElement.setAttribute('data-atmosphere', theme.id);
}

/* ---- Voice: rewrites the page's words & personality ---- */
const VT_VOICES = {
  editorial: {
    eyebrow:'Our values',
    title:'What we believe shapes every stitch we make.',
    lead:"DreamSHARE isn't a methodology bolted onto good intentions. These commitments are the method — they decide what we map, what we surface, and what we refuse to do.",
    creedLabel:'The promise',
    creedLine:'We don\u2019t tell you what to do. We help you see what\u2019s <span class="hl">already there</span> — and trust you to act on it.',
    practice:'How these show up in the room.',
    cta:'Values you can see in the work.'
  },
  bold: {
    eyebrow:'What we stand for',
    title:'We map what you cannot see.',
    lead:"No methodology theater. No filler. We surface the connections that move your vision forward — and refuse the noise that doesn\u2019t.",
    creedLabel:'The promise',
    creedLine:'We won\u2019t hand you a playbook. We make the <span class="hl">invisible visible</span> — then we get out of your way.',
    practice:'This is how we work.',
    cta:'The proof is in the work.'
  },
  warm: {
    eyebrow:'What guides us',
    title:'Your best ideas are already inside you.',
    lead:"We\u2019re not here to hand you someone else\u2019s plan. We sit with what you already know, find the threads between it all, and help you see your way forward — in your own words.",
    creedLabel:'Our promise to you',
    creedLine:'We won\u2019t tell you what to do. We\u2019ll help you see what\u2019s <span class="hl">already there</span> — and trust you to take it from here.',
    practice:'What it feels like to work with us.',
    cta:'Let\u2019s find what\u2019s already there.'
  }
};

function vtSet(id, html){ const el=document.getElementById(id); if(el) el.innerHTML=html; }
function vtApplyVoice(key){
  const v=VT_VOICES[key]||VT_VOICES.editorial;
  vtSet('vEyebrow', v.eyebrow);
  vtSet('vTitle', v.title);
  vtSet('vLead', v.lead);
  vtSet('vCreedLabel', v.creedLabel);
  vtSet('vCreedLine', v.creedLine);
  vtSet('vPractice', v.practice);
  vtSet('vCta', v.cta);
}

const VT_VOICE_OPTS = [
  {value:'editorial', label:'Editorial'},
  {value:'bold', label:'Bold'},
  {value:'warm', label:'Warm'}
];
const VT_COMP_OPTS = [
  {value:'balanced', label:'Balanced'},
  {value:'grand', label:'Grand'},
  {value:'quiet', label:'Quiet'}
];

function ValuesTweaks(){
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(()=>{ vtApplyAtmosphere(t.atmosphere); }, [t.atmosphere]);
  React.useEffect(()=>{ vtApplyVoice(t.voice); }, [t.voice]);
  React.useEffect(()=>{ document.documentElement.setAttribute('data-composition', t.composition); }, [t.composition]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Atmosphere" />
      <TweakColor label="Palette & light" value={t.atmosphere}
                  options={VT_THEMES.map(x=>x.swatch)}
                  onChange={(v)=>setTweak('atmosphere', v)} />
      <TweakSection label="Voice" />
      <TweakRadio label="Tone of the words" value={t.voice} options={VT_VOICE_OPTS}
                  onChange={(v)=>setTweak('voice', v)} />
      <TweakSection label="Composition" />
      <TweakRadio label="Type & rhythm" value={t.composition} options={VT_COMP_OPTS}
                  onChange={(v)=>setTweak('composition', v)} />
    </TweaksPanel>
  );
}

/* Apply persisted values immediately on load (panel may be closed) */
vtApplyAtmosphere(TWEAK_DEFAULTS.atmosphere);
vtApplyVoice(TWEAK_DEFAULTS.voice);
document.documentElement.setAttribute('data-composition', TWEAK_DEFAULTS.composition);

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