// Pyrovolt — MT y Distribución de red

const MT_MODELS = {
  cells: {
    slug: 'cells',
    name: 'Celdas de MT',
    eyebrow: 'Celdas SF6-free',
    tag: 'hasta 24 kV',
    headline: <>Celdas de MT<br/><It>24 kV</It> – SF6 free</>,
    subtitle: 'Celdas compactas SF6-free para maniobra y protección en redes hasta 24 kV.',
    chips: [
      { label: 'Hasta 24 kV' },
      { label: 'SF6-free' },
      { label: 'Aislamiento aire/epóxico' },
    ],
    img: '/assets/products/py-mt-cells.png',
    features: [
      { icon: Icons.shield, title: 'Aislamiento sin SF6', desc: 'Aire y epóxico para reducir impacto regulatorio.' },
      { icon: Icons.expand, title: 'Modular y compacto', desc: 'Optimiza el espacio en MT.' },
      { icon: Icons.cpu, title: 'Operación protegida', desc: 'Protección arc-flash y maniobra segura.' },
      { icon: Icons.leaf, title: 'Mantenimiento accesible', desc: 'Inspección y configuración bajo proyecto.' },
    ],
    description: {
      lead: 'Las Celdas MT Pyrovolt cubren maniobra, protección y medida hasta 24 kV sin gas SF6. El aislamiento aire/epóxico reduce dependencia regulatoria y mantiene una arquitectura compacta para redes urbanas, industriales y renovables.',
    },
    keyFeats: [
      'Tensión nominal hasta 24 kV',
      'Aislamiento aire / epóxico (sin SF6)',
      'Compactas y apilables',
      'Protección arc-flash IAC AFLR',
      'Componentes reciclables',
      'Cumplimiento IEC 62271-200',
      'Fácil mantenimiento e inspección',
      'Configuraciones DDF, DDFD, DDD, etc.',
    ],
    apps: [
      { title: 'Subestaciones de distribución', desc: 'Redes urbanas e industriales.' },
      { title: 'Energías renovables', desc: 'Subestación solar y eólica.' },
      { title: 'Edificios y centros comerciales', desc: 'Distribución secundaria interior.' },
      { title: 'Infraestructura crítica', desc: 'Hospitales, datacenters, aeropuertos.' },
    ],
    variants: [
      { name: 'DDF', desc: '2 funciones de línea + protección' },
      { name: 'DDFD', desc: '2 línea + 1 protección + 1 medida' },
      { name: 'DDD', desc: '3 funciones de línea' },
      { name: 'A medida', desc: 'Configurable bajo proyecto' },
    ],
    specs: [
      { title: 'Eléctricas', rows: [['Tensión nominal', '12 / 17,5 / 24 kV'], ['Corriente nominal', '630 / 1.250 A'], ['Corriente de corta duración', '20 kA · 3 s'], ['Corriente de cresta', '50 kA pico']] },
      { title: 'Aislamiento', rows: [['Tipo', 'Aire / epóxico'], ['Frecuencia industrial', '50 / 60 kV'], ['Onda de choque', '95 / 125 kV'], ['Sin gas SF6', '✓']] },
      { title: 'Mecánicas', rows: [['IP rating', 'IP3X'], ['Grado de pérdida arco', 'IAC AFLR'], ['Operación', 'Manual + motorizable']] },
      { title: 'Cumplimiento', rows: [['Normas', 'IEC 62271-200 · IEC 62271-100/102'], ['Marcado', 'CE'], ['Certificación', 'KEMA / CESI']] },
    ],
  },
  'trafo-power': {
    slug: 'trafo-power',
    name: 'Trafos de aceite',
    eyebrow: 'Trafos de aceite',
    tag: '50 kVA – 63 MVA',
    headline: <>Trafos de <It>aceite</It></>,
    subtitle: 'Transformación en aceite para distribución, generación e industria.',
    chips: [
      { label: '50 kVA – 63 MVA' },
      { label: 'Aceite mineral / vegetal' },
      { label: 'IEC 60076' },
    ],
    img: '/assets/products/py-mt-oil-trafo.png',
    features: [
      { icon: Icons.bolt, title: 'Alta eficiencia', desc: 'Pérdidas mínimas.' },
      { icon: Icons.shield, title: 'Vida útil larga', desc: 'Diseño IEC para operación continua.' },
      { icon: Icons.thermal, title: 'Refrigeración eficiente', desc: 'ONAN / ONAF / OFAF.' },
      { icon: Icons.leaf, title: 'Aceite vegetal opcional', desc: 'Alternativa FR3 para entornos sensibles.' },
    ],
    description: {
      lead: 'Los transformadores de aceite Pyrovolt cubren desde distribución secundaria hasta subestación. El rango llega a 63 MVA con refrigeración ONAN/ONAF/OFAF, aceite mineral o vegetal y configuración bajo proyecto.',
    },
    keyFeats: [
      'Potencia 50 kVA – 63 MVA',
      'Tensión hasta 145 kV',
      'Pérdidas reducidas (TIER 2 / Eco-design)',
      'Aceite mineral o vegetal (FR3)',
      'Versión seca encapsulada',
      'Refrigeración ONAN / ONAF / OFAF',
      'IEC 60076 · ANSI C57',
      'Diagnóstico DGA online opcional',
    ],
    apps: [
      { title: 'Subestaciones AT/MT', desc: 'Distribución eléctrica primaria.' },
      { title: 'Plantas renovables', desc: 'Step-up FV y eólico.' },
      { title: 'Industria pesada', desc: 'Acerías, cementeras, química.' },
      { title: 'Datacenters', desc: 'Alimentación crítica de carga.' },
    ],
    variants: [
      { name: 'Aceite mineral', desc: 'Estándar IEC con tanque sellado' },
      { name: 'Aceite vegetal', desc: 'Biodegradable FR3 (Envirotemp)' },
      { name: 'Seco encapsulado', desc: 'Resina epóxica · interior' },
      { name: 'Hermético', desc: 'Tanque de membrana sin oxígeno' },
    ],
    specs: [
      { title: 'Eléctricas', rows: [['Potencia', '50 kVA – 63 MVA'], ['Tensión primaria', 'Hasta 145 kV'], ['Tensión secundaria', '0,4 – 36 kV'], ['Conexión', 'Dyn11 / YNyn0 / Yzn']] },
      { title: 'Aislamiento', rows: [['Aceite', 'Mineral / vegetal FR3'], ['Seco', 'Resina epóxica encapsulada'], ['Clase térmica', 'F / H']] },
      { title: 'Refrigeración', rows: [['Tipo', 'ONAN / ONAF / OFAF'], ['Pérdidas en vacío', 'TIER 2 (Eco-design)'], ['Sobrecarga', 'IEC 60076-7']] },
      { title: 'Cumplimiento', rows: [['Normas', 'IEC 60076 · ANSI C57'], ['Marcado', 'CE'], ['Garantía', '5 años']] },
    ],
  },
  'trafo-dry': {
    slug: 'trafo-dry',
    name: 'Trafos secos',
    eyebrow: 'Trafos secos',
    tag: '100 kVA – 6,3 MVA',
    headline: <>Transformadores<br/>en <It>seco</It></>,
    subtitle: 'Transformadores secos para interior, edificios e infraestructura crítica.',
    chips: [
      { label: '100 kVA – 6,3 MVA' },
      { label: 'Resina epóxica' },
      { label: 'F1 · Clase F/H' },
    ],
    img: '/assets/products/py-mt-dry-trafo.png',
    features: [
      { icon: Icons.shield, title: 'Sin riesgo de fuego', desc: 'Clase F1 contra incendios.' },
      { icon: Icons.leaf, title: 'Sin aceite ni gases', desc: 'Menor riesgo ambiental en interior.' },
      { icon: Icons.thermal, title: 'Refrigeración natural', desc: 'AN o AF según necesidades.' },
      { icon: Icons.expand, title: 'Modular', desc: 'Adaptable a múltiples espacios.' },
    ],
    description: {
      lead: 'Los transformadores secos Pyrovolt usan resina epóxica encapsulada para eliminar aceite, fugas y mantenimiento asociado. Encajan en hospitales, edificios públicos, datacenters y subestaciones interiores donde la seguridad condiciona el diseño.',
    },
    keyFeats: [
      'Sin aceite, sin riesgo medioambiental',
      'Clase climática C2 · ambiental E2',
      'Comportamiento al fuego F1',
      'Bajo nivel de ruido',
      'Mantenimiento mínimo',
      'Aptos para uso interior',
      'Cumplimiento IEC 60076-11',
      'Larga vida útil > 30 años',
    ],
    apps: [
      { title: 'Hospitales', desc: 'Áreas críticas con baja inflamabilidad.' },
      { title: 'Datacenters', desc: 'Alimentación TIER III/IV.' },
      { title: 'Edificios urbanos', desc: 'Subestación interior segura.' },
      { title: 'Industria limpia', desc: 'Farmacéutica y alimentaria.' },
    ],
    variants: [
      { name: '100–630 kVA', desc: 'Distribución secundaria' },
      { name: '800–2.500 kVA', desc: 'Subestaciones medianas' },
      { name: '3.150–6.300 kVA', desc: 'Industria pesada' },
    ],
    specs: [
      { title: 'Eléctricas', rows: [['Potencia', '100 kVA – 6,3 MVA'], ['Tensión primaria', 'Hasta 36 kV'], ['Tensión secundaria', '0,4 / 0,69 kV'], ['Conexión', 'Dyn11']] },
      { title: 'Aislamiento', rows: [['Tipo', 'Resina epóxica encapsulada'], ['Clase térmica', 'F (155 °C) · H (180 °C)'], ['Comportamiento al fuego', 'F1']] },
      { title: 'Mecánicas', rows: [['IP rating', 'IP00 / IP21 / IP31'], ['Refrigeración', 'AN / AF'], ['Nivel de ruido', '≤ 60 dB']] },
      { title: 'Cumplimiento', rows: [['Normas', 'IEC 60076-11'], ['Clases', 'C2 · E2 · F1'], ['Garantía', '5 años']] },
    ],
  },
  cabin: {
    slug: 'cabin',
    name: 'Casetas MT prefabricadas',
    eyebrow: 'Centros prefabricados',
    tag: 'hasta 1.250 kVA · 24 kV',
    headline: <>Casetas <It>MT</It><br/>prefabricadas.</>,
    subtitle: 'Centros MT prefabricados para instalar y conectar con menos obra civil.',
    chips: [
      { label: 'Hasta 24 kV' },
      { label: '1.250 kVA' },
      { label: 'Hormigón armado' },
    ],
    img: '/assets/products/py-mt-cabin.png',
    features: [
      { icon: Icons.shield, title: 'Estructura robusta', desc: 'Hormigón armado de alta calidad.' },
      { icon: Icons.expand, title: 'Personalizable', desc: 'Configuración bajo proyecto.' },
      { icon: Icons.cpu, title: 'Lista para conectar', desc: 'Equipos integrados y probados en fábrica.' },
      { icon: Icons.leaf, title: 'Obra civil reducida', desc: 'Envolvente prefabricada para despliegue rápido.' },
    ],
    description: {
      lead: 'Las Casetas MT Prefabricadas Pyrovolt integran celdas, transformador y baja tensión en una envolvente de hormigón armado. Llegan configuradas para reducir obra civil y acelerar conexión en industria, renovables, urbanizaciones y centros comerciales.',
    },
    keyFeats: [
      'Casetas compactas y modulares',
      'Tensión hasta 24 kV',
      'Transformador hasta 1.250 kVA integrado',
      'Hormigón armado de alta calidad',
      'Configuración bajo proyecto',
      'Cumplimiento UNE-EN 62271-202',
      'Instalación rápida sin obra civil',
      'Aptas para entornos urbanos e industriales',
    ],
    apps: [
      { title: 'Urbanizaciones', desc: 'Distribución residencial.' },
      { title: 'Renovables', desc: 'Subestación de planta FV.' },
      { title: 'Centros comerciales', desc: 'Alimentación principal.' },
      { title: 'Infraestructura crítica', desc: 'Aeropuertos, hospitales.' },
      { title: 'Oil & Gas', desc: 'Subestación de planta industrial.' },
      { title: 'Minería', desc: 'Distribución MT en explotación.' },
    ],
    variants: [
      { name: 'Compactas', desc: 'Hasta 630 kVA · 24 kV · footprint reducido' },
      { name: 'Modulares', desc: 'Hasta 1.250 kVA · combinables' },
      { name: 'A medida', desc: 'Configuración a medida del proyecto' },
    ],
    specs: [
      { title: 'Eléctricas', rows: [['Tensión', '12 / 17,5 / 24 kV'], ['Potencia', 'Hasta 1.250 kVA'], ['Celdas', '2–6 funciones'], ['BT', 'Hasta 4.000 A']] },
      { title: 'Construcción', rows: [['Material', 'Hormigón armado HA-30'], ['IP rating', 'IP43 / IP54'], ['Resistencia al fuego', 'EI-120'], ['Pintura', 'Epoxi-poliéster RAL']] },
      { title: 'Equipamiento', rows: [['Trafo', 'Aceite mineral / FR3 / seco'], ['Celdas MT', 'SF6-free Pyrovolt'], ['Cuadro BT', 'A medida del proyecto']] },
      { title: 'Cumplimiento', rows: [['Normas', 'UNE-EN 62271-202'], ['Marcado', 'CE'], ['Garantía', '5 años']] },
    ],
  },
};

// ─── LIST PAGE ──────────────────────────────────────────────────────────
function MTWhiteGuide() {
  const items = [
    ['Celdas MT', 'Protección, maniobra y seguridad de red hasta 24 kV.'],
    ['Transformadores', 'Adaptación de tensión en aceite o seco según entorno.'],
    ['Casetas prefabricadas', 'Integración rápida y compacta de la subestación.'],
    ['Proyecto completo', 'Desde acometida, diseño y suministro hasta puesta en marcha.'],
  ];
  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">Qué cubrimos en media tensión.</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 MTPage({ navigate }) {
  const selectorModels = [
    { model: MT_MODELS.cells, number: '01', title: ['Celdas', 'MT'], copy: 'Celdas SF6-free para maniobra, protección y medida hasta 24 kV.', tag: 'hasta 24 kV · SF6-free' },
    { model: MT_MODELS['trafo-dry'], number: '02', title: ['Trafo', 'Seco'], copy: 'Transformadores secos encapsulados para edificios, industria e infraestructura crítica.', tag: 'hasta 24 kV' },
    { model: MT_MODELS['trafo-power'], number: '03', title: ['Trafo', 'Aceite'], copy: 'Transformadores de potencia en aceite mineral o vegetal para distribución y generación.', tag: '50 kVA–63 MVA' },
    { model: MT_MODELS.cabin, number: '04', title: ['Centro', 'MT'], copy: 'Centros prefabricados con celdas, trafo y BT integrados bajo proyecto.', tag: 'hasta 1.250 kVA' },
  ];

  return (
    <>
      <section className="pv-cover-hero is-mt-cover" aria-labelledby="mt-cover-title">
        <img
          className="pv-cover-hero-photo"
          src="/mp5kbuvb-ChatGPT-Image-14-may-2026_-16_07_09.png"
          alt=""
          aria-hidden="true" />
        <div className="pv-cover-hero-shade" aria-hidden="true" />
        <div className="container pv-cover-hero-inner">
          <div className="pv-cover-hero-copy">
            <div className="h-eyebrow pv-cover-hero-eyebrow">Gama de media tensión</div>
            <h1 id="mt-cover-title" className="pv-cover-hero-title">
              <span>MT </span>
              <strong>Distribución</strong>
            </h1>
            <p className="t-lead">
              Celdas, transformadores y centros prefabricados para conectar generación, almacenamiento y recarga con una arquitectura fácil de mantener.
            </p>
            <div className="pv-cover-hero-specs" aria-label="Resumen de la gama MT">
              <div><strong>hasta 24 kV</strong><span>media tensión</span></div>
              <div><strong>SF6-free</strong><span>maniobra y protección</span></div>
              <div><strong>hasta 1.250 kVA</strong><span>transformación y centros</span></div>
            </div>
          </div>
        </div>
      </section>

      <section className="pv-showcase-page is-mt pv-mt-selector-section">
        <div className="container pv-showcase-selector-wrap">
          <div className="pv-showcase-selector-head">
            <div>
              <div className="pv-section-kicker">Selector de media tensión</div>
              <h2>Arquitecturas para conectar y proteger.</h2>
            </div>
            <p>Elige celdas, transformador o centro prefabricado según tensión, potencia y ubicación.</p>
          </div>

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

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

function MTCard({ model, navigate }) {
  return (
    <article style={{
      display: 'grid',
      gridTemplateColumns: '180px 1fr',
      gap: 24,
      padding: '20px 0',
      borderBottom: '1px solid var(--line)',
      cursor: 'pointer',
    }} onClick={() => navigate('mt-' + 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.tag}</span>
          <span>{model.chips && model.chips[1] ? model.chips[1].label : ''}</span>
        </div>
      </div>
    </article>
  );
}

// ─── DETAIL PAGE ────────────────────────────────────────────────────────
function MTFactsLight({ model }) {
  const items = [
    { k: 'Familia', v: model.eyebrow },
    { k: 'Rango', v: model.tag },
    { k: 'Aplicación', v: (model.apps && model.apps[0] && model.apps[0].title) ? model.apps[0].title + ' · ' + (model.apps[1] ? model.apps[1].title : 'Infraestructura') : 'Infraestructura energética' },
    { k: 'Configuración', v: (model.variants && model.variants[0]) ? model.variants[0].name : 'Bajo proyecto' },
    { k: 'Proyecto', v: 'Suministro, integración y soporte técnico local' },
    { k: 'Normativa', v: (model.specs && model.specs[0] && model.specs[0].rows && model.specs[0].rows[0]) ? 'IEC / UNE · ingeniería orientada a proyecto' : 'IEC / UNE' },
  ];
  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">Resumen de solución MT.</h2>
          </div>
          <p className="t-lead" style={{ maxWidth: 520 }}>Bloque claro para reforzar qué es, dónde encaja y cómo se integra en proyecto.</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>
  );
}

function MTDetail({ slug, navigate }) {
  const m = MT_MODELS[slug];
  if (!m) return <div style={{ padding: 200, textAlign: 'center' }}>Modelo no encontrado</div>;
  const allModels = Object.values(MT_MODELS);
  const isCells = m.slug === 'cells';
  const sideText = {
    cells: ['SF6 FREE', '24kV'],
    'trafo-dry': ['DRY', '6.3MVA'],
    'trafo-power': ['OIL', '63MVA'],
    cabin: ['CENTER', '24kV'],
  }[m.slug] || ['GRID', m.tag];

  const metrics = [
    { value: m.tag, label: 'Rango', desc: 'Configuración adaptada al proyecto.' },
    { value: isCells ? '100% SF6-free' : 'IEC', label: isCells ? 'Tecnología' : 'Normativa', desc: isCells ? 'Sin SF6. Sin letra pequeña.' : 'Equipos bajo normas internacionales.' },
    { value: isCells ? 'Aire / epóxico' : 'A medida', label: isCells ? 'Aislamiento' : 'Diseño', desc: isCells ? 'Aislamiento limpio, seguro y mantenible.' : 'Soluciones personalizables.' },
    { value: '24/7', label: 'Operación', desc: 'Diseñado para continuidad de servicio.' },
  ];


  React.useEffect(() => {
    const root = document.querySelector('.pv-ref-detail-page.is-mt-detail.is-' + m.slug);
    if (!root) return undefined;

    const items = root.querySelectorAll([
      '.pv-ref-section .pv-ref-head',
      '.pv-ref-editorial',
      '.pv-ref-other-grid a'
    ].join(','));

    items.forEach((item, index) => {
      item.classList.add('pv-ref-scroll-reveal');
      item.style.setProperty('--reveal-delay', Math.min(index * 22, 170) + '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();
  }, [m.slug]);

  const sections = isCells ? [
    {
      index: '01',
      title: 'SF6-free de verdad.',
      text: 'La propuesta de celdas MT Pyrovolt gira alrededor de una idea clave: eliminar el SF6. Sin SF6, sin fugas de gas y sin depender de una tecnología con un impacto climático muy elevado. La arquitectura en aire y epóxico mantiene seguridad, fiabilidad y maniobra en un formato compacto y moderno.',
      points: [
        ['100% SF6-free', 'Sin gas SF6 en el equipo. Enfatizamos esta ventaja como criterio técnico, ambiental y regulatorio.'],
        ['Aislamiento aire/epóxico', 'Solución limpia y robusta para redes de media tensión hasta 24 kV.'],
        ['Preparada para transición regulatoria', 'Tecnología alineada con la evolución normativa y la descarbonización de red.'],
      ],
    },
    {
      index: '02',
      title: 'Protección y operación mantenible.',
      text: 'Más allá del discurso ambiental, las celdas están pensadas para obra real: maniobra, protección, mantenimiento, acceso y continuidad de servicio con una lógica modular y fácilmente configurable.',
      points: [
        ['Compactas y modulares', 'Facilitan integración en centros, subestaciones y proyectos renovables.'],
        ['Seguridad', 'Protección integral y diseño orientado a operación segura.'],
        ['Proyecto', 'Configuraciones DDF, DDFD, DDD y soluciones a medida.'],
      ],
    },
  ] : [
    {
      index: '01',
      title: 'Arquitectura de red bajo proyecto.',
      text: m.description && m.description.lead ? m.description.lead : m.subtitle,
      points: (m.keyFeats || []).slice(0, 3).map((p) => [p.split(' ')[0], p]),
    },
    {
      index: '02',
      title: 'Integración, protección y mantenimiento.',
      text: 'Diseñamos la solución para que encaje con acometida, protecciones, espacio disponible, normativa local y operación futura.',
      points: [
        ['Proyecto', 'Configuración eléctrica, envolvente y protecciones bajo necesidad real.'],
        ['Seguridad', 'Protección, maniobra y señalización pensadas para operación diaria.'],
        ['Servicio', 'Soporte técnico, puesta en marcha y documentación de proyecto.'],
      ],
    },
  ];

  return (
    <>
      <main className={'pv-ref-detail-page is-mt-detail is-' + m.slug}>
        <section className="pv-ref-hero">
          <div className="container pv-ref-hero-grid">
            <div className="pv-ref-copy">
              <div className="pv-ref-kickers">
                <Breadcrumb to="mt" label="MT y Distribución" navigate={navigate}/>
                <div className="pv-ref-eyebrow">{m.eyebrow}</div>
              </div>
              <h1>{m.name}</h1>
              <p className="pv-ref-subtitle">{m.subtitle}</p>
              <p className="pv-ref-copytext">{m.description && m.description.lead ? m.description.lead : m.subtitle}</p>
              <div className="pv-ref-hero-data">
                {metrics.map((met) => <div key={met.label}><b>{met.value}</b><span>{met.label}</span></div>)}
              </div>
            </div>
            <div className="pv-ref-art">
              <div className="pv-ref-halo" aria-hidden="true"></div>
              <div className="pv-ref-side-text" aria-hidden="true"><span>{sideText[0]}</span><span>{sideText[1]}</span></div>
              <img className="pv-ref-product" src={m.img} alt={m.name}/>
            </div>
          </div>
        </section>

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

        <section className="container pv-ref-section">
          <div className="pv-ref-head">
            <h2>Otros productos MT y distribución.</h2>
            <p>Celdas, transformadores y centros integrados para completar la arquitectura eléctrica del proyecto.</p>
          </div>
          <div className="pv-ref-other-grid">
            {allModels.filter(o => o.slug !== m.slug).map(o => (
              <a key={o.slug} href={'#mt-' + o.slug} onClick={e => { e.preventDefault(); navigate('mt-' + o.slug); }}>
                <small>{o.eyebrow}</small><b>{o.name}</b><span>{o.tag}</span>
              </a>
            ))}
          </div>
        </section>
      </main>
      <CTAStrip navigate={navigate}/>
    </>
  );
}