// PlatformChips — "Platform Experts at Work" band.
// Default: brand glyph + platform name set as a wordmark unit (large, bold, brand color).
// Compact icon-only fallback is exposed via the `compact` prop for tight spaces.
function PlatformChips({ compact = false }) {
  const chips = [
    { label: "TikTok",     Icon: TikTokIcon,     color: "#000",     family: '"Helvetica Neue", Arial, sans-serif' },
    { label: "Instagram",  Icon: InstagramIcon,  color: "#111",     family: '"Helvetica Neue", Arial, sans-serif' },
    { label: "Facebook",   Icon: FacebookIcon,   color: "#1877F2",  family: '"Helvetica Neue", Arial, sans-serif' },
    { label: "LinkedIn",   Icon: LinkedInIcon,   color: "#0A66C2",  family: '"Helvetica Neue", Arial, sans-serif' },
    { label: "YouTube",    Icon: YouTubeIcon,    color: "#111",     family: '"Helvetica Neue", Arial, sans-serif' },
    { label: "Threads",    Icon: ThreadsIcon,    color: "#000",     family: '"Helvetica Neue", Arial, sans-serif' },
    { label: "X",          Icon: XIcon,          color: "#000",     family: '"Helvetica Neue", Arial, sans-serif' },
    { label: "Pinterest",  Icon: PinterestIcon,  color: "#BD081C",  family: '"Helvetica Neue", Arial, sans-serif' },
  ];

  return (
    <section style={{background:'#fff', padding:'88px 0'}}>
      <div className="wrap" style={{textAlign:'center'}}>
        <div className="eyebrow" style={{letterSpacing:'.18em', fontSize: 12, fontWeight:700, textTransform:'uppercase', color:'#B11871', marginBottom: 36}}>
          Platform Experts at Work
        </div>

        {compact ? (
          /* Compact fallback — icon-only chips for tight layouts */
          <div style={{display:'flex', flexWrap:'wrap', gap: 14, justifyContent:'center'}}>
            {chips.map(c => (
              <span key={c.label} title={c.label} style={{
                width: 44, height: 44, borderRadius: 999,
                background: '#fff', border: '1.5px solid #e6e6e6',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center'
              }}>
                <span style={{display:'block', width: 22, height: 22}}>
                  <c.Icon color={c.color}/>
                </span>
              </span>
            ))}
          </div>
        ) : (
          /* Default — full wordmark units in a generous grid */
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
            columnGap: 32, rowGap: 36,
            maxWidth: 880, margin: '0 auto'
          }}>
            {chips.map(c => (
              <div key={c.label} style={{
                display: 'inline-flex', alignItems: 'center',
                gap: 12, justifyContent: 'center'
              }}>
                <span style={{display:'block', width: 28, height: 28, flexShrink: 0}}>
                  <c.Icon color={c.color}/>
                </span>
                <span style={{
                  fontFamily: c.family,
                  fontWeight: 700,
                  fontSize: 22,
                  letterSpacing: '-.01em',
                  color: c.color,
                  lineHeight: 1
                }}>{c.label}</span>
              </div>
            ))}
          </div>
        )}
      </div>
    </section>
  );
}

/* ---- Official platform marks (simplified, accurate glyphs) ---- */

function InstagramIcon({color = '#E1306C'}) {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <defs>
        <linearGradient id="ig-grad" x1="0%" y1="100%" x2="100%" y2="0%">
          <stop offset="0%" stopColor="#F58529"/>
          <stop offset="40%" stopColor="#DD2A7B"/>
          <stop offset="70%" stopColor="#8134AF"/>
          <stop offset="100%" stopColor="#515BD4"/>
        </linearGradient>
      </defs>
      <rect x="2" y="2" width="20" height="20" rx="5" fill="none" stroke="url(#ig-grad)" strokeWidth="2"/>
      <circle cx="12" cy="12" r="4.2" fill="none" stroke="url(#ig-grad)" strokeWidth="2"/>
      <circle cx="17.5" cy="6.5" r="1.2" fill="url(#ig-grad)"/>
    </svg>
  );
}

function TikTokIcon() {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true">
      {/* layered offset glyph in TikTok style */}
      <path d="M14 3h2.2c.2 1.3.9 2.4 1.9 3.2.9.7 2 1.1 3.2 1.1v2.4c-1.9 0-3.6-.6-5.1-1.6v6.7c0 3.6-2.9 6.5-6.5 6.5S3.2 18.4 3.2 14.8 6.1 8.3 9.7 8.3c.5 0 .9 0 1.4.1v2.5c-.4-.1-.9-.2-1.4-.2-2.3 0-4.1 1.8-4.1 4.1s1.8 4.1 4.1 4.1 4.1-1.8 4.1-4.1V3z" fill="#000"/>
      <path d="M14 3h2.2c.2 1.3.9 2.4 1.9 3.2.9.7 2 1.1 3.2 1.1v2.4c-1.9 0-3.6-.6-5.1-1.6v6.7c0 3.6-2.9 6.5-6.5 6.5S3.2 18.4 3.2 14.8 6.1 8.3 9.7 8.3c.5 0 .9 0 1.4.1v2.5c-.4-.1-.9-.2-1.4-.2-2.3 0-4.1 1.8-4.1 4.1s1.8 4.1 4.1 4.1 4.1-1.8 4.1-4.1V3z" fill="#25F4EE" transform="translate(-1.2,-.8)" style={{mixBlendMode:'screen'}}/>
      <path d="M14 3h2.2c.2 1.3.9 2.4 1.9 3.2.9.7 2 1.1 3.2 1.1v2.4c-1.9 0-3.6-.6-5.1-1.6v6.7c0 3.6-2.9 6.5-6.5 6.5S3.2 18.4 3.2 14.8 6.1 8.3 9.7 8.3c.5 0 .9 0 1.4.1v2.5c-.4-.1-.9-.2-1.4-.2-2.3 0-4.1 1.8-4.1 4.1s1.8 4.1 4.1 4.1 4.1-1.8 4.1-4.1V3z" fill="#FE2C55" transform="translate(1.2,.8)" style={{mixBlendMode:'screen'}}/>
    </svg>
  );
}

function FacebookIcon({color = '#1877F2'}) {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path fill={color} d="M13.5 22v-8h2.7l.4-3.2h-3.1V8.7c0-.9.3-1.6 1.6-1.6h1.7V4.2c-.3 0-1.3-.1-2.4-.1-2.4 0-4 1.5-4 4.1v2.6H7.7V14h2.7v8h3.1z"/>
    </svg>
  );
}

function LinkedInIcon({color = '#0A66C2'}) {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <rect x="2" y="2" width="20" height="20" rx="3" fill={color}/>
      <path fill="#fff" d="M7 10h2.6v8H7zM8.3 6.2a1.5 1.5 0 110 3 1.5 1.5 0 010-3zM11.4 10H14v1.2c.4-.7 1.3-1.4 2.7-1.4 2.9 0 3.4 1.9 3.4 4.3V18h-2.6v-3.4c0-1 0-2.3-1.4-2.3-1.4 0-1.6 1.1-1.6 2.2V18h-2.6v-8z"/>
    </svg>
  );
}

function YouTubeIcon({color = '#FF0000'}) {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <rect x="1" y="5" width="22" height="14" rx="4" fill={color}/>
      <path d="M10 9v6l5-3-5-3z" fill="#fff"/>
    </svg>
  );
}

function ThreadsIcon() {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path fill="#000" d="M12.2 2c-5.5 0-9 3.5-9 10s3.5 10 9 10 9-3.5 9-10-3.5-10-9-10zm.2 15.6c-2.5 0-4.4-1.1-4.4-2.9 0-1.5 1.3-2.5 3.5-2.5 1 0 1.8.1 2.6.3v.6c0 1.6-.6 2.7-1.7 2.7-.4 0-.7-.1-.9-.3l.1-.1c.1-.1.2-.3.2-.5 0-.4-.3-.7-.8-.7s-.9.3-.9.8c0 .9.9 1.6 2.1 1.6 2 0 3.4-1.4 3.4-3.6v-.9c.5.2.9.5 1.3.9l1-1c-.6-.6-1.4-1-2.3-1.2v-.5c0-1-.4-1.6-1.2-1.6-.5 0-.8.2-.8.5 0 .2.1.4.2.5.2.1.4.2.7.2v.7c-.7-.2-1.4-.3-2.2-.3-2.7 0-4.6 1.5-4.6 3.8-.1 2.4 1.9 4.1 4.7 4.1z"/>
    </svg>
  );
}

function XIcon() {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path fill="#000" d="M17.7 3h2.8l-6.2 7.1L22 21h-5.7l-4.5-5.9L6.6 21H3.8l6.6-7.6L3 3h5.8l4 5.4L17.7 3zm-1 16h1.6L7.4 4.9H5.7L16.7 19z"/>
    </svg>
  );
}

function PinterestIcon({color = '#BD081C'}) {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <circle cx="12" cy="12" r="10" fill={color}/>
      <path fill="#fff" d="M12.3 5.4c-3.8 0-5.7 2.7-5.7 5 0 1.4.5 2.6 1.7 3 .2 0 .4 0 .4-.3l.2-.6c.1-.2 0-.3-.1-.5-.3-.3-.5-.8-.5-1.5 0-1.9 1.4-3.6 3.8-3.6 2 0 3.2 1.3 3.2 3 0 2.2-1 4.1-2.4 4.1-.8 0-1.4-.7-1.2-1.5.3-1 .8-2.1.8-2.8 0-.7-.4-1.2-1.1-1.2-.9 0-1.6.9-1.6 2.1 0 .8.3 1.3.3 1.3s-.9 3.8-1 4.5c-.3 1.4-.1 3-.1 3.2s.1.1.2.1c.1-.1 1.2-1.5 1.6-2.9l.6-2.2c.3.5 1.1 1 2 1 2.7 0 4.5-2.4 4.5-5.6 0-2.5-2.1-4.6-5.6-4.6z"/>
    </svg>
  );
}

window.PlatformChips = PlatformChips;