/* global React, ReactDOM, TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakColor, TweakToggle */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "amber": "#C8862A",
  "indigo": "#635BFF",
  "tilt3D": true,
  "showMetrics": true,
  "ctaStyle": "gradient"
}/*EDITMODE-END*/;

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

  React.useEffect(() => {
    const r = document.documentElement.style;
    r.setProperty('--amber', t.amber);
    r.setProperty('--indigo', t.indigo);

    const metrics = document.querySelector('.metrics');
    if (metrics) metrics.style.display = t.showMetrics ? '' : 'none';

    const card = document.querySelector('.product-card');
    if (card && !t.tilt3D) {
      card.style.animation = 'none';
      card.style.transform = 'rotateX(0) rotateY(0)';
    } else if (card) {
      card.style.animation = '';
    }

    const cta = document.querySelector('.cta');
    const ctaBefore = document.querySelector('.cta');
    if (cta) {
      if (t.ctaStyle === 'ink') {
        cta.style.background = '#0A2540';
        const before = document.styleSheets[0];
        cta.classList.add('cta-no-grad');
        if (!document.getElementById('cta-override')) {
          const s = document.createElement('style');
          s.id = 'cta-override';
          s.textContent = '.cta-no-grad::before { display:none; }';
          document.head.appendChild(s);
        }
      } else if (t.ctaStyle === 'amber') {
        cta.style.background = t.amber;
        cta.classList.add('cta-no-grad');
        if (!document.getElementById('cta-override')) {
          const s = document.createElement('style');
          s.id = 'cta-override';
          s.textContent = '.cta-no-grad::before { display:none; }';
          document.head.appendChild(s);
        }
      } else {
        cta.style.background = '#0A2540';
        cta.classList.remove('cta-no-grad');
      }
    }
  }, [t]);

  return (
    <TweaksPanel title="Tweaks" width={300}>
      <TweakSection title="Brand">
        <TweakColor label="Amber" value={t.amber} onChange={v => setT('amber', v)} />
        <TweakColor label="Indigo (Stripe)" value={t.indigo} onChange={v => setT('indigo', v)} />
      </TweakSection>

      <TweakSection title="Hero">
        <TweakToggle label="3D card tilt" value={t.tilt3D} onChange={v => setT('tilt3D', v)} />
      </TweakSection>

      <TweakSection title="Layout">
        <TweakToggle label="Show metrics band" value={t.showMetrics} onChange={v => setT('showMetrics', v)} />
        <TweakRadio
          label="CTA background"
          value={t.ctaStyle}
          options={['gradient','ink','amber']}
          onChange={v => setT('ctaStyle', v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById('tw-root')).render(<App />);