// Shared primitives: logo, icons, small components.
// Each direction (A/B/C) provides its own Nav/Hero/etc; this file
// holds things truly common.

// ============================================================
// LOGO — official U.S. Silica wordmark + hourglass mark.
// `variant`: 'color' (default), 'white' (dark backgrounds),
// 'black' (mono). `size` is the rendered HEIGHT in px.
// ============================================================
function Logo({ size = 28, variant = 'color', style }) {
  const filter = variant === 'white' ? 'brightness(0) invert(1)'
    : variant === 'black' ? 'brightness(0)' : 'none';
  return (
    <img src="assets/logo-uss.webp" alt="U.S. Silica"
      style={{ height: size, width: 'auto', display: 'block', filter, ...style }} />
  );
}

// Legacy aliases preserved so nothing crashes during the rebrand.
function Logomark({ size = 28, color = 'currentColor' }) {
  return <Logo size={size} variant={color === 'var(--paper)' || color === '#fff' || color === 'white' ? 'white' : 'color'} />;
}

function Wordmark({ size = 14, weight, color, tracking, style }) {
  return (
    <span style={{
      fontFamily: 'IBM Plex Mono, monospace',
      fontWeight: weight || 600,
      letterSpacing: tracking || '0.18em',
      fontSize: size,
      color: color || 'currentColor',
      ...style,
    }}>U.S. SILICA</span>
  );
}

// ============================================================
// ICONS — minimal stroke set
// ============================================================
const Icon = {
  arrow: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" width={p.size||16} height={p.size||16}><path d="M5 12h14M13 5l7 7-7 7"/></svg>,
  arrowDown: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" width={p.size||16} height={p.size||16}><path d="M12 5v14M5 13l7 7 7-7"/></svg>,
  chev: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" width={p.size||14} height={p.size||14}><path d="M6 9l6 6 6-6"/></svg>,
  chevR: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" width={p.size||14} height={p.size||14}><path d="M9 6l6 6-6 6"/></svg>,
  download: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" width={p.size||16} height={p.size||16}><path d="M12 3v13m0 0l-5-5m5 5l5-5M4 21h16"/></svg>,
  search: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" width={p.size||16} height={p.size||16}><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>,
  check: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" width={p.size||16} height={p.size||16}><path d="M5 12l5 5L20 7"/></svg>,
  warn: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" width={p.size||16} height={p.size||16}><path d="M12 2L1 21h22L12 2z"/><path d="M12 9v6m0 4v.01"/></svg>,
  pin: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" width={p.size||16} height={p.size||16}><path d="M12 21s-7-7.5-7-12a7 7 0 1114 0c0 4.5-7 12-7 12z"/><circle cx="12" cy="9" r="2.5"/></svg>,
  factory: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" width={p.size||16} height={p.size||16}><path d="M3 21V10l5 3V10l5 3V7l8 4v10H3z"/></svg>,
  doc: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" width={p.size||16} height={p.size||16}><path d="M14 3H6a2 2 0 00-2 2v14a2 2 0 002 2h12a2 2 0 002-2V9l-6-6z"/><path d="M14 3v6h6M8 13h8M8 17h6"/></svg>,
  beaker: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" width={p.size||16} height={p.size||16}><path d="M9 3v6L4 19a2 2 0 002 3h12a2 2 0 002-3l-5-10V3"/><path d="M8 3h8"/></svg>,
  truck: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" width={p.size||16} height={p.size||16}><path d="M3 7h11v10H3zM14 11h4l3 3v3h-7z"/><circle cx="7" cy="18" r="2"/><circle cx="17" cy="18" r="2"/></svg>,
  external: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" width={p.size||14} height={p.size||14}><path d="M14 4h6v6M20 4L10 14M19 13v7H4V5h7"/></svg>,
  filter: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" width={p.size||16} height={p.size||16}><path d="M3 5h18M6 12h12M10 19h4"/></svg>,
  close: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" width={p.size||16} height={p.size||16}><path d="M6 6l12 12M18 6L6 18"/></svg>,
  plus: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" width={p.size||16} height={p.size||16}><path d="M12 5v14M5 12h14"/></svg>,
};

// ============================================================
// US MAP SVG — simplified stylized outline. Used by the
// facilities map and by Direction A's footprint section.
// Not geographic-accurate; a designed silhouette in path data.
// ============================================================
const US_MAP_D = "M52 152 L48 130 L52 110 L70 95 L98 85 L130 80 L168 78 L210 75 L250 72 L295 70 L340 65 L390 60 L440 55 L490 52 L540 50 L590 55 L640 60 L690 70 L730 80 L770 90 L800 105 L820 125 L830 145 L825 168 L815 188 L800 205 L780 220 L760 230 L730 235 L700 240 L680 250 L660 265 L640 280 L610 295 L580 305 L550 310 L520 315 L490 320 L460 318 L430 312 L400 305 L370 298 L340 285 L310 275 L285 260 L260 245 L240 230 L220 215 L200 200 L180 188 L160 178 L140 170 L120 165 L98 162 L78 160 L60 158 Z";

// Cluster of 40 mid-Atlantic-y region states with abbreviations to overlay on map (approx).
const STATE_MARKS = [
  // Pacific
  { x: 80, y: 130, label: 'WA' }, { x: 80, y: 175, label: 'OR' }, { x: 100, y: 210, label: 'CA' },
  // Mountain
  { x: 165, y: 165, label: 'MT' }, { x: 220, y: 165, label: 'ND' },
  { x: 215, y: 215, label: 'CO' }, { x: 175, y: 215, label: 'UT' }, { x: 140, y: 235, label: 'NV' },
  // Plains
  { x: 290, y: 165, label: 'MN' }, { x: 295, y: 220, label: 'IA' }, { x: 260, y: 250, label: 'KS' },
  // South
  { x: 320, y: 290, label: 'TX' }, { x: 400, y: 305, label: 'LA' },
  // Midwest
  { x: 380, y: 210, label: 'IL' }, { x: 420, y: 200, label: 'IN' }, { x: 460, y: 195, label: 'OH' },
  // East
  { x: 540, y: 195, label: 'PA' }, { x: 580, y: 190, label: 'NJ' }, { x: 600, y: 180, label: 'NY' },
  { x: 540, y: 240, label: 'WV' }, { x: 560, y: 250, label: 'VA' }, { x: 520, y: 280, label: 'TN' },
  { x: 555, y: 295, label: 'NC' }, { x: 555, y: 320, label: 'SC' }, { x: 510, y: 325, label: 'GA' },
  { x: 545, y: 360, label: 'FL' },
];

// ============================================================
// Striped photo placeholder — fallback when image missing
// ============================================================
function PhotoPlaceholder({ label = 'PHOTO', height = 220 }) {
  return (
    <div style={{
      height, width: '100%',
      background: 'repeating-linear-gradient(135deg, #d8d2c4 0 12px, #cbc4b3 12px 24px)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontFamily: 'IBM Plex Mono, monospace', fontSize: 11, letterSpacing: '0.15em',
      color: 'rgba(0,0,0,0.5)', textTransform: 'uppercase',
    }}>{label}</div>
  );
}

// ============================================================
// Photo — with intrinsic ratio + object-fit cover
// ============================================================
function Photo({ src, alt = '', height, width = '100%', radius = 0, style }) {
  return (
    <img src={src} alt={alt} style={{
      width, height, objectFit: 'cover', borderRadius: radius, display: 'block',
      ...style,
    }} />
  );
}

// ============================================================
// AnimatedCount — counts up when mounted
// ============================================================
function AnimatedCount({ to, prefix = '', suffix = '', duration = 1200, decimals = 0 }) {
  const [val, setVal] = React.useState(0);
  React.useEffect(() => {
    const start = performance.now();
    let raf;
    const tick = (t) => {
      const p = Math.min(1, (t - start) / duration);
      const eased = 1 - Math.pow(1 - p, 3);
      setVal(eased * to);
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [to]);
  return <span>{prefix}{val.toFixed(decimals)}{suffix}</span>;
}

// ============================================================
// Magnetic button — subtle hover lift
// ============================================================
function MagButton({ children, onClick, variant = 'primary', dir = 'a', size = 'md', style, ...rest }) {
  const sizes = {
    sm: { padding: '8px 14px', fontSize: 13 },
    md: { padding: '12px 22px', fontSize: 14 },
    lg: { padding: '16px 28px', fontSize: 15 },
  };
  const base = {
    border: 'none', borderRadius: dir === 'b' ? 6 : (dir === 'c' ? 999 : 4),
    fontFamily: dir === 'a' ? 'Geist, sans-serif' : (dir === 'b' ? 'IBM Plex Sans' : 'Bricolage Grotesque, sans-serif'),
    fontWeight: 500, cursor: 'pointer',
    transition: 'transform .15s, background .15s, color .15s, box-shadow .15s',
    display: 'inline-flex', alignItems: 'center', gap: 8, lineHeight: 1,
    ...sizes[size],
  };
  const variants = {
    primary: { background: 'var(--ink)', color: 'var(--paper)' },
    accent: { background: 'var(--accent)', color: dir === 'c' ? 'var(--bg-deep)' : '#fff' },
    ghost: { background: 'transparent', color: 'var(--ink)', boxShadow: '0 0 0 1px var(--line) inset' },
    invert: { background: 'var(--paper)', color: 'var(--ink)' },
  };
  return (
    <button onClick={onClick} style={{ ...base, ...variants[variant], ...style }}
      onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-1px)'; }}
      onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; }}
      {...rest}>
      {children}
    </button>
  );
}

// ============================================================
// Browser chrome (for artboard sense-of-place)
// ============================================================
function BrowserChrome({ url = 'ussilica.com', dark = false }) {
  const bg = dark ? '#1a1814' : '#e9e3d6';
  const fg = dark ? 'rgba(255,255,255,0.55)' : 'rgba(0,0,0,0.5)';
  return (
    <div style={{
      height: 36, background: bg, display: 'flex', alignItems: 'center', gap: 10,
      padding: '0 14px', borderBottom: `1px solid ${dark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.08)'}`,
      flex: '0 0 auto',
    }}>
      <div style={{ display: 'flex', gap: 6 }}>
        <span style={{ width: 10, height: 10, borderRadius: 99, background: '#ed6a5e' }} />
        <span style={{ width: 10, height: 10, borderRadius: 99, background: '#f4be4f' }} />
        <span style={{ width: 10, height: 10, borderRadius: 99, background: '#62c554' }} />
      </div>
      <div style={{
        flex: 1, height: 22, background: dark ? 'rgba(255,255,255,0.06)' : 'rgba(255,255,255,0.7)',
        borderRadius: 5, display: 'flex', alignItems: 'center', gap: 8, padding: '0 10px',
        fontSize: 11, color: fg, fontFamily: 'IBM Plex Mono, monospace',
      }}>
        <span style={{ width: 11, height: 11 }}>{Icon.search({ size: 11 })}</span>
        <span>https://{url}</span>
      </div>
    </div>
  );
}

Object.assign(window, {
  Logo, Logomark, Wordmark, Icon, PhotoPlaceholder, Photo,
  AnimatedCount, MagButton, BrowserChrome,
  US_MAP_D, STATE_MARKS,
});