/* global React */

// ===== HOME formatos — 3 cards (Bar / Foodtruck / Franquicia) =====
function HomeFormatos() {
  const formatos = [
    {
      id: 'bar',
      num: '01',
      kicker: 'Bar Temático',
      title: 'El box donde la F1 se vive',
      desc: 'Simuladores profesionales, gastronomía, las 4 escuderías y todos los GP en vivo. En el corazón de Palermo.',
      cta: 'Reservar ahora',
      href: 'Bar.html',
      img: 'assets/bar1.png',
      tags: ['Palermo', '8 simuladores', '4 escuderías']
    },
    {
      id: 'foodtruck',
      num: '02',
      kicker: 'Foodtruck · Eventos',
      title: 'Llevamos la experiencia',
      desc: 'Activaciones urbanas, festivales, corporativos y privados. Foodtruck con simuladores, branding y producción completa.',
      cta: 'Quiero la experiencia',
      href: 'Eventos.html',
      img: 'assets/foodtruck-por-fuera-1.png',
      tags: ['Itinerante', 'Activaciones', 'Branding 360°']
    },
  ];

  return (
    <section className="formatos" id="formatos">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">VAMO NENE EXPERIENCE</span>
          <h2 className="display">No es una marca. Es una <span className="accent">EXPERIENCIA</span>.</h2>
          <p>Dos formatos. Una sola energía. Donde sea que estés, la F1 te encuentra.</p>
        </div>

        <div className="formatos-stack">
          {formatos.map((p, i) => (
            <a
              key={p.id}
              href={p.href}
              target={p.external ? '_blank' : undefined}
              rel={p.external ? 'noopener' : undefined}
              className={`pilar-card reveal ${i % 2 ? 'rev' : ''}`}
            >
              <div className="pilar-img">
                <img src={p.img} alt={p.title} />
                <div className="pilar-img-overlay"></div>
                <span className="pilar-num">{p.num}</span>
              </div>
              <div className="pilar-content">
                <div className="pilar-tags">
                  {p.tags.map(t => <span key={t}>{t}</span>)}
                </div>
                <div className="pilar-kicker">{p.kicker}</div>
                <h3 className="display pilar-title">{p.title}</h3>
                <p className="pilar-desc">{p.desc}</p>
                <div className="pilar-cta">
                  <span>{p.cta}</span>
                  <span className="arrow">→</span>
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

window.HomeFormatos = HomeFormatos;