// Tweaks for the GHL Success Path ENTERPRISE landing page — V3 (editorial layout)
const { useEffect } = React;

const ENT3_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "rotating",
  "accent": "lime",
  "showSticker": true,
  "marqueeSpeed": 38
}/*EDITMODE-END*/;

const ENT3_ACCENTS = {
  lime: { bright: '#D5F25C', deep: '#7E9A1E', dot: '#FF3D2E' },
  gold: { bright: '#FDBE2C', deep: '#E0A91E', dot: '#FF3D2E' },
  ice:  { bright: '#A9D8F0', deep: '#3B7FA6', dot: '#FF3D2E' }
};

const ENT3_HEROES = {
  rotating: `Scale your <span class="it">SaaS.</span><br>We run the<br><span class="rot"><span class="rot__inner"><span class="mark">fulfillment.</span><span class="mark">buildouts.</span><span class="mark">support.</span><span class="mark">onboarding.</span><span class="mark">fulfillment.</span></span></span>`,
  static: `Scale your <span class="it">SaaS.</span><br>We run the<br><span class="mark">fulfillment.</span>`,
  editorial: `<span class="it">Selling</span> scales easy.<br><span class="mark">Delivery</span> doesn't.<br>Until now.`
};

function Ent3TweaksApp() {
  const [t, setTweak] = useTweaks(ENT3_TWEAK_DEFAULTS);

  // Hero headline
  useEffect(() => {
    const el = document.querySelector('.hero__title');
    if (el) el.innerHTML = ENT3_HEROES[t.heroVariant] || ENT3_HEROES.rotating;
  }, [t.heroVariant]);

  // CTA copy is fixed: "Book a fulfillment audit" (set in the HTML)

  // Accent
  useEffect(() => {
    const a = ENT3_ACCENTS[t.accent] || ENT3_ACCENTS.lime;
    const r = document.documentElement.style;
    r.setProperty('--ghlsp-gold-500', a.bright);
    r.setProperty('--ghlsp-gold-600', a.deep);
    r.setProperty('--accent-dot', a.dot);
  }, [t.accent]);

  // Sticker
  useEffect(() => {
    const s = document.querySelector('.sticker');
    if (s) s.style.display = t.showSticker ? '' : 'none';
  }, [t.showSticker]);

  // Marquee speed
  useEffect(() => {
    const m = document.querySelector('.marq__track');
    if (m) m.style.animationDuration = `${t.marqueeSpeed}s`;
  }, [t.marqueeSpeed]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Hero & offer copy" />
      <TweakSelect
        label="Headline variant"
        value={t.heroVariant}
        options={[
          { value: 'rotating', label: 'Rotating word (default)' },
          { value: 'static', label: 'Static — we run the fulfillment' },
          { value: 'editorial', label: 'Editorial — selling vs. delivery' }
        ]}
        onChange={(v) => setTweak('heroVariant', v)}
      />

      <TweakSection label="Presentation" />
      <TweakRadio
        label="Accent"
        value={t.accent}
        options={['lime', 'gold', 'ice']}
        onChange={(v) => setTweak('accent', v)}
      />
      <TweakToggle label="Show sticker" value={t.showSticker} onChange={(v) => setTweak('showSticker', v)} />
      <TweakSlider
        label="Marquee speed"
        value={t.marqueeSpeed}
        min={12} max={80} step={2} unit="s"
        onChange={(v) => setTweak('marqueeSpeed', v)}
      />
    </TweaksPanel>
  );
}

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