// Social proof strip — "ya lo usan en..." pseudo-logo bar + live activity
function SocialStrip() {
  const cities = ['Madrid', 'Barcelona', 'Burgos', 'Sevilla', 'Bilbao', 'Valencia', 'Málaga', 'Murcia', 'Vigo', 'Zaragoza'];
  const [activity, setActivity] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setActivity(a => (a + 1) % 4), 4500);
    return () => clearInterval(t);
  }, []);
  const messages = [
    { city: 'Valencia', txt: 'acaba de pillar 12 leads de "cerrajero Valencia"' },
    { city: 'Sevilla', txt: 'cerró una cita por email automático' },
    { city: 'Madrid', txt: 'generó una web para "abogado laboralista Madrid"' },
    { city: 'Bilbao', txt: 'activó el rotador para "pintores Bilbao"' },
  ];

  return (
    <section style={{ padding: '0 0 70px' }}>
      <div className="pl-container">
        <div style={{
          display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 28,
          alignItems: 'center',
          padding: '20px 26px',
          background: 'rgba(255,255,255,.55)',
          border: '1px solid var(--pl-border)',
          borderRadius: 18,
        }}>
          <div style={{ fontSize: 12.5, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--pl-ink-3)' }}>
            Construido por
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 28, flexWrap: 'wrap' }}>
            <Logo name="Yinyang Academy" sub="Academia SEO" />
            <span style={{ color: 'var(--pl-border-strong)' }}>×</span>
            <Logo name="local brain" sub="Suite SEO local" />
          </div>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, fontSize: 13, color: 'var(--pl-ink-3)' }}>
            <span className="pl-pill-pulse" style={{ width: 7, height: 7, borderRadius: '50%', background: 'var(--pl-success)' }} />
            <span style={{ minWidth: 320 }}>
              <b style={{ color: 'var(--pl-ink)' }}>{messages[activity].city}</b> · {messages[activity].txt}
            </span>
          </div>
        </div>

        {/* City marquee */}
        <div style={{
          marginTop: 18, fontSize: 13, color: 'var(--pl-ink-mute)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 18, flexWrap: 'wrap',
        }}>
          <span style={{ fontWeight: 600 }}>Activo en:</span>
          {cities.map(c => (
            <span key={c} style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
              <span style={{ width: 5, height: 5, borderRadius: '50%', background: 'var(--pl-accent)' }} />
              {c}
            </span>
          ))}
          <span style={{ color: 'var(--pl-accent-deep)', fontWeight: 600 }}>+ toda España</span>
        </div>
      </div>
    </section>
  );
}

function Logo({ name, sub }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
      <span style={{
        width: 26, height: 26, borderRadius: 7,
        background: 'linear-gradient(135deg, #1a0d3a, #3b1d8b)',
        color: '#fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: 'var(--pl-font-display)', fontWeight: 800, fontSize: 13,
      }}>{name[0]}</span>
      <span style={{ display: 'flex', flexDirection: 'column', lineHeight: 1.1 }}>
        <span style={{ fontFamily: 'var(--pl-font-display)', fontWeight: 700, fontSize: 14, letterSpacing: '-.01em' }}>{name}</span>
        <span style={{ fontSize: 10.5, color: 'var(--pl-ink-mute)', fontWeight: 600 }}>{sub}</span>
      </span>
    </span>
  );
}

window.SocialStrip = SocialStrip;