/* global React */

// ===== HOME IMPACTO — pitch institucional indirecto =====
// Habla en métricas y valor, sin mencionar GCBA/sponsors.
// El lector institucional piensa: "¿por qué no estoy ahí?"
function HomeImpacto() {
  const cards = [
    {
      kicker: 'Identidad urbana',
      title: 'Una ciudad asociada a innovación, juventud y entretenimiento global',
      desc: 'Buenos Aires necesita una narrativa moderna. La Fórmula 1 la habilita: tecnología, deporte, viralidad, cultura urbana.'
    },
    {
      kicker: 'Participación masiva',
      title: 'Experiencia gratuita, abierta y participativa',
      desc: 'No es publicidad. Es gente compitiendo, generando contenido, volviendo. Cada activación es una historia que se cuenta sola.'
    },
    {
      kicker: 'Impacto digital',
      title: 'Cada intervención se convierte en un evento viral',
      desc: 'Reels, TikTok, streaming, influencers, medios. Alcance orgánico, no comprado. Conversación que dura.'
    },
    {
      kicker: 'Plataforma operativa',
      title: 'Estructura ya funcionando — no se construye, se activa',
      desc: 'Simuladores, equipo técnico, presencia territorial, contenido y comunidad. La infraestructura existe. Solo falta enchufarla.'
    }
  ];

  const metrics = [
    { n: '+12M', l: 'Alcance orgánico potencial / activación' },
    { n: '+300K', l: 'Interacciones digitales / mes' },
    { n: '95%', l: 'Contenido generado por usuarios' },
    { n: '24/7', l: 'Plataforma de comunicación viva' }
  ];

  return (
    <section className="impacto">
      <div className="container">
        <div className="section-head reveal centered">
          <span className="eyebrow" style={{justifyContent:'center'}}>Por qué importa</span>
          <h2 className="display">Esto <span className="accent">no es un evento</span>.<br/>Es cómo se cuenta una ciudad.</h2>
          <p>Mientras el mundo conversa sobre Fórmula 1, Buenos Aires puede ser el escenario. Tecnología, juventud, turismo y cultura urbana en una sola plataforma.</p>
        </div>

        <div className="impacto-grid">
          {cards.map((c, i) => (
            <div key={c.kicker} className="impacto-card reveal">
              <span className="impacto-num">{String(i+1).padStart(2,'0')}</span>
              <span className="impacto-kicker">{c.kicker}</span>
              <h3 className="impacto-title">{c.title}</h3>
              <p>{c.desc}</p>
            </div>
          ))}
        </div>

        <div className="impacto-metrics reveal">
          {metrics.map(m => (
            <div className="metric" key={m.l}>
              <div className="metric-n">{m.n}</div>
              <div className="metric-l">{m.l}</div>
            </div>
          ))}
        </div>

        <div className="impacto-quote reveal">
          <p className="display">
            "Buenos Aires <span className="accent">entra en modo F1</span>.<br/>
            La pregunta no es si va a pasar. Es <em>cuándo</em>."
          </p>
        </div>
      </div>
    </section>
  );
}

window.HomeImpacto = HomeImpacto;