/* global React */

// ===== ABOUT / POR QUÉ ELEGIRNOS =====
function About() {
  const ref = React.useRef(null);
  const [statsVisible, setStatsVisible] = React.useState(false);

  React.useEffect(() => {
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) setStatsVisible(true);
    }, { threshold: 0.3 });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);

  const diffs = [
    { num: '01', title: 'No es un bar de F1', text: 'Es el lugar donde te metés en el mundo. No mirás desde afuera: jugás, competís, sentís.' },
    { num: '02', title: 'Pasión + plan distinto', text: 'Para fanáticos que entienden y para grupos que buscan algo nuevo. No hace falta saber de F1 para divertirse.' },
    { num: '03', title: 'Experiencia 360°', text: 'Comida, simuladores, escuderías y eventos en vivo. Todo en un mismo box, todo una sola noche.' },
    { num: '04', title: 'Único en BA', text: 'No existe otro espacio 100% F1 en la ciudad con simuladores, gastronomía y comunidad. Acá empieza.' }
  ];

  return (
    <section className="about" id="nosotros" ref={ref}>
      <div className="container">
        <div className="about-grid">
          <div className="about-image reveal">
            <img src="assets/bar-ferrari.jpg" alt="Vamo Nene bar interior" />
            <div className="badge">
              <span><span className="accent">●</span> Pit-lane abierto</span>
              <span>BUENOS AIRES · ARG</span>
            </div>
          </div>
          <div className="about-text reveal">
            <span className="eyebrow">Por qué elegirnos</span>
            <h2 className="display">Acá la F1 se <em>siente</em>, no se mira</h2>
            <p>
              La Fórmula 1 hoy es entretenimiento, cultura y conversación social. En Argentina el
              entusiasmo vuelve a crecer — pero no existía un espacio donde esa pasión se viva.
            </p>
            <p>
              Vamo' Nene es la primera experiencia 100% dedicada a la F1 en Buenos Aires.
              Mezclamos gastronomía, simuladores profesionales, las cuatro escuderías más grandes
              y eventos en vivo en cada GP. No te invitamos a un bar: te invitamos a la pista.
            </p>
            <p>
              Para los que la sienten y para los que vienen a probar algo nuevo — porque acá
              <strong style={{color: 'var(--ink)'}}> no vas a mirar la carrera, vas a ser parte</strong>.
            </p>
          </div>
        </div>

        <div className="differentiators reveal">
          {diffs.map(d => (
            <div className="diff-card" key={d.num}>
              <div className="num">{d.num} / 04</div>
              <h3>{d.title}</h3>
              <p>{d.text}</p>
            </div>
          ))}
        </div>

        <div className="stats">
          <Stat target={4} label="Escuderías" suffix="" visible={statsVisible} />
          <Stat target={8} label="Simuladores Pro" suffix="" visible={statsVisible} />
          <Stat target={24} label="GP en vivo / año" suffix="" visible={statsVisible} />
          <Stat target={300} label="Personas / noche" suffix="+" visible={statsVisible} />
        </div>
      </div>
    </section>
  );
}

function Stat({ target, label, suffix, visible }) {
  const [n, setN] = React.useState(0);
  React.useEffect(() => {
    if (!visible) return;
    let raf;
    const start = performance.now();
    const dur = 1400;
    const tick = (t) => {
      const p = Math.min(1, (t - start) / dur);
      const eased = 1 - Math.pow(1 - p, 3);
      setN(Math.round(target * eased));
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [visible, target]);
  return (
    <div className="stat">
      <div className="stat-num">{n}{suffix}</div>
      <div className="stat-label">{label}</div>
    </div>
  );
}

window.About = About;