// App entry — composes sections + reveal observer + tweaks panel

const IS_LIGHT_THEME = !!document.querySelector('link[href*="styles-light"]');

const TWEAK_DEFAULTS = IS_LIGHT_THEME ? {
  "accent": "#C46A3E",
  "headlineWeight": 550,
  "bodySize": 18,
  "showSignature": true,
  "showStickyNotes": true,
  "panelMood": "paper"
} : /*EDITMODE-BEGIN*/{
  "accent": "#9463EE",
  "headlineWeight": 550,
  "bodySize": 18,
  "showSignature": true,
  "showStickyNotes": true,
  "panelMood": "paper"
}/*EDITMODE-END*/;

const MOOD_PRESETS = IS_LIGHT_THEME ? {
  warm:    { bg: "#FAF6EF", paper: "#F3ECDF", border: "#E6DBC8" },
  paper:   { bg: "#F1EBDD", paper: "#E8DFC9", border: "#D9CDB1" },
  cool:    { bg: "#F4F4F0", paper: "#EBEBE3", border: "#DEDED2" }
} : {
  warm:    { bg: "#111118", paper: "#1A1A23", border: "#2E2E38" },
  paper:   { bg: "#15151E", paper: "#201F29", border: "#343241" },
  cool:    { bg: "#0F1018", paper: "#191A24", border: "#2B2C38" }
};

function useReveal() {
  React.useEffect(() => {
    const els = document.querySelectorAll('.section, .hero, .quote-block, .testimonial, .foot-row');
    els.forEach(el => el.classList.add('reveal'));
    // Reveal anything already in initial viewport immediately, observe the rest.
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.05, rootMargin: '0px 0px -40px 0px' });
    els.forEach(el => {
      const r = el.getBoundingClientRect();
      if (r.top < window.innerHeight - 40) {
        el.classList.add('in');
      } else {
        io.observe(el);
      }
    });
    return () => io.disconnect();
  }, []);
}

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

  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--accent', tweaks.accent);
    root.style.setProperty('--color-clay', tweaks.accent);
    root.style.setProperty('font-size', tweaks.bodySize + 'px');
    const mood = MOOD_PRESETS[tweaks.panelMood] || MOOD_PRESETS.warm;
    root.style.setProperty('--bg', mood.bg);
    root.style.setProperty('--bg-elevated', mood.paper);
    root.style.setProperty('--color-paper', mood.paper);
    root.style.setProperty('--border', mood.border);
    root.style.setProperty('--color-border', mood.border);
    document.body.style.setProperty('--display-weight', tweaks.headlineWeight);
    // apply to all .display, .h2, .h3, hero h1, etc via stylesheet variable
    document.documentElement.style.setProperty('--weight-display', tweaks.headlineWeight);
    // direct apply
    document.querySelectorAll('.h2, .h3, .hero h1, .display, .quote-text, .stack-card h4, .video-meta h4, .proj-meta h4, .test-quote q')
      .forEach(el => el.style.fontWeight = tweaks.headlineWeight);

    document.body.classList.toggle('hide-notes', !tweaks.showStickyNotes);
    document.body.classList.toggle('hide-signature', !tweaks.showSignature);
  }, [tweaks]);

  return (
    <div className="page">
      <Nav />
      <Hero />
      <UpworkStats />
      <WorkflowMorph />
      <PrincipleStatement />
      <Projects />
      <Feedback />
      <NDA />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Mood">
          <TweakRadio
            label="Paper tone"
            value={tweaks.panelMood}
            onChange={v => setTweak('panelMood', v)}
            options={[
              { value: 'warm', label: 'Warm' },
              { value: 'paper', label: 'Paper' },
              { value: 'cool', label: 'Cool' },
            ]}
          />
          <TweakColor label="Accent" value={tweaks.accent} onChange={v => setTweak('accent', v)} />
        </TweakSection>

        <TweakSection label="Type">
          <TweakSlider
            label="Body size" min={15} max={20} step={1}
            value={tweaks.bodySize}
            onChange={v => setTweak('bodySize', v)}
            suffix="px"
          />
          <TweakSlider
            label="Headline weight" min={400} max={700} step={50}
            value={tweaks.headlineWeight}
            onChange={v => setTweak('headlineWeight', v)}
          />
        </TweakSection>

        <TweakSection label="Hero details">
          <TweakToggle label="Animated signature" value={tweaks.showSignature} onChange={v => setTweak('showSignature', v)} />
          <TweakToggle label="Sticky notes" value={tweaks.showStickyNotes} onChange={v => setTweak('showStickyNotes', v)} />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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