// ===== SUPPORT PAGE =====
function SupportPage({ onNavigate }) {
  return (
    <main data-screen-label="06 Soporte">
      <Breadcrumb items={[{ label: 'Inicio', onClick: () => onNavigate('home') }, { label: 'Soporte' }]} />
      <section className="section">
        <div className="container">
          <span className="eyebrow">Soporte y descargas</span>
          <h1 style={{maxWidth: 800}}>Documentación técnica al alcance.</h1>
          <p style={{fontSize: 18, color: 'var(--gris-texto)', maxWidth: 720, marginTop: 16}}>Fichas técnicas, manuales de instalación y guías de selección. Si lo necesitas, está aquí.</p>

          <div style={{display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 56, marginTop: 56}} className="support-grid">
            <div>
              <h3 style={{marginBottom: 20}}>Fichas técnicas por modelo</h3>
              <div className="dl-list">
                {PRODUCTS.map(p => (
                  <a key={p.id} href={`fichas/Ventratech-ADH-${p.id}.pdf`} target="_blank" rel="noopener" className="dl-item" download>
                    <div className="dl-meta">
                      <div className="dl-icon">PDF</div>
                      <div>
                        <div className="dl-title">Ficha técnica {p.model}</div>
                        <div className="dl-sub">Specs completas · Dimensiones · Curva de rendimiento</div>
                      </div>
                    </div>
                    <div className="dl-arrow">↓</div>
                  </a>
                ))}
              </div>

              <h3 style={{marginTop: 48, marginBottom: 20}}>Manuales y guías</h3>
              <div className="dl-list">
                <a href="#" className="dl-item" onClick={(e) => e.preventDefault()}>
                  <div className="dl-meta"><div className="dl-icon">PDF</div><div><div className="dl-title">Manual de instalación · Línea ADH-R</div><div className="dl-sub">Recomendaciones eléctricas, mecánicas y puesta en marcha</div></div></div>
                  <div className="dl-arrow">↓</div>
                </a>
                <a href="#" className="dl-item" onClick={(e) => e.preventDefault()}>
                  <div className="dl-meta"><div className="dl-icon">PDF</div><div><div className="dl-title">Guía de selección de ventiladores</div><div className="dl-sub">Cómo calcular caudal y presión para tu proyecto</div></div></div>
                  <div className="dl-arrow">↓</div>
                </a>
                <a href="#" className="dl-item" onClick={(e) => e.preventDefault()}>
                  <div className="dl-meta"><div className="dl-icon">DWG</div><div><div className="dl-title">Planos CAD · Línea ADH-R</div><div className="dl-sub">Para integrar en tus planos de proyecto</div></div></div>
                  <div className="dl-arrow">↓</div>
                </a>
              </div>
            </div>

            <div>
              <h3 style={{marginBottom: 20}}>Preguntas frecuentes</h3>
              <div className="faq-list">
                {FAQS.map((f, i) => (
                  <details key={i} className="faq-item" open={i === 0}>
                    <summary>{f.q}</summary>
                    <div className="faq-body">{f.a}</div>
                  </details>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section tight">
        <div className="container">
          <CTAStrip
            title="¿Necesitas ayuda con tu selección?"
            subtitle="Nuestro equipo técnico responde en menos de 24 horas hábiles."
            ctaLabel="Contactar soporte"
            onCta={() => onNavigate('contact')}
          />
        </div>
      </section>
    </main>
  );
}

// ===== CONTACT PAGE =====
function ContactPage({ onNavigate }) {
  const [form, setForm] = useState({
    nombre: '', empresa: '', email: '', telefono: '', ciudad: '',
    modelo: '', caudal: '', aplicacion: '', mensaje: ''
  });
  const [enviado, setEnviado] = useState(false);

  const update = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  const submit = (e) => {
    e.preventDefault();
    setEnviado(true);
  };

  return (
    <main data-screen-label="07 Contacto">
      <Breadcrumb items={[{ label: 'Inicio', onClick: () => onNavigate('home') }, { label: 'Contacto' }]} />
      <section className="section">
        <div className="container">
          <div style={{display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 64, alignItems: 'start'}} className="contact-grid">
            <div>
              <span className="eyebrow">Hablemos</span>
              <h1 style={{fontSize: 'clamp(32px, 4vw, 52px)', marginBottom: 16}}>Solicita tu cotización técnica.</h1>
              <p style={{fontSize: 17, color: '#2a3140', marginBottom: 32}}>Cuéntanos sobre tu proyecto. Recibirás una propuesta formal con modelo recomendado, ficha técnica y precio en menos de 48 horas hábiles.</p>

              <div style={{display: 'flex', flexDirection: 'column', gap: 20}}>
                <div>
                  <div style={{fontSize: 11, fontFamily: 'var(--font-display)', fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--gris-texto)', marginBottom: 6}}>Teléfono</div>
                  <a href="tel:+529841342829" style={{fontSize: 18, fontFamily: 'var(--font-display)', fontWeight: 600, color: 'var(--azul-profundo)'}}>+52 984 134 2829</a>
                </div>
                <div>
                  <div style={{fontSize: 11, fontFamily: 'var(--font-display)', fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--gris-texto)', marginBottom: 6}}>Correo</div>
                  <a href="mailto:ventas@ventratech.mx" style={{fontSize: 18, fontFamily: 'var(--font-display)', fontWeight: 600, color: 'var(--azul-profundo)'}}>ventas@ventratech.mx</a>
                </div>
                <div>
                  <div style={{fontSize: 11, fontFamily: 'var(--font-display)', fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--gris-texto)', marginBottom: 6}}>WhatsApp</div>
                  <a href="https://wa.me/529841342829" target="_blank" rel="noopener" style={{fontSize: 18, fontFamily: 'var(--font-display)', fontWeight: 600, color: '#25D366'}}>+52 984 134 2829 →</a>
                </div>
                <div>
                  <div style={{fontSize: 11, fontFamily: 'var(--font-display)', fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--gris-texto)', marginBottom: 6}}>Horario</div>
                  <div style={{fontSize: 16}}>Lunes a Viernes · 9:00 – 18:00 hrs</div>
                </div>
                <div>
                  <div style={{fontSize: 11, fontFamily: 'var(--font-display)', fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--gris-texto)', marginBottom: 6}}>Almacén</div>
                  <div style={{fontSize: 16}}>Tulum, Quintana Roo · Envíos a toda la República</div>
                </div>
              </div>
            </div>

            <div>
              {enviado ? (
                <div className="quote-form" style={{textAlign: 'center', padding: '60px 36px'}}>
                  <div style={{fontSize: 56, marginBottom: 16}}>✓</div>
                  <h2 style={{fontSize: 28, marginBottom: 12}}>Recibimos tu solicitud</h2>
                  <p style={{color: 'var(--gris-texto)', marginBottom: 24}}>Un especialista de Ventratech te contactará en menos de 48 horas hábiles con la propuesta técnica.</p>
                  <button className="btn btn-secondary" onClick={() => { setEnviado(false); setForm({ nombre: '', empresa: '', email: '', telefono: '', ciudad: '', modelo: '', caudal: '', aplicacion: '', mensaje: '' }); }}>Enviar otra solicitud</button>
                </div>
              ) : (
                <form className="quote-form" onSubmit={submit}>
                  <h3 style={{marginBottom: 24, fontSize: 22}}>Formulario de cotización</h3>
                  <div className="form-grid">
                    <div className="field"><label>Nombre completo *</label><input required value={form.nombre} onChange={update('nombre')} placeholder="Tu nombre" /></div>
                    <div className="field"><label>Empresa</label><input value={form.empresa} onChange={update('empresa')} placeholder="Tu empresa" /></div>
                    <div className="field"><label>Correo *</label><input type="email" required value={form.email} onChange={update('email')} placeholder="tu@correo.com" /></div>
                    <div className="field"><label>Teléfono / WhatsApp</label><input value={form.telefono} onChange={update('telefono')} placeholder="+52 984 000 0000" /></div>
                    <div className="field"><label>Ciudad / Estado</label><input value={form.ciudad} onChange={update('ciudad')} placeholder="Cancún, Playa del Carmen..." /></div>
                    <div className="field">
                      <label>Modelo de interés</label>
                      <select value={form.modelo} onChange={update('modelo')}>
                        <option value="">— Selecciona o no estoy seguro —</option>
                        {PRODUCTS.map(p => <option key={p.id} value={p.model}>{p.model} ({p.caudal} m³/h)</option>)}
                        <option value="otro">Necesito asesoría para elegir</option>
                      </select>
                    </div>
                    <div className="field full"><label>Caudal estimado (m³/h)</label><input value={form.caudal} onChange={update('caudal')} placeholder="Ej. 5,000  ·  Si no lo sabes, déjalo en blanco" /></div>
                    <div className="field full">
                      <label>Aplicación</label>
                      <select value={form.aplicacion} onChange={update('aplicacion')}>
                        <option value="">— Selecciona —</option>
                        {APPLICATIONS.map(a => <option key={a.num} value={a.titulo}>{a.titulo}</option>)}
                        <option value="otra">Otra</option>
                      </select>
                    </div>
                    <div className="field full"><label>Cuéntanos sobre tu proyecto</label><textarea value={form.mensaje} onChange={update('mensaje')} placeholder="Detalles del proyecto, plazos, cantidades, condiciones especiales..."></textarea></div>
                  </div>
                  <div style={{marginTop: 24, display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap'}}>
                    <button type="submit" className="btn btn-primary btn-arrow">Enviar solicitud</button>
                    <span style={{fontSize: 13, color: 'var(--gris-texto)'}}>Te respondemos en menos de 48 horas hábiles.</span>
                  </div>
                </form>
              )}
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { SupportPage, ContactPage });