// FGBVA hi-fi shared primitives: logo, nav, chips, icons

const FGBVALogo = ({ variant = 'dark', scale = 1 }) => {
  const navy = variant === 'dark' ? '#0f1d3a' : '#f7f2e4';
  const gold = '#b8860b';
  const mute = variant === 'dark' ? '#5b6780' : 'rgba(247,242,228,0.55)';
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 14 * scale }}>
      <svg width={42 * scale} height={34 * scale} viewBox="0 0 42 34" style={{ display: 'block' }}>
        <rect x="1" y="20" width="9" height="12" fill={gold} />
        <rect x="13" y="12" width="9" height="20" fill={gold} />
        <rect x="25" y="2" width="9" height="30" fill={gold} />
        <line x1="0" y1="33" x2="38" y2="33" stroke={gold} strokeWidth="1.75" />
      </svg>
      <div style={{ width: 1, height: 34 * scale, background: navy, opacity: 0.35 }} />
      <div>
        <div style={{
          fontFamily: '"Source Serif 4", Georgia, serif',
          fontWeight: 700,
          fontSize: 13.5 * scale,
          color: navy,
          letterSpacing: '0.07em',
          lineHeight: 1.15,
          whiteSpace: 'nowrap',
        }}>FOUNDERS &amp; GROWTH BUSINESSES<br/>OF VIRGINIA ALLIANCE</div>
        <div style={{
          fontFamily: '"JetBrains Mono", monospace',
          fontSize: 8.5 * scale,
          color: mute,
          letterSpacing: '0.24em',
          marginTop: 6,
          textTransform: 'uppercase',
          lineHeight: 1.4,
        }}>A trade association for<br/>Virginia founder-operators</div>
      </div>
    </div>
  );
};

const TopNav = ({ ctaCopy }) => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const on = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', on);
    return () => window.removeEventListener('scroll', on);
  }, []);
  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: scrolled ? 'rgba(247,242,228,0.92)' : 'transparent',
      backdropFilter: scrolled ? 'saturate(140%) blur(10px)' : 'none',
      borderBottom: scrolled ? '1px solid var(--rule)' : '1px solid transparent',
      transition: 'all 200ms ease',
    }}>
      <div className="container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '18px 56px' }}>
        <FGBVALogo />
        <div style={{ display: 'flex', alignItems: 'center', gap: 36 }}>
          {[
            ['Why FGBVA', '#why'],
            ['Front Door', '#front-door'],
            ['Peer Circles', '#peers'],
            ['Policy', '#policy'],
            ['Members', '#members'],
          ].map(([l, href]) => (
            <a key={l} href={href} style={{
              fontFamily: 'Inter, sans-serif', fontSize: 13.5,
              color: 'var(--ink)', textDecoration: 'none',
              letterSpacing: '0.01em',
            }}>{l}</a>
          ))}
          <a href="#intake" className="btn btn-primary" style={{ padding: '10px 18px', fontSize: 13 }}>
            {ctaCopy} <span style={{ marginLeft: 2 }}>→</span>
          </a>
        </div>
      </div>
    </nav>
  );
};

// Reveal helper — adds .in when scrolled into view
const Reveal = ({ children, delay = 0, as: Tag = 'div', style = {}, className = '', ...rest }) => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          setTimeout(() => el.classList.add('in'), delay);
          io.unobserve(el);
        }
      });
    }, { threshold: 0.12 });
    io.observe(el);
    return () => io.disconnect();
  }, [delay]);
  return <Tag ref={ref} className={`reveal ${className}`} style={style} {...rest}>{children}</Tag>;
};

window.FGBVALogo = FGBVALogo;
window.TopNav = TopNav;
window.Reveal = Reveal;