// Primitives shared across all pages.

const Icon = ({ name, size = 20, stroke = 1.6, className = "", style }) => {
  const common = {
    viewBox: "0 0 24 24", fill: "none", stroke: "currentColor",
    strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round",
    width: size, height: size, className, style,
  };
  const paths = {
    arrow: <><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></>,
    arrowUpRight: <><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></>,
    check: <polyline points="20 6 9 17 4 12" />,
    x: <><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></>,
    dash: <line x1="5" y1="12" x2="19" y2="12"/>,
    circle: <circle cx="12" cy="12" r="9"/>,
    circleDot: <><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3" fill="currentColor"/></>,
    chevronR: <polyline points="9 6 15 12 9 18" />,
    chevronD: <polyline points="6 9 12 15 18 9" />,
    terminal: <><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></>,
    database: <><ellipse cx="12" cy="5" rx="8" ry="3"/><path d="M4 5v6c0 1.66 3.58 3 8 3s8-1.34 8-3V5"/><path d="M4 11v6c0 1.66 3.58 3 8 3s8-1.34 8-3v-6"/></>,
    layers: <><polygon points="12 2 22 7 12 12 2 7"/><polyline points="2 12 12 17 22 12"/><polyline points="2 17 12 22 22 17"/></>,
    cpu: <><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><path d="M9 1v3M15 1v3M9 20v3M15 20v3M1 9h3M1 15h3M20 9h3M20 15h3"/></>,
    network: <><circle cx="12" cy="5" r="2"/><circle cx="5" cy="19" r="2"/><circle cx="19" cy="19" r="2"/><path d="M12 7v4M7 19l4-6M17 19l-4-6"/></>,
    shield: <path d="M12 2l8 4v6c0 5-3.4 9.3-8 10-4.6-.7-8-5-8-10V6z"/>,
    shieldCheck: <><path d="M12 2l8 4v6c0 5-3.4 9.3-8 10-4.6-.7-8-5-8-10V6z"/><polyline points="9 12 11 14 15 10"/></>,
    target: <><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1"/></>,
    trend: <><polyline points="22 7 13 16 9 12 2 19"/><polyline points="16 7 22 7 22 13"/></>,
    calendar: <><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></>,
    mail: <><rect x="2" y="4" width="20" height="16" rx="2"/><polyline points="2 7 12 13 22 7"/></>,
    map: <><polygon points="1 6 8 3 16 6 23 3 23 18 16 21 8 18 1 21"/><line x1="8" y1="3" x2="8" y2="18"/><line x1="16" y1="6" x2="16" y2="21"/></>,
    search: <><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></>,
    zap: <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />,
    book: <><path d="M4 4a2 2 0 0 1 2-2h14v18H6a2 2 0 0 0-2 2z"/><path d="M4 4v16"/></>,
    lock: <><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></>,
    people: <><circle cx="9" cy="8" r="4"/><path d="M2 20c0-4 3-6 7-6s7 2 7 6"/><circle cx="17" cy="6" r="3"/><path d="M22 17c0-3-2-4.5-5-4.5"/></>,
    github: <path d="M12 2C6.5 2 2 6.6 2 12.2c0 4.5 2.9 8.3 6.8 9.6.5.1.7-.2.7-.5v-1.8c-2.8.6-3.4-1.2-3.4-1.2-.5-1.2-1.1-1.5-1.1-1.5-.9-.6.1-.6.1-.6 1 .1 1.5 1 1.5 1 .9 1.5 2.3 1.1 2.9.8.1-.6.3-1.1.6-1.3-2.2-.3-4.5-1.1-4.5-5 0-1.1.4-2 1-2.7-.1-.3-.4-1.3.1-2.7 0 0 .8-.3 2.7 1 .8-.2 1.6-.3 2.5-.3s1.7.1 2.5.3c1.9-1.3 2.7-1 2.7-1 .5 1.4.2 2.4.1 2.7.6.7 1 1.6 1 2.7 0 3.9-2.3 4.7-4.5 5 .4.3.7.9.7 1.8v2.6c0 .3.2.6.7.5 3.9-1.3 6.8-5.1 6.8-9.6C22 6.6 17.5 2 12 2z"/>,
    linkedin: <><rect x="2" y="2" width="20" height="20" rx="2"/><line x1="8" y1="10" x2="8" y2="17"/><line x1="12" y1="17" x2="12" y2="13"/><path d="M12 13a2 2 0 0 1 4 0v4"/><circle cx="8" cy="6.5" r="1" fill="currentColor"/></>,
    briefcase: <><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></>,
    flag: <><path d="M4 21V4"/><path d="M4 4h12l-2 4 2 4H4"/></>,
  };
  return <svg {...common}>{paths[name] || null}</svg>;
};

const Eyebrow = ({ children, dark, muted, className = "" }) => (
  <div className={`eyebrow ${dark ? 'dark' : ''} ${muted ? 'muted' : ''} ${className}`}>{children}</div>
);

const Chip = ({ children, live, dark, className = "" }) => (
  <span className={`chip ${live ? 'chip-live' : ''} ${dark ? 'chip-dark' : ''} ${className}`}>
    <span className="chip-dot" />
    {children}
  </span>
);

// FPDS monogram — navy rounded-square with pixel-grid texture; 2x2 "FPDS"
const BrandGlyph = ({ size = 44 }) => {
  const radius = Math.round(size * 0.27);
  const fontSize = Math.round(size * 0.26);
  return (
    <div
      className="no-select"
      style={{
        position: 'relative', width: size, height: size, borderRadius: radius,
        background: '#000080',
        boxShadow: '0 8px 24px -6px rgba(0,0,128,0.55), inset 0 0 0 1px rgba(255,255,255,0.08)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        overflow: 'hidden',
        flex: 'none',
      }}>
      {/* pixel grid texture */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'linear-gradient(to right, rgba(255,255,255,0.12) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.12) 1px, transparent 1px)',
        backgroundSize: `${Math.max(4, Math.round(size/10))}px ${Math.max(4, Math.round(size/10))}px`,
        maskImage: 'radial-gradient(circle at 50% 55%, black 35%, transparent 85%)',
        WebkitMaskImage: 'radial-gradient(circle at 50% 55%, black 35%, transparent 85%)',
        pointerEvents: 'none',
      }}/>
      <div style={{
        position: 'relative',
        display: 'grid', gridTemplateColumns: '1fr 1fr', gridTemplateRows: '1fr 1fr',
        width: '62%', height: '62%',
        fontFamily: 'var(--font-mono)', fontWeight: 700,
        fontSize, color: '#fff',
        lineHeight: 1,
      }}>
        <span style={{ display:'flex',alignItems:'center',justifyContent:'center' }}>F</span>
        <span style={{ display:'flex',alignItems:'center',justifyContent:'center' }}>P</span>
        <span style={{ display:'flex',alignItems:'center',justifyContent:'center' }}>D</span>
        <span style={{ display:'flex',alignItems:'center',justifyContent:'center', color:'#93C5FD' }}>S</span>
      </div>
    </div>
  );
};

const BrandLockup = ({ variant = 'nav', onClick }) => {
  // variants: 'nav' (sm, horizontal), 'stack' (vertical)
  if (variant === 'stack') {
    return (
      <div style={{display:'flex', flexDirection:'column', alignItems:'center', gap:14}}>
        <BrandGlyph size={64} />
        <div style={{display:'flex', flexDirection:'column', alignItems:'center', gap:4}}>
          <div style={{fontSize:22, fontWeight:800, letterSpacing:'-0.02em'}}>Kenosa Consulting</div>
          <div className="mono-label" style={{color:'#3B82F6', fontSize:9}}>FEDERAL PROCUREMENT DECISION SUBSTRATE</div>
        </div>
      </div>
    );
  }
  return (
    <a href="#/home" onClick={onClick} style={{display:'flex', alignItems:'center', gap:10}}>
      <BrandGlyph size={32} />
      <div style={{display:'flex', flexDirection:'column', lineHeight:1}}>
        <span style={{fontSize:14, fontWeight:800, color:'var(--slate-900)', letterSpacing:'-0.01em'}}>Kenosa · FPDS</span>
        <span className="mono-label" style={{fontSize:8, marginTop:3, letterSpacing:'0.26em'}}>EVIDENCE SUBSTRATE</span>
      </div>
    </a>
  );
};

// Reveal hook — IntersectionObserver
const useReveal = () => {
  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal:not(.in)');
    if (!('IntersectionObserver' in window)) { els.forEach(el => el.classList.add('in')); return; }
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); }
      });
    }, { rootMargin: '-40px 0px', threshold: 0.1 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  });
};

// Scroll progress bar
const ScrollProgress = () => {
  const [pct, setPct] = React.useState(0);
  React.useEffect(() => {
    const onScroll = () => {
      const h = document.documentElement;
      const scrolled = h.scrollTop / (h.scrollHeight - h.clientHeight || 1);
      setPct(Math.max(0, Math.min(1, scrolled)));
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <div style={{position:'fixed', top:0, left:0, right:0, height:2, zIndex:100, pointerEvents:'none'}}>
      <div style={{ height: '100%', background: '#000080', transformOrigin: 'left', transform: `scaleX(${pct})`, transition: 'transform 0.1s linear' }}/>
    </div>
  );
};

// Section wrapper
const Section = ({ id, dark, tint, grid, children, style = {}, className = "" }) => {
  const bg = dark ? '#0B1222' : tint ? 'var(--slate-50)' : '#fff';
  return (
    <section id={id} className={`section ${className}`} style={{ background: bg, position:'relative', overflow:'hidden', ...style }}>
      {grid && <div className={dark ? 'grid-pattern-dark' : 'grid-pattern'} style={{position:'absolute', inset:0, opacity: dark ? 0.4 : 0.5, pointerEvents:'none'}}/>}
      <div className="container" style={{position:'relative'}}>{children}</div>
    </section>
  );
};

// Stat tile
const StatTile = ({ num, label, sub, dark }) => (
  <div>
    <div className={`stat-num ${dark ? 'dark' : ''}`}>{num}</div>
    <div className="mono-label" style={{marginTop:8, color: dark?'#60A5FA':'#000080'}}>{label}</div>
    {sub && <div style={{marginTop:4, fontSize:13, color: dark?'#94A3B8':'var(--slate-500)'}}>{sub}</div>}
  </div>
);

Object.assign(window, { Icon, Eyebrow, Chip, BrandGlyph, BrandLockup, useReveal, ScrollProgress, Section, StatTile });