// ===== DETAIL PAGE =====
function DetailPage({ productId, onNavigate, tweaks }) {
  const p = PRODUCTS.find(x => x.id === productId) || PRODUCTS[0];
  const idx = PRODUCTS.findIndex(x => x.id === p.id);
  const next = PRODUCTS[(idx + 1) % PRODUCTS.length];
  const prev = PRODUCTS[(idx - 1 + PRODUCTS.length) % PRODUCTS.length];

  return (
    <main data-screen-label={`03 Detalle ${p.model}`}>
      <Breadcrumb items={[
        { label: 'Inicio', onClick: () => onNavigate('home') },
        { label: 'Productos', onClick: () => onNavigate('products') },
        { label: p.model }
      ]} />
      <section className="section">
        <div className="container">
          <div className="detail-grid">
            <div>
              <div className="ph-image detail-image" style={{background:'#F5F7FB'}}>
                {p.img ? <img src={p.img} alt={p.model} style={{width:'100%',height:'100%',objectFit:'contain',padding:'32px'}} /> : (
                <div className="ph-content">
                  <span className="ph-icon">⌬</span>
                  <div>Foto Producto<br/>{p.model}<br/>Vista 3/4</div>
                </div>)}
              </div>
              <div style={{marginTop: 12, background:'#F5F7FB', borderRadius: 'var(--radius-md)', padding: 16, border: '1px solid var(--gris-claro)'}}>
                <div style={{fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.08em', color: 'var(--gris-texto)', marginBottom: 8, textTransform: 'uppercase'}}>Dibujo dimensional · {p.model}</div>
                {p.dibujo ? <img src={p.dibujo} alt={`Dibujo ${p.model}`} style={{width:'100%', display:'block', objectFit:'contain'}} /> : <div className="ph-image" style={{aspectRatio:'16/9'}}><div className="ph-content">Plano técnico</div></div>}
              </div>
            </div>
            <div className="detail-info">
              <div className="detail-model">{p.model} · En stock en México</div>
              <h1>Ventilador Centrífugo {p.id}</h1>
              <p className="detail-desc">{p.desc}</p>

              <div className="detail-quickspecs">
                <div><div className="ds-label">Caudal</div><div className="ds-value">{p.caudal}<span className="ds-unit">m³/h</span></div></div>
                <div><div className="ds-label">Presión estática</div><div className="ds-value">{p.presion}<span className="ds-unit">Pa</span></div></div>
                <div><div className="ds-label">Velocidad máx.</div><div className="ds-value">{p.velocidad}<span className="ds-unit">rpm</span></div></div>
                <div><div className="ds-label">Eficiencia</div><div className="ds-value">{p.eficiencia}<span className="ds-unit">%</span></div></div>
              </div>

              <div style={{display: 'flex', gap: 12, flexWrap: 'wrap'}}>
                <a href="#contact" className="btn btn-primary btn-arrow" onClick={(e) => { e.preventDefault(); onNavigate('contact'); }}>Solicitar cotización</a>
                <a href={`fichas/Ventratech-ADH-${p.id}.pdf`} target="_blank" rel="noopener" className="btn btn-secondary" download>Descargar ficha</a>
              </div>

              <div style={{marginTop: 32, paddingTop: 24, borderTop: '1px solid var(--gris-claro)'}}>
                <div style={{fontFamily: 'var(--font-display)', fontSize: 12, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--gris-texto)', marginBottom: 12}}>Aplicaciones recomendadas</div>
                <div style={{display: 'flex', flexWrap: 'wrap', gap: 8}}>
                  {p.aplicaciones.map(a => (
                    <span key={a} style={{padding: '6px 12px', background: 'var(--gris-bg)', borderRadius: 4, fontSize: 13, fontFamily: 'var(--font-display)', fontWeight: 600}}>{a}</span>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section tight" style={{background: 'var(--gris-bg)'}}>
        <div className="container">
          <h2 style={{marginBottom: 32, fontSize: 28}}>Especificaciones técnicas</h2>
          <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32}} className="detail-specs-grid">
            <div className="spec-table-wrap">
              <table className="spec-table">
                <thead><tr><th colSpan="2">Rendimiento</th></tr></thead>
                <tbody>
                  <tr><td>Caudal máx.</td><td>{p.caudal} m³/h</td></tr>
                  <tr><td>Presión estática máx.</td><td>{p.presion} Pa</td></tr>
                  <tr><td>Velocidad máx.</td><td>{p.velocidad} rpm</td></tr>
                  <tr><td>Potencia máx.</td><td>{p.potencia} kW</td></tr>
                  <tr><td>Eficiencia</td><td>{p.eficiencia} %</td></tr>
                  <tr><td>Rating FEG</td><td>FEG {p.feg}</td></tr>
                  <tr><td>Rango de motor</td><td>{p.motor}</td></tr>
                  <tr><td>Peso aprox.</td><td>{p.peso} kg</td></tr>
                </tbody>
              </table>
            </div>
            <div className="spec-table-wrap">
              <table className="spec-table">
                <thead><tr><th colSpan="2">Dimensiones (mm)</th></tr></thead>
                <tbody>
                  <tr><td>Ancho carcasa (A)</td><td>{p.dimA}</td></tr>
                  <tr><td>Alto carcasa (B)</td><td>{p.dimB}</td></tr>
                  <tr><td>Diámetro rodete (C)</td><td>{p.rodete}</td></tr>
                  <tr><td>Altura total (M)</td><td>{p.dimM}</td></tr>
                  <tr><td>Tipo</td><td>Doble entrada (DIDW)</td></tr>
                  <tr><td>Álabes</td><td>Curvados hacia adelante</td></tr>
                  <tr><td>Carcasa</td><td>Acero galvanizado</td></tr>
                  <tr><td>Motor</td><td>Trifásico IE2/IE3</td></tr>
                </tbody>
              </table>
            </div>
          </div>

          <div style={{marginTop: 40, padding: 32, background: 'white', borderRadius: 'var(--radius-md)', border: '1px solid var(--gris-claro)'}}>
            <h3 style={{marginBottom: 4}}>Curva de rendimiento</h3>
            <p style={{fontSize: 14, color: 'var(--gris-texto)', marginBottom: 20}}>Caudal (m³/h) vs. presión total (Pa) a distintas velocidades del rodete.</p>
            <div style={{background:'#F5F7FB', borderRadius: 'var(--radius-sm)', padding: 16}}>
              {p.curva ? <img src={p.curva} alt={`Curva ${p.model}`} style={{width:'100%', maxHeight: 480, objectFit:'contain', display:'block'}} /> : <div className="ph-image" style={{aspectRatio: '16/6'}}><div className="ph-content">Gráfica Caudal vs. Presión</div></div>}
            </div>
            <div style={{marginTop: 24, overflowX: 'auto'}}>
              <table className="spec-table" style={{minWidth: 520}}>
                <thead><tr><th>Velocidad (rpm)</th><th>Caudal (m³/h)</th><th>Presión total (Pa)</th><th>Potencia (kW)</th></tr></thead>
                <tbody>
                  {p.puntos.map((pt, i) => (
                    <tr key={i}><td>{pt.rpm}</td><td>{pt.caudal}</td><td>{pt.pt}</td><td>{pt.kw}</td></tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </section>

      <section className="section tight">
        <div className="container">
          <div style={{display: 'flex', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap'}}>
            <a href="#" className="btn btn-secondary btn-arrow" onClick={(e) => { e.preventDefault(); onNavigate('detail', prev.id); }} style={{flexDirection: 'row-reverse'}}>← Anterior: {prev.model}</a>
            <a href="#" className="btn btn-secondary btn-arrow" onClick={(e) => { e.preventDefault(); onNavigate('detail', next.id); }}>Siguiente: {next.model}</a>
          </div>
        </div>
      </section>
    </main>
  );
}

// ===== APPLICATIONS =====
function ApplicationsPage({ onNavigate }) {
  return (
    <main data-screen-label="04 Aplicaciones">
      <Breadcrumb items={[{ label: 'Inicio', onClick: () => onNavigate('home') }, { label: 'Aplicaciones' }]} />
      <section className="section">
        <div className="container">
          <span className="eyebrow">Industrias y aplicaciones</span>
          <h1 style={{maxWidth: 800}}>Mover aire en el lugar correcto, a la velocidad correcta.</h1>
          <p style={{fontSize: 18, color: 'var(--gris-texto)', maxWidth: 720, marginTop: 16}}>De cocinas comerciales a plantas industriales, los ventiladores Ventratech operan en algunos de los entornos más demandantes de México.</p>

          <div className="apps-grid" style={{marginTop: 56}}>
            {APPLICATIONS.map(a => (
              <div key={a.num} className="app-card">
                <div className="app-num">{a.num}</div>
                <h3>{a.titulo}</h3>
                <p>{a.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section tight">
        <div className="container">
          <CTAStrip
            title="¿Tu aplicación no está en la lista?"
            subtitle="Cada proyecto es distinto. Cuéntanos el tuyo y armamos una solución a la medida."
            ctaLabel="Hablar con un especialista"
            onCta={() => onNavigate('contact')}
          />
        </div>
      </section>
    </main>
  );
}

// ===== ABOUT =====
function AboutPage({ onNavigate }) {
  return (
    <main data-screen-label="05 Nosotros">
      <Breadcrumb items={[{ label: 'Inicio', onClick: () => onNavigate('home') }, { label: 'Nosotros' }]} />

      <section className="section brand">
        <div className="container" style={{position: 'relative', zIndex: 1}}>
          <span className="eyebrow light">Quiénes somos</span>
          <h1 style={{maxWidth: 900}}>Especialistas en ventilación.<br/>Nada más, nada menos.</h1>
          <p style={{fontSize: 18, maxWidth: 720, marginTop: 16, color: 'rgba(255,255,255,0.8)'}}>Ventratech nace para resolver un problema real del mercado mexicano: acceso confiable a ventiladores industriales con stock local, soporte técnico y respuesta rápida.</p>
        </div>
        <div style={{position: 'absolute', right: '-10%', top: '50%', transform: 'translateY(-50%)', width: 600, height: 600, opacity: 0.06, pointerEvents: 'none'}}>
          <img src="assets/isotipo-blanco.png" style={{width: '100%', height: '100%', objectFit: 'contain'}} />
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'start'}} className="about-cols">
            <div>
              <span className="eyebrow">Nuestra promesa</span>
              <h2 style={{marginBottom: 24}}>Aire que se mueve con eficiencia. Clientes que operan con tranquilidad.</h2>
              <p style={{fontSize: 17, color: '#2a3140', marginBottom: 16}}>Cuando tu sistema HVAC funciona, nadie lo nota. Cuando falla, todos lo notan. Por eso entregamos equipos seleccionados con criterio técnico, no por catálogo.</p>
              <p style={{fontSize: 17, color: '#2a3140'}}>Cada modelo en nuestro inventario fue elegido por su balance entre rendimiento, durabilidad y costo total de propiedad. Nada de "lo que había disponible".</p>
            </div>
            <div>
              <div className="about-promise">
                "Aire que se mueve con eficiencia, instalaciones que respiran mejor, clientes que operan con tranquilidad."
                <div style={{marginTop: 16, fontSize: 12, color: 'var(--gris-texto)', fontWeight: 500, fontFamily: 'var(--font-mono)', letterSpacing: '0.08em'}}>— PROMESA DE MARCA VENTRATECH</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section" style={{background: 'var(--gris-bg)'}}>
        <div className="container">
          <span className="eyebrow">Pilares</span>
          <h2 style={{marginBottom: 48}}>Tres ideas que rigen cada decisión.</h2>
          <div className="pillars">
            <div className="pillar">
              <div className="num">01 — PRECISIÓN</div>
              <h3>La especificación correcta</h3>
              <p>Seleccionamos por curva de rendimiento, no por nombre comercial. El equipo que recomendamos es el que necesitas, no el que más nos conviene vender.</p>
            </div>
            <div className="pillar">
              <div className="num">02 — DURABILIDAD</div>
              <h3>Equipos que resisten</h3>
              <p>Carcasa galvanizada, balanceo dinámico, motores de eficiencia IE2. Pensados para operación continua en climas y voltajes reales de México.</p>
            </div>
            <div className="pillar">
              <div className="num">03 — ESPECIALIZACIÓN</div>
              <h3>Foco absoluto</h3>
              <p>No vendemos bombas, ni compresores, ni tuberías. Solo ventiladores. Esa es nuestra ventaja: profundidad sobre amplitud.</p>
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 24}} className="stats-grid">
            <div style={{padding: 32, borderLeft: '3px solid var(--azul-medio)'}}>
              <div style={{fontSize: 56, fontWeight: 800, fontFamily: 'var(--font-display)', color: 'var(--azul-profundo)', lineHeight: 1}}>5</div>
              <div style={{marginTop: 8, fontSize: 15}}>Modelos disponibles en stock local</div>
            </div>
            <div style={{padding: 32, borderLeft: '3px solid var(--azul-medio)'}}>
              <div style={{fontSize: 56, fontWeight: 800, fontFamily: 'var(--font-display)', color: 'var(--azul-profundo)', lineHeight: 1}}>48h</div>
              <div style={{marginTop: 8, fontSize: 15}}>Tiempo máximo para entregar cotización técnica</div>
            </div>
            <div style={{padding: 32, borderLeft: '3px solid var(--azul-medio)'}}>
              <div style={{fontSize: 56, fontWeight: 800, fontFamily: 'var(--font-display)', color: 'var(--azul-profundo)', lineHeight: 1}}>100%</div>
              <div style={{marginTop: 8, fontSize: 15}}>De los proyectos con asesoría técnica gratuita</div>
            </div>
          </div>
        </div>
      </section>

      <section className="section tight">
        <div className="container">
          <CTAStrip
            title="Conviértete en cliente Ventratech"
            subtitle="Comencemos por entender tu proyecto."
            ctaLabel="Contactar"
            onCta={() => onNavigate('contact')}
          />
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { DetailPage, ApplicationsPage, AboutPage });