// App entry — mount the React islands + tweaks panel
const { useState: useStateApp, useEffect: useEffectApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#5096FE",
  "density": "comfy",
  "motion": "full",
  "headlineSet": "default"
}/*EDITMODE-END*/;

const HEADLINE_SETS = {
  default: [
    'made simple.',
    'reviewed faster.',
    'in plain English.',
    'balanced.',
  ],
  benefits: [
    'without surprises.',
    'free of pay-when-paid.',
    'with capped liability.',
    'with notice windows you can meet.',
  ],
  short: [
    'simplified.',
    'reviewed.',
    'flagged.',
    'balanced.',
  ],
};

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

  // Apply tweaks live
  useEffectApp(() => {
    document.documentElement.style.setProperty('--ss-blue', t.accent);
    document.documentElement.style.setProperty('--motion', t.motion === 'reduced' ? '0' : '1');
    document.body.classList.toggle('density-compact', t.density === 'compact');
    document.body.classList.toggle('density-comfy',   t.density === 'comfy');
    if (t.motion === 'reduced') {
      document.body.classList.add('motion-reduced');
    } else {
      document.body.classList.remove('motion-reduced');
    }
  }, [t]);

  // Mount hero
  useEffectApp(() => {
    const root = document.getElementById('hero-root');
    if (!root || root.__mounted) return;
    root.__mounted = true;
    const headline = HEADLINE_SETS[t.headlineSet] || HEADLINE_SETS.default;
    // Pass headline via window because Hero is self-contained
    window.__SS_HEADLINE = headline;
    ReactDOM.createRoot(root).render(<Hero key={t.headlineSet} />);
  }, [t.headlineSet]);

  // Mount assistant demo
  useEffectApp(() => {
    const root = document.getElementById('assistant-demo');
    if (!root || root.__mounted) return;
    root.__mounted = true;
    ReactDOM.createRoot(root).render(<AssistantDemo />);
  }, []);

  // Mount free reviewer
  useEffectApp(() => {
    const root = document.getElementById('free-reviewer-form');
    if (!root || root.__mounted) return;
    root.__mounted = true;
    ReactDOM.createRoot(root).render(<FreeReviewer />);
  }, []);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Brand" />
      <TweakColor
        label="Accent"
        value={t.accent}
        options={['#5096FE', '#3478e8', '#1f5fc4', '#6da4ff', '#091747']}
        onChange={(v) => setTweak('accent', v)}
      />
      <TweakRadio
        label="Headline copy"
        value={t.headlineSet}
        options={['default', 'benefits', 'short']}
        onChange={(v) => setTweak('headlineSet', v)}
      />

      <TweakSection label="Layout" />
      <TweakRadio
        label="Density"
        value={t.density}
        options={['compact', 'comfy']}
        onChange={(v) => setTweak('density', v)}
      />

      <TweakSection label="Motion" />
      <TweakRadio
        label="Motion"
        value={t.motion}
        options={['full', 'reduced']}
        onChange={(v) => setTweak('motion', v)}
      />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.body.appendChild(document.createElement('div'))).render(<App />);

// Density styles
const denStyle = document.createElement('style');
denStyle.textContent = `
  .density-compact section { padding-top: 56px; padding-bottom: 56px; }
  @media (min-width:768px) { .density-compact section { padding-top: 80px; padding-bottom: 80px; } }
  .density-compact .h-display { font-size: clamp(34px, 5vw, 56px); }
  .motion-reduced * { animation: none !important; transition: none !important; }
  .motion-reduced [data-reveal] { opacity: 1 !important; transform: none !important; }
  .motion-reduced .marquee-track { animation: none !important; }
`;
document.head.appendChild(denStyle);

// Re-read headline from tweaks (hot-replace inside Hero)
// Hero uses HERO_ROTATE constant — but App remounts Hero on headlineSet change via key.
// So we patch HERO_ROTATE through window.__SS_HEADLINE on each mount.