/* global React, ReactDOM */
const { useState, useEffect } = React;

function App() {
  const [route, setRoute] = useState({ page: 'home', params: {} });
  const [pitchOpen, setPitchOpen] = useState(false);

  // Tweak defaults
  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "accentColor": "#8B0F12",
    "displayFont": "Cinzel",
    "motion": "on",
    "heroVariant": "reel",
    "grain": 0.04,
    "surfaceTone": "ink"
  }/*EDITMODE-END*/;

  const [tweaks, setTweak] = window.useTweaks
    ? window.useTweaks(TWEAK_DEFAULTS)
    : [TWEAK_DEFAULTS, () => {}];

  // Apply tweaks to CSS
  useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty('--blood', tweaks.accentColor);
    r.style.setProperty('--font-display',
      tweaks.displayFont + ", 'Trajan Pro', 'Cormorant Garamond', Georgia, serif");
    document.querySelectorAll('.grain::after, .grain').forEach(() => {});
    r.style.setProperty('--grain-opacity', String(tweaks.grain));
    if (tweaks.surfaceTone === 'pitch') {
      r.style.setProperty('--ink-black', '#050202');
    } else if (tweaks.surfaceTone === 'warm') {
      r.style.setProperty('--ink-black', '#120808');
    } else {
      r.style.setProperty('--ink-black', '#0A0606');
    }
  }, [tweaks]);

  // Load fonts dynamically on font change
  useEffect(() => {
    if (!tweaks.displayFont || tweaks.displayFont === 'Cinzel') return;
    const family = tweaks.displayFont.replace(/ /g, '+');
    const id = 'tweak-font-' + family;
    if (document.getElementById(id)) return;
    const link = document.createElement('link');
    link.id = id; link.rel = 'stylesheet';
    link.href = `https://fonts.googleapis.com/css2?family=${family}:wght@400;500;600;700;800;900&display=swap`;
    document.head.appendChild(link);
  }, [tweaks.displayFont]);

  const navigate = (page, params = {}) => {
    setRoute({ page, params });
    window.scrollTo({ top: 0, behavior: 'instant' });
  };

  const onPitch = () => setPitchOpen(true);

  // Scroll-reveal: float content up as it enters view
  useEffect(() => {
    const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    const sel = '.section-title, .section-kicker, .svc-block, .slate-row, .team-card, .stat, .ai-headline, .ai-body, .manifesto-quote, .manifesto-kicker, .manifesto-body p, .press-row, .social-card, .project-synopsis, .project-hero-title, .project-hero-logline, .historic-row';
    const nodes = Array.from(document.querySelectorAll('.app-shell ' + sel));
    if (reduce || tweaks.motion === 'off') {
      nodes.forEach(n => { n.classList.remove('reveal'); n.classList.remove('in'); });
      return;
    }
    nodes.forEach(n => n.classList.add('reveal'));
    let ticking = false;
    const apply = () => {
      const vh = window.innerHeight;
      nodes.forEach(n => {
        const r = n.getBoundingClientRect();
        const inView = r.top < vh * 0.88 && r.bottom > vh * 0.06;
        n.classList.toggle('in', inView);
      });
    };
    const onScroll = () => { if (ticking) return; ticking = true; requestAnimationFrame(() => { ticking = false; apply(); }); };
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    const raf = requestAnimationFrame(apply);
    return () => { cancelAnimationFrame(raf); window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); };
  }, [route, tweaks.motion]);

  let pageEl;
  switch (route.page) {
    case 'slate':   pageEl = <SlatePage navigate={navigate} onPitch={onPitch} />; break;
    case 'project': pageEl = <ProjectPage projectId={route.params.id} navigate={navigate} onPitch={onPitch} />; break;
    case 'studio':  pageEl = <StudioPage navigate={navigate} onPitch={onPitch} />; break;
    case 'services': pageEl = <ServicesPage navigate={navigate} onPitch={onPitch} />; break;
    case 'media':   pageEl = <MediaPage navigate={navigate} onPitch={onPitch} />; break;
    case 'ai':      pageEl = <AIPage navigate={navigate} onPitch={onPitch} />; break;
    case 'contact': pageEl = <ContactPage navigate={navigate} onPitch={onPitch} />; break;
    default:        pageEl = <HomePage navigate={navigate} onPitch={onPitch} tweaks={tweaks} />;
  }

  return (
    <div className="app-shell">
      <Nav route={route} navigate={navigate} onPitch={onPitch} />
      {pageEl}
      <Footer navigate={navigate} onPitch={onPitch} />
      <PitchModal open={pitchOpen} onClose={() => setPitchOpen(false)} />

      {/* TWEAKS PANEL */}
      {window.TweaksPanel && (
        <window.TweaksPanel title="Tweaks">
          <window.TweakSection title="Brand">
            <window.TweakColor label="Accent (Blood)"
              value={tweaks.accentColor}
              options={['#8B0F12', '#C42B1C', '#5C0608', '#C9A559']}
              onChange={v => setTweak('accentColor', v)} />
            <window.TweakSelect label="Display font"
              value={tweaks.displayFont}
              options={['Cinzel', 'Cormorant Garamond', 'Playfair Display', 'DM Serif Display', 'Bodoni Moda']}
              onChange={v => setTweak('displayFont', v)} />
          </window.TweakSection>
          <window.TweakSection title="Mood">
            <window.TweakRadio label="Surface tone"
              value={tweaks.surfaceTone}
              options={[
                { value: 'pitch', label: 'Pitch' },
                { value: 'ink',   label: 'Ink' },
                { value: 'warm',  label: 'Warm' }
              ]}
              onChange={v => setTweak('surfaceTone', v)} />
            <window.TweakRadio label="Motion"
              value={tweaks.motion}
              options={[
                { value: 'on',  label: 'On' },
                { value: 'off', label: 'Off' }
              ]}
              onChange={v => setTweak('motion', v)} />
            <window.TweakSlider label="Grain"
              value={tweaks.grain} min={0} max={0.18} step={0.01}
              onChange={v => setTweak('grain', v)} />
          </window.TweakSection>
        </window.TweaksPanel>
      )}
    </div>
  );
}

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