// Top-level App + Tweaks integration

function App() {
  const [tweaks, setTweak] = useTweaks(window.__TWEAK_DEFAULTS__);

  // Apply color tweaks to CSS vars
  React.useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty('--navy', tweaks.navy);
    r.style.setProperty('--orange', tweaks.orange);
    r.style.setProperty('--cream', tweaks.cream);
    r.style.setProperty('--navy-deep', shade(tweaks.navy, -0.18));
    r.style.setProperty('--orange-deep', shade(tweaks.orange, -0.12));
    r.style.setProperty('--cream-warm', shade(tweaks.cream, -0.04));
  }, [tweaks.navy, tweaks.orange, tweaks.cream]);

  // Apply headline font
  React.useEffect(() => {
    const styleId = '__headline_font_override';
    let el = document.getElementById(styleId);
    if (!el) {
      el = document.createElement('style');
      el.id = styleId;
      document.head.appendChild(el);
    }
    el.textContent = `
      .serif, .hero-headline, .section-title, .step h3, .case-title, .testimonial-quote,
      .tier-name, .tier-price, .stat-num, .footer-brand, .logo, .creator-handle,
      .attribution-name, .testimonial-mini-quote, .faq-q, .final-cta h2,
      .hero-headline em, .marquee-track {
        font-family: "${tweaks.headlineFont}", "Fraunces", Georgia, serif;
      }
    `;
  }, [tweaks.headlineFont]);

  // Apply body font
  React.useEffect(() => {
    document.body.style.fontFamily = `"${tweaks.bodyFont}", -apple-system, system-ui, sans-serif`;
  }, [tweaks.bodyFont]);

  const setMany = (obj) => {
    Object.entries(obj).forEach(([k, v]) => setTweak(k, v));
  };

  return (
    <React.Fragment>
      <Nav />
      <Hero />
      {tweaks.showMarquee && <Marquee />}
      <Stats />
      <HowItWorks />
      <Pricing />
      <Niches />
      {tweaks.showBrands && <BrandsMarquee />}
      <Testimonials />
      <FAQ />
      <FinalCTA />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Color preset">
          <TweakButton label="Editorial (default)"
            onClick={() => setMany({ navy: '#0B2A5B', orange: '#FF6A2A', cream: '#F4EFE6' })} />
          <TweakButton label="Workshop (warm earth)"
            onClick={() => setMany({ navy: '#2B1810', orange: '#D2691E', cream: '#F5EDE0' })} />
          <TweakButton label="Forest (deep green + rust)"
            onClick={() => setMany({ navy: '#1B3A2A', orange: '#C45A2C', cream: '#F2EDE0' })} />
          <TweakButton label="Mono noir"
            onClick={() => setMany({ navy: '#0A0A0A', orange: '#FB923C', cream: '#F5F5F2' })} />
          <TweakButton label="Bright pop"
            onClick={() => setMany({ navy: '#1E3A8A', orange: '#F97316', cream: '#FEF3E2' })} />
        </TweakSection>
        <TweakSection label="Custom palette">
          <TweakColor label="Primary" value={tweaks.navy} onChange={v => setTweak('navy', v)} />
          <TweakColor label="Accent" value={tweaks.orange} onChange={v => setTweak('orange', v)} />
          <TweakColor label="Surface" value={tweaks.cream} onChange={v => setTweak('cream', v)} />
        </TweakSection>
        <TweakSection label="Headline font">
          <TweakSelect
            label="Style"
            value={tweaks.headlineFont}
            onChange={v => setTweak('headlineFont', v)}
            options={[
              { value: 'Instrument Serif', label: 'Instrument Serif (editorial)' },
              { value: 'Fraunces', label: 'Fraunces (modern serif)' },
              { value: 'Playfair Display', label: 'Playfair (classic)' },
              { value: 'DM Serif Display', label: 'DM Serif (bold)' },
              { value: 'Bricolage Grotesque', label: 'Bricolage (geometric sans)' },
              { value: 'Space Grotesk', label: 'Space Grotesk (tech sans)' },
              { value: 'Archivo', label: 'Archivo (utility sans)' },
            ]}
          />
        </TweakSection>
        <TweakSection label="Body font">
          <TweakSelect
            label="Style"
            value={tweaks.bodyFont}
            onChange={v => setTweak('bodyFont', v)}
            options={[
              { value: 'Inter Tight', label: 'Inter Tight' },
              { value: 'Inter', label: 'Inter' },
              { value: 'DM Sans', label: 'DM Sans' },
              { value: 'Manrope', label: 'Manrope' },
              { value: 'IBM Plex Sans', label: 'IBM Plex Sans' },
              { value: 'Archivo', label: 'Archivo' },
            ]}
          />
        </TweakSection>
        <TweakSection label="Layout">
          <TweakToggle label="Niche marquee" value={tweaks.showMarquee} onChange={v => setTweak('showMarquee', v)} />
          <TweakToggle label="Brands carousel" value={tweaks.showBrands} onChange={v => setTweak('showBrands', v)} />
        </TweakSection>
      </TweaksPanel>
    </React.Fragment>
  );
}

// Hex color shade helper
function shade(hex, amount) {
  const c = hex.replace('#', '');
  const num = parseInt(c.length === 3 ? c.split('').map(x => x + x).join('') : c, 16);
  let r = (num >> 16) & 0xff, g = (num >> 8) & 0xff, b = num & 0xff;
  const f = (v) => Math.max(0, Math.min(255, Math.round(v + 255 * amount)));
  r = f(r); g = f(g); b = f(b);
  return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}

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