/* App assembly for single-lens pages (no toggle, locked lens) */

const PAGE_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "typography": "playfair",
  "cardStyle": "bordered"
}/*EDITMODE-END*/;

const PAGE_FONT_MAP = {
  playfair: "'Playfair Display', Georgia, serif",
  cormorant: "'Cormorant Garamond', Georgia, serif",
};

function usePageScrollAnimations() {
  React.useEffect(() => {
    const els = document.querySelectorAll('[data-anim]');
    if (!els.length) return;
    els.forEach((el) => {
      const rect = el.getBoundingClientRect();
      if (rect.top < window.innerHeight + 40) {
        el.classList.add('anim-in--visible');
      }
    });
    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add('anim-in--visible');
          observer.unobserve(entry.target);
        }
      });
    }, { threshold: 0.05, rootMargin: '0px 0px -20px 0px' });
    els.forEach((el) => {
      if (!el.classList.contains('anim-in--visible')) observer.observe(el);
    });
    return () => observer.disconnect();
  }, []);
}

function PageApp() {
  const [t, setTweak] = useTweaks(PAGE_TWEAK_DEFAULTS);

  usePageScrollAnimations();

  React.useEffect(() => {
    document.documentElement.style.setProperty('--font-display', PAGE_FONT_MAP[t.typography] || PAGE_FONT_MAP.playfair);
  }, [t.typography]);

  React.useEffect(() => {
    document.documentElement.setAttribute('data-card-style', t.cardStyle);
  }, [t.cardStyle]);

  React.useEffect(() => {
    const timer = setTimeout(() => {
      document.querySelectorAll('[data-anim]:not(.anim-in--visible)').forEach((el) => {
        const rect = el.getBoundingClientRect();
        if (rect.top < window.innerHeight) el.classList.add('anim-in--visible');
      });
    }, 100);
    return () => clearTimeout(timer);
  });

  return (
    <LensProvider>
      <StickyNav />
      <main>
        <Hero />
        <SignatureSkills />
        <CaseStudies />
        <ExperienceTimeline />
        <DesignsSection />
        <SelectedWork />
        <ContributionWall />
        <ProofPresence />
        <ContactSection />
      </main>
      <Footer />
      <TweaksPanel>
        <TweakSection label="Typography" />
        <TweakRadio
          label="Display font"
          value={t.typography}
          options={['playfair', 'cormorant']}
          optionLabels={['Playfair Display', 'Cormorant Garamond']}
          onChange={(v) => setTweak('typography', v)}
        />
        <TweakSection label="Cards" />
        <TweakRadio
          label="Card style"
          value={t.cardStyle}
          options={['bordered', 'elevated', 'minimal']}
          optionLabels={['Bordered', 'Elevated', 'Minimal']}
          onChange={(v) => setTweak('cardStyle', v)}
        />
      </TweaksPanel>
    </LensProvider>
  );
}

/* Card style overrides */
const pageCardStyleSheet = document.createElement('style');
pageCardStyleSheet.textContent = [
  '[data-card-style="elevated"] .skill-card,',
  '[data-card-style="elevated"] .cs-card,',
  '[data-card-style="elevated"] .design-card,',
  '[data-card-style="elevated"] .work-card,',
  '[data-card-style="elevated"] .ref-card {',
  '  border-color: transparent;',
  '  box-shadow: 0 2px 16px oklch(0.3 0.02 60 / 0.08);',
  '}',
  '[data-card-style="elevated"] .skill-card:hover,',
  '[data-card-style="elevated"] .cs-card:hover,',
  '[data-card-style="elevated"] .design-card:hover,',
  '[data-card-style="elevated"] .work-card:hover {',
  '  box-shadow: 0 8px 40px oklch(0.3 0.02 60 / 0.14);',
  '}',
  '[data-card-style="minimal"] .skill-card,',
  '[data-card-style="minimal"] .cs-card,',
  '[data-card-style="minimal"] .design-card,',
  '[data-card-style="minimal"] .work-card,',
  '[data-card-style="minimal"] .ref-card {',
  '  border-color: transparent;',
  '  background: transparent;',
  '}',
  '[data-card-style="minimal"] .skill-card:hover,',
  '[data-card-style="minimal"] .cs-card:hover,',
  '[data-card-style="minimal"] .design-card:hover,',
  '[data-card-style="minimal"] .work-card:hover {',
  '  background: var(--surface);',
  '}',
].join('\n');
document.head.appendChild(pageCardStyleSheet);

const pageRoot = ReactDOM.createRoot(document.getElementById('root'));
pageRoot.render(React.createElement(PageApp));