// EPIC Robotics — Tweaks panel
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#DBF911",
  "heroTitle": "Vision-Based Robotics for Autonomous Research",
  "heroEmphasisStart": 26,
  "displayWeight": 300,
  "showAurora": true,
  "showHeroSvg": true,
  "showBgGrid": true,
  "showStatusPill": true,
  "cornerBadge": true
}/*EDITMODE-END*/;

function applyTweaks(t) {
  const root = document.documentElement;
  // Accent
  root.style.setProperty('--epic-lime', t.accent);
  // Display weight — applied to the major display headings
  const w = t.displayWeight;
  document.querySelectorAll('.hero__title, .cta__title, .section__title.epic-display-2, .why__head h2, .kpi__val, .approach__num')
    .forEach(el => { el.style.fontWeight = w; });

  // Hero title with emphasis split point
  const h = document.querySelector('.hero__title');
  if (h) {
    const text = t.heroTitle || '';
    const idx = Math.min(Math.max(t.heroEmphasisStart | 0, 0), text.length);
    const a = text.slice(0, idx).trimEnd();
    const b = text.slice(idx).trimStart();
    h.innerHTML = '';
    if (a) h.appendChild(document.createTextNode(a + (b ? ' ' : '')));
    if (b) { const em = document.createElement('em'); em.textContent = b; h.appendChild(em); }
  }

  // Toggles
  const aurora = document.querySelector('.hero__bg-aurora');
  if (aurora) aurora.style.display = t.showAurora ? '' : 'none';
  const svg = document.querySelector('.hero__bg-svg');
  if (svg) svg.style.display = t.showHeroSvg ? '' : 'none';
  const heroGrid = document.querySelector('.hero__bg-grid');
  if (heroGrid) heroGrid.style.display = t.showBgGrid ? '' : 'none';
  const bgGrid = document.querySelector('.bg-grid');
  if (bgGrid) bgGrid.style.display = t.showBgGrid ? '' : 'none';
  const status = document.querySelector('.nav__status');
  if (status) status.style.display = t.showStatusPill ? '' : 'none';
  document.querySelectorAll('.tech-card__corner, .app-card__corner').forEach(el => {
    el.style.display = t.cornerBadge ? '' : 'none';
  });
}

function App() {
  const { TweaksPanel, useTweaks, TweakSection, TweakColor, TweakSlider, TweakToggle, TweakText, TweakRadio } = window;
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => { applyTweaks(t); }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Brand">
        <TweakColor
          label="Accent"
          value={t.accent}
          onChange={v => setTweak('accent', v)}
          options={['#DBF911', '#7DF9FF', '#FF5A4A', '#FFB020', '#FFFFFF']}
        />
      </TweakSection>

      <TweakSection label="Typography">
        <TweakRadio
          label="Display weight"
          value={t.displayWeight}
          onChange={v => setTweak('displayWeight', v)}
          options={[
            { value: 100, label: 'Thin' },
            { value: 300, label: 'Light' },
            { value: 400, label: 'Regular' }
          ]}
        />
      </TweakSection>

      <TweakSection label="Hero">
        <TweakText
          label="Headline"
          value={t.heroTitle}
          onChange={v => setTweak('heroTitle', v)}
        />
        <TweakSlider
          label="Emphasis split @ char"
          value={t.heroEmphasisStart}
          onChange={v => setTweak('heroEmphasisStart', v)}
          min={0} max={(t.heroTitle || '').length} step={1}
        />
        <TweakToggle
          label="Aurora overlay"
          value={t.showAurora}
          onChange={v => setTweak('showAurora', v)}
        />
        <TweakToggle
          label="Radar visualization"
          value={t.showHeroSvg}
          onChange={v => setTweak('showHeroSvg', v)}
        />
      </TweakSection>

      <TweakSection label="Detail">
        <TweakToggle
          label="Background grid"
          value={t.showBgGrid}
          onChange={v => setTweak('showBgGrid', v)}
        />
        <TweakToggle
          label="Live-status pill in nav"
          value={t.showStatusPill}
          onChange={v => setTweak('showStatusPill', v)}
        />
        <TweakToggle
          label="Lime corner badges"
          value={t.cornerBadge}
          onChange={v => setTweak('cornerBadge', v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

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