// ============ Reveal on scroll (progressive enhancement) ============
function useReveal() {
  React.useEffect(() => {
    // opt-in to the hidden-then-fade style only if JS is alive
    document.documentElement.classList.add('js-reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
    }, { threshold: 0.08 });
    const t = setTimeout(() => {
      document.querySelectorAll('.reveal:not(.in)').forEach(el => io.observe(el));
    }, 30);
    // Defensive fallback: force-show any in-viewport reveals after 600ms.
    const fb = setTimeout(() => {
      document.querySelectorAll('.reveal:not(.in)').forEach(el => {
        const r = el.getBoundingClientRect();
        if (r.top < window.innerHeight && r.bottom > 0) el.classList.add('in');
      });
    }, 600);
    // Hard safety: after 2s, reveal everything regardless.
    const safety = setTimeout(() => {
      document.querySelectorAll('.reveal:not(.in)').forEach(el => el.classList.add('in'));
    }, 2000);
    return () => { clearTimeout(t); clearTimeout(fb); clearTimeout(safety); io.disconnect(); };
  }, []);
}

// ============ Nav ============
function Nav({ page, onNav }) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const links = [
    { id: 'home', label: 'Work' },
    { id: 'about', label: 'About' },
    { id: 'resume', label: 'Resume' },
    { id: 'contact', label: 'Contact' },
  ];
  return (
    <nav className={'nav' + (scrolled ? ' scrolled' : '')}>
      <div className="shell nav-inner">
        <a className="logo" href="#" onClick={(e)=>{e.preventDefault(); onNav('home');}} aria-label="Vicky Tran, home">
          <span className="logo-word">vicky tran</span>
          <svg className="logo-bloom" viewBox="0 0 16 16" fill="none" aria-hidden="true">
            <defs>
              <linearGradient id="lg-bloom" x1="0" y1="0" x2="16" y2="16" gradientUnits="userSpaceOnUse">
                <stop offset="0" stopColor="#C9B5F2" />
                <stop offset="1" stopColor="#EFA6BF" />
              </linearGradient>
            </defs>
            <g transform="translate(8 8)">
              <path d="M0 -7 C 2.6 -4, 2.6 -2.6, 0 0 C -2.6 -2.6, -2.6 -4, 0 -7 Z" fill="url(#lg-bloom)"/>
              <path d="M0 -7 C 2.6 -4, 2.6 -2.6, 0 0 C -2.6 -2.6, -2.6 -4, 0 -7 Z" fill="url(#lg-bloom)" transform="rotate(72)"/>
              <path d="M0 -7 C 2.6 -4, 2.6 -2.6, 0 0 C -2.6 -2.6, -2.6 -4, 0 -7 Z" fill="url(#lg-bloom)" transform="rotate(144)"/>
              <path d="M0 -7 C 2.6 -4, 2.6 -2.6, 0 0 C -2.6 -2.6, -2.6 -4, 0 -7 Z" fill="url(#lg-bloom)" transform="rotate(216)"/>
              <path d="M0 -7 C 2.6 -4, 2.6 -2.6, 0 0 C -2.6 -2.6, -2.6 -4, 0 -7 Z" fill="url(#lg-bloom)" transform="rotate(288)"/>
            </g>
          </svg>
        </a>
        <div className="nav-links">
          {links.map(l => (
            <a key={l.id} className={'nav-link' + (page === l.id ? ' active' : '')}
               href="#" onClick={(e)=>{e.preventDefault(); onNav(l.id);}}>{l.label}</a>
          ))}
        </div>
      </div>
    </nav>
  );
}

// ============ Sticky Contact ============
function StickyContact({ onClick }) {
  return (
    <button className="sticky-contact" onClick={onClick} aria-label="Go to contact page">
      <span className="sc-emoji">✦</span>
      <span>Let's talk</span>
    </button>
  );
}

// ============ Footer ============
function Footer({ onNav }) {
  return (
    <footer className="footer">
      <div className="shell footer-inner">
        <div className="footer-note">© 2026 Vicky Tran. Crafted with care, curiosity, and way too many tabs open.</div>
        <div className="footer-links">
          <a href="#" onClick={(e)=>{e.preventDefault(); onNav('home');}}>Work</a>
          <a href="#" onClick={(e)=>{e.preventDefault(); onNav('about');}}>About</a>
          <a href="#" onClick={(e)=>{e.preventDefault(); onNav('resume');}}>Resume</a>
          <a href="https://linkedin.com/in/vicky-t-tran" target="_blank" rel="noreferrer">LinkedIn</a>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { useReveal, Nav, StickyContact, Footer });