// site-ui.jsx — tokens, icons, small shared components, scroll-reveal.
// Exported to window.

const T = {
  navy: '#0a2a6b',
  navyDeep: '#071d4a',
  ink: '#16213d',
  muted: '#5d6884',
  faint: '#8a93a8',
  line: '#e7ecf4',
  panel: '#f5f7fb',
  white: '#ffffff',
  serif: '"Newsreader", serif',
  sans: '"Schibsted Grotesk", sans-serif',
  exo: '"Exo 2", sans-serif',
  mono: '"IBM Plex Mono", monospace',
};

// ── icons ─────────────────────────────────────────────────────
function StageIcon({ name, c = 'currentColor', sw = 1.6, size = 22 }) {
  const p = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: c, strokeWidth: sw, strokeLinecap: 'round', strokeLinejoin: 'round' };
  if (name === 'fund') return (<svg {...p}><circle cx="12" cy="12" r="8.5" /><path d="M14.5 9a3.5 3.5 0 1 0 0 6 M8 11h5 M8 13.4h5" /></svg>);
  if (name === 'procure') return (<svg {...p}><rect x="4" y="4" width="16" height="6" rx="1.4" /><rect x="4" y="14" width="16" height="6" rx="1.4" /><path d="M7.5 7h.01 M7.5 17h.01" /></svg>);
  if (name === 'train') return (<svg {...p}><rect x="7" y="7" width="10" height="10" rx="1.6" /><path d="M10 4v3 M14 4v3 M10 17v3 M14 17v3 M4 10h3 M4 14h3 M17 10h3 M17 14h3" /></svg>);
  if (name === 'deploy') return (<svg {...p}><path d="M12 20V7 M7 12l5-5 5 5" /><path d="M6 4h12" /></svg>);
  return null;
}

function PillarIcon({ name, c = 'currentColor', sw = 1.5, size = 28 }) {
  const p = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: c, strokeWidth: sw, strokeLinecap: 'round', strokeLinejoin: 'round' };
  if (name === 'engineering') return (<svg {...p}><rect x="6" y="6" width="12" height="12" rx="2" /><circle cx="12" cy="12" r="2.4" /><path d="M10 4v2 M14 4v2 M10 18v2 M14 18v2 M4 10h2 M4 14h2 M18 10h2 M18 14h2" /></svg>);
  if (name === 'infra') return (<svg {...p}><rect x="3" y="4" width="18" height="6" rx="1.5" /><rect x="3" y="14" width="18" height="6" rx="1.5" /><path d="M6.5 7h.01 M6.5 17h.01 M16 7h3 M16 17h3" /></svg>);
  if (name === 'eu') {
    const stars = [];
    for (let i = 0; i < 8; i++) { const a = (i / 8) * Math.PI * 2 - Math.PI / 2; stars.push(<circle key={i} cx={(12 + Math.cos(a) * 8).toFixed(2)} cy={(12 + Math.sin(a) * 8).toFixed(2)} r="0.9" fill={c} stroke="none" />); }
    return (<svg {...p}>{stars}<path d="M13.6 9.2a3 3 0 1 0 0 5.6 M9.4 11h4 M9.4 13h4" /></svg>);
  }
  return null;
}

// ── eyebrow badge ─────────────────────────────────────────────
function Eyebrow({ children, accent = '#e8a900', light = false }) {
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 9, padding: '7px 14px', borderRadius: 6,
      background: light ? 'rgba(255,255,255,.08)' : '#eef3fb', border: `1px solid ${light ? 'rgba(255,255,255,.16)' : '#e0e8f5'}`,
      fontFamily: T.sans, fontSize: 12.5, fontWeight: 600, letterSpacing: 0.8, textTransform: 'uppercase',
      color: light ? '#dfe7f6' : T.navy, whiteSpace: 'nowrap' }}>
      <span style={{ width: 7, height: 7, background: accent, borderRadius: 2 }} />{children}
    </div>
  );
}

// ── scroll reveal ─────────────────────────────────────────────
function Reveal({ children, delay = 0, y = 22, as = 'div', style = {}, ...rest }) {
  const ref = React.useRef(null);
  const [on, setOn] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    // Reveal immediately if already in (or near) the viewport on mount —
    // covers above-the-fold content where the observer's first callback
    // can be unreliable.
    const vh = window.innerHeight || 800;
    if (el.getBoundingClientRect().top < vh * 0.92) { setOn(true); return; }
    if (!('IntersectionObserver' in window)) { setOn(true); return; }
    const io = new IntersectionObserver((es) => {
      es.forEach((e) => { if (e.isIntersecting) { setOn(true); io.disconnect(); } });
    }, { threshold: 0.01, rootMargin: '0px 0px -8% 0px' });
    io.observe(el); return () => io.disconnect();
  }, []);
  const Tag = as;
  return (
    <Tag ref={ref} style={{ ...style, opacity: on ? 1 : 0, transform: on ? 'none' : `translateY(${y}px)`,
      transition: `opacity .7s cubic-bezier(.2,.7,.3,1) ${delay}ms, transform .7s cubic-bezier(.2,.7,.3,1) ${delay}ms` }} {...rest}>
      {children}
    </Tag>
  );
}

// container helper
function Container({ children, style = {} }) {
  return <div style={{ maxWidth: 1180, margin: '0 auto', padding: '0 clamp(20px, 5vw, 40px)', ...style }}>{children}</div>;
}

// responsive: true when viewport is narrow (tablet/phone)
function useNarrow(bp = 820) {
  const [n, setN] = React.useState(typeof window !== 'undefined' ? window.innerWidth <= bp : false);
  React.useEffect(() => {
    const on = () => setN(window.innerWidth <= bp);
    window.addEventListener('resize', on); on();
    return () => window.removeEventListener('resize', on);
  }, [bp]);
  return n;
}

Object.assign(window, { T, StageIcon, PillarIcon, Eyebrow, Reveal, Container, useNarrow });