// app.jsx — Mounts mockups + Tweaks panel for the Sarah marketing site

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#2F6BFF",
  "headlineStyle": "mixed",
  "showStatusPill": true,
  "fontPair": "geist-instrument"
}/*EDITMODE-END*/;

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

  // Apply accent color globally
  React.useEffect(() => {
    document.documentElement.style.setProperty('--accent', t.accent);
    // Recompute the soft variant
    document.documentElement.style.setProperty(
      '--accent-soft',
      t.accent + '14'
    );
  }, [t.accent]);

  // Apply headline style: "mixed" keeps serif italic; "sans" removes it
  React.useEffect(() => {
    const styleId = '__sarah_head_override';
    let el = document.getElementById(styleId);
    if (!el) {
      el = document.createElement('style');
      el.id = styleId;
      document.head.appendChild(el);
    }
    if (t.headlineStyle === 'sans') {
      el.textContent = `
        .h-display em, .h-section em, .aud-card h3 em {
          font-family: var(--sans) !important;
          font-style: normal !important;
          font-weight: 500 !important;
        }
      `;
    } else if (t.headlineStyle === 'serif') {
      el.textContent = `
        .h-display, .h-section, .aud-card h3 {
          font-family: var(--serif) !important;
          font-style: italic !important;
          font-weight: 400 !important;
          letter-spacing: -0.02em !important;
        }
      `;
    } else {
      el.textContent = '';
    }
  }, [t.headlineStyle]);

  // Font pair
  React.useEffect(() => {
    const styleId = '__sarah_font_override';
    let el = document.getElementById(styleId);
    if (!el) {
      el = document.createElement('style');
      el.id = styleId;
      document.head.appendChild(el);
    }
    const pairs = {
      'geist-instrument': {
        sans: '"Geist", ui-sans-serif, -apple-system, system-ui, sans-serif',
        serif: '"Instrument Serif", "Times New Roman", serif',
      },
      'manrope-newsreader': {
        sans: '"Manrope", ui-sans-serif, system-ui, sans-serif',
        serif: '"Newsreader", "Times New Roman", serif',
      },
      'helvetica-bodoni': {
        sans: '"Helvetica Neue", "Helvetica", "Arial", sans-serif',
        serif: '"Bodoni Moda", "Didot", serif',
      },
    };
    const p = pairs[t.fontPair] || pairs['geist-instrument'];
    el.textContent = `
      :root { --sans: ${p.sans}; --serif: ${p.serif}; }
    `;
    // Inject extra google fonts if needed
    const linkId = '__sarah_font_link';
    let link = document.getElementById(linkId);
    if (!link) {
      link = document.createElement('link');
      link.id = linkId;
      link.rel = 'stylesheet';
      document.head.appendChild(link);
    }
    if (t.fontPair === 'manrope-newsreader') {
      link.href = 'https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,400;1,6..72,400&display=swap';
    } else if (t.fontPair === 'helvetica-bodoni') {
      link.href = 'https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,wght@1,400;1,500&display=swap';
    } else {
      link.href = '';
    }
  }, [t.fontPair]);

  // Status pill toggle
  React.useEffect(() => {
    document.querySelectorAll('.status-pill').forEach(el => {
      el.style.display = t.showStatusPill ? '' : 'none';
    });
  }, [t.showStatusPill]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Theme" />
      <TweakColor
        label="Accent"
        value={t.accent}
        options={['#2F6BFF', '#B89B6A', '#0F0F0F', '#1F8A5B']}
        onChange={(v) => setTweak('accent', v)}
      />
      <TweakSection label="Typography" />
      <TweakSelect
        label="Font pair"
        value={t.fontPair}
        options={[
          { value: 'geist-instrument',   label: 'Geist + Instrument Serif' },
          { value: 'manrope-newsreader', label: 'Manrope + Newsreader' },
          { value: 'helvetica-bodoni',   label: 'Helvetica + Bodoni Moda' },
        ]}
        onChange={(v) => setTweak('fontPair', v)}
      />
      <TweakRadio
        label="Headline"
        value={t.headlineStyle}
        options={[
          { value: 'mixed', label: 'Mixed' },
          { value: 'sans',  label: 'Sans' },
          { value: 'serif', label: 'Serif' },
        ]}
        onChange={(v) => setTweak('headlineStyle', v)}
      />
      <TweakSection label="Header" />
      <TweakToggle
        label="Show on-call pill"
        value={t.showStatusPill}
        onChange={(v) => setTweak('showStatusPill', v)}
      />
    </TweaksPanel>
  );
}

/* Mount the React layer into the page */
(function mount() {
  // Hero phone mockup
  const heroMount = document.getElementById('hero-mockup');
  if (heroMount) ReactDOM.createRoot(heroMount).render(<HeroMockup />);

  // Demo player + transcript (dark section)
  const playerMount = document.getElementById('demo-player');
  if (playerMount) ReactDOM.createRoot(playerMount).render(<DemoPlayer />);
  const transcriptMount = document.getElementById('demo-transcript');
  if (transcriptMount) ReactDOM.createRoot(transcriptMount).render(<DemoTranscript />);

  // White-label visual
  const wlMount = document.getElementById('wl-visual');
  if (wlMount) ReactDOM.createRoot(wlMount).render(<WhiteLabelVisual />);

  // Tweaks app — mount into a hidden container
  const tweakHost = document.createElement('div');
  tweakHost.id = '__sarah_tweaks';
  document.body.appendChild(tweakHost);
  ReactDOM.createRoot(tweakHost).render(<App />);
})();