/* global React, EPMark, Logo, Icon, Button, Badge, ProtonGlyph */
const { useState: useStateHH, useEffect: useEffectHH } = React;

/* ---------- Header ---------- */
function Header({ showEnrollmentBar = true }) {
  const [openMenu, setOpenMenu] = useStateHH(null);
  const [scrolled, setScrolled] = useStateHH(false);

  useEffectHH(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const nav = [
    { label: 'Programas', anchor: '#programas',
      items: [
        { label: 'Introducción al H₂ renovable', anchor:'#p1', level:'i' },
        { label: 'Pre-diseño de instalaciones', anchor:'#p2', level:'a' },
        { label: 'Financiación de proyectos', anchor:'#p3', level:'a' },
        { label: 'Seguridad industrial para plantas de H₂', anchor:'#p4', level:'a' },
        { label: 'Diseño de electrolizadores', anchor:'#p5', level:'e' },
        { label: 'Operación y mantenimiento', anchor:'#p6', level:'e' },
      ]
    },
    { label: 'Niveles', anchor: '#niveles' },
    { label: 'Metodología', anchor: '#metodologia' },
    { label: 'Calendario', anchor: '#calendario' },
  ];

  return (
    <>
      {showEnrollmentBar && (
        <div style={{
          background:'var(--lh-navy)', color:'#fff',
          fontSize:13, padding:'8px 0',
          borderBottom:'1px solid rgba(255,255,255,.08)',
        }}>
          <div className="container" style={{display:'flex',alignItems:'center',justifyContent:'space-between',gap:24,flexWrap:'wrap'}}>
            <div style={{display:'flex',alignItems:'center',gap:10}}>
              <span style={{
                width:6,height:6,borderRadius:3,background:'var(--lh-cyan)',
                boxShadow:'0 0 0 4px rgba(0,181,226,.18)'
              }}/>
              <span style={{color:'rgba(255,255,255,.85)'}}>
                <strong style={{color:'#fff'}}>Preinscripción abierta</strong> — lanzamiento en <strong style={{color:'#fff'}}>octubre 2026</strong> con una única edición en vivo. Resto, a tu ritmo.
              </span>
            </div>
            <a href="#inscripcion" style={{
              color:'var(--lh-cyan)', fontWeight:600, display:'inline-flex',alignItems:'center',gap:6,
              textDecoration:'none', fontSize:13,
            }}>Reservar plaza <Icon name="arrow" size={13}/></a>
          </div>
        </div>
      )}
      <header style={{
        position:'sticky', top:0, zIndex:30,
        background: scrolled ? 'rgba(255,255,255,0.92)' : '#fff',
        backdropFilter: scrolled ? 'blur(8px)' : 'none',
        borderBottom: scrolled ? '1px solid #EEF2F7' : '1px solid transparent',
        transition: 'all 200ms cubic-bezier(.2,.8,.2,1)',
      }}>
        <div className="container" style={{
          padding:'16px 32px',
          display:'flex', alignItems:'center', gap:32,
        }}>
          <a href="#top" style={{display:'flex',alignItems:'center',textDecoration:'none'}}>
            <EPMark height={26}/>
          </a>
          <nav style={{display:'flex',gap:2,marginLeft:16}}>
            {nav.map((it,i)=>(
              <div key={it.label} style={{position:'relative'}}
                   onMouseEnter={()=>setOpenMenu(i)} onMouseLeave={()=>setOpenMenu(null)}>
                <a href={it.anchor} style={{
                  background:'none',border:0,padding:'8px 12px',cursor:'pointer',
                  fontFamily:'inherit',fontSize:14,fontWeight:500,color:'var(--fg)',
                  display:'inline-flex',alignItems:'center',gap:4, textDecoration:'none',
                }}>
                  {it.label}{it.items && <Icon name="chevron" size={14}/>}
                </a>
                {it.items && openMenu===i && (
                  <div style={{
                    position:'absolute', top:'100%', left:0, paddingTop:6,
                  }}>
                    <div style={{
                      background:'#fff', border:'1px solid #EEF2F7', borderRadius:12,
                      boxShadow:'0 12px 32px rgba(0,26,112,.08)', padding:6, minWidth:300,
                    }}>
                      {it.items.map(s=>(
                        <a key={s.label} href={s.anchor} style={{
                          display:'flex', alignItems:'center', gap:10,
                          padding:'10px 12px', borderRadius:6,
                          fontSize:14, color:'var(--fg)', textDecoration:'none',
                        }}
                        onMouseEnter={e=>e.currentTarget.style.background='#F6F8FB'}
                        onMouseLeave={e=>e.currentTarget.style.background='transparent'}>
                          <span style={{
                            fontFamily:'var(--font-mono)', fontStyle:'italic',
                            fontSize:12, color:'var(--fg-muted)', width:14, textAlign:'center',
                          }}>{s.level}</span>
                          {s.label}
                        </a>
                      ))}
                    </div>
                  </div>
                )}
              </div>
            ))}
          </nav>
          <div style={{flex:1}}/>
          <a href="https://leanhydrogen.com" target="_blank" rel="noopener" style={{
            display:'inline-flex',alignItems:'center',gap:10,
            padding:'6px 12px', borderRadius:8, border:'1px solid #EEF2F7',
            fontSize:12, color:'var(--fg-muted)', textDecoration:'none',
            fontFamily:'var(--font-mono)',
          }}>
            <span style={{fontSize:10,letterSpacing:'.12em',textTransform:'uppercase'}}>by</span>
            <Logo height={18}/>
          </a>
          <Button variant="primary" size="sm" iconAfter="arrow" href="#inscripcion">Reservar plaza</Button>
        </div>
      </header>
    </>
  );
}

/* ---------- Hero ---------- */
function Hero({ motif = 'atom', accentRole = 'cyan' }) {
  const accent = accentRole === 'yellow' ? 'var(--lh-yellow)'
               : accentRole === 'blue' ? 'var(--lh-blue)'
               : 'var(--lh-cyan)';

  return (
    <section id="top" style={{
      position:'relative', background:'var(--lh-navy)', color:'#fff', overflow:'hidden',
    }}>
      {/* Blueprint grid */}
      <div style={{
        position:'absolute', inset:0,
        backgroundImage:'linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px)',
        backgroundSize:'48px 48px',
        maskImage:'radial-gradient(ellipse at 70% 50%, #000 30%, transparent 80%)',
      }}/>

      {/* Right-side motif */}
      <div style={{
        position:'absolute', right:-80, top:0, bottom:0, width:680,
        display:'flex',alignItems:'center',justifyContent:'center',
        pointerEvents:'none',
      }}>
        {motif === 'atom' && <AtomMotif accent={accent}/>}
        {motif === 'spec' && <SpecMotif accent={accent}/>}
        {motif === 'plant' && <PlantMotif accent={accent}/>}
      </div>

      <div className="container" style={{padding:'72px 32px 88px',position:'relative'}}>
        {/* Coordinate-frame eyebrow */}
        <div style={{
          display:'inline-flex',alignItems:'center',gap:10,padding:'6px 12px 6px 8px',
          borderRadius:999,background:'rgba(255,255,255,.05)',color:'#fff',
          border:'1px solid rgba(255,255,255,.12)',
          fontFamily:'var(--font-mono)',
          fontSize:11,fontWeight:600,letterSpacing:'.12em',textTransform:'uppercase',
          marginBottom:28,
        }}>
          <span style={{
            display:'inline-flex',alignItems:'center',justifyContent:'center',
            width:18,height:18,borderRadius:999,background:accent,color:'var(--lh-navy)',
            fontSize:10, fontStyle:'italic', fontWeight:700,
          }}>p+</span>
          La academia virtual de Lean Hydrogen
        </div>

        <h1 style={{
          fontSize:'clamp(48px, 6.4vw, 88px)', lineHeight:0.98, letterSpacing:'-0.03em', fontWeight:700,
          margin:'0 0 24px', textWrap:'balance', color:'#fff', maxWidth: 880,
        }}>
          Formación técnica<br/>en hidrógeno renovable,<br/>
          <span style={{color: accent, fontStyle:'italic', fontWeight:400}}>desde la planta real.</span>
        </h1>

        <p style={{
          fontSize:20, lineHeight:1.5, color:'rgba(255,255,255,.78)',
          margin:'0 0 40px', maxWidth: 560,
        }}>
          Seis programas intensivos diseñados por ingenieros que han comisionado, operado y financiado plantas de H₂. Sin teoría suelta — todo verificado en campo.
        </p>

        <div style={{display:'flex',gap:12,flexWrap:'wrap'}}>
          <Button variant="onDark" size="lg" iconAfter="arrow" href="#programas">Ver programas</Button>
          <Button variant="onDarkGhost" size="lg" icon="download" href="#detalle">Descargar dossier</Button>
        </div>

        {/* Bottom stats strip */}
        <div style={{
          display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:32,
          marginTop:72, paddingTop:32,
          borderTop:'1px solid rgba(255,255,255,.12)',
          maxWidth: 880,
        }}>
          {[
            ['06', 'programas', 'En toda la cadena de valor'],
            ['03', 'niveles', 'Introductorio · avanzado · experto'],
            ['12 h', 'por edición', '3 días × 4 h · 16:00 — 20:00 h'],
            ['30', 'alumnos máx.', 'Aforo controlado por edición'],
          ].map(([n,l,s])=>(
            <div key={l}>
              <div style={{display:'flex',alignItems:'baseline',gap:8}}>
                <div className="tnum" style={{
                  fontFamily:'var(--font-display)', fontSize:36, fontWeight:700,
                  letterSpacing:'-0.02em',lineHeight:1, color:'#fff',
                }}>{n}</div>
                <div style={{
                  fontSize:13, color:'rgba(255,255,255,.55)',
                  fontFamily:'var(--font-mono)', letterSpacing:'.04em',
                }}>{l}</div>
              </div>
              <div style={{
                fontSize:13, color:'rgba(255,255,255,.55)', marginTop:8,
                lineHeight:1.4,
              }}>{s}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Hero visual motifs ---------- */
function AtomMotif({ accent }) {
  // Big proton + 3 electron orbits + the level codes orbiting
  return (
    <svg width="640" height="640" viewBox="0 0 640 640" fill="none" style={{opacity:.95}}>
      {/* Outer ghost ring */}
      <circle cx="320" cy="320" r="290" stroke="rgba(255,255,255,.06)" strokeWidth="1"/>
      <circle cx="320" cy="320" r="230" stroke="rgba(255,255,255,.06)" strokeWidth="1"/>
      {/* 3 orbits */}
      <g style={{transformOrigin:'320px 320px'}}>
        <ellipse cx="320" cy="320" rx="270" ry="100" stroke="rgba(255,255,255,.14)" strokeWidth="1.2" transform="rotate(0 320 320)"/>
        <ellipse cx="320" cy="320" rx="270" ry="100" stroke={accent} strokeOpacity=".7" strokeWidth="1.2" transform="rotate(60 320 320)"/>
        <ellipse cx="320" cy="320" rx="270" ry="100" stroke="rgba(255,255,255,.14)" strokeWidth="1.2" transform="rotate(120 320 320)"/>
      </g>
      {/* Electrons on each orbit */}
      <circle cx="590" cy="320" r="6" fill="rgba(255,255,255,.85)"/>
      <circle cx="455" cy="554" r="8" fill={accent}/>
      <circle cx="185" cy="554" r="5" fill="rgba(255,255,255,.55)"/>

      {/* Proton at center */}
      <circle cx="320" cy="320" r="58" fill={accent} fillOpacity=".12"/>
      <circle cx="320" cy="320" r="44" fill="#fff"/>
      <text x="320" y="332" textAnchor="middle" fill="var(--lh-navy)" fontSize="34" fontWeight="700" fontFamily="var(--font-display)" letterSpacing="-0.02em">p<tspan fontSize="22" baselineShift="super" dy="-4">+</tspan></text>

      {/* Coordinate labels — level codes on the orbits */}
      <g fontFamily="var(--font-mono)" fontSize="12" fill="rgba(255,255,255,.75)" letterSpacing=".06em">
        <g transform="translate(110 280)">
          <rect x="-4" y="-12" width="48" height="20" rx="10" fill="rgba(0,181,226,.18)" stroke="rgba(0,181,226,.4)"/>
          <text y="2" fill={accent} fontStyle="italic">(i)</text>
          <text x="14" y="2">intro</text>
        </g>
        <g transform="translate(510 380)">
          <rect x="-4" y="-12" width="74" height="20" rx="10" fill="rgba(48,127,226,.2)" stroke="rgba(48,127,226,.45)"/>
          <text y="2" fill="#9CC0F5" fontStyle="italic">(a)</text>
          <text x="14" y="2">avanzado</text>
        </g>
        <g transform="translate(320 96)">
          <rect x="-4" y="-12" width="64" height="20" rx="10" fill="rgba(224,231,34,.18)" stroke="rgba(224,231,34,.55)"/>
          <text y="2" fill="#E0E722" fontStyle="italic">(e)</text>
          <text x="14" y="2">experto</text>
        </g>
      </g>
    </svg>
  );
}

function SpecMotif({ accent }) {
  // Engineering-spec card: a panel that looks like a datasheet
  return (
    <div style={{
      width:480, height:560, transform:'rotate(-3deg)',
      background:'rgba(255,255,255,.04)', border:'1px solid rgba(255,255,255,.12)',
      borderRadius:16, padding:28, color:'#fff',
      fontFamily:'var(--font-mono)', fontSize:13,
    }}>
      <div style={{fontSize:11, letterSpacing:'.16em', color: accent, marginBottom:18}}>EP-CURRICULUM.v01</div>
      <div style={{fontSize:24, color:'#fff', marginBottom:24, fontFamily:'var(--font-display)'}}>Curriculum index</div>
      {[
        ['01','intro al H₂ renovable','(i)', '699 €'],
        ['02','pre-diseño de plantas','(a)', '699 €'],
        ['03','financiación · LCOH','(a)', '699 €'],
        ['04','seguridad · QRA · HYRAM','(a)', '699 €'],
        ['05','diseño de electrolizadores','(e)', '699 €'],
        ['06','operación y mantenimiento','(e)', '699 €'],
      ].map(([n,t,l,p])=>(
        <div key={n} style={{
          display:'grid',gridTemplateColumns:'24px 1fr 36px 70px',gap:12,
          padding:'10px 0', borderBottom:'1px solid rgba(255,255,255,.08)',
          color:'rgba(255,255,255,.75)', alignItems:'baseline',
        }}>
          <span style={{color:'rgba(255,255,255,.4)'}}>{n}</span>
          <span style={{color:'#fff'}}>{t}</span>
          <span style={{color: accent, fontStyle:'italic'}}>{l}</span>
          <span style={{textAlign:'right'}}>{p}</span>
        </div>
      ))}
    </div>
  );
}

function PlantMotif({ accent }) {
  // Photo placeholder with overlay (per design system guidance)
  return (
    <div style={{
      width:560, height:560, borderRadius:16, overflow:'hidden',
      background:'linear-gradient(135deg, #0F1722 0%, #1A3180 100%)',
      border:'1px solid rgba(255,255,255,.08)',
      position:'relative',
      display:'flex',alignItems:'center',justifyContent:'center',
    }}>
      {/* Faint grid */}
      <div style={{
        position:'absolute', inset:0,
        backgroundImage:'linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px)',
        backgroundSize:'32px 32px',
      }}/>
      <div style={{
        textAlign:'center', color:'rgba(255,255,255,.45)', fontSize:13,
        fontFamily:'var(--font-mono)', letterSpacing:'.12em',
      }}>
        <ProtonGlyph size={120} color="rgba(255,255,255,.18)" accent={accent}/>
        <div style={{marginTop:24}}>IMG · planta H₂ — placeholder</div>
        <div style={{marginTop:6, opacity:.6}}>4:5 · 1280 × 1600</div>
      </div>
      {/* Overlay scrim */}
      <div style={{position:'absolute', inset:0, background:'linear-gradient(180deg, rgba(0,26,112,.0) 40%, rgba(0,26,112,.6) 100%)'}}/>
    </div>
  );
}

Object.assign(window, { Header, Hero });