// home-tweaks.jsx — Tweaks panel for the ARCHE home page.
// Wires React state to the existing static markup via CSS overrides + DOM updates.

const { useEffect } = React;

function ArcheHomeTweaks() {
  const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS);

  // Apply tweaks to the live page
  useEffect(() => {
    const root = document.documentElement;
    const [accent, accentDark, accentSoft, accentTint] = t.accentPalette;

    // Accent color — drives hero CTA, highlight word, eyebrow color, stat numbers
    root.style.setProperty('--teal', accent);
    root.style.setProperty('--teal-dark', accentDark);

    // Hero highlight span color
    const hSpan = document.querySelector('.hero-title span');
    if (hSpan) hSpan.style.color = accentSoft;

    // Stat number color
    document.querySelectorAll('.stat-val').forEach(el => { el.style.color = accentSoft; });

    // Section eyebrow accent
    document.querySelectorAll('.section-eyebrow').forEach(el => { el.style.color = accent; });

    // Hero accent (subtle background tints)
    const hero = document.querySelector('.hero');
    if (hero) {
      hero.style.setProperty('background',
        `linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 55%, var(--navy-light) 100%)`);
    }

    // Highlight word text
    if (hSpan) hSpan.textContent = t.highlightWord;

    // Hero subtitle text
    const sub = document.querySelector('.hero-subtitle');
    if (sub) sub.textContent = t.heroSubtitle;

    // CTA label
    const cta = document.querySelector('.hero-btn-primary');
    if (cta) cta.textContent = t.ctaLabel;

    // Section visibility
    const stats = document.querySelector('.stats-strip');
    if (stats) stats.style.display = t.showStats ? 'grid' : 'none';

    const audiences = document.querySelector('[data-tweak-section="audiences"]');
    if (audiences) audiences.style.display = t.showAudiences ? 'block' : 'none';

    const howItWorks = document.querySelector('[data-tweak-section="how-it-works"]');
    if (howItWorks) howItWorks.style.display = t.showHowItWorks ? 'block' : 'none';

    // Study card layout density
    const grid = document.querySelector('.study-grid');
    if (grid && window.innerWidth > 680) {
      grid.style.gridTemplateColumns = `repeat(${t.studyColumns}, 1fr)`;
    }
  }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Brand" />
      <TweakColor
        label="Accent palette"
        value={t.accentPalette}
        options={[
          ['#0891B2', '#0E7490', '#7DD3FC', '#E0F2FE'], // Teal (default)
          ['#1E40AF', '#1E3A8A', '#93C5FD', '#DBEAFE'], // Royal blue
          ['#6D28D9', '#5B21B6', '#C4B5FD', '#EDE9FE'], // Violet
          ['#0F766E', '#115E59', '#5EEAD4', '#CCFBF1'], // Emerald
          ['#BE185D', '#9D174D', '#F9A8D4', '#FCE7F3'], // Rose
        ]}
        onChange={(v) => setTweak('accentPalette', v)}
      />

      <TweakSection label="Hero copy" />
      <TweakText
        label="Highlight word"
        value={t.highlightWord}
        onChange={(v) => setTweak('highlightWord', v)}
      />
      <TweakText
        label="Subtitle"
        value={t.heroSubtitle}
        multiline
        onChange={(v) => setTweak('heroSubtitle', v)}
      />
      <TweakText
        label="CTA button"
        value={t.ctaLabel}
        onChange={(v) => setTweak('ctaLabel', v)}
      />

      <TweakSection label="Layout" />
      <TweakRadio
        label="Study card columns"
        value={t.studyColumns}
        options={[2, 3, 4]}
        onChange={(v) => setTweak('studyColumns', v)}
      />

      <TweakSection label="Sections" />
      <TweakToggle
        label="Stats strip"
        value={t.showStats}
        onChange={(v) => setTweak('showStats', v)}
      />
      <TweakToggle
        label="How it works"
        value={t.showHowItWorks}
        onChange={(v) => setTweak('showHowItWorks', v)}
      />
      <TweakToggle
        label="Audiences card"
        value={t.showAudiences}
        onChange={(v) => setTweak('showAudiences', v)}
      />
    </TweaksPanel>
  );
}

// Mount
const __tweaksMount = document.getElementById('tweaks-root');
if (__tweaksMount) {
  ReactDOM.createRoot(__tweaksMount).render(<ArcheHomeTweaks />);
}