// Pyrovolt — Storage list + detail pages

const STORAGE_MODELS = {
  ess: {
    slug: 'ess',
    name: 'ESS Compactos',
    eyebrow: 'Sistema ESS',
    tag: 'hasta 500 kWh',
    headline: 'Sistemas ESS\ncompactos *hasta 500 kWh*',
    subtitle: 'Almacenamiento compacto para autoconsumo, picos y respaldo.',
    chips: ['125 kW · 261 kWh', 'LFP', 'Plug & Play'],
    img: '/assets/products/py-ess-compact.png',
    spec1: '125 – 500 kWh',
    spec2: 'LFP',
    spec3: 'Plug & Play',
    features: [
      { icon: 'expand',  title: 'Capacidad útil',        desc: 'Hasta 500 kWh en formato armario.' },
      { icon: 'cpu',     title: 'Instalación guiada',    desc: 'BMS y EMS integrados desde origen.' },
      { icon: 'shield',  title: 'Envolvente robusta',    desc: 'IP54 para interior y exterior.' },
      { icon: 'network', title: 'Conectividad total',    desc: 'EMS, OCPP y Modbus de serie.' },
    ],
    descLead: 'Los ESS Compactos Pyrovolt son armarios LFP para autoconsumo industrial, respaldo crítico y soporte a recarga DC. Integran BMS, EMS y gestión térmica para controlar energía sin montar un sistema a medida desde cero.',
    capacities: [
      { v: 125, unit: ' kWh', label: '125' },
      { v: 215, unit: ' kWh', label: '215' },
      { v: 261, unit: ' kWh', label: '261' },
      { v: 350, unit: ' kWh', label: '350' },
      { v: 500, unit: ' kWh', label: '500' },
    ],
    keyFeats: [
      'Hasta 500 kWh de capacidad útil',
      'Gestión térmica activa por aire forzado',
      'BMS y EMS integrados',
      'Eficiencia ≥ 96%',
      'Compatible con OCPP, SCADA, Modbus',
      'Vida útil > 8.000 ciclos al 80% DoD',
      'IP54 · interior y exterior',
      'Certificación IEC 62619 · UN 38.3',
    ],
    apps: [
      { title: 'Autoconsumo industrial', desc: 'Reduce factura y pico de potencia.' },
      { title: 'Estaciones de carga',    desc: 'Buffer para HPC sin reforzar la red.' },
      { title: 'Gestión de picos',       desc: 'Peak-shaving para industria.' },
      { title: 'Respaldo crítico',       desc: 'Back-up para infraestructura.' },
      { title: 'Microgrids y aisladas',  desc: 'Generación + storage en isla.' },
    ],
    specs: [
      { title: 'Eléctricas',   rows: [['Potencia','125 kW'],['Capacidad','125–500 kWh'],['Tensión DC','600–900 V'],['Tensión AC','400 V trifásica'],['Eficiencia','≥ 96%']] },
      { title: 'Batería',      rows: [['Química','LFP (LiFePO4)'],['Vida útil','8.000 ciclos @ 80% DoD'],['Profundidad descarga','95%'],['Modos','Self-cons · Peak · Backup']] },
      { title: 'Mecánicas',    rows: [['Dimensiones','2.200 × 1.300 × 900 mm'],['Peso','2.400 kg (261 kWh)'],['IP','IP54'],['Refrigeración','Aire forzado']] },
      { title: 'Cumplimiento', rows: [['Normas','IEC 62619 · UL 9540A · UN 38.3'],['Marcado','CE'],['Garantía','10 años batería']] },
    ],
  },
  modular: {
    slug: 'modular',
    name: 'Sistemas modulares',
    eyebrow: 'Sistema modular',
    tag: '215 kWh – 2 MWh',
    headline: 'Sistemas *modulares*',
    subtitle: 'Armarios modulares para crecer por capacidad, no por complejidad.',
    chips: ['215 kWh – 2 MWh', 'Modular', 'Exterior IP55'],
    img: '/assets/products/ess-261.png',
    spec1: '215 kWh – 2 MWh',
    spec2: 'Modular',
    spec3: 'IP55',
    features: [
      { icon: 'expand',  title: 'Crecimiento modular',      desc: 'Añade armarios según demanda.' },
      { icon: 'thermal', title: 'Gestión térmica avanzada', desc: 'Climatización líquida.' },
      { icon: 'shield',  title: 'Uso exterior',             desc: 'IP55 para operación outdoor.' },
      { icon: 'cpu',     title: 'EMS integrado',            desc: 'Control centralizado.' },
    ],
    descLead: 'Los Sistemas Modulares Pyrovolt agrupan armarios de 215 a 500 kWh hasta configuraciones de 2 MWh. Mantienen gestión térmica líquida y EMS unificado para renovables, microgrids y servicios de red.',
    capacities: [
      { v: 215, unit: ' kWh', label: '215' },
      { v: 350, unit: ' kWh', label: '350' },
      { v: 500, unit: ' kWh', label: '500' },
      { v: 1000, unit: ' kWh', label: '1.000' },
      { v: 2000, unit: ' kWh', label: '2.000' },
    ],
    keyFeats: [
      'Capacidades de 215 kWh hasta 2 MWh',
      'Refrigeración líquida activa',
      'Hasta 96% eficiencia round-trip',
      'BMS · EMS · OCPP · Modbus',
      'IP55 · operación outdoor 24/7',
      'Vida útil > 10.000 ciclos al 80% DoD',
      'Modos: solar+storage, peak-shaving, backup',
      'Compatible con grid-forming',
    ],
    apps: [
      { title: 'Solar + Storage',   desc: 'PPA firme con co-ubicación FV.' },
      { title: 'Servicios de red',  desc: 'Regulación primaria, FCR, arbitraje.' },
      { title: 'Estaciones HPC',    desc: 'Buffer DC para 1 MW sin obra civil.' },
      { title: 'Industria',         desc: 'Peak-shaving + backup + autoconsumo.' },
    ],
    specs: [
      { title: 'Eléctricas',   rows: [['Potencia','125–500 kW por módulo'],['Capacidad','215 kWh – 2 MWh'],['Tensión DC','800–1.500 V'],['Eficiencia','≥ 96%']] },
      { title: 'Batería',      rows: [['Química','LFP'],['Vida útil','10.000 ciclos @ 80% DoD'],['Profundidad descarga','95%'],['Modos','Self · Peak · FCR · Grid-forming']] },
      { title: 'Mecánicas',    rows: [['IP rating','IP55'],['Refrigeración','Líquida'],['Huella','Modular exterior']] },
      { title: 'Cumplimiento', rows: [['Normas','IEC 62619 · UL 9540A · UN 38.3'],['Marcado','CE'],['Garantía','10 años batería']] },
    ],
  },
  bess: {
    slug: 'bess',
    name: 'BESS Container',
    eyebrow: 'BESS en contenedor',
    tag: 'hasta 6,26 MWh',
    headline: 'Contenedores de\nhasta *6,26 MWh*',
    subtitle: 'Contenedor LFP para proyectos de gran capacidad.',
    chips: ['2,5 MW / 6,26 MWh', '20 ft ISO', 'Grid-forming'],
    img: '/assets/products/py-bess-container.png',
    spec1: '6,26 MWh',
    spec2: '20 ft ISO',
    spec3: 'Grid-forming',
    features: [
      { icon: 'bolt',    title: 'Hasta 6,26 MWh',          desc: 'En un contenedor 20ft ISO.' },
      { icon: 'thermal', title: 'Gestión térmica líquida', desc: 'Operación estable 24/7.' },
      { icon: 'network', title: 'Grid-forming',            desc: 'Servicios de red, isla y soporte de frecuencia.' },
      { icon: 'shield',  title: 'Seguridad multinivel',    desc: 'Celda, módulo, rack y contenedor.' },
    ],
    descLead: 'El BESS Pyrovolt en contenedor 20ft ISO concentra hasta 6,26 MWh con celdas LFP, refrigeración líquida y EMS grid-forming. Encaja en plantas renovables, hubs HPC, microgrids y proyectos con arbitraje energético.',
    capacities: [
      { v: 1500, unit: ' kWh', label: '1.500' },
      { v: 2500, unit: ' kWh', label: '2.500' },
      { v: 4000, unit: ' kWh', label: '4.000' },
      { v: 5000, unit: ' kWh', label: '5.000' },
      { v: 6260, unit: ' kWh', label: '6.260' },
    ],
    keyFeats: [
      'Hasta 6,26 MWh por contenedor',
      'Celdas LFP 314 Ah · 1P416S',
      'Potencia continua hasta 2,5 MW',
      'Refrigeración líquida con redundancia',
      'EMS grid-forming nativo',
      'OCPP · Modbus · IEC 61850',
      'Vida útil > 10.000 ciclos',
      'Detección y supresión de incendios',
    ],
    apps: [
      { title: 'Co-ubicación FV', desc: 'PPA firmes con plantas solares.' },
      { title: 'Grid services',   desc: 'FCR, arbitraje, capacity firming.' },
      { title: 'Microgrids',      desc: 'Operación isla con grid-forming.' },
      { title: 'Industria pesada',desc: 'Peak-shaving multi-MW.' },
    ],
    specs: [
      { title: 'Eléctricas',   rows: [['Potencia','2,5 MW continua'],['Capacidad','1,5 – 6,26 MWh'],['Tensión DC','1.500 V'],['Eficiencia','≥ 95% round-trip']] },
      { title: 'Batería',      rows: [['Química','LFP 314 Ah'],['Vida útil','10.000 ciclos @ 90% DoD'],['Profundidad descarga','95%'],['BMS','3 niveles']] },
      { title: 'Mecánicas',    rows: [['Forma factor','20ft ISO'],['IP rating','IP55'],['Refrigeración','Líquida']] },
      { title: 'Cumplimiento', rows: [['Normas','IEC 62619 · UL 9540A · NFPA 855'],['Marcado','CE'],['Garantía','10 años batería']] },
    ],
  },
};

function StoragePage({ navigate }) {
  const selectorModels = [
    {
      model: STORAGE_MODELS.ess,
      number: '01',
      title: ['ESS', 'Compactos'],
      copy: 'Sistemas de almacenamiento compactos hasta 500 kWh para industria, retail, autoconsumo y respaldo.',
      tag: 'hasta 500 kWh',
    },
    {
      model: STORAGE_MODELS.bess,
      number: '02',
      title: ['BESS', 'Contenedor'],
      copy: 'Soluciones en contenedor hasta 6,26 MWh, personalizables para hibridaciones y servicios de red.',
      tag: 'hasta 6,26 MWh',
    },
  ];

  return (
    <>
      <section className="pv-cover-hero is-storage-cover" aria-labelledby="storage-cover-title">
        <img
          className="pv-cover-hero-photo"
          src="/mp5kaswh-ChatGPT-Image-14-may-2026_-14_03_56.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 almacenamiento</div>
            <h1 id="storage-cover-title" className="pv-cover-hero-title">
              <span>Almacenamiento </span>
              <strong>BESS</strong>
            </h1>
            <p className="t-lead">
              ESS compactos y contenedores BESS para autoconsumo, respaldo, hubs de carga, microgrids e integración renovable.
            </p>
            <div className="pv-cover-hero-specs" aria-label="Resumen de la gama BESS">
              <div><strong>261 kWh - 6,26 MWh</strong><span>capacidad escalable</span></div>
              <div><strong>ESS + BESS</strong><span>armario y contenedor</span></div>
              <div><strong>LFP + EMS</strong><span>seguridad y control</span></div>
            </div>
          </div>
        </div>
      </section>

      <section className="pv-showcase-page is-storage pv-storage-selector-section">
        <div className="container pv-showcase-selector-wrap">
          <div className="pv-showcase-selector-head">
            <div>
              <div className="pv-section-kicker">Selector de almacenamiento</div>
            <h2>Elige arquitectura de almacenamiento.</h2>
            </div>
            <p>Compara armarios ESS y contenedores BESS según capacidad, uso y estrategia de operación.</p>
          </div>

          <div className="pv-showcase-product-bars is-2" aria-label="Selector visual de almacenamiento">
            {selectorModels.map(({ model, number, title, copy, tag }) => (
              <a key={model.slug} href={'#storage-' + model.slug} className={'pv-showcase-bar is-' + model.slug}
                onClick={(event) => { event.preventDefault(); navigate('storage-' + 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 StorageCard({ model, navigate }) {
  return (
    <article style={{
      display: 'grid',
      gridTemplateColumns: '180px 1fr',
      gap: 24,
      padding: '20px 0',
      borderBottom: '1px solid var(--line)',
      cursor: 'pointer',
    }} onClick={() => navigate('storage-' + 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>
  );
}

// ─── DETAIL PAGE (Alpitronic pattern) ───────────────────────────────────
function StorageDetail({ slug, navigate }) {
  const m = STORAGE_MODELS[slug];
  if (!m) return <div style={{ padding: 200, textAlign: 'center' }}>Modelo no encontrado</div>;
  const allModels = [STORAGE_MODELS.ess, STORAGE_MODELS.bess];
  const isBess = m.slug === 'bess';

  const metrics = [
    { value: m.spec1, label: isBess ? 'Capacidad máxima' : 'Capacidad', desc: isBess ? 'Hasta 6,26 MWh por contenedor.' : 'Hasta 500 kWh por sistema.' },
    { value: m.spec2, label: 'Tecnología', desc: 'Quimica LFP y BMS multinivel.' },
    { value: m.spec3, label: 'Formato', desc: isBess ? 'Contenedor configurable por proyecto.' : 'Armario compacto plug & play.' },
    { value: 'EMS', label: 'Control', desc: 'Hibridación, peak-shaving, backup y telemetria.' },
  ];


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

    const items = root.querySelectorAll([
      '.pv-ref-section .pv-ref-head',
      '.pv-ref-editorial',
      '.pv-ref-tech-title-row',
      '.pv-ref-table-panel',
      '.pv-ref-spec-table tr',
      '.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, 190) + '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 = isBess ? [
    {
      index: '01',
      title: 'Contenedor BESS bajo proyecto.',
      text: 'Almacenamiento en contenedor hasta 6,26 MWh para plantas renovables, hubs HPC, microgrids y servicios de red.',
      points: [
        ['Hasta 6,26 MWh', 'Capacidad por contenedor con configuración bajo proyecto.'],
        ['Hibridaciones', 'FV, eólica, recarga HPC, generación y servicios de red.'],
        ['Llave en mano', 'Baterías, PCS, BMS, EMS, climatización y seguridad integradas.'],
      ],
    },
    {
      index: '02',
      title: 'Diseñado para explotación continua.',
      text: 'Arquitectura LFP, refrigeración líquida, detección y supresión de incendios y control EMS para despliegues exigentes.',
      points: [
        ['Preparado para grid-forming', 'Aplicaciones de red, isla, soporte de tensión y frecuencia.'],
        ['Seguridad multinivel', 'Protección a nivel celda, módulo, rack y contenedor.'],
        ['Personalizable', 'Potencia, autonomía, integración SCADA y estrategia EMS.'],
      ],
    },
  ] : [
    {
      index: '01',
      title: 'ESS compacto para C&I.',
      text: 'Armarios de almacenamiento hasta 500 kWh para autoconsumo, respaldo, peak-shaving y soporte a cargadores DC.',
      points: [
        ['Hasta 500 kWh', 'Capacidades adaptadas al consumo real del cliente.'],
        ['Plug & Play', 'Instalación sencilla con BMS y EMS integrados.'],
        ['Uso exterior', 'Envolvente robusta para operación en industria y retail.'],
      ],
    },
    {
      index: '02',
      title: 'Energía disponible en los picos.',
      text: 'Gestiona picos, almacena excedentes FV, reduce término de potencia y mantiene cargas críticas con una lógica de control clara.',
      points: [
        ['Peak-shaving', 'Reducción de picos de demanda y costes eléctricos.'],
        ['Backup', 'Continuidad para cargas críticas.'],
        ['HPC buffer', 'Soporte a recarga rápida sin sobredimensionar acometida.'],
      ],
    },
  ];

  return (
    <>
      <main className={'pv-ref-detail-page is-storage-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="storage" label="Almacenamiento" 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.descLead}</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>{isBess ? 'BESS' : 'ESS'}</span><span>{isBess ? '6.26MWh' : '500kWh'}</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} className="pv-ref-editorial-item"><strong>{k}</strong>{v}</p>)}
              </div>
            </div>
          </section>
        ))}

        <section className="container pv-ref-section">
          <div className="pv-ref-head pv-ref-tech-title-row">
            <div>
              <h2>Ficha técnica.</h2>
              <p>Datos orientativos. Configuraciones finales bajo proyecto, ubicación, autonomía y estrategia de operación.</p>
            </div>
            <div className="pv-ref-tech-current"><span>Versión</span><b>{m.spec1}</b></div>
          </div>
          <div className="pv-ref-table-panel">
            <table className="pv-ref-spec-table">
              <tbody>
                {m.specs.map((group) => (
                  <React.Fragment key={group.title}>
                    <tr className="pv-ref-section-row"><td colSpan="2">{group.title}</td></tr>
                    {group.rows.map(([k, v]) => <tr key={group.title + k}><td>{k}</td><td>{v}</td></tr>)}
                  </React.Fragment>
                ))}
              </tbody>
            </table>
          </div>
        </section>

        <section className="container pv-ref-section">
          <div className="pv-ref-head">
            <h2>Otras soluciones de almacenamiento.</h2>
            <p>Escala desde armarios compactos hasta contenedores BESS integrados en proyectos híbridos.</p>
          </div>
          <div className="pv-ref-other-grid">
            {allModels.filter(o => o.slug !== m.slug).map(o => (
              <a key={o.slug} href={'#storage-' + o.slug} onClick={e => { e.preventDefault(); navigate('storage-' + o.slug); }}>
                <small>{o.eyebrow}</small><b>{o.name}</b><span>{o.tag}</span>
              </a>
            ))}
          </div>
        </section>
      </main>
      <CTAStrip navigate={navigate}/>
    </>
  );
}