/* ================================================================
   shared.jsx — Nav, Button, Footer, Pillars, SectionHead, initReveal
   Loaded first on every page.
================================================================ */

function initReveal() {
  document.body.classList.add('js-ready');
  const obs = new IntersectionObserver(entries => {
    entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('vis'); });
  }, { threshold: 0.07 });
  document.querySelectorAll('.reveal').forEach(el => obs.observe(el));
}



/* ── Navigation ─────────────────────────────────────────────── */
function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  const [mOpen, setMOpen]       = React.useState(false);

  React.useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 30);
    window.addEventListener('scroll', fn, { passive: true });
    return () => window.removeEventListener('scroll', fn);
  }, []);

  const links = [
    { label: 'About',      href: '#about',      id: 'about'      },
    { label: 'Experience', href: '#experience',  id: 'experience' },
    { label: 'Speaking',   href: '#speaking',   id: 'speaking'   },
    { label: 'Contact',    href: '#contact',    id: 'contact'    },
  ];

  return (
    <>
      <header style={{
        position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
        padding: scrolled ? '14px 0' : '22px 0',
        background: scrolled ? 'rgba(20,25,36,0.88)' : 'transparent',
        backdropFilter:         scrolled ? 'blur(18px)' : 'none',
        WebkitBackdropFilter:   scrolled ? 'blur(18px)' : 'none',
        borderBottom: scrolled ? '1px solid rgba(58,66,84,0.5)' : '1px solid transparent',
        transition: 'all 320ms cubic-bezier(.22,1,.36,1)',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          width: '100%',
          padding: '0 max(56px, calc((100vw - 1440px) / 2))' }}>
        <a href="index.html" style={{ display: 'flex', alignItems: 'center', gap: 13, textDecoration: 'none' }}>
          <img src="assets/rm-monogram.png" alt="RM" style={{ height: 30, width: 'auto' }} />
          <span style={{ fontFamily: 'var(--font-display)', fontSize: 17, fontWeight: 600,
            letterSpacing: '.1em', color: 'var(--fg-1)', whiteSpace: 'nowrap' }}>RYAN MORIN</span>
        </a>

        {/* Desktop */}
        <div className="nav-links" style={{ gap: 36 }}>
          {links.map(l => (
            <a key={l.id} href={l.href} style={{
              fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 600,
              letterSpacing: '.18em', textTransform: 'uppercase', textDecoration: 'none',
              color: 'var(--fg-3)', transition: 'color 150ms',
            }}
            onMouseEnter={e => e.currentTarget.style.color = 'var(--fg-1)'}
            onMouseLeave={e => e.currentTarget.style.color = 'var(--fg-3)'}
            >{l.label}</a>
          ))}
          <Button href="#contact" small>Let's talk</Button>
        </div>
        </div>

        {/* Mobile burger */}
        <button className="nav-burger" aria-label={mOpen ? 'Close menu' : 'Open menu'}
          onClick={() => setMOpen(o => !o)}
          style={{ background: 'none', border: 'none', cursor: 'pointer',
            color: 'var(--fg-1)', padding: '4px 6px', fontSize: 22, lineHeight: 1 }}>
          {mOpen ? '✕' : '≡'}
        </button>
      </header>

      {/* Mobile overlay */}
      {mOpen && (
        <div style={{
          position: 'fixed', inset: 0, zIndex: 90,
          background: 'rgba(20,25,36,0.97)',
          backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
          display: 'flex', flexDirection: 'column', alignItems: 'center',
          justifyContent: 'center', gap: 40,
        }}>
          {links.map(l => (
            <a key={l.id} href={l.href} onClick={() => setMOpen(false)} style={{
              fontFamily: 'var(--font-display)', fontSize: 38, fontWeight: 500,
              letterSpacing: '.06em', color: 'var(--fg-1)', textDecoration: 'none',
            }}>{l.label}</a>
          ))}
          <Button href="#contact" onClick={() => setMOpen(false)}>Let's talk</Button>
        </div>
      )}
    </>
  );
}

/* ── Button ─────────────────────────────────────────────────── */
function Button({ children, href, onClick, variant = 'primary', small = false, type = 'button', disabled = false }) {
  const [h, setH] = React.useState(false);
  const [p, setP] = React.useState(false);
  const base = {
    display: 'inline-block', fontFamily: 'var(--font-sans)',
    fontSize: small ? 11 : 12, fontWeight: 600, letterSpacing: '.16em',
    textTransform: 'uppercase', cursor: disabled ? 'not-allowed' : 'pointer',
    whiteSpace: 'nowrap', textDecoration: 'none',
    padding: small ? '9px 18px' : '15px 30px', borderRadius: 3,
    border: '1px solid transparent',
    transition: 'all 160ms cubic-bezier(.22,1,.36,1)',
    transform: p ? 'translateY(1px)' : (h && !disabled) ? 'translateY(-1px)' : 'none',
    opacity: disabled ? 0.5 : 1,
  };
  const vars = {
    primary: {
      background: (h && !disabled) ? '#ffffff' : 'var(--silver-100)',
      color: '#1c2230',
      boxShadow: (h && !disabled) ? 'var(--shadow-md)' : 'var(--shadow-sm)',
    },
    ghost: {
      background: 'transparent',
      color:       (h && !disabled) ? 'var(--fg-1)' : 'var(--fg-3)',
      borderColor: (h && !disabled) ? 'var(--silver-400)' : 'var(--silver-600)',
    },
  };
  const s = { ...base, ...vars[variant] };
  const ev = {
    onMouseEnter: () => setH(true),
    onMouseLeave: () => { setH(false); setP(false); },
    onMouseDown:  () => setP(true),
    onMouseUp:    () => setP(false),
  };
  if (href) return <a href={href} style={s} {...ev} onClick={onClick}>{children}</a>;
  return <button type={type} style={s} disabled={disabled} {...ev} onClick={onClick}>{children}</button>;
}

/* ── Pillars ─────────────────────────────────────────────────── */
function Pillars({ size = 11, gap = 12, color }) {
  const c = color || 'var(--silver-600)';
  const items = ['Strategy', 'Technology', 'Growth', 'Impact'];
  return (
    <div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap,
      fontFamily: 'var(--font-sans)', fontWeight: 500,
      textTransform: 'uppercase', letterSpacing: '.28em', color: c, fontSize: size }}>
      {items.map((it, i) => (
        <React.Fragment key={it}>
          <span>{it}</span>
          {i < items.length - 1 && <span style={{ color: 'var(--silver-700)', letterSpacing: 0 }}>|</span>}
        </React.Fragment>
      ))}
    </div>
  );
}

/* ── Section heading ────────────────────────────────────────── */
function SectionHead({ eyebrow, title, intro, center = false }) {
  return (
    <div style={{ maxWidth: center ? 680 : 580, margin: center ? '0 auto' : 0,
      textAlign: center ? 'center' : 'left',
      display: 'flex', flexDirection: 'column', gap: 14, marginBottom: 56 }}>
      {eyebrow && (
        <span style={{ fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600,
          letterSpacing: '.22em', textTransform: 'uppercase', color: 'var(--fg-3)' }}>{eyebrow}</span>
      )}
      {title && (
        <h2 style={{ margin: 0, fontFamily: 'var(--font-display)', fontWeight: 600,
          fontSize: 'clamp(1.9rem, 3vw, 2.8rem)', lineHeight: 1.06, color: 'var(--fg-1)' }}>{title}</h2>
      )}
      {intro && (
        <p style={{ margin: 0, fontFamily: 'var(--font-sans)', fontWeight: 300,
          fontSize: 16.5, lineHeight: 1.65, color: 'var(--fg-2)' }}>{intro}</p>
      )}
    </div>
  );
}

/* ── Footer ─────────────────────────────────────────────────── */
function Footer() {
  return (
    <footer className="rm-section" style={{ padding: '38px 56px 44px',
      borderTop: '1px solid var(--ink-line-soft)',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      flexWrap: 'wrap', gap: 20 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <img src="assets/rm-monogram.png" alt="RM" style={{ height: 24, opacity: 0.7 }} />
        <span style={{ fontFamily: 'var(--font-sans)', fontSize: 12, color: 'var(--silver-600)' }}>
          © {new Date().getFullYear()} Ryan Morin · Greater Toronto Area
        </span>
      </div>
      <Pillars />
    </footer>
  );
}

Object.assign(window, { Nav, Button, Pillars, Footer, SectionHead, initReveal });