// FeaturedIn.jsx — monochromatic media logos, responsive
function ChFeaturedIn() {
  const isMobile = window.useIsMobile();
  return (
    <section style={{
      background: '#F0EEE6',
      padding: isMobile ? '48px 24px 52px' : '56px 40px 60px',
      fontFamily: 'Montserrat, sans-serif',
      borderTop: '1px solid rgba(27,84,79,0.07)',
    }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{
          textAlign: 'center', fontWeight: 700, fontSize: 10, letterSpacing: '4px',
          textTransform: 'uppercase', color: '#1B544F', opacity: 0.55, marginBottom: 40,
        }}>As featured in</div>

        <div style={{
          display: 'flex',
          justifyContent: isMobile ? 'center' : 'space-between',
          alignItems: 'center',
          gap: isMobile ? '24px 40px' : 24,
          flexWrap: 'wrap',
        }}>
          <LogoTheSocial />
          <LogoCBCRadio />
          <LogoTodaysParent />
          <LogoGlobalNews />
          <LogoGlobeMail />
          <LogoCanadianLiving />
        </div>
      </div>
    </section>
  );
}

const logoColor = '#1A1A1A';
const logoOpacity = 0.72;

function LogoTheSocial() {
  return (
    <div style={{ opacity: logoOpacity, lineHeight: 1, color: logoColor, transition: 'opacity 200ms ease' }}
         onMouseEnter={(e) => e.currentTarget.style.opacity = 1}
         onMouseLeave={(e) => e.currentTarget.style.opacity = logoOpacity}>
      <div style={{ fontWeight: 900, fontSize: 13, letterSpacing: '-0.2px', textTransform: 'lowercase', fontFamily: 'Montserrat, sans-serif' }}>the</div>
      <div style={{ fontWeight: 900, fontSize: 24, letterSpacing: '-0.5px', textTransform: 'lowercase', fontFamily: 'Montserrat, sans-serif', marginTop: -2 }}>social</div>
    </div>
  );
}

function LogoCBCRadio() {
  return (
    <div style={{
      opacity: logoOpacity, color: logoColor, display: 'flex', alignItems: 'center', gap: 7,
      transition: 'opacity 200ms ease',
    }}
         onMouseEnter={(e) => e.currentTarget.style.opacity = 1}
         onMouseLeave={(e) => e.currentTarget.style.opacity = logoOpacity}>
      <svg width="28" height="28" viewBox="0 0 28 28" fill="currentColor">
        <ellipse cx="14" cy="6"  rx="4.5" ry="6"  transform="rotate(0   14 14) translate(0 -8)" />
        <ellipse cx="14" cy="6"  rx="4.5" ry="6"  transform="rotate(120 14 14) translate(0 -8)" />
        <ellipse cx="14" cy="6"  rx="4.5" ry="6"  transform="rotate(240 14 14) translate(0 -8)" />
      </svg>
      <div style={{ fontFamily: 'Montserrat, sans-serif', lineHeight: 1 }}>
        <div style={{ fontWeight: 800, fontSize: 15, letterSpacing: '0.5px' }}>CBC</div>
        <div style={{ fontWeight: 600, fontSize: 10, letterSpacing: '1.5px', textTransform: 'lowercase' }}>radio</div>
      </div>
    </div>
  );
}

function LogoTodaysParent() {
  return (
    <div style={{ opacity: logoOpacity, color: logoColor, lineHeight: 1.1, transition: 'opacity 200ms ease' }}
         onMouseEnter={(e) => e.currentTarget.style.opacity = 1}
         onMouseLeave={(e) => e.currentTarget.style.opacity = logoOpacity}>
      <div style={{ fontFamily: 'Georgia, serif', fontStyle: 'italic', fontSize: 19, fontWeight: 700, letterSpacing: '-0.3px' }}>Today's</div>
      <div style={{ fontFamily: 'Georgia, serif', fontStyle: 'italic', fontSize: 19, fontWeight: 700, letterSpacing: '-0.3px' }}>Parent</div>
    </div>
  );
}

function LogoGlobalNews() {
  return (
    <div style={{
      opacity: logoOpacity, color: logoColor, display: 'flex', alignItems: 'center', gap: 6,
      transition: 'opacity 200ms ease',
    }}
         onMouseEnter={(e) => e.currentTarget.style.opacity = 1}
         onMouseLeave={(e) => e.currentTarget.style.opacity = logoOpacity}>
      <div style={{ fontFamily: 'Montserrat, sans-serif', lineHeight: 1 }}>
        <div style={{ fontWeight: 800, fontSize: 18, letterSpacing: '-0.3px' }}>Global</div>
        <div style={{ fontWeight: 900, fontSize: 13, letterSpacing: '2px', textTransform: 'uppercase', marginTop: 1 }}>News</div>
      </div>
      <svg width="18" height="22" viewBox="0 0 18 22" fill="currentColor">
        <polygon points="0,0 18,11 0,22" />
      </svg>
    </div>
  );
}

function LogoGlobeMail() {
  return (
    <div style={{ opacity: logoOpacity, color: logoColor, textAlign: 'center', transition: 'opacity 200ms ease' }}
         onMouseEnter={(e) => e.currentTarget.style.opacity = 1}
         onMouseLeave={(e) => e.currentTarget.style.opacity = logoOpacity}>
      <div style={{
        fontFamily: 'Georgia, serif', fontWeight: 700,
        fontSize: 12, letterSpacing: '2.5px', textTransform: 'uppercase',
        lineHeight: 1.45,
      }}>
        The Globe<br/>and Mail
      </div>
    </div>
  );
}

function LogoCanadianLiving() {
  return (
    <div style={{ opacity: logoOpacity, color: logoColor, lineHeight: 1.1, transition: 'opacity 200ms ease' }}
         onMouseEnter={(e) => e.currentTarget.style.opacity = 1}
         onMouseLeave={(e) => e.currentTarget.style.opacity = logoOpacity}>
      <div style={{ fontFamily: 'Georgia, serif', fontStyle: 'italic', fontWeight: 400, fontSize: 13, letterSpacing: '0.3px' }}>Canadian</div>
      <div style={{ fontFamily: 'Georgia, serif', fontStyle: 'italic', fontWeight: 700, fontSize: 20, letterSpacing: '-0.3px', marginTop: 1 }}>Living</div>
    </div>
  );
}

window.ChFeaturedIn = ChFeaturedIn;