// ===== DISTRIBUTORS PAGE =====
function DistributorsPage({ onNavigate }) {
  const [form, setForm] = React.useState({
    razon: '', rfc: '', contacto: '', puesto: '', email: '', tel: '',
    estado: '', ciudad: '', giro: '', anos: '', marcas: '', volumen: '',
    sitio: '', comentarios: ''
  });
  const [sent, setSent] = React.useState(false);
  const upd = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const submit = (e) => { e.preventDefault(); setSent(true); window.scrollTo({ top: 0, behavior: 'smooth' }); };

  return (
    <main data-screen-label="07 Distribuidores">
      <Breadcrumb items={[{ label: 'Inicio', onClick: () => onNavigate('home') }, { label: 'Distribuidores' }]} />

      {/* HERO */}
      <section className="section brand" style={{paddingTop: 72, paddingBottom: 72, position: 'relative', overflow: 'hidden'}}>
        <div className="container" style={{position: 'relative', zIndex: 1}}>
          <div style={{display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 64, alignItems: 'center'}} className="dist-hero-grid">
            <div>
              <span className="eyebrow light">Programa de distribuidores · 2026</span>
              <h1 style={{maxWidth: 720, marginTop: 12}}>Vende ventiladores que sí están en stock.</h1>
              <p style={{fontSize: 19, maxWidth: 620, marginTop: 20, color: 'rgba(255,255,255,0.85)', lineHeight: 1.55}}>
                Buscamos socios comerciales en México que quieran ofrecer ventilación industrial sin depender de tiempos de importación de 8 a 16 semanas. Tú vendes, nosotros entregamos.
              </p>
              <div style={{display: 'flex', gap: 12, flexWrap: 'wrap', marginTop: 32}}>
                <a href="#form" className="btn btn-primary btn-arrow" onClick={(e) => { e.preventDefault(); document.getElementById('dist-form').scrollIntoView({behavior: 'smooth', block: 'start'}); }} style={{background: 'white', color: 'var(--azul-profundo)'}}>Postular como distribuidor</a>
                <a href="#beneficios" className="btn btn-secondary" onClick={(e) => { e.preventDefault(); document.getElementById('beneficios').scrollIntoView({behavior: 'smooth', block: 'start'}); }} style={{borderColor: 'rgba(255,255,255,0.4)', color: 'white'}}>Ver beneficios</a>
              </div>
            </div>
            <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16}}>
              {[
                {n: '5', l: 'Modelos en stock local'},
                {n: '0', l: 'Pedidos especiales de importación'},
                {n: '48h', l: 'Respuesta a cotizaciones'},
                {n: '1', l: 'Solo una línea: ventiladores'},
              ].map((s, i) => (
                <div key={i} style={{padding: 24, background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.14)', borderRadius: 'var(--radius-md)', backdropFilter: 'blur(8px)'}}>
                  <div style={{fontSize: 44, fontFamily: 'var(--font-display)', fontWeight: 800, color: 'white', lineHeight: 1}}>{s.n}</div>
                  <div style={{marginTop: 8, fontSize: 13, color: 'rgba(255,255,255,0.75)', lineHeight: 1.4}}>{s.l}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
        <div style={{position: 'absolute', right: '-8%', bottom: '-20%', width: 500, height: 500, opacity: 0.04, pointerEvents: 'none'}}>
          <img src="assets/isotipo-blanco.png" style={{width: '100%', height: '100%', objectFit: 'contain'}} />
        </div>
      </section>

      {/* BENEFICIOS */}
      <section className="section" id="beneficios">
        <div className="container">
          <span className="eyebrow">Por qué Ventratech</span>
          <h2 style={{maxWidth: 720, marginBottom: 48}}>Una línea simple, márgenes claros, soporte real.</h2>
          <div className="apps-grid">
            {[
              {num: '01', t: 'Stock local garantizado', d: 'Los 5 modelos ADH-R en almacén Tulum. Entrega a cualquier punto de México en días, no en meses.'},
              {num: '02', t: 'Margen comercial competitivo', d: 'Estructura de precio mayorista con escalones por volumen. Espacio real para que tú también ganes.'},
              {num: '03', t: 'Exclusividad por zona', d: 'Asignamos territorios para que no compitas contra otro Ventratech. Una sola voz en tu mercado.'},
              {num: '04', t: 'Asesoría técnica gratuita', d: 'Nuestro equipo te ayuda a calcular caudal y presión del proyecto. Tú cotizas con confianza técnica.'},
              {num: '05', t: 'Material de venta listo', d: 'Fichas técnicas, renders, curvas, plantillas de cotización y catálogo en PDF. Sin tener que diseñar nada.'},
              {num: '06', t: 'Capacitación inicial', d: 'Sesión de onboarding técnico y comercial. Aprendes a vender la línea en una semana, no en seis meses.'},
            ].map(b => (
              <div key={b.num} className="app-card">
                <div className="app-num">{b.num}</div>
                <h3>{b.t}</h3>
                <p>{b.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* PERFIL */}
      <section className="section" style={{background: 'var(--gris-bg)'}}>
        <div className="container">
          <div style={{display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 64, alignItems: 'start'}} className="about-cols">
            <div>
              <span className="eyebrow">Perfil que buscamos</span>
              <h2 style={{marginBottom: 20}}>¿Encajas?</h2>
              <p style={{fontSize: 17, color: '#2a3140'}}>No buscamos cualquiera. Buscamos socios con cartera técnica activa y capacidad de cierre. Si tu operación encaja con alguno de estos perfiles, queremos hablar.</p>
            </div>
            <div style={{display: 'grid', gap: 16}}>
              {[
                {t: 'Distribuidores HVAC', d: 'Casas que ya venden aire acondicionado, ductería, manejadoras o accesorios para sistemas comerciales.'},
                {t: 'Casas industriales / MEP', d: 'Distribuidores de equipo industrial, motores, bombas o material eléctrico que atienden plantas y obra grande.'},
                {t: 'Contratistas e instaladores', d: 'Empresas instaladoras de HVAC o industriales que quieren cerrar el ciclo con suministro propio.'},
                {t: 'Refrigeración comercial', d: 'Proveedores de cuartos fríos, cámaras y equipos de proceso que ya manejan ventilación como complemento.'},
              ].map(p => (
                <div key={p.t} style={{padding: 24, background: 'white', borderRadius: 'var(--radius-md)', borderLeft: '3px solid var(--azul-medio)'}}>
                  <h3 style={{fontSize: 18, marginBottom: 6}}>{p.t}</h3>
                  <p style={{fontSize: 15, color: 'var(--gris-texto)', margin: 0}}>{p.d}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* PROCESO */}
      <section className="section">
        <div className="container">
          <span className="eyebrow">Cómo funciona</span>
          <h2 style={{marginBottom: 48}}>De postulación a primera venta.</h2>
          <div className="process-grid">
            {[
              {n: '01', t: 'Postula', d: 'Llena el formulario con datos de tu empresa y zona de operación.'},
              {n: '02', t: 'Evaluamos', d: 'Revisamos perfil, zona disponible y encaje comercial. Respuesta en 5 días hábiles.'},
              {n: '03', t: 'Firmamos', d: 'Contrato de distribución con condiciones, márgenes, zona y metas claras.'},
              {n: '04', t: 'Onboarding', d: 'Capacitación técnica, material de venta y primer pedido de stock.'},
            ].map(s => (
              <div key={s.n} className="process-step">
                <div className="step-num">{s.n}</div>
                <h3>{s.t}</h3>
                <p>{s.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FORM */}
      <section className="section" id="dist-form" style={{background: 'var(--azul-profundo)', color: 'white'}}>
        <div className="container">
          <div style={{display: 'grid', gridTemplateColumns: '1fr 1.5fr', gap: 64, alignItems: 'start'}} className="about-cols">
            <div>
              <span className="eyebrow light">Postular</span>
              <h2 style={{color: 'white', marginBottom: 20}}>Cuéntanos de tu empresa.</h2>
              <p style={{color: 'rgba(255,255,255,0.8)', fontSize: 16, lineHeight: 1.6}}>Toda la información se trata con confidencialidad. Te contactamos en máximo 5 días hábiles con una decisión clara: encaje, zona y siguientes pasos.</p>
              <div style={{marginTop: 32, paddingTop: 24, borderTop: '1px solid rgba(255,255,255,0.15)'}}>
                <div style={{fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.6)', marginBottom: 12}}>¿Prefieres hablar?</div>
                <div style={{fontSize: 16, marginBottom: 4}}><a href="mailto:ventas@ventratech.mx" style={{color: 'white'}}>ventas@ventratech.mx</a></div>
                <div style={{fontSize: 16}}><a href="tel:+529841342829" style={{color: 'white'}}>+52 984 134 2829</a></div>
              </div>
            </div>

            <div style={{background: 'white', color: 'var(--azul-profundo)', borderRadius: 'var(--radius-md)', padding: 40}}>
              {sent ? (
                <div style={{padding: '40px 8px', textAlign: 'center'}}>
                  <div style={{fontSize: 48, marginBottom: 16, color: 'var(--azul-medio)', fontFamily: 'var(--font-display)', fontWeight: 800}}>✓</div>
                  <h3 style={{marginBottom: 12}}>Postulación recibida</h3>
                  <p style={{color: 'var(--gris-texto)', fontSize: 16}}>Gracias por tu interés. Nuestro equipo revisará tu información y te contactará en los próximos 5 días hábiles.</p>
                </div>
              ) : (
                <form onSubmit={submit}>
                  <div style={{fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--gris-texto)', marginBottom: 12}}>1 · Empresa</div>
                  <div className="form-grid-2">
                    <Field label="Razón social *" v={form.razon} onChange={upd('razon')} req />
                    <Field label="RFC" v={form.rfc} onChange={upd('rfc')} />
                  </div>
                  <Field label="Sitio web (si tienes)" v={form.sitio} onChange={upd('sitio')} />

                  <div style={{fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--gris-texto)', marginTop: 24, marginBottom: 12}}>2 · Contacto</div>
                  <div className="form-grid-2">
                    <Field label="Nombre *" v={form.contacto} onChange={upd('contacto')} req />
                    <Field label="Puesto" v={form.puesto} onChange={upd('puesto')} />
                  </div>
                  <div className="form-grid-2">
                    <Field label="Email *" type="email" v={form.email} onChange={upd('email')} req />
                    <Field label="Teléfono *" type="tel" v={form.tel} onChange={upd('tel')} req />
                  </div>

                  <div style={{fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--gris-texto)', marginTop: 24, marginBottom: 12}}>3 · Operación</div>
                  <div className="form-grid-2">
                    <Field label="Estado *" v={form.estado} onChange={upd('estado')} req />
                    <Field label="Ciudad principal *" v={form.ciudad} onChange={upd('ciudad')} req />
                  </div>
                  <Select label="Giro principal *" v={form.giro} onChange={upd('giro')} req options={['HVAC comercial', 'Industrial / MEP', 'Refrigeración comercial', 'Contratista / instalador', 'Ferretería técnica', 'Otro']} />
                  <Select label="Años operando *" v={form.anos} onChange={upd('anos')} req options={['Menos de 2', '2 a 5', '5 a 10', 'Más de 10']} />
                  <Field label="Marcas que actualmente distribuyes" v={form.marcas} onChange={upd('marcas')} placeholder="Ej. Daikin, Greenheck, Siemens..." />
                  <Select label="Volumen mensual estimado de ventiladores" v={form.volumen} onChange={upd('volumen')} options={['1 a 5 equipos', '5 a 20 equipos', '20 a 50 equipos', 'Más de 50 equipos', 'Aún no estimado']} />

                  <div style={{fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--gris-texto)', marginTop: 24, marginBottom: 12}}>4 · Comentarios</div>
                  <Field label="¿Algo más que debamos saber?" textarea v={form.comentarios} onChange={upd('comentarios')} />

                  <button type="submit" className="btn btn-primary btn-arrow" style={{marginTop: 24, width: '100%', justifyContent: 'center'}}>Enviar postulación</button>
                  <p style={{fontSize: 12, color: 'var(--gris-texto)', marginTop: 12, textAlign: 'center'}}>Al enviar aceptas que Ventratech use estos datos para evaluar tu postulación.</p>
                </form>
              )}
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

function Field({ label, v, onChange, req, type = 'text', textarea, placeholder }) {
  return (
    <label style={{display: 'block', marginBottom: 14}}>
      <div style={{fontSize: 13, fontWeight: 600, marginBottom: 6, fontFamily: 'var(--font-display)'}}>{label}</div>
      {textarea ? (
        <textarea value={v} onChange={onChange} required={req} placeholder={placeholder} rows={3} style={fieldStyle} />
      ) : (
        <input type={type} value={v} onChange={onChange} required={req} placeholder={placeholder} style={fieldStyle} />
      )}
    </label>
  );
}

function Select({ label, v, onChange, req, options }) {
  return (
    <label style={{display: 'block', marginBottom: 14}}>
      <div style={{fontSize: 13, fontWeight: 600, marginBottom: 6, fontFamily: 'var(--font-display)'}}>{label}</div>
      <select value={v} onChange={onChange} required={req} style={fieldStyle}>
        <option value="">Selecciona…</option>
        {options.map(o => <option key={o} value={o}>{o}</option>)}
      </select>
    </label>
  );
}

const fieldStyle = {
  width: '100%',
  padding: '12px 14px',
  border: '1px solid var(--gris-claro)',
  borderRadius: 'var(--radius-sm)',
  fontFamily: 'var(--font-body)',
  fontSize: 15,
  background: 'white',
  color: 'var(--azul-profundo)',
  outline: 'none',
  boxSizing: 'border-box',
};

Object.assign(window, { DistributorsPage });