/* Shared building blocks across V1/V2/V3 */

function XinnoLogo({ className = '', size = 24, variant = 'orange' }) {
  // For dark backgrounds, use the real white logo PNG
  if (variant === 'white' || variant === 'dark') {
    return (
      <img
        src="images/Xinno-logo-RGB_DIAP-2.png"
        alt="Xinno"
        className={className}
        style={{ height: size + 'px', width: 'auto', display: 'inline-block' }}
      />
    );
  }
  // Light background: CSS wordmark (orange with accent dot — until vector logo is delivered)
  return (
    <span className={`xinno-wm ${className}`} style={{ fontSize: size + 'px' }}>xinno</span>
  );
}

function PhotoSlot({ width, height, label, corner, src, alt, style = {}, className = '' }) {
  if (src) {
    return (
      <div className={`photo-slot photo-slot--filled ${className}`} style={{ width: width || '100%', height: height || '100%', position: 'relative', overflow: 'hidden', ...style }}>
        <img src={src} alt={alt || label || ''} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
        {corner ? <div className="photo-slot__corner" style={{ position: 'absolute', top: 12, left: 14, fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: '#fff', letterSpacing: '0.16em', textTransform: 'uppercase', textShadow: '0 1px 2px rgba(0,0,0,0.5)' }}>{corner}</div> : null}
      </div>
    );
  }
  return (
    <div
      className={`photo-slot ${className}`}
      data-needs={label}
      style={{ width: width || '100%', height: height || '100%', ...style }}
    >
      {corner ? <div className="photo-slot__corner">{corner}</div> : null}
      <div className="photo-slot__label">{label}</div>
    </div>
  );
}

/* Wistia thumb — uses Wistia's auto-generated swatch URL */
function WistiaThumb({ id, duration, title, height = 200, style = {} }) {
  return (
    <a
      href={`https://fast.wistia.net/embed/medias/${id}`}
      target="_blank"
      rel="noopener noreferrer"
      style={{ display: 'block', position: 'relative', height, overflow: 'hidden', cursor: 'pointer', borderRadius: 2, ...style }}
    >
      <img
        src={`https://fast.wistia.com/embed/medias/${id}/swatch`}
        alt={title}
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', filter: 'brightness(0.85)' }}
        loading="lazy"
      />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%)' }} />
      <div style={{ position: 'absolute', top: 14, left: 16, fontFamily: "'JetBrains Mono', monospace", fontSize: 10.5, color: '#fff', letterSpacing: '0.18em', textTransform: 'uppercase' }}>
        {duration} · {title}
      </div>
      <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <div style={{ width: 56, height: 56, borderRadius: '50%', background: '#FF6900', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: 20, paddingLeft: 4 }}>▶</div>
      </div>
    </a>
  );
}

/* X-diagonal — the brand signature chevron. Direction: left → right */
function XDiagonal({ width = 100, height = 60, fill = '#FF6900', style = {}, stroke = false, strokeWidth = 1.2 }) {
  return (
    <svg
      viewBox="0 0 100 60"
      preserveAspectRatio="none"
      width={width}
      height={height}
      style={{ display: 'block', ...style }}
    >
      <polygon
        points="0,0 70,0 100,30 70,60 0,60"
        fill={stroke ? 'none' : fill}
        stroke={stroke ? fill : 'none'}
        strokeWidth={stroke ? strokeWidth : 0}
      />
    </svg>
  );
}

/* Customer logo — renders real <img> if src provided, else CSS wordmark */
function CustomerLogo({ name, src, weight = 600, italic = false, mono = false, caps = false, letterSpacing, fontSize = 18, opacity = 0.55, maxHeight = 32 }) {
  if (src) {
    return (
      <img
        src={src}
        alt={name}
        style={{
          maxHeight,
          width: 'auto',
          objectFit: 'contain',
          opacity,
          display: 'inline-block',
        }}
      />
    );
  }
  return (
    <span
      style={{
        fontFamily: mono ? "'JetBrains Mono', monospace" : "'Inter', sans-serif",
        fontWeight: weight,
        fontStyle: italic ? 'italic' : 'normal',
        textTransform: caps ? 'uppercase' : 'none',
        letterSpacing: letterSpacing || (caps ? '0.16em' : '-0.01em'),
        fontSize: fontSize + 'px',
        color: '#394A58',
        opacity,
        whiteSpace: 'nowrap',
      }}
    >{name}</span>
  );
}

/* Klant logos — real PNG/SVG where available, CSS wordmark fallback */
const KLANT_LOGOS = [
  { name: 'SOLV', src: 'images/SOLV-LOGO-KLEUR-MEDIUM.png', maxHeight: 28 },
  { name: 'SIX', src: 'images/logo_six.png', maxHeight: 28 },
  { name: 'Parker', src: 'images/Parker-10-jaar-jubileum-logo-1000px.webp', maxHeight: 32 },
  { name: 'Hekkelman', weight: 500, italic: true, fontSize: 20 },
  { name: 'De Roos', src: 'images/de-roos-advocaten-logo.png', maxHeight: 28 },
  { name: 'Buren', weight: 700, caps: true, letterSpacing: '0.12em', fontSize: 18 },
  { name: 'Brande & Verheij', weight: 500, italic: true, fontSize: 17 },
];

/* Partner logos for Over ons — all real PNG/SVG */
const PARTNER_LOGOS = [
  { name: 'Microsoft', src: 'images/Microsoft-Logo-900x506.png', maxHeight: 28 },
  { name: 'iManage', src: 'images/iManage-logo-1-450x253.png', maxHeight: 32 },
  { name: 'Kofax', src: 'images/kofax-inc-vector-logo-1-450x250.webp', maxHeight: 28 },
  { name: 'NetDocuments', src: 'images/netdocuments-logo-660x330-2-450x254.png', maxHeight: 28 },
  { name: 'Legalsense', src: 'images/Legalsense-logo.svg', maxHeight: 32 },
];

/* Xinno's Wistia video IDs (verified in text-content.json) */
const XINNO_VIDEOS = [
  { id: 'bi37avkzj5', dur: '2 MIN', title: 'Wat zijn de trends?' },
  { id: 'eljvod5pzw', dur: '3 MIN', title: 'Advies aan startende ondernemer' },
  { id: '7nlhfnza4w', dur: '2 MIN', title: 'AI gaat toch ten koste van de omzet?' },
];

Object.assign(window, { XinnoLogo, PhotoSlot, WistiaThumb, XDiagonal, CustomerLogo, KLANT_LOGOS, PARTNER_LOGOS, XINNO_VIDEOS });