// Pyrovolt — Chargers list + 4 detail pages
// JSX is NEVER stored in module-level consts. Headlines use *italic* markers; icons are string keys.

const CHARGER_MODELS = {
  compact: {
    slug: 'compact',
    family: 'stand-alone',
    name: 'Compact',
    eyebrow: 'Stand-alone DC',
    tag: '30 kW',
    headline: 'Compact *30 kW*',
    subtitle: 'DC compacto para parkings, oficinas y ubicaciones semipúblicas.',
    chips: ['30 kW', '150–1.000 V', 'CCS2'],
    img: '/assets/products/blaze-compact.png',
    spec1: '30 kW',
    spec2: '150–1.000 V',
    spec3: 'CCS2',
    features: [
      { icon: 'expand',   title: 'Carga DC de oportunidad', desc: 'Para estancias medias en parking, oficina o retail.' },
      { icon: 'settings', title: 'Diseño compacto',           desc: 'Apto para parking, oficinas y residencial.' },
      { icon: 'shield',   title: 'Protección eléctrica',      desc: 'Diseñado para uso diario en entornos semipúblicos.' },
      { icon: 'cpu',      title: 'Operación conectada',       desc: 'OCPP 2.0.1 nativo y monitorización remota.' },
    ],
    descLead: 'BLAZE Compact 30 kW aporta carga DC sin sobredimensionar la acometida. Encaja en parkings, oficinas, hoteles y ubicaciones semipúblicas donde el espacio y la sencillez de instalación importan.',
    variants: [
      { name: 'Pole',    desc: 'Instalación en suelo · pole-mount' },
      { name: 'Wallbox', desc: 'Instalación en pared, ideal para garajes' },
      { name: 'Retro',   desc: 'Acabado retrofit para integraciones existentes' },
    ],
    specs: [
      { title: 'Eléctricas',   rows: [['Potencia DC','30 kW'],['Tensión salida','150–1.000 VDC'],['Tensión entrada','400 VAC ±10%'],['Corriente máx.','60 A · CCS2'],['Eficiencia','≥ 95%']] },
      { title: 'Mecánicas',    rows: [['Dimensiones','1.700 × 600 × 350 mm'],['Peso','220 kg'],['IP rating','IP54'],['Refrigeración','Aire forzado']] },
      { title: 'Conectividad', rows: [['Protocolos','OCPP 2.0.1 · ISO 15118-20'],['Conectividad','4G · WiFi · Ethernet'],['Pago','RFID · App · QR · Plug & Charge'],['Pantalla','7" táctil']] },
      { title: 'Cumplimiento', rows: [['Normas','IEC 61851-23/24'],['Marcado','CE'],['Garantía','24 meses + extensión 5 años']] },
    ],
  },
  modular: {
    slug: 'modular',
    family: 'stand-alone',
    name: 'DC 60 / 80',
    eyebrow: 'Stand-alone DC',
    tag: '60–80 kW',
    headline: 'Modular *60 / 80 kW*',
    subtitle: 'Carga DC modular para flotas ligeras, concesionarios y vía pública.',
    chips: ['60–80 kW', '200–1.000 V', 'CCS2'],
    img: '/assets/products/blaze-modular.png',
    spec1: '60–80 kW',
    spec2: '200–1.000 V',
    spec3: 'CCS2 dual',
    features: [
      { icon: 'expand',   title: 'Eficiencia superior',  desc: 'Hasta 96% de eficiencia operativa.' },
      { icon: 'cpu',      title: 'Flexibilidad total',   desc: 'Configuraciones 60/80 kW intercambiables.' },
      { icon: 'settings', title: 'Huella compacta',      desc: 'Formato contenido para estaciones urbanas.' },
      { icon: 'shield',   title: 'Preparado para crecer', desc: 'Arquitectura modular para ampliar por fases.' },
    ],
    descLead: 'El Pyrovolt Modular 60/80 kW es un cargador DC ultrarrápido pensado para estaciones urbanas, concesionarios y flotas pequeñas. Su arquitectura modular permite adaptar la potencia entregada a la rotación real de la estación, optimizando inversión y operación.',
    variants: [
      { name: '60 kW', desc: 'Versión 60 kW · 200–1.000 VDC' },
      { name: '80 kW', desc: 'Versión 80 kW · 200–1.000 VDC' },
    ],
    specs: [
      { title: 'Eléctricas',   rows: [['Potencia DC','60 / 80 kW'],['Tensión salida','200–1.000 VDC'],['Tensión entrada','400 VAC ±10%'],['Corriente máx.','200 A · CCS2 dual'],['Eficiencia','≥ 96%']] },
      { title: 'Mecánicas',    rows: [['Dimensiones','2.100 × 800 × 600 mm'],['Peso','640 kg'],['IP rating','IP54'],['Refrigeración','Aire forzado']] },
      { title: 'Conectividad', rows: [['Protocolos','OCPP 2.0.1 · ISO 15118-20'],['Conectividad','4G · WiFi · Ethernet'],['Pago','RFID · App · QR · Plug & Charge'],['Pantalla','15" táctil']] },
      { title: 'Cumplimiento', rows: [['Normas','IEC 61851-23/24'],['Marcado','CE'],['Garantía','24 meses + extensión 5 años']] },
    ],
  },
  ultra: {
    slug: 'ultra',
    family: 'stand-alone',
    name: 'Ultra',
    eyebrow: 'Stand-alone DC',
    tag: '240–800 kW',
    headline: 'Ultra *240 – 800 kW*',
    subtitle: 'HPC stand-alone para corredores y estaciones de alta rotación.',
    chips: ['240–800 kW', '300–1.000 V', 'CCS2 dual'],
    img: '/assets/products/blaze-ultra.png',
    spec1: '240–800 kW',
    spec2: '150–1.000 V',
    spec3: 'CCS2 dual',
    features: [
      { icon: 'bolt',    title: 'Máxima potencia',       desc: 'HPC hasta 800 kW en stand-alone.' },
      { icon: 'expand',  title: 'Escalabilidad real',    desc: 'Modular para crecer en caliente.' },
      { icon: 'network', title: 'Compatibilidad total',  desc: 'CCS2 dual y MCS opcional.' },
      { icon: 'shield',  title: 'Preparado para vehículos pesados',  desc: 'Arquitectura compatible con evolución a MCS.' },
    ],
    descLead: 'El Pyrovolt Ultra es la solución HPC autónoma de mayor potencia: pensada para corredores, áreas de servicio, taxis y VTC. Refrigeración líquida, dual CCS2 y arquitectura preparada para ampliaciones modulares hasta 800 kW.',
    variants: [
      { name: '240 kW', desc: 'Configuración base, ideal para corredor.' },
      { name: '400 kW', desc: 'Hub de carga rápida con dual CCS2.' },
      { name: '800 kW', desc: 'Máxima potencia. Preparado para MCS y truck stops.' },
    ],
    powerBars: [
      { v: 240, unit: ' kW', label: '240' },
      { v: 300, unit: ' kW', label: '300' },
      { v: 350, unit: ' kW', label: '350' },
      { v: 360, unit: ' kW', label: '360' },
      { v: 400, unit: ' kW', label: '400' },
      { v: 480, unit: ' kW', label: '480' },
      { v: 640, unit: ' kW', label: '640' },
      { v: 700, unit: ' kW', label: '700' },
      { v: 800, unit: ' kW', label: '800' },
    ],
    specs: [
      { title: 'Eléctricas',   rows: [['Potencia DC','240–800 kW'],['Tensión salida','300–1.000 VDC'],['Tensión entrada','400 VAC ±10%'],['Corriente máx.','500 A · CCS2 dual'],['Eficiencia','≥ 96%']] },
      { title: 'Mecánicas',    rows: [['Dimensiones','2.200 × 900 × 700 mm'],['Peso','1.100 kg'],['IP rating','IP54'],['Refrigeración','Líquida']] },
      { title: 'Conectividad', rows: [['Protocolos','OCPP 2.0.1 · ISO 15118-20'],['Conectividad','4G · WiFi · Ethernet'],['Pago','RFID · App · QR · Plug & Charge'],['Pantalla','21" táctil']] },
      { title: 'Cumplimiento', rows: [['Normas','IEC 61851-23/24'],['Marcado','CE'],['Garantía','24 meses + extensión 5 años']] },
    ],
  },
  hyper: {
    slug: 'hyper',
    family: 'distributed',
    name: 'Hyper',
    eyebrow: 'Sistema distribuido',
    tag: '480–1.280 kW',
    headline: 'Hyper *480 – 1.280 kW*',
    subtitle: 'Sistema distribuido: cabina de potencia y surtidores satélite.',
    chips: ['Cabina 1.280 kW', '6× surtidores 500 A', 'Distribución dinámica'],
    img: '/assets/products/blaze-hyper-selector.png',
    spec1: '1.280 kW',
    spec2: 'Hasta 6 surtidores',
    spec3: 'CCS2 dual · 500 A',
    features: [
      { icon: 'expand',  title: 'Crecimiento por fases',    desc: 'Añade cabinas o surtidores según demanda.' },
      { icon: 'cpu',     title: 'Reparto dinámico',         desc: 'Asigna potencia a cada toma según sesión.' },
      { icon: 'bolt',    title: 'Alta disponibilidad',      desc: 'Redundancia interna y operación 24/7.' },
      { icon: 'charger', title: 'Menor coste por toma',     desc: 'Potencia centralizada para hubs y truck-stops.' },
    ],
    descLead: 'BLAZE Hyper separa la electrónica de potencia de la interfaz de usuario. Una cabina alimenta hasta 6 surtidores dual CCS2 y reparte la potencia disponible según la demanda real de cada sesión.',
    variants: [
      { name: '480 kW',   desc: '4 surtidores · cabina 480 kW · ideal hubs urbanos' },
      { name: '800 kW',   desc: '6 surtidores · cabina 800 kW · corredores' },
      { name: '1.280 kW', desc: '6 surtidores · cabina 1.280 kW · truck-stops' },
    ],
    powerBars: [
      { v: 480, unit: ' kW', label: '480' },
      { v: 640, unit: ' kW', label: '640' },
      { v: 800, unit: ' kW', label: '800' },
      { v: 960, unit: ' kW', label: '960' },
      { v: 1120, unit: ' kW', label: '1.120' },
      { v: 1280, unit: ' kW', label: '1.280' },
    ],
    specs: [
      { title: 'Eléctricas',   rows: [['Potencia cabina','480 / 800 / 1.280 kW'],['Surtidores','Hasta 6 unidades'],['Tensión salida','150–1.000 VDC'],['Corriente surtidor','500 A · CCS2 dual'],['Eficiencia','≥ 96%']] },
      { title: 'Mecánicas',    rows: [['Cabina','2.400 × 1.200 × 2.100 mm'],['Surtidor','1.800 × 600 × 400 mm'],['IP rating','IP54'],['Refrigeración','Líquida']] },
      { title: 'Conectividad', rows: [['Protocolos','OCPP 2.0.1 · ISO 15118-20'],['Distribución','Dinámica multi-puerto'],['Pago','RFID · App · QR · Plug & Charge'],['Pantalla','15" táctil por surtidor']] },
      { title: 'Cumplimiento', rows: [['Normas','IEC 61851-23/24'],['Marcado','CE'],['Garantía','24 meses + extensión 5 años']] },
    ],
  },
};

// ─── LIST PAGE ──────────────────────────────────────────────────────────
function ChargersPage({ navigate }) {
  const selectorModels = [
    {
      model: CHARGER_MODELS.compact,
      number: '01',
      title: ['BLAZE', 'Compact'],
      copy: 'Cargador DC compacto para ubicaciones urbanas, retail, parking y carga de oportunidad.',
      tag: '30 kW',
    },
    {
      model: CHARGER_MODELS.modular,
      number: '02',
      title: ['BLAZE', 'Modular'],
      copy: 'Cargador DC modular de 60 / 80 kW para flotas, concesionarios y carga pública.',
      tag: '60 / 80 kW',
    },
    {
      model: CHARGER_MODELS.ultra,
      number: '03',
      title: ['BLAZE', 'Ultra'],
      copy: 'Cargador HPC stand-alone para hubs, corredores y estaciones de alta demanda.',
      tag: '240–800 kW',
    },
    {
      model: CHARGER_MODELS.hyper,
      number: '04',
      title: ['BLAZE', 'Hyper'],
      copy: 'Sistema distribuido con cabina y surtidores para hubs HPC escalables.',
      tag: '480–1.280 kW',
    },
  ];

  return (
    <>
      <section
        className="pv-chargers-cover"
        aria-labelledby="chargers-cover-title">
        <img
          className="pv-chargers-cover-photo"
          src="/mp5fqw0l-7ac31b36-a1c9-4f12-b147-92bceb3f6e5e.png"
          alt=""
          aria-hidden="true" />
        <div className="pv-chargers-cover-shade" aria-hidden="true" />
        <div className="container pv-chargers-cover-inner">
          <div className="pv-chargers-cover-copy">
            <div className="pv-chargers-cover-eyebrow">Gama de recarga DC</div>
            <h1 id="chargers-cover-title" className="pv-chargers-cover-title">
              <span>Cargadores </span>
              <strong>BLAZE</strong>
            </h1>
            <p>
              Del parking al hub HPC: cargadores compactos, modulares, stand-alone y distribuidos con operación OCPP desde el primer despliegue.
            </p>
            <div className="pv-chargers-cover-specs" aria-label="Resumen de la gama BLAZE">
              <div><strong>30 - 1.280 kW</strong><span>potencia DC</span></div>
              <div><strong>4 arquitecturas</strong><span>Compact, Modular, Ultra e Hyper</span></div>
              <div><strong>OCPP listo</strong><span>operación y pagos integrados</span></div>
            </div>
          </div>
        </div>
      </section>

      <section className="pv-showcase-page is-chargers pv-chargers-selector-section">
        <div className="container pv-showcase-selector-wrap">
          <div className="pv-showcase-selector-head">
            <div>
              <div className="pv-section-kicker">Selector de producto</div>
              <h2>Elige arquitectura de recarga.</h2>
            </div>
            <p>
              Compara potencia, formato y arquitectura para elegir el cargador que encaja con la instalación.
            </p>
          </div>

          <div className="pv-chargers-product-bars" aria-label="Selector visual de productos BLAZE">
            {selectorModels.map(({ model, number, title, copy, tag }) => (
              <a
                key={model.slug}
                href={'#charger-' + model.slug}
                className={'pv-charger-bar is-' + model.slug}
                onClick={(event) => {
                  event.preventDefault();
                  navigate('charger-' + model.slug);
                }}>
                <div className="pv-charger-bar-num">{number}</div>
                <div className="pv-charger-bar-copy">
                  <h2>{title[0]} <span>{title[1]}</span></h2>
                  <p>{copy}</p>
                </div>
                <div className="pv-charger-product-stage">
                  <img className="pv-charger-product-img" src={model.img} alt={model.name} />
                </div>
                <div className="pv-charger-bar-tag">
                  <span>Ver producto</span>
                  <span>{tag}</span>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>

      <CTAStrip navigate={navigate}/>
    </>
  );
}

function ChargerCard({ model, navigate }) {
  return (
    <article style={{
      display: 'grid',
      gridTemplateColumns: '180px 1fr',
      gap: 24,
      padding: '20px 0',
      borderBottom: '1px solid var(--line)',
      cursor: 'pointer',
    }} onClick={() => navigate('charger-' + model.slug)}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <img src={model.img} alt={model.name} style={{ maxWidth: '100%', maxHeight: 120, objectFit: 'contain' }}/>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 6 }}>
        <div style={{ fontSize: 12, color: 'var(--fg-mute)', letterSpacing: '0.1em', textTransform: 'uppercase' }}>{model.eyebrow}</div>
        <h3 style={{ margin: 0, fontSize: 20, fontWeight: 600 }}>{model.name}</h3>
        <div style={{ fontSize: 13, color: 'var(--fg-dim)', display: 'flex', gap: 16, marginTop: 4 }}>
          <span>{model.spec1}</span>
          <span>{model.spec2}</span>
          <span>{model.spec3}</span>
        </div>
      </div>
    </article>
  );
}

function Stat({ tag, k }) {
  return (
    <div style={{ marginBottom: 14 }}>
      <div style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 600, letterSpacing: '-0.02em' }}>{tag}</div>
      <div className="t-mono" style={{ color: 'var(--fg-mute)', marginTop: 4, fontSize: 11 }}>{k}</div>
    </div>
  );
}

function ChargersWhiteGuide() {
  const items = [
    ['Stand-alone', 'Instalación simple, coste contenido y despliegue rápido para 1–2 puntos.'],
    ['Distribuido', 'Cabina + satélites para hubs grandes, más potencia y mejor coste por toma.'],
    ['CCS2 / MCS', 'Preparado para turismo, flota profesional y transporte pesado.'],
    ['OCPP / ISO 15118', 'Integración backend, pago, monitorización y Plug & Charge.'],
  ];
  return (
    <section className="pv-light-panel section light">
      <div className="container">
        <div className="pv-light-head">
          <div>
            <div className="h-eyebrow" style={{ marginBottom: 12, color: 'var(--fg-mute)' }}>Guía rápida</div>
            <h2 className="h-section">Cómo leer la gama de cargadores.</h2>
          </div>
        </div>
        <div className="pv-light-grid cols-4">
          {items.map(([t, d]) => (
            <article key={t} className="pv-light-card">
              <h3>{t}</h3>
              <p>{d}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function ChargerFactsLight({ model }) {
  const ideal = {
    compact: 'Hoteles, parkings, oficinas y retail de baja rotación.',
    modular: 'Concesionarios, flotas ligeras y estaciones urbanas.',
    ultra: 'Corredores, hubs urbanos, VTC y flotas intensivas.',
    hyper: 'Hubs HPC, truck-stops y estaciones de gran escala.',
  }[model.slug] || 'Aplicaciones C&I y utility.';
  const items = [
    { k: 'Arquitectura', v: model.family === 'distributed' ? 'Sistema distribuido' : 'Stand-alone DC' },
    { k: 'Potencia', v: model.spec1 },
    { k: 'Salida', v: model.spec2 },
    { k: 'Conectores', v: model.spec3 },
    { k: 'Ideal para', v: ideal },
    { k: 'Digital', v: 'OCPP 2.0.1 · ISO 15118 · Monitorización remota' },
  ];
  return (
    <section className="pv-light-panel section light">
      <div className="container">
        <div className="pv-light-head">
          <div>
            <div className="h-eyebrow" style={{ marginBottom: 12, color: 'var(--fg-mute)' }}>Datos de producto</div>
            <h2 className="h-section">Datos clave del cargador.</h2>
          </div>
          <p className="t-lead" style={{ maxWidth: 520 }}>Un bloque claro para ver de un vistazo el encaje comercial y técnico del equipo.</p>
        </div>
        <div className="pv-light-grid cols-3">
          {items.map((it) => (
            <article key={it.k} className="pv-light-card">
              <div className="pv-light-k">{it.k}</div>
              <h3>{it.v}</h3>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── DETAIL PAGE (premium interactive pattern) ─────────────────────────
const ULTRA_POWER_DATA = {
  240: { inputCurrent: '444 A', inputPower: '266 kVA', outputCurrent: '350 A' },
  300: { inputCurrent: '555 A', inputPower: '329 kVA', outputCurrent: '438 A' },
  350: { inputCurrent: '648 A', inputPower: '384 kVA', outputCurrent: '510 A' },
  360: { inputCurrent: '666 A', inputPower: '394 kVA', outputCurrent: '535 A' },
  400: { inputCurrent: '740 A', inputPower: '438 kVA', outputCurrent: '584 A' },
  480: { inputCurrent: '888 A', inputPower: '526 kVA', outputCurrent: '700 A' },
  640: { inputCurrent: '1.184 A', inputPower: '701 kVA', outputCurrent: '932 A' },
  700: { inputCurrent: '1.295 A', inputPower: '767 kVA', outputCurrent: '1.021 A' },
  800: { inputCurrent: '1.480 A', inputPower: '877 kVA', outputCurrent: '1.167 A' },
};

const HYPER_POWER_DATA = {
  dispenser350: {
    type: 'dispenser',
    label: 'Dispenser 350A',
    shortLabel: '350A dispenser',
    heroLabel: '350 A',
    architecture: 'Satellite dispenser',
    outputVoltage: '150-1000 Vdc',
    outputCurrent: 'Hasta 350 A',
    connectorType: '2 x CCS2',
    cooling: 'Refrigeración por aire',
    dimensions: '1800 x 600 x 400 mm',
    display: '15" pantalla táctil HD',
    protocols: 'OCPP 2.0.1 / ISO 15118',
    access: 'RFID, QR, App, Plug & Charge, POS',
  },
  dispenser500: {
    type: 'dispenser',
    label: 'Dispenser 500A',
    shortLabel: '500A dispenser',
    heroLabel: '500 A',
    architecture: 'Satellite dispenser',
    outputVoltage: '150-1000 Vdc',
    outputCurrent: 'Hasta 500 A',
    connectorType: '2 x CCS2',
    cooling: 'Liquid-cooled',
    dimensions: '1800 x 600 x 400 mm',
    display: '15" pantalla táctil HD',
    protocols: 'OCPP 2.0.1 / ISO 15118',
    access: 'RFID, QR, App, Plug & Charge, POS',
  },
  powerbank480: {
    type: 'powerbank',
    label: 'Power Bank 480kW',
    shortLabel: '480kW power bank',
    heroLabel: '480 kW',
    cabinetPower: '480 kW',
    architecture: 'Central power cabinet',
    inputVoltage: '400 Vac +/-10%',
    gridType: '3P + N + PE',
    distribution: 'Dinámica multipuerto',
    dispenserSupport: 'Hasta 4 surtidores',
    cooling: 'Liquid-cooled',
    dimensions: '2400 x 1200 x 2100 mm',
    operation: 'Exterior / 24-7',
    protocols: 'OCPP 2.0.1 / ISO 15118',
    technology: 'Ethernet / WiFi / 4G',
  },
  powerbank1280: {
    type: 'powerbank',
    label: 'Power Bank 1280kW',
    shortLabel: '1.280kW power bank',
    heroLabel: '1.280 kW',
    cabinetPower: '1.280 kW',
    architecture: 'Central power cabinet',
    inputVoltage: '400 Vac +/-10%',
    gridType: '3P + N + PE',
    distribution: 'Dinámica multipuerto',
    dispenserSupport: 'Hasta 6 surtidores',
    cooling: 'Liquid-cooled',
    dimensions: '2400 x 1200 x 2100 mm',
    operation: 'Exterior / 24-7',
    protocols: 'OCPP 2.0.1 / ISO 15118',
    technology: 'Ethernet / WiFi / 4G',
  },
};

const COMPACT_POWER_DATA = {
  30: { inputCurrent: '48 A', inputPower: '34 kVA', outputCurrent: '60 A' },
};

const MODULAR_POWER_DATA = {
  60: { inputCurrent: '96 A', inputPower: '68 kVA', outputCurrent: '150 A' },
  80: { inputCurrent: '128 A', inputPower: '90 kVA', outputCurrent: '200 A' },
};

const ADVANCED_CHARGER_DETAIL = {

  compact: {
    detailimg: '/assets/products/blaze-compact.png',
    eyebrow: 'Cargador DC compacto',
    title: 'BLAZE COMPACT',
    verticalA: 'COMPACT',
    verticalB: '30kW',
    defaultPower: 30,
    powers: [30],
    data: COMPACT_POWER_DATA,
    subtitle: 'Cargador DC compacto para carga rápida en ubicaciones urbanas.',
    copy: 'Solución DC de huella reducida para hoteles, oficinas, retail, parkings y ubicaciones semipúblicas. Instalación sencilla, operación OCPP y acceso de usuario claro.',
    heroFacts: [
      ['30 kW', 'Potencia DC'],
      ['CCS2', 'Conector'],
      ['150-1000 Vdc', 'Tensión de salida'],
      ['OCPP', '2.0.1 ready'],
    ],
    defaultMount: 'pedestal',
    mountOptions: [
      {
        key: 'trolley',
        name: 'Trolley',
        short: 'Trolley',
        desc: 'Formato móvil sobre trolley para despliegues flexibles, pruebas piloto o ubicaciones con operativa cambiante.'
      },
      {
        key: 'wallbox',
        name: 'Wallbox',
        short: 'Wallbox',
        desc: 'Montaje mural para garajes, aparcamientos y proyectos donde se busca la mínima huella física.'
      },
      {
        key: 'pedestal',
        name: 'Pedestal',
        short: 'Pedestal',
        desc: 'Instalación autoportante sobre pedestal, ideal para exterior, retail y aparcamientos de acceso público.'
      },
    ],
    sections: [
      {
        index: '01',
        title: 'DC compacto para espacios reales.',
        text: 'BLAZE Compact ofrece carga rápida sin sobredimensionar la infraestructura. Es la entrada natural a DC para ubicaciones con rotación media y demanda controlada.',
        points: [
          ['Formato reducido', 'Apto para parking, oficinas y retail con espacio limitado.'],
          ['Montaje flexible', 'Disponible en trolley, wallbox o pedestal según la ubicación.'],
          ['Conectado', 'Supervisión remota, autenticación y pagos integrables.'],
        ],
      },
      {
        index: '02',
        title: 'Operación sencilla para equipos pequeños.',
        text: 'Interfaz clara, protecciones eléctricas y conectividad abierta para integrarse en operación CPO, flota o infraestructura privada.',
        points: [
          ['IP54 / IK10', 'Preparado para uso interior y exterior.'],
          ['RFID / App / QR', 'Acceso de usuario flexible.'],
          ['Mantenimiento simple', 'Arquitectura accesible y componentes estandarizados.'],
        ],
      },
    ],
    specSections: (power, selected, selectedMount) => ([
      ['Entrada', [
        ['Tensión de entrada', '400 Vac +/-10%'],
        ['Frecuencia', '50 Hz'],
        ['Tipo de red', '3P + N + PE'],
        ['Corriente máxima de entrada', selected.inputCurrent],
        ['Potencia máxima de entrada', selected.inputPower],
        ['THDi', '< 5%'],
      ]],
      ['Salida', [
        ['Modo de carga', 'Mode 4'],
        ['Tipo de conector', 'CCS2'],
        ['Tensión de salida', '150-1000 Vdc'],
        ['Corriente máxima de salida', selected.outputCurrent],
        ['Potencia nominal', power + ' kW'],
        ['Eficiencia', '95%'],
      ]],
      ['Características generales', [
        ['Temperatura de operación', '-25 C ~ +55 C'],
        ['Grado de protección', 'IP54 / IK10'],
        ['Montaje', selectedMount ? selectedMount.name : 'Wallbox / Pedestal / Trolley'],
        ['Refrigeración', 'Refrigeración por aire'],
        ['Material de fabricación', 'Acero inoxidable'],
      ]],
      ['Interfaz y comunicaciones', [
        ['Protocolo', 'OCPP 1.6J / OCPP 2.0.1'],
        ['Tecnología', 'Ethernet / WiFi / 4G'],
        ['Método de acceso', 'RFID, QR, App, Plug & Charge, POS'],
        ['Pantalla', '7" pantalla táctil'],
      ]],
    ]),
  },
  modular: {
    detailimg: '/assets/products/blaze-modular.png',
    eyebrow: 'Cargador DC modular',
    title: 'BLAZE MODULAR',
    verticalA: 'MODULAR',
    verticalB: '80kW',
    defaultPower: 80,
    powers: [60, 80],
    data: MODULAR_POWER_DATA,
    subtitle: 'Cargador DC modular para carga pública y flotas ligeras.',
    copy: 'Arquitectura DC de 60 / 80 kW para concesionarios, estaciones urbanas, flotas y ubicaciones con dos tomas CCS2. Equilibrio entre potencia, coste y facilidad de despliegue.',
    heroFacts: [
      ['80 kW', 'Potencia máxima'],
      ['2 x CCS2', 'Conectores DC'],
      ['200-1000 Vdc', 'Tensión de salida'],
      ['OCPP', '1.6J / 2.0.1'],
    ],
    sections: [
      {
        index: '01',
        title: 'Modularidad sin complejidad.',
        text: 'BLAZE Modular permite elegir potencia según el uso real de la estación, manteniendo una huella compacta y una experiencia de carga robusta.',
        points: [
          ['60 / 80 kW', 'Dos configuraciones para dimensionar inversión y potencia.'],
          ['Doble CCS2', 'Carga simultánea para dos usuarios.'],
          ['Formato urbano', 'Ideal para flotas, concesionarios y retail.'],
        ],
      },
      {
        index: '02',
        title: 'Listo para explotación comercial.',
        text: 'Conectividad abierta, autenticación de usuario y opciones de pago para operar en redes públicas o privadas.',
        points: [
          ['IP54 / IK10', 'Diseñado para exterior y uso intensivo.'],
          ['RFID / POS / App', 'Acceso, pago y autenticación integrables.'],
          ['Monitorización remota', 'Telemetría y alarmas para reducir incidencias.'],
        ],
      },
    ],
    specSections: (power, selected) => ([
      ['Entrada', [
        ['Tensión de entrada', '400 Vac +/-10%'],
        ['Frecuencia', '50 Hz'],
        ['Tipo de red', '3P + N + PE'],
        ['Corriente máxima de entrada', selected.inputCurrent],
        ['Potencia máxima de entrada', selected.inputPower],
        ['THDi', '< 5%'],
      ]],
      ['Salida', [
        ['Modo de carga', 'Mode 4'],
        ['Tipo de conector', '2 x CCS2'],
        ['Tensión de salida', '200-1000 Vdc'],
        ['Corriente máxima de salida', selected.outputCurrent],
        ['Potencia nominal', power + ' kW'],
        ['Eficiencia', '96%'],
      ]],
      ['Características generales', [
        ['Temperatura de operación', '-25 C ~ +60 C'],
        ['Grado de protección', 'IP54 / IK10'],
        ['Refrigeración', 'Refrigeración por aire'],
        ['Longitud de cable', '5 m'],
        ['Material de fabricación', 'Acero inoxidable'],
      ]],
      ['Interfaz y comunicaciones', [
        ['Protocolo', 'OCPP 1.6J / OCPP 2.0.1'],
        ['Tecnología', 'Ethernet / WiFi / LAN / 4G'],
        ['Método de acceso', 'RFID, QR, App, Plug & Charge, POS'],
        ['Pantalla', '15" pantalla táctil HD'],
      ]],
    ]),
  },
  ultra: {
    detailimg: '/assets/products/blaze-ultra-detail-v5.png',
    eyebrow: 'Cargador HPC DC',
    title: 'BLAZE ULTRA',
    verticalA: 'ULTRA',
    verticalB: '800kW',
    defaultPower: 800,
    powers: [240, 300, 350, 360, 400, 480, 640, 700, 800],
    data: ULTRA_POWER_DATA,
    subtitle: 'Cargador DC modular para carga ultrarrápida.',
    copy: 'Solución stand-alone de alto rendimiento para hubs de carga, flotas, estaciones de servicio y ubicaciones de alta demanda. Disponible desde 240 kW hasta 800 kW.',
    heroFacts: [
      ['800 kW', 'Potencia máxima'],
      ['2 x CCS2', 'Conectores DC'],
      ['300-1000 Vdc', 'Tensión de salida'],
      ['OCPP', '1.6J / 2.0.1'],
    ],
    sections: [
      {
        index: '01',
        title: 'Potencia modular para hubs exigentes.',
        text: 'BLAZE Ultra permite empezar con una configuración HPC contenida y ampliar potencia cuando la rotación lo justifica. La arquitectura modular reduce el riesgo de sobredimensionar la primera instalación.',
        points: [
          ['Rango 240-800 kW', 'Nueve configuraciones de potencia para dimensionar cada emplazamiento.'],
          ['Doble CCS2', 'Carga simultánea con reparto inteligente de potencia.'],
          ['300-1000 Vdc', 'Compatible con vehículos de arquitectura 400V y 800V.'],
        ],
      },
      {
        index: '02',
        title: 'Diseñado para explotación diaria.',
        text: 'Protección exterior, conectividad abierta y una interfaz clara para usuario final y operador. El equipo está pensado para reducir incidencias en campo y simplificar mantenimiento.',
        points: [
          ['IP54 / IK10', 'Protección para instalación exterior y uso intensivo.'],
          ['RFID / POS / App', 'Acceso, pago y autenticación en el propio equipo.'],
          ['Air + Liquid', 'Refrigeración adaptada a potencia y condiciones climáticas.'],
        ],
      },
    ],
    specSections: (power, selected) => ([
      ['Entrada', [
        ['Tensión de entrada', '400 Vac +/-10%'],
        ['Frecuencia', '50 Hz'],
        ['Tipo de red', '3P + N + PE'],
        ['Corriente máxima de entrada', selected.inputCurrent],
        ['Potencia máxima de entrada', selected.inputPower],
        ['THDi', '< 5%'],
      ]],
      ['Salida', [
        ['Modo de carga', 'Mode 4'],
        ['Tipo de conector', '2 x CCS2'],
        ['Tensión de salida', '300-1000 Vdc'],
        ['Corriente máxima de salida', selected.outputCurrent],
        ['Potencia nominal', power + ' kW'],
        ['Eficiencia', '96%'],
      ]],
      ['Características generales', [
        ['Temperatura de operación', '-25 C ~ +65 C'],
        ['Grado de protección', 'IP54 / IK10'],
        ['Dimensiones (An x Al x P)', '850 x 2000 x 750 mm'],
        ['Longitud de cable', '5 m'],
        ['Refrigeración', 'Aire + líquida'],
        ['Material de fabricación', 'Acero inoxidable'],
      ]],
      ['Interfaz y comunicaciones', [
        ['Protocolo', 'OCPP 1.6J / OCPP 2.0.1'],
        ['Tecnología', 'Ethernet / WiFi / LAN / 4G'],
        ['Método de acceso', 'RFID, QR, App, Plug & Charge, POS'],
        ['Pantalla', '15" pantalla táctil HD'],
      ]],
    ]),
  },
  hyper: {
    detailimg: '/assets/products/blaze-hyper.png',
    eyebrow: 'Sistema HPC distribuido',
    title: 'BLAZE HYPER',
    verticalA: 'HYPER',
    verticalB: 'Hasta 1 MW',
    defaultPower: 'powerbank1280',
    powers: ['dispenser350', 'dispenser500', 'powerbank480', 'powerbank1280'],
    data: HYPER_POWER_DATA,
    selectorItems: [
      { key: 'dispenser350', label: 'Surtidor', short: 'Surtidor', unit: '350 A', display: 'Surtidor 350 A' },
      { key: 'dispenser500', label: 'Surtidor', short: 'Surtidor', unit: '500 A', display: 'Surtidor 500 A' },
      { key: 'powerbank480', label: 'Power Bank', short: 'Power Bank', unit: '480 kW', display: 'Power Bank 480 kW' },
      { key: 'powerbank1280', label: 'Power Bank', short: 'Power Bank', unit: '1.280 kW', display: 'Power Bank 1.280 kW' },
    ],
    selectorMode: 'equipment',
    selectorTitle: 'Selección de equipo.',
    selectorText: 'Hyper no es un único equipo: el sistema se compone de surtidores y power banks. Pasa el ratón por cada elemento para actualizar la ficha técnica correspondiente.',
    selectorAsideTitle: 'Equipo',
    selectorAsideText: 'Selecciona surtidor o power bank para revisar su ficha técnica específica.',
    subtitle: 'Sistema distribuido para hubs de carga de alta potencia.',
    copy: 'BLAZE Hyper es una arquitectura distribuida compuesta por power banks centrales y surtidores satélite. Esto significa que el sistema no es un único cargador: separa la electrónica de potencia de la interfaz de usuario para optimizar espacio, mantenimiento y escalabilidad.',
    heroFacts: [
      ['2', 'Tipos de surtidor'],
      ['350 / 500 A', 'Versiones de surtidor'],
      ['480 / 1.280 kW', 'Versiones de power bank'],
      ['Dinámico', 'Reparto de potencia'],
    ],
    sections: [
      {
        index: '01',
        title: 'Cuatro equipos, una misma arquitectura.',
        text: 'El concepto Hyper se construye con dos familias de producto: surtidores para el usuario final y power banks para concentrar la potencia. Por eso el detalle técnico debe distinguir claramente entre dispenser 350A, dispenser 500A, power bank 480kW y power bank 1.280kW.',
        points: [
          ['Surtidores', 'Dos versiones de surtidor: 350 A y 500 A.'],
          ['Power banks', 'Dos referencias base de potencia: 480 kW y 1.280 kW.'],
          ['Sistema distribuido', 'La inteligencia de reparto reside en el power bank y la experiencia de usuario en el surtidor.'],
        ],
      },
      {
        index: '02',
        title: 'Escalable para hubs de alta rotación.',
        text: 'Separar potencia y dispensación permite crecer por fases, reducir peso en pista y diseñar layouts de gran capacidad con menos equipos de potencia duplicados.',
        points: [
          ['Reparto dinámico', 'La potencia disponible se asigna donde más valor aporta.'],
          ['Mantenimiento', 'La electrónica se concentra en cabina y simplifica intervención.'],
          ['HPC real', 'Arquitectura pensada para estaciones de servicio, corredores y truck-stops.'],
        ],
      },
    ],
    specSections: (selectedKey, selected) => {
      if (selected.type === 'dispenser') {
        return [
          ['Surtidor', [
            ['Equipo', selected.label],
            ['Arquitectura', selected.architecture],
            ['Tipo de conector', selected.connectorType],
            ['Tensión de salida', selected.outputVoltage],
            ['Corriente de salida', selected.outputCurrent],
          ]],
          ['Mecánicas', [
            ['Dimensiones', selected.dimensions],
            ['Grado de protección', 'IP54 / IK10'],
            ['Refrigeración', selected.cooling],
            ['Operación', 'Exterior / 24-7'],
            ['Montaje', 'Surtidor satélite autoportante'],
          ]],
          ['Interfaz y comunicaciones', [
            ['Pantalla', selected.display],
            ['Protocolo', selected.protocols],
            ['Método de acceso', selected.access],
            ['Autenticación', 'RFID / QR / App / POS'],
          ]],
          ['Rol en sistema', [
            ['Función', 'Surtidor de carga para usuario final'],
            ['Fuente de potencia', 'Conectado al power bank Hyper'],
            ['Reparto de potencia', 'Gestionado centralmente por power bank'],
            ['Uso típico', 'Hubs HPC, estaciones de servicio y truck-stops'],
          ]],
        ];
      }
      return [
        ['Power Bank', [
          ['Equipo', selected.label],
          ['Potencia de cabina', selected.cabinetPower],
          ['Arquitectura', selected.architecture],
          ['Tensión de entrada', selected.inputVoltage],
          ['Tipo de red', selected.gridType],
        ]],
        ['Distribución', [
          ['Distribución de potencia', selected.distribution],
          ['Surtidores compatibles', selected.dispenserSupport],
          ['Tensión de salida', '150-1000 Vdc'],
          ['Escalabilidad', 'Expansión modular de hub'],
          ['Redundancia', 'Preparada para arquitecturas de alta disponibilidad'],
        ]],
        ['Características generales', [
          ['Dimensiones', selected.dimensions],
          ['Grado de protección', 'IP54 / IK10'],
          ['Refrigeración', selected.cooling],
          ['Operación', selected.operation],
          ['Instalación', 'Área de cabina centralizada'],
        ]],
        ['Interfaz y comunicaciones', [
          ['Protocolo', selected.protocols],
          ['Tecnología', selected.technology],
          ['Integration', 'OCPP backend / EMS / site controller'],
          ['Role', 'Central intelligence and power allocation'],
        ]],
      ];
    },
  },
};

function UltraDetail({ model, navigate, allModels }) {
  const meta = ADVANCED_CHARGER_DETAIL[model.slug] || ADVANCED_CHARGER_DETAIL.ultra;
  const [power, setPower] = React.useState(meta.defaultPower);
  const [mountKey, setMountKey] = React.useState(meta.defaultMount || (meta.mountOptions && meta.mountOptions[0] ? meta.mountOptions[0].key : null));
  const selected = meta.data[power] || meta.data[meta.defaultPower];
  const powers = meta.powers;
  const selectorMode = meta.selectorMode || 'power';
  const selectorItems = meta.selectorItems || powers.map((value) => ({
    key: value,
    label: selectorMode === 'power' ? String(value).replace('1280', '1.280') : String(value),
    unit: selectorMode === 'power' ? 'kW' : '',
    short: selectorMode === 'power' ? String(value).replace('1280', '1.280') : String(value),
  }));
  const activeSelectorItem = selectorItems.find((item) => item.key === power) || selectorItems[0] || null;
  const activeDisplay = activeSelectorItem ? (activeSelectorItem.display || [activeSelectorItem.label, activeSelectorItem.unit].filter(Boolean).join(' ')) : '';
  const activeShort = activeSelectorItem ? (activeSelectorItem.short || activeSelectorItem.label) : '';
  const mountOptions = meta.mountOptions || [];
  const selectedMount = mountOptions.find((item) => item.key === mountKey) || mountOptions[0] || null;
  const specSections = meta.specSections(power, selected, selectedMount);

  React.useEffect(() => {
    setPower(meta.defaultPower);
    setMountKey(meta.defaultMount || (meta.mountOptions && meta.mountOptions[0] ? meta.mountOptions[0].key : null));
  }, [model.slug]);

  React.useEffect(() => {
    const root = document.querySelector('.ultra-detail-page');
    if (!root) return undefined;

    const items = root.querySelectorAll([
      '.ultra-power-section .ultra-head',
      '.ultra-power-strip',
      '.ultra-section:not(.ultra-power-section) .ultra-head',
      '.ultra-editorial',
      '.ultra-mount-grid .ultra-mount-card',
      '.ultra-tech-shell',
      '.ultra-tech-inline-head',
      '.ultra-spec-table tr',
      '.ultra-other-grid a'
    ].join(','));

    items.forEach((item, index) => {
      item.classList.add('ultra-scroll-reveal');
      item.style.setProperty('--reveal-delay', Math.min(index * 22, 180) + 'ms');
    });

    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add('is-visible');
          observer.unobserve(entry.target);
        }
      });
    }, { threshold: 0.14, rootMargin: '0px 0px -8% 0px' });

    items.forEach((item) => observer.observe(item));
    return () => observer.disconnect();
  }, [model.slug]);

  return (
    <>
      <main className={'ultra-detail-page is-' + model.slug}>
        <section className="ultra-hero">
          <div className="container ultra-hero-grid">
            <div className="ultra-hero-copy">
              <div className="ultra-hero-kickers">
                <Breadcrumb to="chargers" label="Cargadores" navigate={navigate}/>
                <div className="ultra-eyebrow">{meta.eyebrow}</div>
              </div>
              <h1>{meta.title}</h1>
              <p className="ultra-subtitle">{meta.subtitle}</p>
              <p className="ultra-copy">{meta.copy}</p>
              <div className="ultra-hero-data">
                {meta.heroFacts.map(([k, v]) => (
                  <div key={k}><b>{k}</b><span>{v}</span></div>
                ))}
              </div>
            </div>

            <div className="ultra-hero-art">
              <div className="ultra-halo" aria-hidden="true"></div>
              <div className="ultra-side-text" aria-hidden="true">
                <span>{meta.verticalA}</span>
                <span>{meta.verticalB}</span>
              </div>
              <img className="ultra-product" src={meta.detailimg || meta.detailImg} alt={meta.title} />
            </div>
          </div>
        </section>

        {selectorItems.length > 1 && (
          <section className="container ultra-section ultra-power-section">
            <div className="ultra-head">
              <h2>{meta.selectorTitle || 'Selección de potencia.'}</h2>
              <p>{meta.selectorText || 'Mueve el ratón sobre cada configuración para actualizar la ficha técnica. Los datos variables se refrescan en la tabla inferior.'}</p>
            </div>
            <div className="ultra-power-strip" aria-label={meta.selectorMode === 'equipment' ? 'Selector reactivo de equipo' : 'Selector reactivo de potencia'}>
              {selectorItems.map((item) => (
                <div key={item.key}
                  className={'ultra-power-item ' + (power === item.key ? 'is-active' : '')}
                  onMouseEnter={() => setPower(item.key)}>
                  <b>{item.short || item.label}</b>
                  <span>{item.unit || ''}</span>
                </div>
              ))}
            </div>
          </section>
        )}

        {meta.sections.map((section, i) => (
          <section key={section.index} className={'container ultra-section ' + (i % 2 ? 'ultra-section-alt' : '')}>
            <div className="ultra-editorial">
              <div className="ultra-editorial-left">
                <div className="ultra-editorial-index">{section.index}</div>
                <h3>{section.title}</h3>
                <p>{section.text}</p>
              </div>
              <div className="ultra-editorial-right">
                {section.points.map(([k, v]) => (
                  <p key={k} className="ultra-editorial-item"><strong>{k}</strong>{v}</p>
                ))}
              </div>
            </div>
          </section>
        ))}

        {mountOptions.length > 0 && (
          <section className="container ultra-section ultra-mount-section">
            <div className="ultra-head">
              <h2>Tipo de montaje.</h2>
              <p>Selecciona la configuración mecánica del equipo. La opción elegida actualiza la ficha técnica y deja claro cómo se integra el cargador en el proyecto.</p>
            </div>
            <div className="ultra-mount-grid" aria-label="Selector de montaje">
              {mountOptions.map((item) => (
                <button
                  key={item.key}
                  type="button"
                  className={'ultra-mount-card ' + (mountKey === item.key ? 'is-active' : '')}
                  onMouseEnter={() => setMountKey(item.key)}
                  onClick={() => setMountKey(item.key)}>
                  <strong>{item.name}</strong>
                  <span>{item.desc}</span>
                </button>
              ))}
            </div>
          </section>
        )}

        <section className="container ultra-section" id="ultra-tech">
          <div className="ultra-head ultra-tech-title-row">
            <div>
              <h2>{selectorItems.length > 1 ? 'Ficha técnica interactiva.' : 'Ficha técnica.'}</h2>
              <p>{selectorItems.length > 1 ? (meta.techIntro || 'Tabla limpia, agrupada por bloques y vinculada a la configuración seleccionada.') : 'Datos orientativos de la única configuración disponible en este modelo.'}</p>
            </div>
            <div className="ultra-tech-current">
              <span>{selectorItems.length > 1 ? 'Versión activa' : 'Versión'}</span>
              <b>{activeDisplay}</b>
            </div>
          </div>

          <div className={'ultra-tech-shell' + (selectorItems.length === 1 ? ' is-static' : '')}>
            {selectorItems.length > 1 && (
              <aside className="ultra-selector-panel">
                <div>
                  <h3>{meta.selectorAsideTitle || (meta.selectorMode === 'equipment' ? 'Equipo' : 'Potencia')}</h3>
                  <p>{meta.selectorAsideText || 'Pasa el ratón por una versión para actualizar la ficha técnica.'}</p>
                </div>
                <div className="ultra-power-select" aria-label={meta.selectorMode === 'equipment' ? 'Equipos disponibles' : 'Potencias disponibles'}>
                  {selectorItems.map((item) => (
                    <div key={item.key}
                      className={power === item.key ? 'is-active' : ''}
                      onMouseEnter={() => setPower(item.key)}>
                      {meta.selectorMode === 'equipment' ? (item.display || [item.label, item.unit].filter(Boolean).join(' ')) : (item.short || item.label)}
                    </div>
                  ))}
                </div>
              </aside>
            )}

            <article className="ultra-table-panel" key={model.slug + '-' + power}>
              <div className="ultra-tech-inline-head">
                <div>
                  <span>{selectorItems.length > 1 ? 'Versión activa' : 'Versión disponible'}</span>
                  <h3>{model.slug === 'hyper' ? 'BLAZE HYPER' : (meta.title + (activeShort ? ' — ' + activeShort : ''))}</h3>
                  <p>{meta.subtitle}</p>
                </div>
                <b>{activeDisplay}</b>
              </div>
              <table className="ultra-spec-table">
                <tbody>
                  {specSections.map(([title, rows]) => (
                    <React.Fragment key={title}>
                      <tr className="ultra-section-row"><td colSpan="2">{title}</td></tr>
                      {rows.map(([k, v]) => (
                        <tr key={title + k + v}><td>{k}</td><td>{v}</td></tr>
                      ))}
                    </React.Fragment>
                  ))}
                </tbody>
              </table>
            </article>
          </div>
        </section>

        <section className="container ultra-section">
          <div className="ultra-head">
            <h2>Otros cargadores BLAZE.</h2>
            <p>Continúa explorando la gama de recarga DC de Pyrovolt.</p>
          </div>
          <div className="ultra-other-grid">
            {allModels.filter(o => o.slug !== model.slug).map(o => (
              <a key={o.slug} href={'#charger-' + o.slug} onClick={e => { e.preventDefault(); navigate('charger-' + o.slug); }}>
                <small>{o.eyebrow}</small>
                <b>{o.name}</b>
                <span>{o.tag}</span>
              </a>
            ))}
          </div>
        </section>
      </main>
      <CTAStrip navigate={navigate}/>
    </>
  );
}

function chargerDatasheetHref(model) {
  const rows = [
    'PYROVOLT - Ficha tecnica preliminar',
    '',
    `Producto: ${model.name}`,
    `Familia: ${model.eyebrow}`,
    `Potencia: ${model.spec1}`,
    `Tension: ${model.spec2}`,
    `Conectores: ${model.spec3}`,
    '',
    'Especificaciones',
    ...model.specs.flatMap(group => [
      '',
      group.title,
      ...group.rows.map(([key, value]) => `${key}: ${value}`),
    ]),
    '',
    'Documento generado desde los datos visibles en la web. Validar ficha PDF final antes de uso comercial.',
  ];
  return `data:text/plain;charset=utf-8,${encodeURIComponent(rows.join('\n'))}`;
}

function ChargerDetail({ slug, navigate }) {
  const m = CHARGER_MODELS[slug];
  if (!m) return <div style={{ padding: 200, textAlign: 'center' }}>Modelo no encontrado</div>;
  const allModels = Object.values(CHARGER_MODELS);

  if (ADVANCED_CHARGER_DETAIL[m.slug]) {
    return <UltraDetail key={m.slug} model={m} navigate={navigate} allModels={allModels}/>;
  }

  // Key metrics for the strip
  const metrics = [
    { value: m.spec1, label: 'Potencia máxima', desc: 'Rango de salida DC configurable.' },
    { value: m.spec2, label: 'Tensión', desc: 'Compatible con arquitecturas 400V / 800V.' },
    { value: m.spec3, label: 'Conectores', desc: 'Estándar CCS2, preparado para MCS.' },
    { value: '≥ 95%', label: 'Eficiencia', desc: 'Semiconductores SiC de última generación.' },
  ];

  return (
    <>
      {/* 1. Hero — dark, product right */}
      <section className="pv-detail-hero-alpi">
        <div className="container pv-detail-hero-alpi-inner">
          <div className="pv-detail-hero-alpi-copy">
            <Breadcrumb to="chargers" label="Cargadores" navigate={navigate}/>
            <div className="pv-detail-kicker" style={{ marginTop: 32, marginBottom: 16, color: 'var(--accent-soft)', fontSize: 13, letterSpacing: '0.08em', textTransform: 'uppercase' }}>{m.eyebrow}</div>
            <h1 className="pv-detail-h1">{renderItalic(m.headline)}</h1>
            <p className="pv-detail-lead">{m.subtitle}</p>
            <div style={{ display: 'flex', gap: 12, marginTop: 36, flexWrap: 'wrap' }}>
              <a className="btn btn-primary btn-lg" href="#contact" onClick={e => { e.preventDefault(); navigate('contact'); }}>Pedir presupuesto</a>
              <a className="btn btn-ghost btn-lg" href={chargerDatasheetHref(m)} download={`pyrovolt-${m.slug}-ficha-tecnica.txt`}>Descargar ficha técnica</a>
            </div>
          </div>
          <div className="pv-detail-hero-alpi-media">
            <img src={m.img} alt={m.name} />
          </div>
        </div>
        <div className="pv-detail-sidebrand" aria-hidden="true">{m.family === 'distributed' ? 'HYPER' : 'BLAZE'}</div>
      </section>

      {/* 2. Key metrics strip */}
      <section className="pv-detail-metrics-strip">
        <div className="container pv-detail-metrics-grid">
          {metrics.map((met, i) => (
            <div key={i} className="pv-detail-metric">
              <div className="pv-detail-metric-value">{met.value}</div>
              <div className="pv-detail-metric-label">{met.label}</div>
              <div className="pv-detail-metric-desc">{met.desc}</div>
            </div>
          ))}
        </div>
      </section>

      {/* 3. Feature bands — clean editorial bands, NO repeated image */}
      {m.features.map((feat, i) => (
        <section key={i} className={'pv-detail-feature-band ' + (i % 2 === 0 ? '' : 'pv-detail-feature-alt')}>
          <div className="container pv-detail-feature-inner">
            <div className="pv-detail-feature-copy">
              <div className="pv-detail-feature-label">{m.features.length > 1 ? String(i + 1).padStart(2, '0') : ''}</div>
              <h2 className="pv-detail-feature-title">{feat.title}</h2>
              <p className="pv-detail-feature-desc">{feat.desc}</p>
            </div>
          </div>
        </section>
      ))}

      <DetailBlueprint kind="charger" metrics={metrics}/>

      {/* 4. Configurations */}
      <section className="pv-detail-config-band">
        <div className="container">
          <div className="pv-detail-config-head">
            <div className="pv-detail-kicker">Configuraciones</div>
            <h2 className="pv-detail-h2">Versiones disponibles.</h2>
          </div>
          <div className="pv-detail-config-list">
            {m.variants.map((v, i) => (
              <div key={i} className="pv-detail-config-item">
                <span className="pv-detail-config-index">{String(i + 1).padStart(2, '0')}</span>
                <div className="pv-detail-config-name">{v.name}</div>
                <div className="pv-detail-config-desc">{v.desc}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 5. Technical specs — clean table */}
      <section className="pv-detail-specs-band">
        <div className="container">
          <div className="pv-detail-specs-head">
            <div className="pv-detail-kicker">Datos técnicos</div>
            <h2 className="pv-detail-h2">Especificaciones.</h2>
          </div>
          <SpecsTable groups={m.specs}/>
        </div>
      </section>

      {/* 6. Other models */}
      <section className="pv-detail-other-band">
        <div className="container">
          <div className="pv-detail-kicker" style={{ marginBottom: 24 }}>Otros modelos</div>
          <div className="pv-detail-other-grid">
            {allModels.map(o => (
              <a key={o.slug} href={'#charger-' + o.slug} onClick={e => { e.preventDefault(); navigate('charger-' + o.slug); }}
                 className="pv-detail-other-card"
                 style={{ opacity: o.slug === m.slug ? 0.35 : 1, pointerEvents: o.slug === m.slug ? 'none' : 'auto' }}>
                <div className="pv-detail-other-eyebrow">{o.eyebrow}</div>
                <div className="pv-detail-other-name">{o.name}</div>
                <div className="pv-detail-other-tag">{o.tag}</div>
              </a>
            ))}
          </div>
        </div>
      </section>

      <CTAStrip navigate={navigate}/>
    </>
  );
}

Object.assign(window, { ChargersPage, ChargerDetail, ChargerCard, CHARGER_MODELS });