/* global React */

// ===== HOME ACTIVACIONES — locaciones urbanas =====
function HomeActivaciones() {
  const locs = [
    { name: 'Palermo', tag: 'Polo gastronómico', x: 38, y: 42 },
    { name: 'Puerto Madero', tag: 'Nightlife', x: 62, y: 58 },
    { name: 'Costanera', tag: 'Festivales', x: 70, y: 35 },
    { name: 'Parque Centenario', tag: 'Activaciones públicas', x: 28, y: 55 },
    { name: 'Parque de la Ciudad', tag: 'Eventos masivos', x: 22, y: 78 }
  ];
  return (
    <section className="activaciones">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">Capital de la F1</span>
          <h2 className="display">La ciudad es el <span className="accent">circuito</span></h2>
          <p>Donde la gente se junta, ahí estamos. Plazas, parques, polos gastronómicos, festivales y nightlife — Buenos Aires se convierte en pista.</p>
        </div>

        <div className="activaciones-grid">
          <div className="map-canvas reveal">
            <svg className="map-svg" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
              <defs>
                <pattern id="grid" width="5" height="5" patternUnits="userSpaceOnUse">
                  <path d="M 5 0 L 0 0 0 5" fill="none" stroke="rgba(45,212,255,0.08)" strokeWidth="0.15"/>
                </pattern>
              </defs>
              <rect width="100" height="100" fill="url(#grid)"/>
              <path d="M 10 50 Q 30 30, 50 45 T 90 55" stroke="rgba(192,38,211,0.3)" strokeWidth="0.4" fill="none" strokeDasharray="1 1"/>
              <path d="M 5 80 Q 40 70, 60 50 T 95 20" stroke="rgba(45,212,255,0.25)" strokeWidth="0.3" fill="none"/>
            </svg>
            {locs.map(l => (
              <div key={l.name} className="map-pin" style={{ left: l.x + '%', top: l.y + '%' }}>
                <span className="pin-dot"></span>
                <span className="pin-ring"></span>
                <span className="pin-label">
                  <span className="pin-name">{l.name}</span>
                  <span className="pin-tag">{l.tag}</span>
                </span>
              </div>
            ))}
            <div className="map-label tl">BUENOS AIRES · 34°36'S 58°22'W</div>
            <div className="map-label br">VAMO NENE EXPERIENCE · LIVE</div>
          </div>

          <div className="activaciones-list reveal">
            {locs.map((l, i) => (
              <div key={l.name} className="act-row">
                <span className="act-num">0{i+1}</span>
                <div>
                  <div className="act-name">{l.name}</div>
                  <div className="act-tag">{l.tag}</div>
                </div>
                <span className="act-status">ACTIVA</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

window.HomeActivaciones = HomeActivaciones;