/* global React, ReactDOM */
const { useState } = React;

function App() {
  const [contact, setContact] = useState(null);
  const close = () => setContact(null);
  const isAsesor = contact === 'asesor';

  return (
    <div className="acmp-page">
      <Navbar onCta={() => setContact('inscripcion')} />

      <HomeHero onPrimary={() => setContact('inscripcion')} />

      <div id="marcas"><LogoStrip /></div>
      <div id="numeros"><StatsRow /></div>

      <HomeProductos onCta={() => setContact('inscripcion')} />
      <HomeTest onCta={() => setContact('inscripcion')} />

      <div id="testimonios">
        <Testimonial />
        <TestimonioVideos />
      </div>

      <HomeBio onCta={() => setContact('inscripcion')} />

      <div id="accion"><AcademiaEnAccion /></div>

      <Footer />

      {contact && (
        <div className="acmp-scrim" onClick={close}>
          <div className="acmp-modal" onClick={e => e.stopPropagation()}>
            <div className="eyebrow" style={{ marginBottom: 10 }}>
              {isAsesor ? 'HABLEMOS' : 'INSCRIPCIÓN'}
            </div>
            <h3>
              {isAsesor
                ? <>Te asesoramos para arrancar <span className="kw">bien</span>.</>
                : <>Empezá <span className="kw">hoy</span>.</>}
            </h3>
            <p>
              {isAsesor
                ? 'Dejanos tu mail y un asesor te escribe en menos de 24 hs para resolver dudas y opciones.'
                : 'Dejanos tu mail y te mandamos el acceso para arrancar con la primera clase hoy.'}
            </p>
            <input
              className="acmp-input"
              type="email"
              placeholder="tu@mail.com"
              style={{ display: 'block', width: '100%', padding: '12px 14px', borderRadius: 10, border: '1px solid #e6e6e6', fontFamily: 'Inter,sans-serif', fontSize: 15, marginTop: 8, outline: 'none', boxSizing: 'border-box' }}
            />
            <div className="modal-actions">
              <button className="acmp-btn acmp-btn-primary">
                {isAsesor ? 'Quiero que me contacten →' : '¡Empezá ahora! →'}
              </button>
              <button className="acmp-btn acmp-btn-ghost" onClick={close}>Cerrar</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);