/* global React */

// ===== GALLERY (Instagram feed style) =====
function Gallery() {
  const items = [
    { src: 'assets/bar1.jpg', cap: 'Sábado en boxes', tall: true },
    { src: 'assets/simus.jpg', cap: 'Las 4 zonas' },
    { src: 'assets/zonabar.jpg', cap: 'Pit-lane' },
    { src: 'assets/bar-ferrari.jpg', cap: 'Tifosi night' },
    { src: 'assets/colapa.jpg', cap: 'Watch party' },
    { src: 'assets/souvenires.jpg', cap: 'Tienda oficial' },
    { src: 'assets/f1-render.jpg', cap: 'F1 en pantalla' }
  ];
  return (
    <section id="galeria">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">@vamonene.bar · Galería</span>
          <h2 className="display">Así se vive una <span className="accent">vuelta</span> acá</h2>
          <p>Las picadas, los simuladores, los GP a fondo y la gente que la rompe cada finde. Ese ambiente que no se replica.</p>
        </div>

        <div className="gallery-grid">
          {items.map((it, i) => (
            <div className={`gallery-item ${it.tall ? 'tall' : ''} reveal`} key={i}>
              <img src={it.src} alt={it.cap} />
              <div className="overlay">
                <span className="ig">📷 {it.cap}</span>
              </div>
            </div>
          ))}
        </div>

        <div className="gallery-cta">
          <a href="https://instagram.com" target="_blank" rel="noopener" className="btn btn-ghost">Seguinos @vamonene.bar →</a>
        </div>
      </div>
    </section>
  );
}

// ===== CONTACT / LOCATION =====
function Contact() {
  return (
    <section id="contacto">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">Box · Buenos Aires</span>
          <h2 className="display">Caete al <span className="accent">box</span></h2>
          <p>Estamos en pleno Palermo. Reservá por WhatsApp o pasá directo — siempre hay un lugar para los que la sienten.</p>
        </div>

        <div className="contact-grid">
          <div className="map-card reveal">
            <iframe
              title="Vamo Nene location"
              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3284.5639!2d-58.4252!3d-34.5875!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMzTCsDM1JzE1LjAiUyA1OMKwMjUnMzAuNyJX!5e0!3m2!1sen!2sar!4v1700000000000"
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
              allowFullScreen
            ></iframe>
          </div>

          <div className="contact-info">
            <a href="https://wa.me/5491100000000?text=Hola%20Vamo%20Nene%2C%20quiero%20reservar" target="_blank" rel="noopener" className="contact-card wsp reveal">
              <div className="icon">
                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
              </div>
              <div>
                <div className="lbl">WhatsApp directo</div>
                <div className="val">+54 9 11 0000-0000</div>
                <div className="sub">Respondemos en menos de 10 min · Reservas, eventos privados, consultas</div>
              </div>
            </a>

            <div className="contact-card reveal">
              <div className="icon">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
              </div>
              <div>
                <div className="lbl">Dirección</div>
                <div className="val">Av. Dorrego 1500</div>
                <div className="sub">Palermo, CABA · A 4 cuadras del subte D</div>
              </div>
            </div>

            <div className="contact-card reveal">
              <div className="icon">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
              </div>
              <div>
                <div className="lbl">Horarios</div>
                <div className="val">Mié a Dom</div>
                <dl className="hours">
                  <dt>Mié — Jue</dt><dd>19:00 — 01:00</dd>
                  <dt>Vie — Sáb</dt><dd>19:00 — 03:00</dd>
                  <dt>Domingo GP</dt><dd>desde 09:00</dd>
                  <dt>Lun — Mar</dt><dd>cerrado</dd>
                </dl>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ===== FAQ =====
function FAQ() {
  const [open, setOpen] = React.useState(0);
  const faqs = [
    { q: '¿Hace falta saber de F1 para venir?', a: 'Para nada. Vamo\' Nene es un bar para grupos, parejas y planes distintos. Los simuladores son fáciles de manejar y el equipo te explica todo. Si sos fanático, mejor — pero no es requisito.' },
    { q: '¿Necesito reservar?', a: 'Recomendado, sí. Los simuladores se ocupan rápido los fines de semana y los días de GP. Reservá por WhatsApp o desde el configurador y te confirmamos en minutos.' },
    { q: '¿Qué es el configurador?', a: 'Una herramienta para que armes tu noche antes de venir: elegís escudería, picadas, tragos y minutos en simulador. Te tiramos el total y mandás todo por WhatsApp para confirmar.' },
    { q: '¿Hacen eventos privados o cumpleaños?', a: 'Sí, para grupos de 15 personas en adelante. Tenemos paquetes con simuladores reservados, picadas y barra libre opcional. Escribinos por WhatsApp y armamos a medida.' },
    { q: '¿Transmiten todos los GP?', a: 'Todos. Pantallas gigantes, sonido 5.1 y bandera a cuadros incluida. Los domingos de carrera abrimos desde temprano con desayuno-brunch.' },
    { q: '¿Hay opciones sin alcohol y vegetarianas?', a: 'Por supuesto. Tenemos limonadas de autor, tragos sin alcohol y opciones veggie en toda la carta.' }
  ];
  return (
    <section id="faq">
      <div className="container">
        <div className="section-head reveal" style={{ textAlign: 'center', margin: '0 auto 64px' }}>
          <span className="eyebrow" style={{ justifyContent: 'center' }}>Preguntas frecuentes</span>
          <h2 className="display">Lo que <span className="accent">siempre</span> nos preguntan</h2>
        </div>

        <div className="faq-list">
          {faqs.map((f, i) => (
            <div className={`faq-item ${open === i ? 'open' : ''}`} key={i}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{f.q}</span>
                <span className="plus">+</span>
              </button>
              <div className="faq-a"><p>{f.a}</p></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ===== FOOTER =====
function Footer() {
  return (
    <footer className="footer">
      <div className="footer-checker checker"></div>
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <img src="assets/logo.png" alt="Vamo Nene" />
            <p>Bar temático de Fórmula 1 en Buenos Aires. Acá la pasión se vive, no se mira.</p>
          </div>
          <div className="footer-col">
            <h5>Navegación</h5>
            <ul>
              <li><a href="#nosotros">Nosotros</a></li>
              <li><a href="#configurador">Armá tu noche</a></li>
              <li><a href="#galeria">Galería</a></li>
              <li><a href="#faq">FAQ</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Contacto</h5>
            <ul>
              <li><a href="mailto:hola@vamonene.bar">hola@vamonene.bar</a></li>
              <li><a href="tel:+5491100000000">+54 9 11 0000-0000</a></li>
              <li><a href="https://wa.me/5491100000000">WhatsApp</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Box</h5>
            <ul>
              <li>Av. Dorrego 1500</li>
              <li>Palermo, CABA</li>
              <li>Mié a Dom · 19:00 — 03:00</li>
            </ul>
          </div>
        </div>

        <div className="footer-bottom">
          <span>© 2026 Vamo' Nene · Bar temático F1 · Buenos Aires</span>
          <div className="footer-social">
            <a href="https://instagram.com" target="_blank" rel="noopener" aria-label="Instagram">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="2" y="2" width="20" height="20" rx="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
            </a>
            <a href="https://tiktok.com" target="_blank" rel="noopener" aria-label="TikTok">
              <svg viewBox="0 0 24 24" fill="currentColor"><path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5.8 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1.84-.1z"/></svg>
            </a>
            <a href="https://wa.me/5491100000000" target="_blank" rel="noopener" aria-label="WhatsApp">
              <svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
            </a>
          </div>
        </div>
      </div>
    </footer>
  );
}

window.Gallery = Gallery;
window.Contact = Contact;
window.FAQ = FAQ;
window.Footer = Footer;