// ===== HOME PAGE =====
function HomePage({ onNavigate, tweaks }) {
  const heroVariant = tweaks.heroStyle || 'industrial';
  const heroClass = `hero variant-${heroVariant}`;

  return (
    <main data-screen-label="01 Inicio">
      <section className={heroClass}>
        <div className="container">
          <span className="eyebrow">Ventilación de alto rendimiento · México</span>
          <h1>Aire que se mueve con <span className="accent">eficiencia</span>.<br/>Instalaciones que respiran mejor.</h1>
          <p className="lead">Ventiladores centrífugos industriales y comerciales con stock local en México. Selección técnica gratuita, entrega inmediata y respaldo de ingeniería para tu proyecto HVAC.</p>
          <div className="hero-actions">
            <a href="#products" className="btn btn-primary btn-arrow" onClick={(e) => { e.preventDefault(); onNavigate('products'); }}>Ver productos</a>
            <a href="#contact" className="btn btn-ghost" onClick={(e) => { e.preventDefault(); onNavigate('contact'); }}>Solicitar cotización</a>
          </div>
          <div className="hero-stats">
            <div><div className="stat-num">5</div><div className="stat-label">Modelos en stock</div></div>
            <div><div className="stat-num">10,500</div><div className="stat-label">m³/h caudal máximo</div></div>
            <div><div className="stat-num">12</div><div className="stat-label">Meses de garantía</div></div>
            <div><div className="stat-num">48h</div><div className="stat-label">Cotización técnica</div></div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="section-title-row">
            <div className="titles">
              <span className="eyebrow">Lo que nos define</span>
              <h2>Tres pilares que mueven cada proyecto.</h2>
            </div>
            <p>Diseñados para operar 24/7 en condiciones reales de México: temperatura, polvo, voltaje variable y largas jornadas.</p>
          </div>
          <div className="pillars">
            <div className="pillar">
              <div className="num">01 — PRECISIÓN</div>
              <h3>Selección técnica exacta</h3>
              <p>Cada ventilador se especifica con base en caudal, presión y aplicación real. Sin sobredimensionar, sin quedarte corto.</p>
            </div>
            <div className="pillar">
              <div className="num">02 — DURABILIDAD</div>
              <h3>Construidos para durar</h3>
              <p>Carcasa galvanizada, impulsor balanceado dinámicamente y motores IE2 listos para operación continua.</p>
            </div>
            <div className="pillar">
              <div className="num">03 — ESPECIALIZACIÓN</div>
              <h3>Solo ventilación</h3>
              <p>No vendemos de todo. Vendemos ventiladores. Por eso conocemos cada curva, cada caso y cada solución.</p>
            </div>
          </div>
        </div>
      </section>

      <section className="section" style={{background: 'var(--gris-bg)'}}>
        <div className="container">
          <div className="section-title-row">
            <div className="titles">
              <span className="eyebrow">Línea ADH-R · En stock</span>
              <h2>Cinco modelos. Una promesa: <br/>el aire correcto para tu proyecto.</h2>
            </div>
            <a href="#products" className="btn btn-secondary btn-arrow" onClick={(e) => { e.preventDefault(); onNavigate('products'); }}>Ver toda la línea</a>
          </div>
          <div className={`products-grid ${tweaks.cardDensity === 'compact' ? 'compact' : ''}`}>
            {PRODUCTS.map(p => <ProductCard key={p.id} p={p} onClick={(id) => onNavigate('detail', id)} />)}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="section-title-row">
            <div className="titles">
              <span className="eyebrow">Cómo trabajamos</span>
              <h2>De la consulta a la instalación, en 4 pasos.</h2>
            </div>
          </div>
          <div className="process-steps">
            <div className="step"><div className="step-num">01</div><h4>Cuéntanos tu proyecto</h4><p>Caudal, presión, aplicación. Si no los tienes, te ayudamos a calcularlos.</p></div>
            <div className="step"><div className="step-num">02</div><h4>Propuesta técnica</h4><p>Selección de modelo, ficha técnica y cotización formal en menos de 48 horas.</p></div>
            <div className="step"><div className="step-num">03</div><h4>Entrega inmediata</h4><p>Stock local. Envío a toda la República. Facturación al momento.</p></div>
            <div className="step"><div className="step-num">04</div><h4>Soporte post-venta</h4><p>Asesoría de instalación, puesta en marcha y garantía de 12 meses.</p></div>
          </div>
        </div>
      </section>

      <section className="section tight">
        <div className="container">
          <CTAStrip
            title="¿Listo para mover aire en serio?"
            subtitle="Recibe una cotización técnica gratuita en menos de 48 horas."
            ctaLabel="Solicitar cotización"
            onCta={() => onNavigate('contact')}
          />
        </div>
      </section>
    </main>
  );
}

// ===== PRODUCTS PAGE =====
function ProductsPage({ onNavigate, tweaks }) {
  const [filterCaudal, setFilterCaudal] = useState('all');
  const [filterPresion, setFilterPresion] = useState('all');
  const [compare, setCompare] = useState([]);

  const filtered = PRODUCTS.filter(p => {
    if (filterCaudal === 'low' && p.caudalNum > 4000) return false;
    if (filterCaudal === 'mid' && (p.caudalNum < 4000 || p.caudalNum > 8000)) return false;
    if (filterCaudal === 'high' && p.caudalNum < 8000) return false;
    if (filterPresion === 'low' && p.presionNum > 550) return false;
    if (filterPresion === 'mid' && (p.presionNum < 550 || p.presionNum > 750)) return false;
    if (filterPresion === 'high' && p.presionNum < 750) return false;
    return true;
  });

  const toggleCompare = (id) => {
    setCompare(prev => prev.includes(id) ? prev.filter(x => x !== id) : (prev.length < 3 ? [...prev, id] : prev));
  };

  return (
    <main data-screen-label="02 Productos">
      <Breadcrumb items={[{ label: 'Inicio', onClick: () => onNavigate('home') }, { label: 'Productos' }]} />
      <section className="section">
        <div className="container">
          <span className="eyebrow">Catálogo</span>
          <h1 style={{maxWidth: 800}}>Línea de ventiladores centrífugos ADH-R.</h1>
          <p style={{fontSize: 18, color: 'var(--gris-texto)', maxWidth: 720, marginTop: 16}}>Soplador centrífugo de doble entrada. Cinco modelos en stock en México, desde 2,800 hasta 10,500 m³/h. Selecciona por caudal y presión.</p>

          <div className="filters" style={{marginTop: 40}}>
            <div className="filter-group">
              <label>Caudal</label>
              <select value={filterCaudal} onChange={(e) => setFilterCaudal(e.target.value)}>
                <option value="all">Todos los caudales</option>
                <option value="low">Bajo (hasta 4,000 m³/h)</option>
                <option value="mid">Medio (4,000–8,000 m³/h)</option>
                <option value="high">Alto (más de 8,000 m³/h)</option>
              </select>
            </div>
            <div className="filter-group">
              <label>Presión Estática</label>
              <select value={filterPresion} onChange={(e) => setFilterPresion(e.target.value)}>
                <option value="all">Todas las presiones</option>
                <option value="low">Baja (hasta 550 Pa)</option>
                <option value="mid">Media (550–750 Pa)</option>
                <option value="high">Alta (más de 750 Pa)</option>
              </select>
            </div>
            <div className="filter-group" style={{flex: '0 0 auto'}}>
              <label>&nbsp;</label>
              <button className="btn btn-secondary" onClick={() => { setFilterCaudal('all'); setFilterPresion('all'); }}>Limpiar filtros</button>
            </div>
          </div>

          {filtered.length === 0 ? (
            <div style={{padding: 48, textAlign: 'center', color: 'var(--gris-texto)'}}>No hay modelos que coincidan. Prueba otros filtros.</div>
          ) : (
            <div className={`products-grid ${tweaks.cardDensity === 'compact' ? 'compact' : ''}`}>
              {filtered.map(p => (
                <div key={p.id} style={{position: 'relative'}}>
                  <ProductCard p={p} onClick={(id) => onNavigate('detail', id)} />
                  <label style={{position: 'absolute', top: 12, right: 12, background: 'rgba(255,255,255,0.95)', padding: '6px 10px', borderRadius: 4, fontSize: 11, fontWeight: 600, fontFamily: 'var(--font-display)', display: 'flex', gap: 6, alignItems: 'center', cursor: 'pointer', border: '1px solid var(--gris-claro)'}}>
                    <input type="checkbox" checked={compare.includes(p.id)} onChange={() => toggleCompare(p.id)} />
                    Comparar
                  </label>
                </div>
              ))}
            </div>
          )}

          <h2 style={{marginTop: 80, marginBottom: 24, fontSize: 28}}>Tabla comparativa</h2>
          <div className="spec-table-wrap">
            <table className={`spec-table ${tweaks.tableDensity === 'dense' ? 'dense' : ''}`}>
              <thead>
                <tr>
                  <th>Modelo</th><th>Caudal máx. (m³/h)</th><th>Presión máx. (Pa)</th><th>Velocidad (rpm)</th><th>Potencia (kW)</th><th>Eficiencia (%)</th><th>Peso (kg)</th>
                </tr>
              </thead>
              <tbody>
                {PRODUCTS.map(p => (
                  <tr key={p.id} onClick={() => onNavigate('detail', p.id)} style={{cursor: 'pointer'}}>
                    <td>{p.model}</td><td>{p.caudal}</td><td>{p.presion}</td><td>{p.velocidad}</td><td>{p.potencia}</td><td>{p.eficiencia}</td><td>{p.peso}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          {compare.length > 0 && (
            <div className="compare-bar">
              <div style={{display: 'flex', gap: 16, alignItems: 'center', flexWrap: 'wrap'}}>
                <strong style={{fontFamily: 'var(--font-display)', fontSize: 14}}>Comparando:</strong>
                <div className="chips">
                  {compare.map(id => {
                    const p = PRODUCTS.find(x => x.id === id);
                    return (
                      <div key={id} className="chip">
                        {p.model}
                        <button onClick={() => toggleCompare(id)}>×</button>
                      </div>
                    );
                  })}
                </div>
              </div>
              <button className="btn btn-primary" onClick={() => alert('Comparación lado a lado: ' + compare.join(', ') + '\n(Vista detallada en próxima iteración)')}>Comparar ({compare.length})</button>
            </div>
          )}
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { HomePage, ProductsPage });