// Pyrovolt — Home page
// Hero restaurado con los assets reales aportados: logo y lineup_transparent. Sin capturas ni SVG inventados.

function Home({ navigate, heroVariant, claim }) {
  return (
    <>
      <HeroSolutionSuite claim={claim} navigate={navigate}/>
      <div className="pv-section-break" aria-hidden="true">
        <div className="pv-section-break-fade-top" />
        <div className="pv-section-break-fade-bottom" />
      </div>
      <SolutionsHubPremium navigate={navigate}/>
      <IntegratedFlowSection navigate={navigate}/>
      <ApplicationsBand navigate={navigate}/>
      <HomeWhiteCapabilityBand navigate={navigate}/>
      <CTAStrip navigate={navigate}/>
    </>
  );
}

function HeroEmsOriginal({ claim, navigate }) {
  const [active, setActive] = React.useState(null);
    const hotspots = [
    { id: 'compact', label: 'Compact 30 kW', left: '8%', width: '12%', to: 'charger-compact' },
    { id: 'modular', label: 'Modular 60 / 80 kW', left: '20%', width: '13%', to: 'charger-modular' },
    { id: 'ultra', label: 'Ultra 120 – 800 kW', left: '34%', width: '18%', to: 'charger-ultra' },
    { id: 'ultra2', label: 'Ultra HPC', left: '51%', width: '17%', to: 'charger-ultra' },
    { id: 'hyper', label: 'Hyper satellite', left: '68%', width: '11%', to: 'charger-hyper' },
    { id: 'cabinet', label: 'Power cabinet', left: '79%', width: '20%', to: 'charger-hyper' },
  ];

  const particles = Array.from({ length: 28 }).map((_, i) => ({
    id: i,
    x: `${(i * 37 + 11) % 100}%`,
    y: `${10 + ((i * 29 + 7) % 78)}%`,
    s: `${2 + (i % 4)}px`,
    d: `${-(i * 0.47).toFixed(2)}s`,
    dur: `${8 + (i % 6) * 1.6}s`,
    blur: i % 5 === 0 ? '1.8px' : '0px',
  }));

  return (
    <section className="pv-index-hero">
      <div className="pv-index-glow" />
      <div className="pv-index-grid-glow" />
      <div className="pv-index-stars" aria-hidden="true">
        {Array.from({ length: 14 }).map((_, i) => (
          <i key={i} style={{ '--x': `${(i * 17 + 5) % 96}%`, '--y': `${16 + ((i * 29) % 72)}%`, '--d': `${(i % 5) * .65}s` }} />
        ))}
      </div>

      <div className="pv-index-particles" aria-hidden="true">
        {particles.map(p => (
          <i key={p.id} style={{ '--px': p.x, '--py': p.y, '--ps': p.s, '--pd': p.d, '--pt': p.dur, '--blur': p.blur }} />
        ))}
      </div>

      <div className="pv-index-copy">
        <h1 className="pv-index-title">
          {claim && claim.trim() ? claim : <>Energy <em>Made</em><br/>Simple.</>}
        </h1>
        <p className="pv-index-lead">
          Cargadores EV hasta 1 MW. Almacenamiento hasta 6,26 MWh. Media<br className="desktop-only"/> tensión hasta 24 kV. Una sola marca para todo tu proyecto.
        </p>
        <div className="pv-index-actions">
          <a href="#chargers" className="pv-index-btn pv-index-btn-primary" onClick={e => { e.preventDefault(); navigate('chargers'); }}>Explorar productos</a>
          <a href="#contact" className="pv-index-btn pv-index-btn-ghost" onClick={e => { e.preventDefault(); navigate('contact'); }}>Pedir presupuesto</a>
        </div>
      </div>

      <div className="pv-index-lineup-wrap" aria-label="Gama de soluciones Pyrovolt">
        <div className="pv-index-floor" />
        <div className="pv-index-energy-line" aria-hidden="true">
          {Array.from({ length: 7 }).map((_, i) => <span key={i} />)}
        </div>
        <img className="pv-index-lineup" src="/assets/lineup_transparent.png" alt="Gama de cargadores y cabina Pyrovolt" />
        {hotspots.map(h => (
          <button
            key={h.id}
            className={`pv-hotspot ${active === h.id ? 'is-active' : ''}`}
            style={{ left: h.left, width: h.width }}
            onMouseEnter={() => setActive(h.id)}
            onMouseLeave={() => setActive(null)}
            onClick={() => navigate(h.to)}
            aria-label={h.label}
          >
            <span>{h.label}</span>
          </button>
        ))}
      </div>
    </section>
  );

}

function HeroSolutionSuite({ claim, navigate }) {
  const solutions = [
    {
      id: 'ev',
      number: '01',
      label: 'Recarga DC',
      title: 'Recarga DC para hubs, flotas y destino.',
      image: '/assets/renders/supplied/17.png',
      metric: '30 kW – 1 MW',
      route: 'chargers',
    },
    {
      id: 'storage',
      number: '02',
      label: 'Almacenamiento BESS',
      title: 'Almacenamiento para picos, respaldo y renovables.',
      image: '/assets/renders/supplied/16.png',
      metric: '261 kWh – 6,26 MWh',
      route: 'storage',
    },
    {
      id: 'grid',
      number: '03',
      label: 'MT y red',
      title: 'Media tensión, celdas y transformación.',
      image: '/assets/renders/supplied/15.png',
      metric: '24/36 kV',
      route: 'mt',
    },
  ];
  const [current, setCurrent] = React.useState(0);
  const timerRef = React.useRef(null);

  const startTimer = () => {
    clearInterval(timerRef.current);
    timerRef.current = setInterval(() => setCurrent(c => (c + 1) % solutions.length), 5000);
  };

  React.useEffect(() => {
    startTimer();
    return () => clearInterval(timerRef.current);
  }, []);

  const goTo = (idx) => {
    setCurrent(idx);
    startTimer();
  };

  const sol = solutions[current];

  const particles = Array.from({ length: 28 }).map((_, i) => ({
    id: i,
    x: `${(i * 37 + 11) % 100}%`,
    y: `${10 + ((i * 29 + 7) % 78)}%`,
    s: `${2 + (i % 4)}px`,
    d: `${-(i * 0.47).toFixed(2)}s`,
    dur: `${8 + (i % 6) * 1.6}s`,
    blur: i % 5 === 0 ? '1.8px' : '0px',
  }));

  return (
    <section className="pv-index-hero pv-hero-suite-section">
      <div className="pv-index-stars" aria-hidden="true">
        {Array.from({ length: 14 }).map((_, i) => (
          <i key={i} style={{ '--x': `${(i * 17 + 5) % 96}%`, '--y': `${16 + ((i * 29) % 72)}%`, '--d': `${(i % 5) * .65}s` }} />
        ))}
      </div>
      <div className="pv-index-particles" aria-hidden="true">
        {particles.map(p => (
          <i key={p.id} style={{ '--px': p.x, '--py': p.y, '--ps': p.s, '--pd': p.d, '--pt': p.dur, '--blur': p.blur }} />
        ))}
      </div>

      <div className="pv-index-copy pv-hero-suite-copy">
        <h1 className="pv-index-title">
          {claim && claim.trim() ? claim : <>Energy <em>Made</em><br/>Simple.</>}
        </h1>
        <p className="pv-index-lead">
          Recarga DC, BESS y media tensión dimensionados juntos para reducir interfaces, obra duplicada y puntos ciegos de operación.
        </p>
        <div className="pv-index-actions">
          <a
            key={`cta-${sol.id}`}
            href={'#' + sol.route}
            className="pv-index-btn pv-index-btn-primary"
            onClick={e => { e.preventDefault(); navigate(sol.route); }}
          >
            Ver solución
          </a>
          <a href="#contact" className="pv-index-btn pv-index-btn-ghost" onClick={e => { e.preventDefault(); navigate('contact'); }}>Preparar consulta</a>
        </div>
      </div>

      <div className="pv-hero-suite" aria-label="Familias de soluciones Pyrovolt">
        <div className="pv-hero-stage">
          <div className="pv-hero-reflection" />
          {solutions.map((item, i) => (
            <img
              key={item.id}
              className={`pv-hero-solution-img is-${item.id}${i === current ? ' is-visible' : ''}`}
              src={item.image}
              alt={item.title}
              aria-hidden={i !== current}
            />
          ))}
          <div className="pv-hero-indicators">
            {solutions.map((item, i) => (
              <button
                key={item.id}
                className={`pv-hero-indicator${i === current ? ' is-active' : ''}`}
                onClick={() => goTo(i)}
                aria-label={item.label}
              />
            ))}
          </div>
        </div>
        <div key={sol.id} className="pv-hero-side-meta pv-hero-label-enter">
          <span>{sol.number}</span>
          <b>{sol.label}</b>
          <em>{sol.metric}</em>
        </div>
      </div>
    </section>
  );
}


function LegacyIntegratedFlowSection({ navigate }) {
  const stages = [
    { id:'mt', number:'01', kicker:'DISTRIBUCIÓN DE MEDIA TENSIÓN', title:'Conectamos potencia, protección y distribución.', text:'Transformadores, celdas y centros prefabricados para llevar la energía desde la red hasta el punto de consumo.', chips:['Trafos','Celdas','Casetas'], route:'mt' },
    { id:'bess', number:'02', kicker:'ALMACENAMIENTO DE ENERGÍA', title:'Reserva energética para picos, respaldo y renovables.', text:'Sistemas ESS y BESS para almacenar excedentes, suavizar demanda y sostener cargas críticas cuando la red no basta.', chips:['Escalable','LFP','EMS'], route:'storage' },
    { id:'ev', number:'03', kicker:'CARGA RÁPIDA PARA VEHÍCULOS ELÉCTRICOS', title:'Energía en movimiento. Sin límites.', text:'Cargadores DC de última generación, desde soluciones compactas hasta sistemas distribuidos HPC para hubs, flotas y movilidad intensiva.', chips:['Ultra rápida','Compatible','Sostenible'], route:'chargers' },
    { id:'global', number:'04', kicker:'SOLUCIONES INTEGRALES', title:'Un solo proyecto, tres capas coordinadas.', text:'Recarga, BESS y media tensión se dimensionan juntas para reducir interfaces, obra duplicada y decisiones aisladas.', chips:['Ingeniería','Suministro','Puesta en marcha'], route:'contact' },
  ];
  const [active, setActive] = React.useState(0);
  const [progress, setProgress] = React.useState(0);
  const flowRef = React.useRef(null);
  const refs = React.useRef([]);
  const jumpToStage = (index) => {
    const el = refs.current[index];
    if (!el) return;
    const top = window.scrollY + el.getBoundingClientRect().top - ((window.innerHeight - el.offsetHeight) / 2);
    window.scrollTo({ top: Math.max(0, top), behavior: 'smooth' });
  };
  React.useEffect(() => {
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if(entry.isIntersecting) setActive(Number(entry.target.dataset.stageIndex || 0));
      });
    }, { threshold: .54, rootMargin: '-16% 0px -30% 0px' });
    refs.current.forEach(el => el && obs.observe(el));
    return () => obs.disconnect();
  }, []);
  React.useEffect(() => {
    let frame = 0;
    const updateProgress = () => {
      const flow = flowRef.current;
      if (!flow) return;
      const rect = flow.getBoundingClientRect();
      const track = Math.max(1, rect.height - window.innerHeight);
      const raw = (-rect.top) / track;
      setProgress(Math.max(0, Math.min(1, raw)));
    };
    const onScroll = () => {
      window.cancelAnimationFrame(frame);
      frame = window.requestAnimationFrame(updateProgress);
    };
    updateProgress();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    return () => {
      window.cancelAnimationFrame(frame);
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
    };
  }, []);
  return (
    <section className="cinema-flow" ref={flowRef} aria-label="Ecosistema Pyrovolt">
      <div className="cinema-bg" aria-hidden="true" />
      <div className="cinema-waves" aria-hidden="true"><WaveRibbon /></div>
      <div className="cinema-layout">
        <aside className="cinema-rail">
          <div className="cinema-scroll">SCROLL</div>
          <div className="cinema-line">
            <i style={{height:`${progress*100}%`}} />
          </div>
          {stages.map((s,i)=>(
            <button key={s.id} className={`cinema-dot ${active===i?'is-active':''}`}
              style={{top:`${((i+.5)/stages.length)*100}%`}}
              onClick={() => jumpToStage(i)} aria-label={s.kicker}>
              <span><StageIcon id={s.id}/></span>
            </button>
          ))}
        </aside>
        <div className="cinema-stages">
          {stages.map((s,i)=>(
            <article key={s.id} data-stage-index={i} ref={el => refs.current[i]=el} className={`cinema-stage ${active===i?'is-active':''}`}>
              <div className="cinema-copy">
                <div className="cinema-kicker"><b>{s.number}</b><span>{s.kicker}</span></div>
                <h2>{s.title}</h2>
                <p>{s.text}</p>
                <div className="cinema-chips">
                  {s.chips.map(c => <span key={c}>{c}</span>)}
                </div>
                <a href={'#' + s.route} onClick={(e)=>{e.preventDefault();navigate(s.route)}}>Ver solución →</a>
              </div>
              <div className="cinema-visual"><StageNeonScene id={s.id}/></div>
            </article>
          ))}
          <div className="cinema-benefits">
            {[
              ['Fiabilidad','Soluciones que garantizan el suministro'],
              ['Innovación','Tecnología que impulsa el cambio'],
              ['Sostenibilidad','Comprometidos con un futuro limpio'],
              ['Cercanía','Acompañamiento experto en cada proyecto'],
            ].map(([t,d])=><div key={t}><StageMiniIcon label={t}/><b>{t}</b><p>{d}</p></div>)}
          </div>
        </div>
      </div>
    </section>
  );
}

function IntegratedFlowSection({ navigate }) {
  const stages = [
    { id:'mt', number:'01', kicker:'DISTRIBUCIÓN DE MEDIA TENSIÓN', title:'Potencia preparada para crecer.', text:'Diseñamos la entrada eléctrica del proyecto: transformación, protección, maniobra y telecontrol para alimentar hubs, industria y activos críticos con margen de ampliación.', chips:['24/36 kV','Protección MT','SCADA ready'], route:'mt' },
    { id:'bess', number:'02', kicker:'ALMACENAMIENTO BESS', title:'Energía estable cuando la red no basta.', text:'Contenedores BESS integrados para desplazar consumo, absorber picos, dar respaldo y estabilizar la infraestructura de carga o producción renovable.', chips:['Hasta 6,26 MWh','LFP industrial','BMS + EMS'], route:'storage' },
    { id:'ev', number:'03', kicker:'RECARGA DC / HPC', title:'Carga rápida lista para operar.', text:'Cargadores DC para estaciones públicas, flotas e industria: arquitectura modular, conectividad OCPP y potencia escalable desde equipos compactos hasta hubs HPC.', chips:['120-800 kW','CCS2','OCPP'], route:'chargers' },
    { id:'global', number:'04', kicker:'SOLUCIÓN INTEGRAL', title:'Todo el sistema bajo una sola ingeniería.', text:'Unimos media tensión, almacenamiento y recarga en una arquitectura coordinada: menos interfaces, más control operativo y una puesta en marcha más limpia.', chips:['MT + BESS + EV','Telemetría','Operación 24/7'], route:'contact' },
  ];
  const [active, setActive] = React.useState(0);
  const [progress, setProgress] = React.useState(0);
  const [dotTops, setDotTops] = React.useState([]);
  const [railHeight, setRailHeight] = React.useState(0);
  const flowRef = React.useRef(null);
  const railRef = React.useRef(null);
  const refs = React.useRef([]);
  const jumpToStage = (index) => {
    const el = refs.current[index];
    if (!el) return;
    const top = window.scrollY + el.getBoundingClientRect().top - ((window.innerHeight - el.offsetHeight) / 2);
    window.scrollTo({ top: Math.max(0, top), behavior: 'smooth' });
  };
  React.useEffect(() => {
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if(entry.isIntersecting) setActive(Number(entry.target.dataset.stageIndex || 0));
      });
    }, { threshold: .54, rootMargin: '-16% 0px -30% 0px' });
    refs.current.forEach(el => el && obs.observe(el));
    return () => obs.disconnect();
  }, []);
  React.useEffect(() => {
    let frame = 0;
    const updateProgress = () => {
      const flow = flowRef.current;
      const rail = railRef.current;
      if (!flow) return;
      const rect = flow.getBoundingClientRect();
      const first = refs.current[0];
      const last = refs.current[refs.current.length - 1];
      const fallbackTrack = Math.max(1, rect.height - window.innerHeight);
      const firstCenter = first ? window.scrollY + first.getBoundingClientRect().top + first.offsetHeight / 2 : window.scrollY - rect.top;
      const lastCenter = last ? window.scrollY + last.getBoundingClientRect().top + last.offsetHeight / 2 : firstCenter + fallbackTrack;
      const viewportCenter = window.scrollY + window.innerHeight / 2;
      const raw = (viewportCenter - firstCenter) / Math.max(1, lastCenter - firstCenter);
      setProgress(Math.max(0, Math.min(1, raw)));
      if (rail) {
        const railRect = rail.getBoundingClientRect();
        setRailHeight(Math.round(railRect.height));
        setDotTops(refs.current.map(el => {
          if (!el) return 0;
          const stageRect = el.getBoundingClientRect();
          return Math.round(stageRect.top - railRect.top + stageRect.height / 2);
        }));
      }
    };
    const onScroll = () => {
      window.cancelAnimationFrame(frame);
      frame = window.requestAnimationFrame(updateProgress);
    };
    updateProgress();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    return () => {
      window.cancelAnimationFrame(frame);
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
    };
  }, []);
  return (
    <section className="cinema-flow" ref={flowRef} aria-label="Ecosistema Pyrovolt">
      <div className="cinema-bg" aria-hidden="true" />
      <div className="cinema-waves" aria-hidden="true"><WaveRibbon /></div>
      <div className="cinema-layout">
        <aside className="cinema-rail" ref={railRef}>
          <div className="cinema-scroll">SCROLL</div>
          <div
            className="cinema-line"
            style={dotTops.length ? {
              top: `${dotTops[0]}px`,
              bottom: `${Math.max(0, railHeight - dotTops[dotTops.length - 1])}px`
            } : undefined}
          >
            <i style={{height:`${progress*100}%`}} />
          </div>
          {stages.map((s,i)=>(
            <button key={s.id} className={`cinema-dot ${active===i?'is-active':''}`}
              style={{top: dotTops[i] ? `${dotTops[i]}px` : `${((i+.5)/stages.length)*100}%`}}
              onClick={() => jumpToStage(i)} aria-label={s.kicker}>
              <span><StageIcon id={s.id}/></span>
            </button>
          ))}
        </aside>
        <div className="cinema-stages">
          {stages.map((s,i)=>(
            <article key={s.id} data-stage-index={i} ref={el => refs.current[i]=el} className={`cinema-stage ${active===i?'is-active':''}`}>
              <div className="cinema-copy">
                <div className="cinema-kicker"><b>{s.number}</b><span>{s.kicker}</span></div>
                <h2>{s.title}</h2>
                <p>{s.text}</p>
                <div className="cinema-chips">
                  {s.chips.map(c => <span key={c}>{c}</span>)}
                </div>
                <a href={'#' + s.route} onClick={(e)=>{e.preventDefault();navigate(s.route)}}>Ver solución &rarr;</a>
              </div>
              <div className="cinema-visual"><StageNeonScene id={s.id}/></div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function WaveRibbon(){
  return <svg viewBox="0 0 1440 520" preserveAspectRatio="none"><defs><linearGradient id="wr" x1="0" x2="1"><stop offset="0" stopColor="rgba(139,92,246,0)"/><stop offset=".5" stopColor="rgba(167,139,250,.55)"/><stop offset="1" stopColor="rgba(139,92,246,0)"/></linearGradient></defs>{Array.from({length:9}).map((_,i)=><path key={i} d={`M -80 ${180+i*16} C 200 ${40+i*8}, 360 ${260-i*8}, 620 ${120+i*10} S 980 ${80+i*18}, 1520 ${120+i*7}`} fill="none" stroke="url(#wr)" strokeWidth="1" opacity={.18+i*.045}/>)}<path className="wave-hot" d="M -80 230 C 180 60, 380 260, 630 135 S 1010 90, 1520 155" fill="none" stroke="url(#wr)" strokeWidth="2"/></svg>
}
function StageIcon({id}){ const c={fill:'none',stroke:'currentColor',strokeWidth:'1.7',strokeLinecap:'round',strokeLinejoin:'round'}; if(id==='mt')return <svg viewBox="0 0 32 32"><path {...c} d="M16 4v24M7 28h18M10 11h12M8 18h16M11 28l5-24 5 24"/><circle {...c} cx="16" cy="4" r="2"/></svg>; if(id==='bess')return <svg viewBox="0 0 32 32"><rect {...c} x="7" y="9" width="18" height="14" rx="2"/><path {...c} d="M12 6v3m8-3v3m-8 14v3m8-3v3M14 16h4m-2-2v4"/></svg>; if(id==='ev')return <svg viewBox="0 0 32 32"><path {...c} d="M17 4 8 17h7l-2 11 10-15h-7l1-9Z"/></svg>; return <svg viewBox="0 0 32 32"><circle {...c} cx="16" cy="16" r="10"/><path {...c} d="M6 16h20M16 6c3 3 4.5 6.5 4.5 10S19 23 16 26M16 6c-3 3-4.5 6.5-4.5 10S13 23 16 26"/></svg> }
function StageMiniIcon({label}){ const l=label.toLowerCase(); const c={fill:'none',stroke:'currentColor',strokeWidth:'1.7',strokeLinecap:'round',strokeLinejoin:'round'}; if(l.includes('celda'))return <svg viewBox="0 0 24 24"><rect {...c} x="5" y="5" width="14" height="14" rx="2"/><path {...c} d="M12 5v14M8 9h2m4 0h2"/></svg>; if(l.includes('caseta')||l.includes('cerc'))return <svg viewBox="0 0 24 24"><path {...c} d="M4 11 12 5l8 6v8H4z"/><path {...c} d="M10 19v-5h4v5"/></svg>; if(l.includes('seg')||l.includes('fiab'))return <svg viewBox="0 0 24 24"><path {...c} d="M12 3 20 7v5c0 5-3.4 8-8 9-4.6-1-8-4-8-9V7z"/><path {...c} d="m8.5 12 2.2 2.2 4.8-5"/></svg>; if(l.includes('sost'))return <svg viewBox="0 0 24 24"><path {...c} d="M20 4C11 4 5 9 5 16c0 3 2 5 5 5 7 0 10-8 10-17Z"/><path {...c} d="M4 20c4-4 7-8 10-13"/></svg>; if(l.includes('int')||l.includes('innov'))return <svg viewBox="0 0 24 24"><path {...c} d="M5 17h14M7 13h10M9 9h6"/><path {...c} d="M12 3v18"/></svg>; return <svg viewBox="0 0 24 24"><path {...c} d="M13 3 5 14h6l-1 7 9-11h-6z"/></svg> }

function StageNeonScene({id}){
  return <AssetSculptureScene id={id}/>;
}

function AssetSculptureScene({ id }) {
  const data = {
    mt: {
      kicker: 'POWER FLOW',
      title: 'Entrada MT',
      image: '/assets/renders/supplied/15.png',
      alt: 'Rayo tridimensional de energía para media tensión',
      variant: 'bolt',
      labels: [
        { label: '24/36 kV', x: 39, y: 23, side: 'left' },
        { label: 'Protección MT', x: 72, y: 50, side: 'right' },
        { label: 'SCADA ready', x: 43, y: 79, side: 'left' }
      ]
    },
    bess: {
      kicker: 'BESS CONTAINER',
      title: 'BESS modular',
      image: '/assets/renders/supplied/16.png',
      alt: 'Contenedor BESS modular renderizado en particulas',
      variant: 'container',
      labels: [
        { label: 'Hasta 6,26 MWh', x: 53, y: 28, side: 'up' },
        { label: 'LFP industrial', x: 82, y: 53, side: 'right' },
        { label: 'BMS + EMS', x: 24, y: 61, side: 'left' }
      ]
    },
    ev: {
      kicker: 'DC CHARGING',
      title: 'Carga DC',
      image: '/assets/renders/supplied/17.png',
      alt: 'Cargador rápido DC renderizado en particulas',
      variant: 'charger',
      labels: [
        { label: '120-800 kW DC', x: 42, y: 41, side: 'left' },
        { label: 'CCS2', x: 75, y: 48, side: 'right' },
        { label: 'OCPP backend', x: 43, y: 59, side: 'left' }
      ]
    },
    global: {
      kicker: 'GLOBAL GRID',
      title: 'Operación 360',
      image: '/assets/renders/supplied/18.png',
      alt: 'Globo compuesto por particulas conectadas',
      variant: 'globe',
      labels: [
        { label: 'MT + BESS + EV', x: 24, y: 55, side: 'left' },
        { label: 'Telemetría', x: 78, y: 40, side: 'right' },
        { label: 'Operación 24/7', x: 54, y: 82, side: 'up' }
      ]
    }
  }[id];

  return (
    <div className={`asset-sculpture asset-${data.variant}`} aria-label={data.title}>
      <div className="asset-glow" aria-hidden="true" />
      <div className="asset-stage">
        <img className="asset-object" src={data.image} alt={data.alt} loading="lazy" />
      </div>
      <div className="asset-caption" data-no-i18n="true">
        <span className="asset-caption-kicker">{data.kicker}</span>
        <b className="asset-caption-title">{data.title}</b>
      </div>
    </div>
  );
}

function ParticleSculptureScene({ id }) {
  const data = {
    mt: {
      kicker: 'MEDIA TENSIÓN',
      title: 'Red de distribución',
      shape: 'tower',
      insights: [
        { title: 'Tensión nominal', value: '24/36 kV', note: 'Protección integrada', label: '24/36 kV', x: 16, y: 23, side: 'right' },
        { title: 'Líneas vivas', value: 'MT', note: 'Flujo a centros y casetas', label: 'Líneas MT', x: 88, y: 39, side: 'left' },
        { title: 'Supervisión', value: 'SCADA', note: 'Alarmas y telemando', label: 'SCADA', x: 82, y: 78, side: 'left' }
      ]
    },
    bess: {
      kicker: 'ENERGY STORAGE',
      title: 'Almacenamiento activo',
      shape: 'battery',
      insights: [
        { title: 'Quimica', value: 'LFP', note: 'Celdas industriales', label: 'LFP', x: 17, y: 34, side: 'right' },
        { title: 'Capacidad', value: '6,26 MWh', note: 'Escalable por bloques', label: '6,26 MWh', x: 86, y: 43, side: 'left' },
        { title: 'Control', value: 'BMS + EMS', note: 'Operación inteligente', label: 'BMS + EMS', x: 70, y: 84, side: 'up' }
      ]
    },
    ev: {
      kicker: 'EV CHARGING',
      title: 'Carga en movimiento',
      shape: 'ev',
      insights: [
        { title: 'Carga rápida', value: 'DC', note: 'Hubs y flotas', label: 'Carga DC', x: 86, y: 25, side: 'left' },
        { title: 'Infraestructura', value: 'MT + BESS', note: 'Potencia estabilizada', label: 'MT + BESS', x: 16, y: 69, side: 'right' },
        { title: 'Operación', value: 'OCPP', note: 'Monitorización y cobro', label: 'OCPP', x: 82, y: 80, side: 'left' }
      ]
    },
    global: {
      kicker: 'GLOBAL GRID',
      title: 'Operación conectada',
      shape: 'globe',
      insights: [
        { title: 'Red global', value: '24/7', note: 'Activos conectados', label: '24/7', x: 16, y: 31, side: 'right' },
        { title: 'Datos', value: 'Telemetry', note: 'Energía y alarmas', label: 'Telemetry', x: 86, y: 45, side: 'left' },
        { title: 'Optimizacion', value: 'EMS', note: 'Coste, carga y backup', label: 'EMS', x: 62, y: 84, side: 'up' }
      ]
    }
  }[id];
  return (
    <div className={`particle-sculpture particle-${id}`} aria-label={data.title}>
      <div className="particle-header">
        <span>{data.kicker}</span>
        <b>{data.title}</b>
      </div>
      <ParticleCanvas shape={data.shape} id={id} />
      <div className="particle-insights">
        {data.insights.map((item, i) => (
          <button
            key={item.title}
            type="button"
            className={`particle-insight insight-${i + 1} card-${item.side}`}
            style={{ left: `${item.x}%`, top: `${item.y}%` }}
            aria-label={`${item.title}: ${item.value}`}
          >
            <span className="insight-pulse" />
            <span className="insight-label" aria-hidden="true">
              {item.label}
            </span>
          </button>
        ))}
      </div>
    </div>
  );
}

function ParticleCanvas({ shape, id }) {
  const dots = getParticleDots(shape);
  const lines = getParticleLines(shape);
  return (
    <svg className="particle-canvas" viewBox="0 0 760 520" aria-hidden="true">
      <defs>
        <radialGradient id={`particleGlow-${id}`} cx="50%" cy="46%" r="54%">
          <stop offset="0" stopColor="#ffffff" stopOpacity=".28"/>
          <stop offset=".42" stopColor="#c4b5fd" stopOpacity=".16"/>
          <stop offset="1" stopColor="#5b21b6" stopOpacity="0"/>
        </radialGradient>
        <linearGradient id={`particleStroke-${id}`} x1="0" x2="1">
          <stop offset="0" stopColor="#4f46e5"/>
          <stop offset=".42" stopColor="#a855f7"/>
          <stop offset=".68" stopColor="#fb7185"/>
          <stop offset="1" stopColor="#60a5fa"/>
        </linearGradient>
      </defs>
      <rect x="0" y="0" width="760" height="520" fill="transparent"/>
      <circle className="particle-aura" cx="382" cy="260" r="218" fill={`url(#particleGlow-${id})`}/>
      <path className="particle-current particle-current-a" d="M88 308 C210 196 336 186 468 236 S644 356 712 214" fill="none" stroke={`url(#particleStroke-${id})`} strokeWidth="1.1" opacity=".34"/>
      <path className="particle-current particle-current-b" d="M134 376 C264 286 408 318 528 246 S648 176 704 154" fill="none" stroke={`url(#particleStroke-${id})`} strokeWidth=".9" opacity=".22"/>
      <g className={`particle-object particle-shape-${shape}`}>
        {lines.map((line, i) => (
          <line key={i} className="particle-link" x1={line[0]} y1={line[1]} x2={line[2]} y2={line[3]} stroke={`url(#particleStroke-${id})`} opacity={line[4]} />
        ))}
        {dots.map((p, i) => (
          <circle
            key={i}
            className="particle-dot"
            cx={p.x}
            cy={p.y}
            r={p.r}
            fill={p.fill}
            opacity={p.o}
            style={{ animationDelay: `${-(i % 18) * .18}s` }}
          />
        ))}
      </g>
    </svg>
  );
}

function getParticleDots(shape) {
  if (shape === 'globe') return globeDots(320);
  if (shape === 'tower') return towerDots();
  if (shape === 'battery') return batteryDots();
  return evDots();
}

function dotColor(t) {
  if (t > .78) return '#fb7185';
  if (t > .52) return '#c084fc';
  if (t > .28) return '#8b5cf6';
  return '#60a5fa';
}

function globeDots(count) {
  const out = [];
  const cx = 382, cy = 260, rx = 210, ry = 164;
  for (let i = 0; i < count; i++) {
    const a = i * 2.399963;
    const y = 1 - (i / (count - 1)) * 2;
    const rr = Math.sqrt(Math.max(0, 1 - y * y));
    const x = Math.cos(a) * rr;
    const z = Math.sin(a) * rr;
    const depth = (z + 1) / 2;
    const hue = (x + 1) / 2;
    out.push({
      x: cx + x * rx,
      y: cy + y * ry + Math.sin(a * 1.7) * 4,
      r: .75 + depth * 2.6,
      o: .06 + depth * .72,
      fill: dotColor(hue)
    });
  }
  return out;
}

function pushDot(out, x, y, r, o, t) {
  out.push({ x, y, r, o, fill: dotColor(t) });
}

function addParticleLine(out, x1, y1, x2, y2, count, hue = .45, wobble = 0) {
  for (let i = 0; i < count; i++) {
    const t = i / Math.max(1, count - 1);
    const n = Math.sin((i + x1 + y1) * .71) * wobble;
    pushDot(
      out,
      x1 + (x2 - x1) * t + n,
      y1 + (y2 - y1) * t + Math.cos((i + x2) * .53) * wobble * .55,
      1.25 + (i % 5) * .22,
      .30 + (i % 9) * .045,
      (hue + t * .26) % 1
    );
  }
}

function addParticleArc(out, cx, cy, rx, ry, start, end, count, hue = .5) {
  for (let i = 0; i < count; i++) {
    const t = i / Math.max(1, count - 1);
    const a = start + (end - start) * t;
    pushDot(out, cx + Math.cos(a) * rx, cy + Math.sin(a) * ry, 1.25 + (i % 4) * .25, .34 + (i % 7) * .045, (hue + t * .22) % 1);
  }
}

function towerDots() {
  const out = [];
  addParticleLine(out, 382, 70, 288, 430, 86, .43, .55);
  addParticleLine(out, 382, 70, 476, 430, 86, .60, .55);
  addParticleLine(out, 272, 430, 492, 430, 52, .52, .2);
  addParticleLine(out, 222, 168, 542, 168, 72, .34, .35);
  addParticleLine(out, 250, 245, 514, 245, 58, .48, .25);
  addParticleLine(out, 290, 325, 474, 325, 44, .62, .2);
  addParticleLine(out, 300, 238, 464, 320, 46, .62, .25);
  addParticleLine(out, 464, 238, 300, 320, 46, .38, .25);
  addParticleLine(out, 320, 162, 444, 238, 42, .52, .22);
  addParticleLine(out, 444, 162, 320, 238, 42, .44, .22);
  addParticleLine(out, 76, 164, 222, 168, 42, .35, .4);
  addParticleLine(out, 542, 168, 690, 136, 46, .58, .4);
  [76, 222, 542, 690].forEach((x, i) => addParticleLine(out, x, i < 2 ? 164 : 136, x + 2, (i < 2 ? 164 : 136) + 42, 12, .7, .15));
  for (let i = 0; i < 7; i++) pushDot(out, 382, 70 + i * 6, 2.4 - i * .12, .82 - i * .05, .7);
  return out;
}

function batteryDots() {
  const out = [];
  const addRect = (x, y, w, h, cols, rows, hue = .45) => {
    for (let r = 0; r < rows; r++) {
      for (let c = 0; c < cols; c++) {
        const edge = r === 0 || r === rows - 1 || c === 0 || c === cols - 1;
        if (!edge && (r + c) % 2 === 0) continue;
        const t = c / Math.max(1, cols - 1);
        pushDot(
          out,
          x + c * (w / (cols - 1)) + Math.sin((r * 9 + c) * .7) * 1.8,
          y + r * (h / (rows - 1)) + Math.cos((r * 7 + c) * .6) * 1.4,
          edge ? 1.95 : 1.05,
          edge ? .78 : .24,
          hue + t * .2
        );
      }
    }
  };
  addRect(142, 144, 456, 224, 34, 17, .35);
  addRect(188, 188, 78, 102, 7, 8, .25);
  addRect(304, 188, 78, 102, 7, 8, .42);
  addRect(420, 188, 78, 102, 7, 8, .58);
  addParticleLine(out, 598, 196, 648, 196, 18, .62, .1);
  addParticleLine(out, 598, 316, 648, 316, 18, .62, .1);
  const bolt = [[402,82],[316,238],[374,238],[340,402],[488,202],[424,202]];
  for (let i = 0; i < bolt.length; i++) {
    const a = bolt[i], b = bolt[(i + 1) % bolt.length];
    for (let j = 0; j < 34; j++) {
      const t = j / 33;
      pushDot(out, a[0]+(b[0]-a[0])*t, a[1]+(b[1]-a[1])*t, 1.9+(j%3)*.34, .72, .64+t*.24);
    }
  }
  return out;
}

function evDots() {
  const out = [];
  addParticleLine(out, 116, 312, 188, 246, 34, .36, .45);
  addParticleLine(out, 188, 246, 474, 246, 78, .45, .32);
  addParticleLine(out, 474, 246, 596, 312, 48, .56, .32);
  addParticleLine(out, 116, 312, 596, 312, 106, .48, .25);
  addParticleLine(out, 214, 246, 256, 286, 24, .42, .2);
  addParticleLine(out, 316, 246, 470, 286, 46, .52, .2);
  addParticleLine(out, 188, 246, 160, 312, 26, .35, .22);
  addParticleLine(out, 596, 312, 628, 312, 16, .56, .15);
  addParticleLine(out, 620, 116, 568, 224, 38, .72, .2);
  addParticleLine(out, 568, 224, 626, 224, 18, .76, .1);
  addParticleLine(out, 626, 224, 554, 390, 54, .82, .2);
  [[224,310],[506,310]].forEach(([cx,cy], wi) => {
    for (let i = 0; i < 72; i++) {
      const a = (Math.PI * 2 * i) / 64;
      pushDot(out, cx+Math.cos(a)*38, cy+Math.sin(a)*38, 1.65, .62, .25+wi*.42+i/180);
    }
    for (let i = 0; i < 5; i++) addParticleLine(out, cx, cy, cx + Math.cos(i * 1.26) * 32, cy + Math.sin(i * 1.26) * 32, 9, .45 + wi * .24, .08);
  });
  addParticleArc(out, 552, 232, 128, 78, -1.35, .55, 72, .56);
  addParticleArc(out, 552, 232, 92, 52, -1.25, .40, 48, .62);
  return out;
}

function getParticleLines(shape) {
  if (shape === 'globe') return [[210,214,332,144,.28],[332,144,506,188,.34],[506,188,560,320,.28],[560,320,326,350,.24],[326,350,210,214,.22],[292,276,506,188,.36]];
  if (shape === 'tower') return [[226,174,538,174,.22],[258,246,506,246,.18],[292,326,472,326,.18],[86,166,226,174,.22],[538,174,692,146,.22]];
  if (shape === 'battery') return [[166,246,88,246,.24],[560,246,672,246,.28],[402,88,336,390,.14]];
  return [[566,224,506,310,.28],[610,120,548,392,.2],[126,310,584,310,.16]];
}

function TechnicalScene({ id }) {
  const data = {
    mt: {
      label: 'MEDIA TENSIÓN',
      title: 'Subestacion + línea',
      metric: '24/36 kV',
      meta: 'Transformación, protección y distribución',
      scene: <TechnicalTower />
    },
    bess: {
      label: 'ENERGY STORAGE',
      title: 'BESS modular',
      metric: '100 kWh - 6,26 MWh',
      meta: 'Contenedor, BMS, celdas LFP y control',
      scene: <TechnicalBattery />
    },
    ev: {
      label: 'EV CHARGING',
      title: 'Hub de carga DC',
      metric: '30 kW - 1 MW',
      meta: 'Cargador, cable, coche y flujo de potencia',
      scene: <TechnicalEV />
    },
    global: {
      label: 'OPERACIÓN GLOBAL',
      title: 'Red conectada',
      metric: '24/7',
      meta: 'Activos, datos y energía coordinados',
      scene: <TechnicalGlobe />
    }
  }[id];
  return (
    <div className={`technical-scene technical-${id}`} aria-label={data.title}>
      <div className="technical-panel">
        <div className="technical-topline">
          <span>{data.label}</span>
          <b>{data.metric}</b>
        </div>
        <div className="technical-stage">
          {data.scene}
        </div>
        <div className="technical-caption">
          <strong>{data.title}</strong>
          <span>{data.meta}</span>
        </div>
      </div>
    </div>
  );
}

function TechnicalTower() {
  return (
    <svg className="technical-svg" viewBox="0 0 720 420" aria-hidden="true">
      <defs>
        <linearGradient id="techLine" x1="0" x2="1">
          <stop offset="0" stopColor="#60a5fa"/>
          <stop offset=".52" stopColor="#c4b5fd"/>
          <stop offset="1" stopColor="#a855f7"/>
        </linearGradient>
        <filter id="techGlow" x="-30%" y="-30%" width="160%" height="160%">
          <feGaussianBlur stdDeviation="5"/>
        </filter>
      </defs>
      <rect x="58" y="64" width="604" height="292" rx="22" fill="rgba(255,255,255,.035)" stroke="rgba(196,181,253,.14)"/>
      <g opacity=".42">
        {[130,210,290,370,450,530,610].map(x => <line key={x} x1={x} y1="86" x2={x} y2="336" stroke="rgba(255,255,255,.08)"/>)}
        {[118,174,230,286].map(y => <line key={y} x1="82" y1={y} x2="638" y2={y} stroke="rgba(255,255,255,.08)"/>)}
      </g>
      <path className="tech-flow-line" d="M38 154 C172 122 250 156 356 145 S542 105 686 140" fill="none" stroke="url(#techLine)" strokeWidth="3" strokeLinecap="round"/>
      <g className="tech-main-object">
        <ellipse cx="360" cy="345" rx="166" ry="16" fill="#a855f7" opacity=".12" filter="url(#techGlow)"/>
        <path d="M360 76 L280 346 H440 Z" fill="rgba(7,11,25,.68)" stroke="url(#techLine)" strokeWidth="2.5" strokeLinejoin="round"/>
        <path d="M214 154 H506 M246 204 H474 M281 268 H439" stroke="url(#techLine)" strokeWidth="2.5" strokeLinecap="round"/>
        <path d="M360 76 L280 346 M360 76 L440 346 M302 154 L418 204 M418 154 L302 204 M288 204 L432 268 M432 204 L288 268 M281 268 L440 346 M439 268 L280 346" fill="none" stroke="rgba(196,181,253,.72)" strokeWidth="1.5" strokeLinecap="round"/>
        <path d="M214 154 C156 158 108 166 58 182 M506 154 C562 158 612 166 664 182" stroke="rgba(196,181,253,.42)" strokeWidth="2" strokeLinecap="round"/>
        {[254,316,404,466].map(x => <g key={x}><line x1={x} y1="154" x2={x} y2="188" stroke="rgba(196,181,253,.7)"/><circle cx={x} cy="194" r="6" fill="rgba(196,181,253,.18)" stroke="url(#techLine)"/></g>)}
        <circle cx="360" cy="76" r="9" fill="#c4b5fd"/>
      </g>
    </svg>
  );
}

function TechnicalBattery() {
  return (
    <svg className="technical-svg" viewBox="0 0 720 420" aria-hidden="true">
      <defs>
        <linearGradient id="batteryLine" x1="0" x2="1">
          <stop offset="0" stopColor="#60a5fa"/>
          <stop offset=".48" stopColor="#c4b5fd"/>
          <stop offset="1" stopColor="#a855f7"/>
        </linearGradient>
      </defs>
      <rect x="74" y="82" width="572" height="252" rx="24" fill="rgba(255,255,255,.035)" stroke="rgba(196,181,253,.14)"/>
      <g className="tech-main-object">
        <rect x="156" y="160" width="408" height="132" rx="18" fill="rgba(7,11,25,.76)" stroke="url(#batteryLine)" strokeWidth="2.5"/>
        {[0,1,2,3].map(i => <rect key={i} x={184+i*92} y="186" width="70" height="78" rx="10" fill={i<3 ? 'rgba(196,181,253,.13)' : 'rgba(255,255,255,.04)'} stroke="rgba(196,181,253,.34)"/>)}
        <rect x="560" y="198" width="26" height="56" rx="8" fill="rgba(196,181,253,.14)" stroke="url(#batteryLine)" strokeWidth="2"/>
        <path className="tech-flow-line" d="M104 226 H154 M586 226 H646" fill="none" stroke="url(#batteryLine)" strokeWidth="3" strokeLinecap="round"/>
        <path d="M384 108 L316 218 H368 L326 320 L430 184 H376 L412 108 Z" fill="rgba(196,181,253,.22)" stroke="url(#batteryLine)" strokeWidth="3" strokeLinejoin="round"/>
        <g opacity=".7">
          {[198,290,382,474].map((x,i) => <line key={i} x1={x} y1="302" x2={x+48} y2="302" stroke={i<3 ? '#c4b5fd' : 'rgba(196,181,253,.24)'} strokeWidth="7" strokeLinecap="round"/>)}
        </g>
      </g>
    </svg>
  );
}

function TechnicalEV() {
  return (
    <svg className="technical-svg" viewBox="0 0 720 420" aria-hidden="true">
      <defs>
        <linearGradient id="evLine" x1="0" x2="1">
          <stop offset="0" stopColor="#60a5fa"/>
          <stop offset=".52" stopColor="#c4b5fd"/>
          <stop offset="1" stopColor="#a855f7"/>
        </linearGradient>
      </defs>
      <rect x="72" y="82" width="576" height="252" rx="24" fill="rgba(255,255,255,.035)" stroke="rgba(196,181,253,.14)"/>
      <g className="tech-main-object">
        <path className="tech-flow-line" d="M558 126 C624 148 632 216 574 248" fill="none" stroke="url(#evLine)" strokeWidth="3" strokeLinecap="round"/>
        <path d="M176 248 C206 206 246 198 294 198 H450 C498 198 542 222 562 260 L584 302 H548 A43 43 0 0 0 462 302 H276 A43 43 0 0 0 190 302 H144 V270 C144 258 154 248 176 248Z" fill="rgba(7,11,25,.76)" stroke="url(#evLine)" strokeWidth="2.5" strokeLinejoin="round"/>
        <path d="M284 198 L250 244 H394 V198 M406 198 L492 244 H394" fill="rgba(196,181,253,.08)" stroke="rgba(196,181,253,.54)" strokeWidth="1.8" strokeLinejoin="round"/>
        <circle cx="234" cy="302" r="38" fill="#060914" stroke="url(#evLine)" strokeWidth="2.5"/>
        <circle cx="505" cy="302" r="38" fill="#060914" stroke="url(#evLine)" strokeWidth="2.5"/>
        {[234,505].map(cx => <g key={cx} opacity=".7"><circle cx={cx} cy="302" r="12" fill="none" stroke="rgba(196,181,253,.65)"/><line x1={cx-27} y1="302" x2={cx+27} y2="302" stroke="rgba(196,181,253,.42)"/><line x1={cx} y1="275" x2={cx} y2="329" stroke="rgba(196,181,253,.42)"/></g>)}
        <rect x="590" y="156" width="48" height="128" rx="14" fill="rgba(7,11,25,.78)" stroke="url(#evLine)" strokeWidth="2.5"/>
        <circle cx="614" cy="190" r="10" fill="rgba(196,181,253,.2)" stroke="rgba(196,181,253,.72)"/>
        <path d="M590 236 C544 234 530 254 544 276" fill="none" stroke="url(#evLine)" strokeWidth="3" strokeLinecap="round"/>
        <path d="M612 102 L578 172 H608 L570 252" fill="none" stroke="url(#evLine)" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round"/>
      </g>
    </svg>
  );
}

function TechnicalGlobe() {
  const dots = [];
  const cx = 360, cy = 208, r = 120;
  for (let i = 0; i < 180; i++) {
    const ga = i * 2.399963;
    const y = 1 - (i / 179) * 2;
    const rr = Math.sqrt(1 - y * y);
    const x = Math.cos(ga) * rr;
    const z = Math.sin(ga) * rr;
    if (z > -0.2) dots.push({ x: cx + x * r, y: cy + y * r * .82, z });
  }
  const nodes = [[294,184],[366,126],[432,214],[322,270],[462,154],[394,292]];
  return (
    <svg className="technical-svg" viewBox="0 0 720 420" aria-hidden="true">
      <defs>
        <linearGradient id="globeLine" x1="0" x2="1">
          <stop offset="0" stopColor="#60a5fa"/>
          <stop offset=".52" stopColor="#c4b5fd"/>
          <stop offset="1" stopColor="#a855f7"/>
        </linearGradient>
      </defs>
      <rect x="72" y="72" width="576" height="272" rx="24" fill="rgba(255,255,255,.035)" stroke="rgba(196,181,253,.14)"/>
      <g className="tech-main-object">
        <circle cx={cx} cy={cy} r="142" fill="rgba(196,181,253,.045)"/>
        {dots.map((d,i) => <circle key={i} cx={d.x} cy={d.y} r={0.8 + Math.max(0,d.z)*1.8} fill="#c4b5fd" opacity={0.08 + Math.max(0,d.z)*0.65}/>)}
        <ellipse cx={cx} cy={cy} rx="132" ry="34" fill="none" stroke="url(#globeLine)" strokeWidth="1.2" opacity=".18"/>
        <ellipse cx={cx} cy={cy} rx="68" ry="128" fill="none" stroke="url(#globeLine)" strokeWidth="1.2" opacity=".13" transform={`rotate(24 ${cx} ${cy})`}/>
        {[0,1,2,3,4].map(i => {
          const a = nodes[i], b = nodes[(i+1)%nodes.length];
          return <line key={i} x1={a[0]} y1={a[1]} x2={b[0]} y2={b[1]} stroke="url(#globeLine)" strokeWidth="1.3" opacity=".45"/>;
        })}
        {nodes.map((n,i) => <g key={i}><circle cx={n[0]} cy={n[1]} r="11" fill="rgba(196,181,253,.14)" stroke="url(#globeLine)"/><circle cx={n[0]} cy={n[1]} r="3.8" fill="#c4b5fd"/></g>)}
        <path className="tech-flow-line" d="M108 220 C214 322 358 108 484 230 S610 276 662 156" fill="none" stroke="url(#globeLine)" strokeWidth="3" strokeLinecap="round"/>
      </g>
    </svg>
  );
}

function EnergyNetworkScene({id}){
  const focus = {
    mt: { x: 218, y: 176, label: 'MT', title: 'Media tensión', tone: '#93c5fd' },
    bess: { x: 408, y: 286, label: 'BESS', title: 'Storage', tone: '#c4b5fd' },
    ev: { x: 592, y: 190, label: 'EV', title: 'Carga rápida', tone: '#7dd3fc' },
    global: { x: 516, y: 318, label: 'OPS', title: 'Operación global', tone: '#a7f3d0' },
  }[id] || { x: 410, y: 235, label: 'OPS', title: 'Operación global', tone: '#c4b5fd' };
  const hubs = [
    { id:'mt', x:218, y:176, label:'MT', icon:'tower' },
    { id:'bess', x:408, y:286, label:'BESS', icon:'battery' },
    { id:'ev', x:592, y:190, label:'EV', icon:'car' },
    { id:'global', x:516, y:318, label:'GRID', icon:'globe' },
  ];
  const links = [[0,1],[1,2],[1,3],[0,2],[2,3]];
  const points = [];
  for(let i=0;i<150;i++){
    const angle = i * 2.399963;
    const radius = 18 + Math.sqrt(i) * 23;
    const x = 410 + Math.cos(angle) * radius * 1.38;
    const y = 238 + Math.sin(angle) * radius * .72;
    if(x > 52 && x < 770 && y > 42 && y < 430) points.push({x,y,r:.7+(i%5)*.22,o:.06+(i%7)*.018});
  }
  const MiniVisual = ({kind}) => {
    const c={fill:'none',stroke:'currentColor',strokeWidth:'2',strokeLinecap:'round',strokeLinejoin:'round'};
    if(kind==='tower') return <g><path {...c} d="M0-28 22 32h-44L0-28Z"/><path {...c} d="M-32-5h64M-20 13h40M-18 32 0-28 18 32M-12-5l24 18M12-5l-24 18"/></g>;
    if(kind==='battery') return <g><rect {...c} x="-23" y="-24" width="46" height="50" rx="6"/><path {...c} d="M-9-31h18v7"/><path {...c} d="M5-15-8 5h11l-7 18 17-25H2l3-13Z"/></g>;
    if(kind==='car') return <g><path {...c} d="M-34 10h8a12 12 0 0 1 24 0h24a12 12 0 0 1 24 0h7v-16l-18-20h-43l-18 20h-8z"/><path {...c} d="M-4-26v20h38M-5-26-22-6h17"/><circle {...c} cx="-14" cy="10" r="8"/><circle {...c} cx="34" cy="10" r="8"/></g>;
    return <g><circle {...c} r="27"/><path {...c} d="M-27 0h54M0-27c10 9 15 18 15 27S10 18 0 27M0-27c-10 9-15 18-15 27S-10 18 0 27"/><circle cx="-15" cy="-7" r="2.8" fill="currentColor"/><circle cx="16" cy="8" r="2.8" fill="currentColor"/></g>;
  };
  return (
    <svg className="neon-scene energy-network-scene" viewBox="0 0 820 470" aria-label={`Sistema energético conectado: ${focus.title}`}>
      <NeonDefs/>
      <defs>
        <radialGradient id={`focus-${id}`} cx="50%" cy="50%" r="50%">
          <stop offset="0" stopColor={focus.tone} stopOpacity=".42"/>
          <stop offset="1" stopColor={focus.tone} stopOpacity="0"/>
        </radialGradient>
      </defs>
      <rect x="78" y="54" width="664" height="360" rx="34" fill="rgba(4,8,18,.55)" stroke="rgba(196,181,253,.13)"/>
      <circle cx={focus.x} cy={focus.y} r="168" fill={`url(#focus-${id})`} filter="url(#blur)" opacity=".62"/>
      {points.map((p,i)=><circle key={i} className="network-particle" cx={p.x} cy={p.y} r={p.r} fill="#c4b5fd" opacity={p.o}/>)}
      {links.map(([a,b],i)=>{
        const A=hubs[a], B=hubs[b];
        const activeLink = A.id===id || B.id===id;
        return (
          <g key={i}>
            <line x1={A.x} y1={A.y} x2={B.x} y2={B.y} stroke="rgba(196,181,253,.13)" strokeWidth="1.2"/>
            {activeLink && <line className="network-link-live" x1={A.x} y1={A.y} x2={B.x} y2={B.y} stroke="url(#ng)" strokeWidth="2"/>}
          </g>
        );
      })}
      <path className="network-orbit" d="M104 272 C214 90 430 88 568 156 S738 280 650 354 C548 444 292 416 178 328 C118 282 116 229 172 184" fill="none" stroke="url(#ng)" strokeWidth="1" opacity=".22" strokeDasharray="8 18"/>
      {hubs.map(h=>{
        const isActive = h.id===id;
        return (
          <g key={h.id} className={`network-hub ${isActive?'is-active':''}`} transform={`translate(${h.x} ${h.y})`}>
            <circle r={isActive?70:52} fill={isActive?'rgba(167,139,250,.13)':'rgba(8,13,28,.78)'} stroke={isActive?'url(#ng)':'rgba(196,181,253,.22)'} strokeWidth={isActive?2.2:1.2}/>
            <circle r={isActive?48:36} fill="rgba(5,9,20,.72)" stroke="rgba(196,181,253,.18)"/>
            <g className="network-mini" style={{color:isActive?focus.tone:'#c4b5fd'}}>
              <MiniVisual kind={h.icon}/>
            </g>
            <text y={isActive?88:68} textAnchor="middle" fill={isActive?'#fff':'rgba(255,255,255,.46)'} fontSize={isActive?13:11} fontFamily="var(--font-mono)" letterSpacing="1.6">{h.label}</text>
          </g>
        );
      })}
      <g className="network-callout" transform={`translate(${Math.min(650, focus.x+76)} ${Math.max(86, focus.y-104)})`}>
        <rect x="-12" y="-26" width="148" height="52" rx="14" fill="rgba(7,12,25,.82)" stroke="rgba(196,181,253,.22)"/>
        <circle cx="10" cy="0" r="4" fill={focus.tone}/>
        <text x="24" y="-4" fill="#fff" fontSize="12" fontFamily="var(--font-mono)" letterSpacing="1.2">{focus.label}</text>
        <text x="24" y="14" fill="rgba(255,255,255,.56)" fontSize="10" fontFamily="var(--font-mono)">online / conectado</text>
      </g>
    </svg>
  );
}

/* Deterministic ambient particle field shared by non-globe scenes */
function SceneParticles({seed=1}){
  const pts=[];
  let s=seed;
  const rng=()=>{s=(s*1664525+1013904223)&0xffffffff;return((s>>>0)/0xffffffff);};
  for(let i=0;i<55;i++){
    pts.push({x:rng()*820,y:rng()*470,r:0.5+rng()*1.3,op:0.04+rng()*0.14});
  }
  return <>{pts.map((p,i)=><circle key={i} cx={p.x} cy={p.y} r={p.r} fill="#c4b5fd" opacity={p.op}/>)}</>;
}
function NeonDefs(){
  return (
    <defs>
      <linearGradient id="ng" x1="0" y1="0" x2="1" y2="0">
        <stop offset="0" stopColor="#8b5cf6"/>
        <stop offset=".5" stopColor="#c4b5fd"/>
        <stop offset="1" stopColor="#60a5fa"/>
      </linearGradient>
      <linearGradient id="ngv" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stopColor="#c4b5fd"/>
        <stop offset="1" stopColor="#60a5fa"/>
      </linearGradient>
      <radialGradient id="glow" cx="50%" cy="50%" r="50%">
        <stop offset="0" stopColor="rgba(167,139,250,.5)"/>
        <stop offset="1" stopColor="rgba(167,139,250,0)"/>
      </radialGradient>
      <filter id="blur" x="-50%" y="-50%" width="200%" height="200%">
        <feGaussianBlur stdDeviation="6"/>
      </filter>
      <filter id="glow-sm" x="-30%" y="-30%" width="160%" height="160%">
        <feGaussianBlur stdDeviation="3"/>
      </filter>
    </defs>
  );
}
function EnergyCurve({d}){
  return (
    <>
      <path d={d} fill="none" stroke="url(#ng)" strokeWidth="10" opacity=".09" filter="url(#blur)"/>
      <path className="cinema-energy" d={d} fill="none" stroke="url(#ng)" strokeWidth="2.2" strokeLinecap="round"/>
    </>
  );
}

/* ── 01 TRANSMISSION TOWER ── */
function NeonMT(){
  const s={fill:'none',stroke:'url(#ng)',strokeLinecap:'round',strokeLinejoin:'round'};
  /* tower geometry constants */
  const TX=410, TY_TOP=72, TY_BOT=415;
  const ARM_Y=148, ARM2_Y=190;
  const BODY_W_TOP=52, BODY_W_MID=100, BODY_W_BOT=168;
  const MID_Y=268, LOW_Y=342;
  /* derived x-coords */
  const tl=TX-BODY_W_TOP/2, tr=TX+BODY_W_TOP/2;
  const ml=TX-BODY_W_MID/2, mr=TX+BODY_W_MID/2;
  const bl=TX-BODY_W_BOT/2, br=TX+BODY_W_BOT/2;
  const ll=TX-BODY_W_BOT/2-22, lr=TX+BODY_W_BOT/2+22;
  /* arm extents */
  const ARM_L=155, ARM_R=665;
  return (
    <svg className="neon-scene" viewBox="0 0 820 470" aria-label="Torre de transmisión eléctrica">
      <NeonDefs/>
      <SceneParticles seed={11}/>
      {/* ground glow */}
      <ellipse cx={TX} cy="425" rx="200" ry="22" fill="url(#glow)" filter="url(#blur)" opacity=".45"/>
      {/* high-voltage power lines */}
      <EnergyCurve d={`M 0 ${ARM_Y} C 140 ${ARM_Y+4} 260 ${ARM_Y} ${tl} ${ARM_Y} S ${tr+2} ${ARM_Y} 820 ${ARM_Y}`}/>
      {/* crossarms */}
      <line {...s} strokeWidth="2.8" x1={ARM_L} y1={ARM_Y} x2={tl} y2={ARM_Y}/>
      <line {...s} strokeWidth="2.8" x1={tr}   y1={ARM_Y} x2={ARM_R} y2={ARM_Y}/>
      {/* lower crossarms */}
      <line {...s} strokeWidth="1.8" x1={ARM_L+65} y1={ARM2_Y} x2={tl} y2={ARM2_Y} opacity=".55"/>
      <line {...s} strokeWidth="1.8" x1={tr} y1={ARM2_Y} x2={ARM_R-65} y2={ARM2_Y} opacity=".55"/>
      {/* tower body silhouette fill */}
      <path d={`M ${bl} ${TY_BOT} L ${tl} ${ARM_Y} L ${tr} ${ARM_Y} L ${br} ${TY_BOT} Z`}
            fill="rgba(6,9,20,.55)" stroke="none"/>
      {/* main legs */}
      <line {...s} strokeWidth="2.6" x1={tl} y1={ARM_Y} x2={bl} y2={TY_BOT}/>
      <line {...s} strokeWidth="2.6" x1={tr} y1={ARM_Y} x2={br} y2={TY_BOT}/>
      {/* waist horizontals */}
      <line {...s} strokeWidth="1.8" x1={ml} y1={MID_Y} x2={mr} y2={MID_Y} opacity=".72"/>
      <line {...s} strokeWidth="1.6" x1={bl-12} y1={LOW_Y} x2={br+12} y2={LOW_Y} opacity=".58"/>
      {/* X-bracing upper */}
      <line {...s} strokeWidth="1.1" opacity=".42" x1={tl} y1={ARM_Y} x2={mr} y2={MID_Y}/>
      <line {...s} strokeWidth="1.1" opacity=".42" x1={tr} y1={ARM_Y} x2={ml} y2={MID_Y}/>
      {/* X-bracing lower */}
      <line {...s} strokeWidth="1.1" opacity=".35" x1={ml} y1={MID_Y} x2={br+10} y2={LOW_Y}/>
      <line {...s} strokeWidth="1.1" opacity=".35" x1={mr} y1={MID_Y} x2={bl-10} y2={LOW_Y}/>
      <line {...s} strokeWidth="1.1" opacity=".30" x1={bl-10} y1={LOW_Y} x2={br} y2={TY_BOT}/>
      <line {...s} strokeWidth="1.1" opacity=".30" x1={br+10} y1={LOW_Y} x2={bl} y2={TY_BOT}/>
      {/* mast above crossarms */}
      <line {...s} strokeWidth="2.4" x1={tl} y1={ARM_Y} x2={TX} y2={TY_TOP+10}/>
      <line {...s} strokeWidth="2.4" x1={tr} y1={ARM_Y} x2={TX} y2={TY_TOP+10}/>
      {/* peak sphere */}
      <circle cx={TX} cy={TY_TOP} r="8" fill="rgba(167,139,250,.18)" stroke="url(#ng)" strokeWidth="2.2"/>
      <circle cx={TX} cy={TY_TOP} r="8" fill="none" stroke="url(#ng)" strokeWidth="12" opacity=".10" filter="url(#glow-sm)"/>
      {/* insulator sets — 3 per crossarm side */}
      {[ARM_L+45, ARM_L+145, ARM_L+240].map(x=>(
        <g key={x}>
          <line {...s} x1={x} y1={ARM_Y} x2={x} y2={ARM_Y+28} strokeWidth="1.2" opacity=".65"/>
          <ellipse cx={x} cy={ARM_Y+34} rx="7" ry="5" fill="rgba(167,139,250,.08)" stroke="url(#ng)" strokeWidth="1.2"/>
        </g>
      ))}
      {[ARM_R-45, ARM_R-145, ARM_R-240].map(x=>(
        <g key={x}>
          <line {...s} x1={x} y1={ARM_Y} x2={x} y2={ARM_Y+28} strokeWidth="1.2" opacity=".65"/>
          <ellipse cx={x} cy={ARM_Y+34} rx="7" ry="5" fill="rgba(167,139,250,.08)" stroke="url(#ng)" strokeWidth="1.2"/>
        </g>
      ))}
      {/* feet */}
      <line {...s} strokeWidth="2" x1={bl} y1={TY_BOT} x2={ll} y2={TY_BOT+14}/>
      <line {...s} strokeWidth="2" x1={br} y1={TY_BOT} x2={lr} y2={TY_BOT+14}/>
      <line {...s} strokeWidth="1" x1={ll} y1={TY_BOT+14} x2={lr} y2={TY_BOT+14} opacity=".25"/>
    </svg>
  );
}

/* ── 02 BATTERY + BOLD BOLT ── */
function NeonBESS(){
  const s={fill:'none',stroke:'url(#ng)',strokeLinecap:'round',strokeLinejoin:'round'};
  /* battery rect */
  const BX=268, BY=90, BW=262, BH=286, BR=26;
  /* cell grid inside battery */
  const cellRows=4, cellCols=3;
  const cPad=20, cW=(BW-cPad*2)/cellCols, cH=(BH-cPad*2-50)/cellRows;
  /* bolt points — wide, dramatic, passes through center of battery */
  const bolt="M 500 62 L 452 62 L 362 222 L 422 222 L 328 402 L 352 402 L 442 242 L 382 242 L 470 62";
  return (
    <svg className="neon-scene" viewBox="0 0 820 470" aria-label="Sistema de almacenamiento de energía">
      <NeonDefs/>
      <SceneParticles seed={31}/>
      <EnergyCurve d="M 22 240 C 175 115 325 210 462 178 S 645 115 802 238"/>
      {/* battery body shadow fill */}
      <rect x={BX} y={BY} width={BW} height={BH} rx={BR} fill="rgba(5,8,18,.62)" stroke="none"/>
      {/* terminal cap */}
      <rect x={BX+BW/2-55} y={BY-36} width="110" height="40" rx="12"
            fill="rgba(5,8,18,.68)" stroke="url(#ng)" strokeWidth="2.2"/>
      {/* terminal center pin */}
      <rect x={BX+BW/2-14} y={BY-44} width="28" height="14" rx="6"
            fill="rgba(167,139,250,.35)" stroke="url(#ng)" strokeWidth="1.5"/>
      {/* cell grid */}
      {Array.from({length:cellRows}).map((_,row)=>
        Array.from({length:cellCols}).map((_,col)=>{
          const cx2=BX+cPad+col*cW+cW/2;
          const cy2=BY+cPad+30+row*cH+cH/2;
          const charged=row*cellCols+col < cellRows*cellCols*0.72;
          return <rect key={`${row}-${col}`}
                   x={BX+cPad+col*cW+3} y={BY+cPad+28+row*cH+3}
                   width={cW-6} height={cH-6} rx="6"
                   fill={charged?"rgba(167,139,250,.09)":"rgba(255,255,255,.03)"}
                   stroke="url(#ng)" strokeWidth="1" opacity={charged?.75:.35}/>;
        })
      )}
      {/* battery body outline */}
      <rect {...s} x={BX} y={BY} width={BW} height={BH} rx={BR} strokeWidth="2.8"/>
      {/* bolt glow */}
      <path d={bolt} fill="none" stroke="url(#ng)" strokeWidth="28" opacity=".08" filter="url(#blur)"/>
      {/* bolt fill */}
      <path d={bolt} fill="rgba(167,139,250,.18)" stroke="none"/>
      {/* bolt outline */}
      <path d={bolt} {...s} strokeWidth="3" strokeLinejoin="round"/>
      {/* energy arc radiating from bolt tip */}
      <path {...s} strokeWidth="1.4" opacity=".5"  d="M 362 222 Q 420 235 362 248"/>
      <path {...s} strokeWidth="1.1" opacity=".28" d="M 348 195 Q 428 218 348 242"/>
      {/* charge level indicator row */}
      <g>
        {[0,1,2,3,4].map(i=>(
          <rect key={i} x={BX+cPad+i*46} y={BY+BH+14} width="36" height="8" rx="4"
                fill={i<4?"rgba(167,139,250,.6)":"rgba(167,139,250,.14)"}
                stroke="url(#ng)" strokeWidth="1" opacity=".9"/>
        ))}
      </g>
      {/* orbit ring */}
      <ellipse className="neon-orbit" cx={BX+BW/2} cy={BY+BH/2} rx={BW/2+42} ry={BH/2+28}
               fill="none" stroke="url(#ng)" strokeWidth="1" opacity=".15" strokeDasharray="12 22"/>
    </svg>
  );
}

/* ── 03 EV CAR + CHARGING FIELD ── */
function NeonEV(){
  const s={fill:'none',stroke:'url(#ng)',strokeLinecap:'round',strokeLinejoin:'round'};
  /* wheel geometry */
  const wR={cx:268,cy:326,r:44}, wF={cx:566,cy:326,r:44};
  /* charging particle cloud — dots radiating from port at (648,258) */
  const chargePts=[];
  for(let i=0;i<28;i++){
    const ang=-Math.PI*0.45+i*(Math.PI*0.9/27);
    const dist=52+((i*37+11)%64);
    chargePts.push({
      x:648+Math.cos(ang)*dist,
      y:258+Math.sin(ang)*dist,
      r:0.8+((i*13)%5)*0.28,
      op:0.08+((i*7)%10)*0.055
    });
  }
  return (
    <svg className="neon-scene" viewBox="0 0 820 470" aria-label="Vehículo eléctrico cargando">
      <NeonDefs/>
      <SceneParticles seed={51}/>
      <EnergyCurve d="M 22 228 C 195 118 355 232 508 186 S 668 130 818 196"/>
      {/* ground shadow */}
      <ellipse cx="415" cy="386" rx="228" ry="16" fill="url(#glow)" filter="url(#blur)" opacity=".35"/>
      {/* car body fill */}
      <path d="M 184 284 L 184 266 C 202 242 230 234 254 234 C 270 212 300 198 330 196 L 360 186 L 562 186 L 616 218 L 648 266 L 648 326 L 612 326 A 44 44 0 0 0 524 326 L 312 326 A 44 44 0 0 0 224 326 L 184 326 Z"
            fill="rgba(5,8,18,.55)" stroke="none"/>
      {/* car upper body */}
      <path {...s} strokeWidth="2.6"
            d="M 184 284 L 184 266 C 202 242 230 234 254 234 C 270 212 300 198 330 196 L 360 186 L 562 186 L 616 218 L 648 266 L 648 326"/>
      {/* underbody with wheel arches */}
      <path {...s} strokeWidth="2.6"
            d="M 648 326 L 612 326 A 44 44 0 0 0 524 326 L 312 326 A 44 44 0 0 0 224 326 L 184 326 L 184 284"/>
      {/* wheel fills */}
      <circle cx={wR.cx} cy={wR.cy} r={wR.r} fill="rgba(4,6,16,.94)" stroke="none"/>
      <circle cx={wF.cx} cy={wF.cy} r={wF.r} fill="rgba(4,6,16,.94)" stroke="none"/>
      {/* wheel outer rings */}
      <circle {...s} cx={wR.cx} cy={wR.cy} r={wR.r} strokeWidth="2.4"/>
      <circle {...s} cx={wF.cx} cy={wF.cy} r={wF.r} strokeWidth="2.4"/>
      <circle {...s} cx={wR.cx} cy={wR.cy} r={wR.r*0.42} strokeWidth="1.4" opacity=".5"/>
      <circle {...s} cx={wF.cx} cy={wF.cy} r={wF.r*0.42} strokeWidth="1.4" opacity=".5"/>
      {/* 5-spoke wheels */}
      {[0,1,2,3,4].map(i=>{const a=i*Math.PI*2/5-Math.PI/2; return(
        <g key={i}>
          <line {...s} x1={wR.cx+Math.cos(a)*12} y1={wR.cy+Math.sin(a)*12}
                       x2={wR.cx+Math.cos(a)*38} y2={wR.cy+Math.sin(a)*38} strokeWidth="1.3" opacity=".5"/>
          <line {...s} x1={wF.cx+Math.cos(a)*12} y1={wF.cy+Math.sin(a)*12}
                       x2={wF.cx+Math.cos(a)*38} y2={wF.cy+Math.sin(a)*38} strokeWidth="1.3" opacity=".5"/>
        </g>
      );})}
      {/* greenhouse / windows */}
      <path {...s} strokeWidth="1.8" opacity=".78"
            d="M 268 234 C 292 214 312 204 332 200 L 360 190 L 496 190 L 496 234 Z"/>
      <path {...s} strokeWidth="1.8" opacity=".72"
            d="M 496 190 L 558 190 L 610 220 L 596 234 L 496 234"/>
      <line {...s} x1="496" y1="190" x2="496" y2="234" strokeWidth="1.3" opacity=".48"/>
      <line {...s} x1="384" y1="190" x2="384" y2="234" strokeWidth="1.1" opacity=".38"/>
      {/* charging port */}
      <circle {...s} cx="648" cy="258" r="10" strokeWidth="1.8" opacity=".8"/>
      <line {...s} x1="648" y1="250" x2="648" y2="266" strokeWidth="1.3" opacity=".55"/>
      <line {...s} x1="640" y1="258" x2="656" y2="258" strokeWidth="1.3" opacity=".55"/>
      {/* particle charging cloud */}
      {chargePts.map((p,i)=>(
        <circle key={i} cx={p.x} cy={p.y} r={p.r} fill="#c4b5fd" opacity={p.op}/>
      ))}
      {/* main lightning bolt */}
      <g className="neon-object scene-main">
        <path d="M 718 88 L 658 208 L 700 208 L 632 348"
              fill="none" stroke="url(#ng)" strokeWidth="24" opacity=".09" filter="url(#blur)"/>
        <path d="M 734 88 L 720 88 L 660 208 L 702 208 L 634 348 L 650 348 L 720 208 L 678 208 L 732 88 Z"
              fill="rgba(167,139,250,.18)" stroke="url(#ng)" strokeWidth="1.8" strokeLinejoin="round"/>
        <path {...s} strokeWidth="3.2" d="M 718 88 L 658 208 L 700 208 L 632 348"/>
        {/* charging arcs near bolt */}
        <path {...s} strokeWidth="1.5" opacity=".55" d="M 665 152 Q 728 172 665 192"/>
        <path {...s} strokeWidth="1.2" opacity=".32" d="M 679 124 Q 760 156 679 188"/>
      </g>
    </svg>
  );
}

/* ── 04 PARTICLE GLOBE (Stripe-style) ── */
function NeonGlobe(){
  const cx=410, cy=235, r=156;
  const TILT=0.32; // radians — slight forward tilt toward viewer
  const PHI=Math.PI*(Math.sqrt(5)-1); // golden angle
  const N=280;

  /* Fibonacci sphere distribution */
  const allDots=[];
  for(let i=0;i<N;i++){
    const t=i/N;
    const y0=1-t*2;
    const rad=Math.sqrt(1-y0*y0);
    const theta=PHI*i;
    const x0=Math.cos(theta)*rad;
    const z0=Math.sin(theta)*rad;
    /* rotate around X by TILT */
    const y1=y0*Math.cos(TILT)-z0*Math.sin(TILT);
    const z1=y0*Math.sin(TILT)+z0*Math.cos(TILT);
    allDots.push({sx:cx+r*x0, sy:cy-r*y1, depth:z1});
  }
  /* sort back-to-front so front dots paint over back dots */
  allDots.sort((a,b)=>a.depth-b.depth);
  const dots=allDots.filter(d=>d.depth>-0.22);

  /* fixed network nodes */
  const nodeRaw=[[0.42,0.26],[-0.55,0.14],[0.10,-0.50],[-0.20,0.56],[0.66,-0.16],[-0.36,-0.44]];
  const nodes=nodeRaw.map(([nx,ny])=>{
    const nz=Math.sqrt(Math.max(0,1-nx*nx-ny*ny));
    const ty=ny*Math.cos(TILT)-nz*Math.sin(TILT);
    const tz=ny*Math.sin(TILT)+nz*Math.cos(TILT);
    return {x:cx+r*nx, y:cy-r*ty, depth:tz, vis:tz>0.05};
  });
  const links=[[0,1],[1,2],[2,3],[3,4],[4,5],[0,3],[1,4],[2,5]];

  return (
    <svg className="neon-scene" viewBox="0 0 820 470" aria-label="Red global de energía">
      <NeonDefs/>
      {/* soft ambient glow */}
      <circle cx={cx} cy={cy} r={r+18} fill="rgba(139,92,246,.06)" filter="url(#blur)"/>
      {/* particle cloud — back dots first */}
      {dots.map((d,i)=>{
        const t=Math.max(0,Math.min(1,(d.depth+0.22)/1.22));
        const alpha=0.055+t*0.78;
        const sz=0.55+t*1.95;
        return <circle key={i} cx={d.sx} cy={d.sy} r={sz} fill="#c4b5fd" opacity={alpha}/>;
      })}
      {/* equator ellipse */}
      <ellipse cx={cx} cy={cy} rx={r} ry={r*0.22} fill="none" stroke="url(#ng)" strokeWidth="1" opacity=".13"/>
      {/* tilted meridian */}
      <ellipse cx={cx} cy={cy} rx={r*0.58} ry={r} fill="none" stroke="url(#ng)" strokeWidth="1" opacity=".09" transform={`rotate(26 ${cx} ${cy})`}/>
      {/* network connections */}
      {links.filter(([a,b])=>nodes[a].vis&&nodes[b].vis).map(([a,b],i)=>(
        <line key={i} x1={nodes[a].x} y1={nodes[a].y} x2={nodes[b].x} y2={nodes[b].y}
              stroke="url(#ng)" strokeWidth="1.1" opacity=".35"/>
      ))}
      {/* node markers */}
      {nodes.filter(n=>n.vis).map((n,i)=>(
        <g key={i}>
          <circle cx={n.x} cy={n.y} r="11" fill="rgba(167,139,250,.10)" stroke="url(#ng)" strokeWidth="1.5"/>
          <circle cx={n.x} cy={n.y} r="3.8" fill="#c4b5fd" opacity=".95"/>
        </g>
      ))}
      {/* energy arc */}
      <EnergyCurve d="M 18 192 C 162 305 308 142 465 216 S 648 292 800 156"/>
      {/* outer dashed orbit */}
      <ellipse className="neon-orbit" cx={cx} cy={cy} rx={r+36} ry={r*0.28}
               fill="none" stroke="url(#ng)" strokeWidth="1.1" opacity=".15" strokeDasharray="9 22"/>
    </svg>
  );
}

// ─── WHITE CAPABILITY BAND · light premium contrast ─────────────────────
function LegacyHomeWhiteCapabilityBand({ navigate }) {
  const items = [
    {
      id: 'reliability',
      number: '01',
      title: 'Continuidad eléctrica',
      metric: 'Operación crítica',
      text: 'Arquitecturas con protección, respaldo y margen de ampliación para alimentar activos que no pueden parar.',
      tags: ['Protección MT', 'BESS backup', 'Redundancia'],
      to: 'mt',
    },
    {
      id: 'integration',
      number: '02',
      title: 'Integración de sistemas',
      metric: 'MT + BESS + EV',
      text: 'Media tensión, almacenamiento y recarga coordinados como una infraestructura única desde ingeniería.',
      tags: ['SCADA ready', 'OCPP', 'EMS/BMS'],
      to: 'contact',
    },
    {
      id: 'sustainability',
      number: '03',
      title: 'Menor impacto',
      metric: 'SF6-free / LFP',
      text: 'Celdas sin SF6, quimica LFP y control energético para reducir perdidas, riesgo y dependencia operativa.',
      tags: ['SF6-free', 'LFP', 'Eficiencia'],
      to: 'storage',
    },
    {
      id: 'support',
      number: '04',
      title: 'Responsable único',
      metric: 'Proyecto completo',
      text: 'Ingeniería, suministro, integración y soporte técnico para que cada interfaz tenga propietario claro.',
      tags: ['Ingeniería', 'Puesta en marcha', 'Soporte'],
      to: 'contact',
    },
  ];
  return (
    <section className="pv-ops-section">
      <Reveal className="pv-ops-head">
        <PaintH2 text="Operación crítica, cubierta de extremo a extremo." />
        <p>Pyrovolt une red, almacenamiento, recarga y soporte técnico en una infraestructura energética coherente desde el primer plano hasta la explotación.</p>
      </Reveal>
      <Reveal stagger className="pv-ops-grid">
        {items.map((it, i) => (
          <button className={`pv-ops-card is-${it.id}`} key={it.title} onClick={() => navigate(it.to)}>
            <div className="pv-ops-top">
              <span>{it.number}</span>
              <b>{it.metric}</b>
            </div>
            <div className="pv-ops-mark" aria-hidden="true">
              <i />
              <i />
              <i />
            </div>
            <h3>{it.title}</h3>
            <p>{it.text}</p>
            <div className="pv-ops-tags">
              {it.tags.map(tag => <span key={tag}>{tag}</span>)}
            </div>
          </button>
        ))}
      </Reveal>
    </section>
  );
}

function OperativeMicroViz({ type, index }) {
  const phase = `${-(index * .72).toFixed(2)}s`;
  const c = {
    fill: 'none',
    stroke: 'currentColor',
    strokeWidth: '1.8',
    strokeLinecap: 'round',
    strokeLinejoin: 'round'
  };
  if (type === 'reliability') {
    return (
      <svg viewBox="0 0 220 150" className="op-viz" style={{ '--phase': phase }}>
        <path className="op-grid" d="M24 112H196M42 92H178M60 72H160" />
        <path className="op-flow op-flow-a" d="M18 78 C58 54 82 100 120 76 S168 42 202 66" />
        <path {...c} className="op-main" d="M110 24v94M76 118h68M84 54h52M72 78h76M88 118l22-94 22 94" />
        <circle className="op-node op-node-a" cx="110" cy="24" r="5" />
        <circle className="op-node op-node-b" cx="42" cy="78" r="3" />
        <circle className="op-node op-node-c" cx="180" cy="66" r="3" />
      </svg>
    );
  }
  if (type === 'integration') {
    return (
      <svg viewBox="0 0 220 150" className="op-viz" style={{ '--phase': phase }}>
        <path className="op-flow op-flow-a" d="M44 78 C76 38 142 38 176 78" />
        <path className="op-flow op-flow-b" d="M44 78 C80 122 138 122 176 78" />
        <circle className="op-hub" cx="110" cy="78" r="24" />
        <path {...c} className="op-main" d="M98 78h24M110 66v24" />
        {[[44,78,'MT'],[110,28,'EMS'],[176,78,'EV'],[110,124,'BESS']].map(([x,y,label], n) => (
          <g key={label} className={`op-satellite op-satellite-${n}`}>
            <circle cx={x} cy={y} r="13" />
            <text x={x} y={y + 3}>{label}</text>
          </g>
        ))}
      </svg>
    );
  }
  if (type === 'sustainability') {
    return (
      <svg viewBox="0 0 220 150" className="op-viz" style={{ '--phase': phase }}>
        <path className="op-flow op-flow-a" d="M32 96 C70 58 100 128 140 88 S172 40 196 62" />
        <rect className="op-battery" x="56" y="48" width="108" height="58" rx="12" />
        <path {...c} className="op-main" d="M78 66h18M78 82h18M111 62l-12 22h14l-7 22 27-33h-15l6-11" />
        <path className="op-leaf" d="M156 48 C186 48 198 68 184 92 C164 92 150 78 156 48Z" />
        <path className="op-leaf-line" d="M158 88 C166 72 176 62 188 54" />
        <circle className="op-node op-node-a" cx="56" cy="77" r="3" />
        <circle className="op-node op-node-b" cx="164" cy="77" r="3" />
      </svg>
    );
  }
  return (
    <svg viewBox="0 0 220 150" className="op-viz" style={{ '--phase': phase }}>
      <path className="op-flow op-flow-a" d="M30 112 C72 78 98 94 120 70 S166 30 194 52" />
      <path className="op-flow op-flow-b" d="M42 42 C78 70 120 22 176 82" />
      <circle className="op-hub op-hub-large" cx="112" cy="76" r="30" />
      <path {...c} className="op-main" d="M92 76h40M112 56c10 11 14 23 14 36M112 56c-10 11-14 23-14 36" />
      {[[42,112],[70,54],[150,42],[184,94],[112,124]].map(([x,y], n) => (
        <g key={n}>
          <line className="op-link" x1="112" y1="76" x2={x} y2={y} />
          <circle className={`op-node op-node-${n}`} cx={x} cy={y} r={n === 2 ? 4 : 3} />
        </g>
      ))}
    </svg>
  );
}

// ─── GUARANTEE ICONS ────────────────────────────────────────────────────
function FixedGuaranteeIcon({ type }) {
  const common = {
    fill: 'none',
    stroke: 'currentColor',
    strokeWidth: 2.4,
    strokeLinecap: 'round',
    strokeLinejoin: 'round',
  };

  if (type === 'reliability') {
    return (
      <svg className="fixed-guarantee-icon" viewBox="0 0 96 96" aria-hidden="true">
        <path {...common} d="M48 10 78 22v22c0 21-13 34-30 42-17-8-30-21-30-42V22L48 10Z" />
        <path {...common} d="M48 19 69 28v17c0 15-8 25-21 32-13-7-21-17-21-32V28l21-9Z" opacity=".55" />
        <path {...common} d="m35 49 9 9 19-23" />
      </svg>
    );
  }

  if (type === 'integration') {
    const nodes = [
      [48, 12], [72, 24], [84, 48], [72, 72], [48, 84], [24, 72], [12, 48], [24, 24],
    ];
    return (
      <svg className="fixed-guarantee-icon" viewBox="0 0 96 96" aria-hidden="true">
        <circle {...common} cx="48" cy="48" r="14" />
        <path {...common} d="M48 34v-8M48 62v8M34 48h-8M62 48h8M38 38l-7-7M58 38l7-7M58 58l7 7M38 58l-7 7" opacity=".62" />
        <path {...common} d="M48 40v16M40 48h16" />
        {nodes.map(([x, y]) => (
          <circle key={`${x}-${y}`} {...common} cx={x} cy={y} r="4.6" />
        ))}
      </svg>
    );
  }

  if (type === 'sustainability') {
    return (
      <svg className="fixed-guarantee-icon" viewBox="0 0 96 96" aria-hidden="true">
        <path {...common} d="M18 66c9-7 17-10 28-8l12 2c5 1 8 4 8 8H42" />
        <path {...common} d="M12 76h19c8 0 16-1 23-5l24-14c4-2 8-1 10 2-9 10-20 18-32 23-9 3-18 3-27 1l-17-4" />
        <circle {...common} cx="56" cy="35" r="18" />
        <path {...common} d="M42 35h28M56 17c6 7 9 13 9 18s-3 12-9 18M56 17c-6 7-9 13-9 18s3 12 9 18" opacity=".6" />
        <path {...common} d="M62 18c9-9 18-7 22-3-2 11-10 16-22 15 5-4 10-8 15-13" />
        <path {...common} d="M31 60c2-9 8-14 18-14" opacity=".55" />
      </svg>
    );
  }

  return (
    <svg className="fixed-guarantee-icon" viewBox="0 0 96 96" aria-hidden="true">
      <path {...common} d="M48 12a36 36 0 1 1 0 72 36 36 0 0 1 0-72Z" strokeDasharray="13 9" opacity=".66" />
      <path {...common} d="M25 54c7-8 15-11 23-11s16 3 23 11" opacity=".55" />
      <circle {...common} cx="48" cy="36" r="8" />
      <path {...common} d="M35 68c2-10 7-15 13-15s11 5 13 15" />
      <circle {...common} cx="24" cy="52" r="6" />
      <path {...common} d="M13 68c2-8 6-12 11-12 4 0 8 2 10 7" />
      <circle {...common} cx="72" cy="52" r="6" />
      <path {...common} d="M62 63c2-5 6-7 10-7 5 0 9 4 11 12" />
      <path {...common} d="M30 24 42 34M66 24 54 34M20 42l-6-8M76 42l6-8" opacity=".5" />
    </svg>
  );
}

function BuiltForEveryScale() {
  const stats = [
    { v: '30 kW – 1 MW', k: 'Recarga DC', d: 'Compactos, modulares, HPC stand-alone y carga distribuida hasta 1 MW por surtidor.' },
    { v: '261 kWh – 6,26 MWh', k: 'Almacenamiento BESS', d: 'ESS compactos, sistemas modulares y BESS en contenedor de 20 pies.' },
    { v: 'Hasta 24 kV', k: 'Media tensión', d: 'Celdas SF6-free, transformadores y centros prefabricados.' },
    { v: 'A medida', k: 'Proyecto integrado', d: 'Ingeniería, suministro y puesta en marcha para hubs, flotas, utilities e industria.' },
  ];
  return (
    <section className="section container" style={{ borderBottom: '1px solid var(--line)' }}>
      <Reveal stagger style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', marginBottom: 56, flexWrap: 'wrap', gap: 20 }}>
        <div>
          <div className="h-eyebrow" style={{ marginBottom: 16, color: 'var(--accent-soft)' }}>02 — Soluciones</div>
          <h2 className="h-title">Dimensionado para<br/>cada <It>emplazamiento</It>.</h2>
        </div>
        <p className="t-lead" style={{ maxWidth: 420 }}>
          De un punto DC en parking a un hub con BESS y media tensión: la misma lógica de proyecto, sin sobredimensionar.
        </p>
      </Reveal>
      <Reveal stagger style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, borderTop: '1px solid var(--line)' }}>
        {stats.map((s, i) => (
          <div key={i} style={{
            padding: '40px 28px',
            borderRight: i < 3 ? '1px solid var(--line)' : 'none',
            borderBottom: '1px solid var(--line)',
            display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            minHeight: 240,
          }}>
            <div>
              <div style={{
                fontFamily: 'var(--font-display)', fontSize: 'clamp(28px, 2.8vw, 40px)', fontWeight: 600,
                letterSpacing: '-0.025em', lineHeight: 1.05, marginBottom: 12,
                background: 'linear-gradient(135deg, var(--fg) 60%, var(--accent-soft))',
                WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text',
              }}>{s.v}</div>
              <div className="h-eyebrow" style={{ marginBottom: 14 }}>{s.k}</div>
            </div>
            <div style={{ fontSize: 13, color: 'var(--fg-dim)', lineHeight: 1.5 }}>{s.d}</div>
          </div>
        ))}
      </Reveal>
    </section>
  );
}

// ─── NUESTRAS SOLUCIONES (3 product cards) ──────────────────────────────
function SolutionsHub({ navigate }) {
  const cards = [
    {
      eyebrow: 'Recarga DC',
      title: 'Cargadores',
      desc: 'De 30 kW a 1 MW. Compactos, modulares, HPC y sistema distribuido. MCS/CCS2, OCPP 2.0.1, refrigeración líquida.',
      img: '/assets/products/blaze-ultra.png',
      stats: [['30 kW', 'Compact'], ['800 kW', 'HPC'], ['1 MW', 'Distribuido']],
      to: 'chargers',
    },
    {
      eyebrow: 'Almacenamiento BESS',
      title: 'Almacenamiento',
      desc: 'ESS compactos desde 261 kWh, sistemas modulares y contenedores de hasta 6,26 MWh. LiFePO4, grid-forming.',
      img: '/assets/products/bess-621.png',
      stats: [['261 kWh', 'ESS'], ['6,26 MWh', 'BESS'], ['LFP', 'Química']],
      to: 'storage',
    },
    {
      eyebrow: 'MT y distribución',
      title: 'MT y Distribución',
      desc: 'Celdas SF6-free, transformadores de aceite y secos, centros prefabricados. Hasta 24 kV.',
      img: '/assets/products/blaze-modular.png',
      stats: [['24 kV', 'Celdas'], ['1.250 kVA', 'Casetas'], ['SF6-free', 'Sostenible']],
      to: 'mt',
    },
  ];
  return (
    <section className="section container" style={{ borderBottom: '1px solid var(--line)' }}>
      <Reveal stagger style={{ marginBottom: 56 }}>
        <div className="h-eyebrow" style={{ marginBottom: 16, color: 'var(--accent-soft)' }}>03 — Nuestras soluciones</div>
        <h2 className="h-title">Tres familias.<br/>Una sola <It>plataforma</It>.</h2>
      </Reveal>
      <Reveal stagger style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
        {cards.map((c, i) => (
          <SolutionCard key={i} {...c} navigate={navigate}/>
        ))}
      </Reveal>
    </section>
  );
}

function SolutionCard({ eyebrow, title, desc, img, stats, to, navigate }) {
  return (
    <a href={'#' + to} className="tile pv-card-link" style={{ padding: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden', minHeight: 560 }} onClick={(event) => { event.preventDefault(); navigate(to); }}>
      <div style={{ position: 'relative', height: 280, background: 'linear-gradient(180deg, var(--bg-soft), var(--bg))', display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden', borderBottom: '1px solid var(--line)' }}>
        <div className="glow-violet" style={{ position: 'absolute', inset: '-10%', opacity: 0.6 }}/>
        <img src={img} alt={title} style={{ position: 'relative', maxWidth: '70%', maxHeight: '85%', objectFit: 'contain', filter: 'drop-shadow(0 30px 50px rgba(0,0,0,0.5))' }}/>
      </div>
      <div style={{ padding: 28, display: 'flex', flexDirection: 'column', flex: 1 }}>
        <div className="h-eyebrow" style={{ marginBottom: 12, color: 'var(--accent-soft)' }}>{eyebrow}</div>
        <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 500, letterSpacing: '-0.02em', marginBottom: 12 }}>{title}</h3>
        <p style={{ fontSize: 14, color: 'var(--fg-dim)', lineHeight: 1.55, marginBottom: 20, flex: 1 }}>{desc}</p>
        <div style={{ display: 'flex', gap: 18, marginBottom: 20, flexWrap: 'wrap' }}>
          {stats.map(([v, k], j) => (
            <div key={j}>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 600 }}>{v}</div>
              <div className="t-mono" style={{ color: 'var(--fg-mute)', fontSize: 10 }}>{k}</div>
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderTop: '1px solid var(--line)', paddingTop: 16 }}>
          <span style={{ fontSize: 13, color: 'var(--fg-dim)' }}>Ver gama</span>
          <span style={{ color: 'var(--accent)' }}>→</span>
        </div>
      </div>
    </a>
  );
}

// ─── ÚLTIMOS PROYECTOS ──────────────────────────────────────────────────
function PaintH2({ text, className }) {
  const ref = React.useRef(null);
  const rafRef = React.useRef(null);

  // Split on ". " or period at end to get 2 lines
  const rawLines = text.split(/(?<=\.) /);
  const lines = rawLines.length > 1 ? rawLines : [text];

  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const chars = Array.from(el.querySelectorAll('.pv-paint-char'));
    const update = () => {
      const rect = el.getBoundingClientRect();
      const vh = window.innerHeight;
      // Overall progress 0→1 as element scrolls from bottom to 25% from top
      const p = Math.max(0, Math.min(1, (vh - rect.top) / (vh * 0.78)));
      const active = Math.round(p * chars.length);
      chars.forEach((char, i) => {
        char.classList.toggle('is-painted', i < active);
        // Each line occupies a staggered window of the total scroll range
        // Line 0: 0→0.6, Line 1: 0.4→1.0, etc.
      });
    };
    const onScroll = () => {
      if (rafRef.current) cancelAnimationFrame(rafRef.current);
      rafRef.current = requestAnimationFrame(update);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    update();
    return () => {
      window.removeEventListener('scroll', onScroll);
      if (rafRef.current) cancelAnimationFrame(rafRef.current);
    };
  }, []);

  return (
    <h2 ref={ref} className={[className, 'pv-paint-h2'].filter(Boolean).join(' ')}>
      {lines.map((line, i) => (
        <span key={i} className="pv-paint-line">
          {Array.from(line).map((char, j) => (
            <span key={`${i}-${j}`} className="pv-paint-char">
              {char}
            </span>
          ))}
          {i < lines.length - 1 ? <span className="pv-paint-char">&nbsp;</span> : null}
        </span>
      ))}
    </h2>
  );
}
// Keep TypewriterH2 alias so old refs don't break
function TypewriterH2({ text, className }) {
  return <PaintH2 text={text} className={className} />;
}

function SolutionsHubPremium({ navigate }) {
  const cards = [
    {
      eyebrow: 'Recarga DC',
      title: 'Recarga DC',
      desc: 'Equipos DC para parking, flotas, corredores y hubs.',
      img: '/assets/renders/supplied/17.png',
      meta: ['30 - 1.280 kW', 'CCS2', 'OCPP'],
      benefits: ['Carga distribuida', 'Reparto dinámico', 'Operación OCPP'],
      to: 'chargers',
    },
    {
      eyebrow: 'Almacenamiento BESS',
      title: 'Almacenamiento BESS',
      desc: 'ESS y BESS para suavizar demanda, dar respaldo y coordinar renovables.',
      img: '/assets/renders/supplied/16.png',
      meta: ['261 kWh - 6,26 MWh', 'LFP'],
      benefits: ['Recorte de picos', 'Hibridación renovable', 'Respaldo crítico'],
      to: 'storage',
    },
    {
      eyebrow: 'MT y red',
      title: 'Media tensión',
      desc: 'Celdas, transformadores y centros MT para conectar y proteger potencia.',
      img: '/assets/renders/supplied/15.png',
      meta: ['24/36 kV', 'SF6-free'],
      benefits: ['SF6-free', 'Protecciones MT', 'Telecontrol'],
      to: 'mt',
    },
  ];
  return (
    <section className="pv-products-section">
      <Reveal className="pv-products-head">
        <TypewriterH2 text="Tres familias que se dimensionan juntas." />
        <p>Cargadores DC, BESS y media tensión con datos claros para pasar del primer esquema a suministro sin cambiar de interlocutor.</p>
      </Reveal>
      <Reveal stagger className="pv-family-grid">
        {cards.map(card => (
          <a className="pv-family-card pv-card-link" key={card.title} href={'#' + card.to} onClick={(event) => { event.preventDefault(); navigate(card.to); }}>
            <div className="pv-family-image">
              <img src={card.img} alt={card.title} />
            </div>
            <div className="pv-family-body">
              <h3>{card.title}</h3>
              <p>{card.desc}</p>
              <div className="pv-family-meta" aria-label="Datos clave">
                {card.meta.map(item => (
                  <span key={item}>{item}</span>
                ))}
              </div>
              <ul className="pv-family-benefits" aria-label="Ventajas clave">
                {card.benefits.map(item => (
                  <li key={item}>{item}</li>
                ))}
              </ul>
              <span className="pv-family-info-btn">
                <b className="pv-family-info-label">Ver gama</b>
                <i className="pv-family-info-arrow" aria-hidden="true"></i>
              </span>
            </div>
          </a>
        ))}
      </Reveal>
    </section>
  );
}

function LegacyApplicationsBand({ navigate }) {
  const cases = [
    {
      id: 'hub',
      number: '01',
      title: 'Hubs de recarga distribuida',
      text: 'Reparte la potencia entre varios cargadores DC, prioriza sesiones y escala el hub sin rehacer la acometida principal.',
      capacity: '1 MW',
      label: 'potencia agregada',
      route: 'chargers',
      nodes: ['MT', 'BESS', 'DC', 'OCPP'],
      stats: ['Reparto de potencia', '30 kW - 1 MW', 'OCPP / EMS'],
    },
    {
      id: 'bess',
      number: '02',
      title: 'Parques BESS e hibridación',
      text: 'Contenedores LFP para parques renovables, arbitraje energético y estabilización de red con control EMS integrado.',
      capacity: '6,26 MWh',
      label: 'por unidad',
      route: 'storage',
      nodes: ['FV', 'BESS', 'EMS', 'MT'],
      stats: ['LFP', 'EMS / SCADA', 'Hibridación'],
    },
    {
      id: 'grid',
      number: '03',
      title: 'Conexión MT y distribución',
      text: 'Celdas, transformación y protecciones para conectar generación, almacenamiento y carga con una arquitectura preparada para 24/36 kV.',
      capacity: '36 kV',
      label: 'arquitectura MT',
      route: 'mt',
      nodes: ['CELDAS', 'TRAFO', 'PROT', 'SCADA'],
      stats: ['SF6-free', '24/36 kV', 'Protecciones'],
    },
  ];

  return (
    <section className="pv-real-section">
      <Reveal className="pv-real-head">
        <PaintH2 text="Aplicaciones donde encaja cada familia." />
        <p>
          Recarga, BESS y MT cubren usos distintos, pero se vuelven más fuertes
          cuando se dimensionan como una misma infraestructura.
        </p>
      </Reveal>

      <Reveal stagger className="pv-real-grid">
        {cases.map((item, index) => (
          <article className={`pv-real-card is-${item.id}`} key={item.id}>
            <div className="pv-real-card-copy">
              <span className="pv-real-number">{item.number}</span>
              <h3>{item.title}</h3>
              <p>{item.text}</p>
              <button onClick={() => navigate(item.route)}>Ver solución</button>
            </div>

            <div className="pv-real-diagram" aria-hidden="true">
              <RealProjectDiagram item={item} />
            </div>

            <div className="pv-real-stats">
              <span>Arquitectura</span>
              <span>{item.nodes.join(' / ')}</span>
              <span>{item.capacity} · {item.label}</span>
            </div>
          </article>
        ))}
      </Reveal>
    </section>
  );
}

function LegacyCapApplicationsBand({ navigate }) {
  const metrics = [
    { value: '800', suffix: 'kW', label: 'carga DC por dispensador', tone: 'light' },
    { value: '6,26', suffix: 'MWh', label: 'almacenamiento por unidad', tone: 'dark' },
    { value: '36', suffix: 'kV', label: 'media tensión', tone: 'light' },
    { value: '98', suffix: '%', label: 'eficiencia objetivo', tone: 'light' },
    { value: '24/7', suffix: '', label: 'soporte técnico', tone: 'dark' },
    { value: '360', suffix: 'º', label: 'ingeniería + suministro', tone: 'light' },
  ];
  const guarantees = [
    {
      route: 'chargers',
      title: 'Carga distribuida',
      text: 'Potencia repartida entre varios puntos DC, con priorizacion de sesiones y control OCPP.',
    },
    {
      route: 'storage',
      title: 'Hibridación BESS',
      text: 'Contenedores LFP para parques renovables, recorte de picos y estabilización de red.',
    },
    {
      route: 'mt',
      title: 'Conexión MT',
      text: 'Celdas, protecciones y transformación preparadas para arquitecturas 24/36 kV.',
    },
    {
      route: 'home',
      title: 'Operación integrada',
      text: 'EMS, SCADA y soporte técnico bajo un único responsable de proyecto.',
    },
  ];

  return (
    <section className="pv-cap-section">
      <Reveal className="pv-cap-hero">
        <div>
        <PaintH2 text="Potencia, capacidad y conexión." />
        </div>
        <div className="pv-cap-copy">
          <p>
            Rangos claros de potencia, capacidad y conexión para comparar opciones
            antes de entrar en ingeniería de detalle.
          </p>
          <p>
            Desde hubs de carga distribuida hasta parques BESS e hibridaciones renovables:
            cada familia enseña dónde aporta valor y qué límites conviene revisar.
          </p>
        </div>
      </Reveal>

      <Reveal stagger className="pv-cap-metrics">
        {metrics.map((metric, index) => (
          <article className={`pv-cap-metric is-${metric.tone}`} key={`${metric.value}-${metric.label}`}>
            <span className="pv-cap-index">{String(index + 1).padStart(2, '0')}</span>
            <div className="pv-cap-value">
              <b>{metric.value}</b>
              {metric.suffix ? <small>{metric.suffix}</small> : null}
            </div>
            <p>{metric.label}</p>
          </article>
        ))}
      </Reveal>

      <Reveal stagger className="pv-cap-guarantees">
        {guarantees.map((item, index) => (
          <button className="pv-cap-guarantee" key={item.title} onClick={() => navigate(item.route)}>
            <span>{String(index + 1).padStart(2, '0')}</span>
            <b>{item.title}</b>
            <small>{item.text}</small>
          </button>
        ))}
      </Reveal>
    </section>
  );
}

function ApplicationsBand({ navigate }) {
  return (
    <section className="pv-cap4-section">
      <Reveal className="pv-cap4-head">
        <PaintH2 text="Números para dimensionar sin ruido." />
        <p>
          Potencia, almacenamiento y media tensión dimensionados para cada proyecto.
        </p>
      </Reveal>

      <Reveal stagger className="pv-cap4-grid">

        {/* 1 — Recarga DC */}
        <a className="pv-cap4-card pv-card-link is-dc" href="#chargers" onClick={(event) => { event.preventDefault(); navigate('chargers'); }}>
          <div className="pv-cap4-eyebrow">Recarga DC</div>
          <div className="pv-cap4-value">
            <b>1</b><small>MW</small>
          </div>
          <div className="pv-cap4-sub">por surtidor</div>
          <p className="pv-cap4-note">
            Reparto dinámico de potencia entre dispensadores DC. CCS2 y operación OCPP 2.0.1.
          </p>
          <div className="pv-cap4-tags">
            <span>CCS2</span><span>OCPP 2.0</span><span>Reparto dinámico</span>
          </div>
        </a>

        {/* 2 — BESS */}
        <a className="pv-cap4-card pv-card-link is-bess" href="#storage" onClick={(event) => { event.preventDefault(); navigate('storage'); }}>
          <div className="pv-cap4-eyebrow">Almacenamiento BESS</div>
          <div className="pv-cap4-value">
            <b>6,26</b><small>MWh</small>
          </div>
          <div className="pv-cap4-sub">por contenedor</div>
          <p className="pv-cap4-note">
            Química LFP para parques, hibridaciones renovables y estabilización de red.
          </p>
          <div className="pv-cap4-tags">
            <span>LFP</span><span>EMS/SCADA</span><span>Modular</span>
          </div>
        </a>

        {/* 3 — MT Celdas SF6-free */}
        <a className="pv-cap4-card pv-card-link is-mt" href="#mt" onClick={(event) => { event.preventDefault(); navigate('mt'); }}>
          <div className="pv-cap4-eyebrow">Media Tensión</div>
          <div className="pv-cap4-value is-text">
            <b>SF6</b><small>-free</small>
          </div>
          <div className="pv-cap4-sub">celdas 24 / 36 kV</div>
          <p className="pv-cap4-note">
            Celdas de media tensión sin gas SF6, con protecciones integradas y arquitectura modular de proyecto.
          </p>
          <div className="pv-cap4-tags">
            <span>24 kV</span><span>36 kV</span><span>SF6-free</span>
          </div>
        </a>

        {/* 4 — Responsable unico ∞ */}
        <article className="pv-cap4-card is-e2e">
          <div className="pv-cap4-eyebrow">Responsable único</div>
          <div className="pv-cap4-infinity" aria-hidden="true">
            <span className="pv-infinity-glyph">{"\u221E"}</span>
          </div>
          <div className="pv-cap4-sub">del diseño a la puesta en marcha</div>
          <p className="pv-cap4-note">
            Ingeniería, suministro, integración y soporte técnico bajo un único responsable de proyecto.
          </p>
          <div className="pv-cap4-tags">
            <span>Ingeniería</span><span>Suministro</span><span>Soporte</span>
          </div>
        </article>

      </Reveal>
    </section>
  );
}

function RealProjectDiagram({ item }) {
  if (item.id === 'hub') {
    const chargers = ['120', '180', '240', '360', '500', '800'];
    return (
      <div className="pv-real-topology topo-hub">
        <div className="pv-topology-grid" />
        <div className="pv-hub-cabinet">
          <span>Reparto de potencia</span>
          <b>{item.capacity}</b>
          <small>{item.label}</small>
        </div>
        <div className="pv-hub-branches">
          {chargers.map((kw, index) => (
            <span key={kw} style={{ '--i': index }}>
              <b>{kw}</b>
              <small>kW</small>
            </span>
          ))}
        </div>
        <div className="pv-hub-feed"><i /></div>
        <div className="pv-real-telemetry">
          {item.stats.map(stat => <span key={stat}>{stat}</span>)}
        </div>
      </div>
    );
  }

  if (item.id === 'bess') {
    return (
      <div className="pv-real-topology topo-bess">
        <div className="pv-topology-grid" />
        <div className="pv-renewable-field">
          <span>FV</span>
          <span>EÓLICA</span>
        </div>
        <div className="pv-bess-yard">
          {['BESS A', 'BESS B', 'BESS C'].map((label, index) => (
            <span key={label} style={{ '--i': index }}>
              <b>{label}</b>
              <small>LFP</small>
            </span>
          ))}
        </div>
        <div className="pv-bess-capacity">
          <span>{item.label}</span>
          <b>{item.capacity}</b>
        </div>
        <div className="pv-bess-export">
          <b>EMS</b>
          <i />
          <b>MT</b>
        </div>
        <div className="pv-real-telemetry">
          {item.stats.map(stat => <span key={stat}>{stat}</span>)}
        </div>
      </div>
    );
  }

  return (
    <div className="pv-real-topology topo-grid">
      <div className="pv-topology-grid" />
      <div className="pv-grid-core">
        <span>{item.label}</span>
        <b>{item.capacity}</b>
      </div>
      <div className="pv-grid-ring">
        {item.nodes.map((node, index) => (
          <span key={node} className={`ring-node node-${index + 1}`}>
            <b>{node}</b>
          </span>
        ))}
      </div>
      <div className="pv-grid-spokes">
        <i className="s1" />
        <i className="s2" />
        <i className="s3" />
        <i className="s4" />
      </div>
      <div className="pv-real-telemetry">
        {item.stats.map(stat => <span key={stat}>{stat}</span>)}
      </div>
    </div>
  );
}

function HomeWhiteCapabilityBand() {
  return null;
}

function LatestProjects({ navigate }) {
  // Each project has a distinctive gradient + abstract overlay (placeholder for real photos)
  const projects = [
    { tag: 'Logística', title: 'Truck-stop 1 MW · Corredor ibérico', kpi: '8× Ultra' },
    { tag: 'Renovables', title: 'BESS 6,26 MWh + FV 180 MW', kpi: '6,26 MWh' },
    { tag: 'Retail', title: 'Hub urbano de 320 kW', kpi: '320 kW' },
    { tag: 'Industria', title: 'Subestación MT prefabricada', kpi: '1.250 kVA' },
    { tag: 'Flotas', title: 'Depósito eléctrico 4 MW', kpi: '4 MW' },
    { tag: 'Red', title: 'Servicios auxiliares red', kpi: 'Grid-forming' },
  ];
  return (
    <section className="section container" style={{ borderBottom: '1px solid var(--line)' }}>
      <Reveal stagger style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', marginBottom: 48, flexWrap: 'wrap', gap: 20 }}>
        <div>
          <div className="h-eyebrow" style={{ marginBottom: 16, color: 'var(--accent-soft)' }}>04 — Últimos proyectos</div>
          <h2 className="h-title">Lo que hemos<br/><It>desplegado</It>.</h2>
        </div>
        <a className="btn btn-ghost" href="#news" onClick={e => { e.preventDefault(); navigate('news'); }}>Ver recursos</a>
      </Reveal>
      <Reveal stagger style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
        {projects.map((p, i) => <ProjectTile key={i} {...p} index={i}/>)}
      </Reveal>
    </section>
  );
}

function ProjectTile({ tag, title, kpi, index }) {
  // Each tile gets a different angled gradient based on index
  const gradients = [
    'linear-gradient(135deg, #2A1B4F 0%, #6D28D9 50%, #1A1A20 100%)',
    'linear-gradient(135deg, #1A1A20 0%, #4C1D95 50%, #8B5CF6 100%)',
    'linear-gradient(135deg, #6D28D9 0%, #1A1A20 60%, #A78BFA 100%)',
    'linear-gradient(135deg, #1A1A20 0%, #6D28D9 70%, #2A1B4F 100%)',
    'linear-gradient(135deg, #4C1D95 0%, #1A1A20 50%, #8B5CF6 100%)',
    'linear-gradient(135deg, #8B5CF6 0%, #1A1A20 60%, #4C1D95 100%)',
  ];
  return (
    <article className="tile" style={{ padding: 0, minHeight: 240, position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, background: gradients[index % gradients.length] }}/>
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.12), transparent 50%)' }}/>
      <svg viewBox="0 0 400 240" preserveAspectRatio="none" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.25 }}>
        {Array.from({ length: 12 }).map((_, j) => (
          <line key={j} x1={j*40} y1="0" x2={j*40 - 100} y2="240" stroke="#FFFFFF" strokeWidth="0.5"/>
        ))}
      </svg>
      <div style={{ position: 'relative', height: '100%', padding: 24, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', color: '#FFFFFF' }}>
        <div className="h-eyebrow" style={{ color: 'rgba(255,255,255,0.7)' }}>{tag}</div>
        <div>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 36, fontWeight: 600, letterSpacing: '-0.025em', marginBottom: 6 }}>{kpi}</div>
          <div style={{ fontSize: 14, color: 'rgba(255,255,255,0.85)', lineHeight: 1.4 }}>{title}</div>
        </div>
      </div>
    </article>
  );
}

// ─── SIGNATURE: Energy Made Simple. + coil ──────────────────────────────
function SignatureSection() {
  return (
    <section style={{ padding: '120px var(--pad-x)', textAlign: 'center', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse 50% 60% at 50% 50%, var(--accent-glow), transparent 70%)', pointerEvents: 'none', opacity: 0.6 }}/>
      <div style={{ position: 'relative' }}>
        <Reveal>
          <MadeSimpleSignature/>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Home, HeroEmsOriginal, HeroSolutionSuite, BuiltForEveryScale, SolutionsHub, SolutionsHubPremium, ApplicationsBand, LatestProjects, SignatureSection });