/* HPS Site Tweaks
   Add <script type="text/babel" src="tweaks-panel.jsx"></script>
   then <script type="text/babel" src="site-tweaks.jsx"></script>
*/

const HPS_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "primary": "#FF7A1A",
  "ctaShadow": "hard",
  "headlineDensity": "bold",
  "showCautionStrips": true,
  "showLogoLockup": true,
  "thumbStyle": "stripes",
  "headerSticky": true,
  "tagline": "We Build Commercial Spaces That Work."
}/*EDITMODE-END*/;

function HPSTweaks() {
  const { useTweaks } = window;
  const [t, setT] = useTweaks(HPS_TWEAK_DEFAULTS);

  // Apply live
  React.useEffect(() => {
    document.documentElement.style.setProperty('--hour-500', t.primary);

    // Hard shadow on/off for primary CTAs
    let s = document.getElementById('__hps_dyn');
    if (!s) { s = document.createElement('style'); s.id = '__hps_dyn'; document.head.appendChild(s); }
    const noShadow = t.ctaShadow === 'none' ? `.btn-primary{box-shadow:none!important;border-color:var(--ink-900);} .btn-primary:hover{transform:none!important;box-shadow:none!important;}` : '';
    const tinyShadow = t.ctaShadow === 'soft' ? `.btn-primary{box-shadow:0 4px 12px rgba(10,10,10,.18)!important;} .btn-primary:hover{transform:translateY(-2px)!important;box-shadow:0 8px 20px rgba(10,10,10,.22)!important;}` : '';

    const stripsOff = !t.showCautionStrips ? `.caution-bar{display:none!important;}` : '';
    const lockupOff = !t.showLogoLockup ? `.site-header .brand .lockup{display:none!important;}` : '';
    const stickyOff = !t.headerSticky ? `.site-header{position:relative!important;}` : '';

    let densityCSS = '';
    if (t.headlineDensity === 'tight') {
      densityCSS = `.display-xl{font-size:clamp(40px,5.5vw,76px)!important;} .display-lg{font-size:clamp(32px,4vw,52px)!important;}`;
    } else if (t.headlineDensity === 'huge') {
      densityCSS = `.display-xl{font-size:clamp(56px,9vw,128px)!important;} .display-lg{font-size:clamp(40px,5.5vw,80px)!important;}`;
    }

    let thumbCSS = '';
    if (t.thumbStyle === 'blueprint') {
      thumbCSS = `.proj-card .thumb:not(.keep){background:var(--blvd-900)!important;background-image:linear-gradient(rgba(183,192,212,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(183,192,212,.18) 1px,transparent 1px)!important;background-size:24px 24px!important;color:var(--blvd-200)!important;}`;
    } else if (t.thumbStyle === 'caution') {
      thumbCSS = `.proj-card .thumb:not(.keep){background-image:repeating-linear-gradient(135deg,var(--ink-900) 0 24px,var(--hour-500) 24px 48px)!important;color:var(--ink-900)!important;}`;
    } else if (t.thumbStyle === 'flat') {
      thumbCSS = `.proj-card .thumb:not(.keep){background:var(--ink-900)!important;background-image:none!important;}`;
    }

    s.textContent = noShadow + tinyShadow + stripsOff + lockupOff + stickyOff + densityCSS + thumbCSS;

    // Tagline live update
    document.querySelectorAll('[data-hps-tagline]').forEach(el => { el.textContent = t.tagline; });
  }, [t]);

  const { TweaksPanel, TweakSection, TweakColor, TweakRadio, TweakToggle, TweakText, TweakSelect } = window;

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Brand">
        <TweakColor label="Primary color" value={t.primary} onChange={v => setT('primary', v)}
          options={['#FF7A1A','#E83A1A','#F5C518','#1F8A4C','#2668C9']} />
        <TweakText label="Hero tagline" value={t.tagline} onChange={v => setT('tagline', v)} />
      </TweakSection>

      <TweakSection title="Layout">
        <TweakRadio label="CTA shadow" value={t.ctaShadow} onChange={v => setT('ctaShadow', v)}
          options={[{value:'hard',label:'Hard'},{value:'soft',label:'Soft'},{value:'none',label:'None'}]} />
        <TweakRadio label="Headline scale" value={t.headlineDensity} onChange={v => setT('headlineDensity', v)}
          options={[{value:'tight',label:'Tight'},{value:'bold',label:'Bold'},{value:'huge',label:'Huge'}]} />
        <TweakSelect label="Project thumb style" value={t.thumbStyle} onChange={v => setT('thumbStyle', v)}
          options={[
            {value:'stripes',label:'Documentary stripes'},
            {value:'blueprint',label:'Blueprint grid'},
            {value:'caution',label:'Caution tape'},
            {value:'flat',label:'Flat ink'}
          ]} />
      </TweakSection>

      <TweakSection title="Chrome">
        <TweakToggle label="Caution-tape strips" value={t.showCautionStrips} onChange={v => setT('showCautionStrips', v)} />
        <TweakToggle label="Logo lockup text" value={t.showLogoLockup} onChange={v => setT('showLogoLockup', v)} />
        <TweakToggle label="Sticky header" value={t.headerSticky} onChange={v => setT('headerSticky', v)} />
      </TweakSection>
    </TweaksPanel>
  );
}

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