// SiteShared.jsx — shared atoms (icons, buttons, placeholders) used across the site
const Icon = ({ name, size = 20, stroke = 1.75 }) => {
  const p = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: stroke, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (name) {
    case 'lighting': return <svg {...p}><path d="M9 18h6"/><path d="M10 22h4"/><path d="M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0 0 18 8 6 6 0 0 0 6 8c0 1 .23 2.23 1.5 3.5A4.61 4.61 0 0 1 8.91 14"/></svg>;
    case 'audio': return <svg {...p}><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"/></svg>;
    case 'video': return <svg {...p}><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2"/></svg>;
    case 'staging': return <svg {...p}><rect x="3" y="14" width="18" height="6" rx="1"/><path d="M5 14V8h14v6"/><path d="M9 8V4h6v4"/></svg>;
    case 'rigging': return <svg {...p}><path d="M3 6h18"/><path d="M6 6v3"/><path d="M12 6v3"/><path d="M18 6v3"/><circle cx="6" cy="13" r="2"/><circle cx="12" cy="13" r="2"/><circle cx="18" cy="13" r="2"/></svg>;
    case 'crew': return <svg {...p}><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>;
    case 'check': return <svg {...p}><polyline points="20 6 9 17 4 12"/></svg>;
    case 'arrow-right': return <svg {...p}><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>;
    case 'mail': return <svg {...p}><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m2 7 10 6 10-6"/></svg>;
    case 'phone': return <svg {...p}><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.18 4.18 2 2 0 0 1 4.17 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>;
    case 'pin': return <svg {...p}><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>;
    case 'ig': return <svg {...p}><rect x="2" y="2" width="20" height="20" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="0.5" fill="currentColor"/></svg>;
    case 'globe': return <svg {...p}><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>;
    default: return null;
  }
};

const Placeholder = ({ pin, label, height = 240, idx = 0, hue = 0, img }) => {
  // 4 different stylized placeholder treatments to keep the portfolio visually rich
  const variant = idx % 4;
  const baseGrad = [
    'radial-gradient(ellipse at 20% 30%, rgba(60,129,189,0.45), transparent 60%), radial-gradient(ellipse at 80% 70%, rgba(224,36,123,0.55), transparent 60%), linear-gradient(135deg, #1B1325, #0A0A0F)',
    'radial-gradient(ellipse at 70% 30%, rgba(224,36,123,0.6), transparent 55%), radial-gradient(ellipse at 30% 80%, rgba(110,46,165,0.5), transparent 60%), linear-gradient(180deg, #221428, #0A0A0F)',
    'radial-gradient(ellipse at 50% 0%, rgba(60,129,189,0.55), transparent 60%), linear-gradient(180deg, #0F1A2A, #0A0A0F)',
    'conic-gradient(from 200deg at 60% 40%, rgba(224,36,123,0.5), rgba(110,46,165,0.4), rgba(60,129,189,0.4), rgba(224,36,123,0.5)), #0A0A0F',
  ][variant];
  return (
    <div style={{ position: 'relative', overflow: 'hidden', height, borderRadius: 16, border: '1px solid var(--ssl-stroke-1)', background: baseGrad }}>
      {/* real photo, if provided */}
      {img && <img src={img} alt={label || pin || ''} loading="lazy" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}/>}
      {/* scanline / grid texture overlay — only on gradient placeholders */}
      {!img && <div style={{ position: 'absolute', inset: 0, opacity: 0.4, backgroundImage: 'linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px)', backgroundSize: variant === 2 ? '4px 4px' : '24px 24px', pointerEvents: 'none' }}/>}
      {/* legibility scrim for overlays on real photos */}
      {img && (pin || label) && <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', background: 'linear-gradient(180deg, rgba(0,0,0,0.35) 0%, transparent 26%, transparent 62%, rgba(0,0,0,0.55) 100%)' }}/>}
      {pin && <span style={{ position: 'absolute', top: 14, left: 16, fontFamily: 'var(--ssl-font-body)', fontSize: 10, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.92)', background: 'rgba(0,0,0,0.4)', backdropFilter: 'blur(6px)', padding: '5px 10px', borderRadius: 999, border: '1px solid rgba(255,255,255,0.14)' }}>{pin}</span>}
      {label && <span style={{ position: 'absolute', bottom: 14, left: 16, fontFamily: 'var(--ssl-font-mono)', fontSize: 11, color: 'rgba(255,255,255,0.82)', textShadow: img ? '0 1px 4px rgba(0,0,0,0.6)' : 'none' }}>{label}</span>}
    </div>
  );
};

const PrimaryBtn = ({ children, onClick, theme, type = 'button', disabled = false }) => (
  <button onClick={onClick} type={type} disabled={disabled} style={{
    background: 'var(--ssl-gradient-stage)',
    color: 'white', fontFamily: 'var(--ssl-font-body)', fontWeight: 600, fontSize: 14,
    padding: '13px 22px', borderRadius: 10, border: 0, cursor: disabled ? 'not-allowed' : 'pointer',
    display: 'inline-flex', alignItems: 'center', gap: 8,
    transition: 'all 240ms var(--ssl-ease-out)',
    boxShadow: '0 1px 0 rgba(255,255,255,0.12) inset',
    opacity: disabled ? 0.6 : 1,
  }}
  onMouseEnter={e => { if (disabled) return; e.currentTarget.style.boxShadow = '0 1px 0 rgba(255,255,255,0.12) inset, var(--ssl-glow-stage)'; e.currentTarget.style.transform = 'translateY(-1px)'; }}
  onMouseLeave={e => { e.currentTarget.style.boxShadow = '0 1px 0 rgba(255,255,255,0.12) inset'; e.currentTarget.style.transform = 'none'; }}
  >{children}</button>
);

const SecondaryBtn = ({ children, onClick, theme }) => (
  <button onClick={onClick} style={{
    background: 'transparent',
    color: theme === 'light' ? '#0A0A0F' : 'white',
    fontFamily: 'var(--ssl-font-body)', fontWeight: 600, fontSize: 14,
    padding: '12px 22px', borderRadius: 10, cursor: 'pointer',
    border: '1px solid ' + (theme === 'light' ? 'rgba(0,0,0,0.18)' : 'rgba(255,255,255,0.22)'),
    transition: 'all 240ms var(--ssl-ease-out)',
    display: 'inline-flex', alignItems: 'center', gap: 8,
  }}
  onMouseEnter={e => { e.currentTarget.style.background = theme === 'light' ? 'rgba(0,0,0,0.04)' : 'rgba(255,255,255,0.06)'; }}
  onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; }}
  >{children}</button>
);

window.Icon = Icon;
window.Placeholder = Placeholder;
window.PrimaryBtn = PrimaryBtn;
window.SecondaryBtn = SecondaryBtn;