// Shared primitives: Logo, icons, arrow, badges
const { useState, useEffect, useRef, useMemo } = React;

const Logo = ({ tone = 'light', size = 28 }) => {
  // White-label re-creation of the wordmark: "decisive" + "ZONE" boxed
  const fg = tone === 'light' ? 'var(--ink)' : 'var(--paper)';
  const box = 'var(--accent)';
  const boxText = 'var(--ink)';
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 0, lineHeight: 1, fontFamily: 'Sora, sans-serif', fontWeight: 600, fontSize: size, letterSpacing: '-0.02em' }}>
      <span style={{ color: fg }}>decisive</span>
      <span style={{
        background: box, color: boxText, padding: `4px 10px 5px`, marginLeft: 6,
        borderRadius: 4, letterSpacing: '0.02em', fontWeight: 700, fontSize: size * 0.85
      }}>ZONE</span>
    </div>
  );
};

// Simple monoline icons (24x24)
const Icon = ({ name, size = 22, stroke = 1.6, color = 'currentColor' }) => {
  const p = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: color, strokeWidth: stroke, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (name) {
    case 'arrow':       return <svg {...p}><path d="M5 12h14" /><path d="m13 6 6 6-6 6" /></svg>;
    case 'arrow-up':    return <svg {...p}><path d="M7 17 17 7" /><path d="M8 7h9v9" /></svg>;
    case 'phone':       return <svg {...p}><path d="M5 4h3l2 5-2.5 1.5a11 11 0 0 0 6 6L15 14l5 2v3a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z"/></svg>;
    case 'mail':        return <svg {...p}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>;
    case 'pin':         return <svg {...p}><path d="M12 21s-7-6.5-7-12a7 7 0 1 1 14 0c0 5.5-7 12-7 12z"/><circle cx="12" cy="9" r="2.5"/></svg>;
    case 'whatsapp':    return <svg {...p}><path d="M20 12a8 8 0 1 1-3.4-6.5L20 4l-1.5 3.4A8 8 0 0 1 20 12z"/><path d="M8.5 9.5c.3 2.4 2.6 4.7 5 5l1.5-1.2 2 1c-.2 1.6-1.5 2.7-3 2.7-3.6 0-7-3.4-7-7 0-1.5 1.1-2.8 2.7-3l1 2-1.2 1.5z" fill="currentColor" stroke="none"/></svg>;
    case 'check':       return <svg {...p}><path d="m5 12 4 4 10-10"/></svg>;
    case 'sparkle':     return <svg {...p}><path d="M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2.5 2.5M15.5 15.5 18 18M6 18l2.5-2.5M15.5 8.5 18 6"/></svg>;
    case 'compass':     return <svg {...p}><circle cx="12" cy="12" r="9"/><path d="m15 9-4 2-2 4 4-2 2-4z"/></svg>;
    case 'building':    return <svg {...p}><rect x="4" y="3" width="16" height="18" rx="1"/><path d="M9 8h2M13 8h2M9 12h2M13 12h2M9 16h2M13 16h2"/></svg>;
    case 'globe':       return <svg {...p}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></svg>;
    case 'anchor':      return <svg {...p}><circle cx="12" cy="6" r="2.5"/><path d="M12 8.5V21M5 14a7 7 0 0 0 14 0M3 14h4M17 14h4M9 13h6"/></svg>;
    case 'id':          return <svg {...p}><rect x="3" y="5" width="18" height="14" rx="2"/><circle cx="9" cy="11" r="2"/><path d="M5 17c1-2 3-3 4-3s3 1 4 3M14 10h4M14 13h4"/></svg>;
    case 'bank':        return <svg {...p}><path d="M3 10h18L12 3 3 10z"/><path d="M5 10v8M9 10v8M15 10v8M19 10v8M3 20h18"/></svg>;
    case 'calc':        return <svg {...p}><rect x="5" y="3" width="14" height="18" rx="2"/><path d="M9 7h6M8 12h.01M12 12h.01M16 12h.01M8 16h.01M12 16h.01M16 16h.01"/></svg>;
    case 'book':        return <svg {...p}><path d="M4 19V5a2 2 0 0 1 2-2h13v16H6a2 2 0 0 0-2 2z"/><path d="M19 19v2H6a2 2 0 0 1-2-2"/></svg>;
    case 'office':      return <svg {...p}><path d="M3 21V8l9-5 9 5v13"/><path d="M3 21h18M9 21v-6h6v6M9 11h2M13 11h2M9 7h2M13 7h2"/></svg>;
    case 'shield':      return <svg {...p}><path d="M12 3l8 3v6c0 5-3.5 8.5-8 9-4.5-.5-8-4-8-9V6l8-3z"/></svg>;
    case 'play':        return <svg {...p}><circle cx="12" cy="12" r="9"/><path d="m10 8 6 4-6 4V8z" fill="currentColor" stroke="none"/></svg>;
    case 'star':        return <svg {...p} fill="currentColor" stroke="none"><path d="m12 2 2.9 6.6 7.1.7-5.4 4.9 1.6 7-6.2-3.7L5.8 21l1.6-7L2 9.3l7.1-.7L12 2z"/></svg>;
    case 'minus':       return <svg {...p}><path d="M5 12h14"/></svg>;
    case 'plus':        return <svg {...p}><path d="M12 5v14M5 12h14"/></svg>;
    case 'chev-r':      return <svg {...p}><path d="m9 6 6 6-6 6"/></svg>;
    case 'chev-d':      return <svg {...p}><path d="m6 9 6 6 6-6"/></svg>;
    default: return null;
  }
};

const Pill = ({ children, tone = 'paper' }) => (
  <span style={{
    display: 'inline-flex', alignItems: 'center', gap: 6,
    padding: '5px 10px', borderRadius: 999,
    fontSize: 12, fontFamily: 'JetBrains Mono, monospace',
    background: tone === 'paper' ? 'var(--paper-2)' : tone === 'accent' ? 'var(--accent-tint)' : 'rgba(255,255,255,0.08)',
    color: tone === 'accent' ? 'var(--accent-2)' : 'var(--ink)',
    border: tone === 'paper' ? '1px solid var(--line)' : 'none'
  }}>{children}</span>
);

// Hook: in-view fade
const useReveal = () => {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current; if (!el) return;
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('fade-up'); obs.unobserve(e.target); }});
    }, { threshold: 0.12 });
    obs.observe(el);
    return () => obs.disconnect();
  }, []);
  return ref;
};

Object.assign(window, { Logo, Icon, Pill, useReveal });