/* global React, PROGRAMS, eur, TRAINER, Icon, Button, Badge, LevelChip, Eyebrow */
const { useState: useStatePD } = React;

/* ========================================
   Featured program detail — tabbed
   ======================================== */
function ProgramDetail() {
  const [active, setActive] = useStatePD('p1');
  const p = PROGRAMS.find(x => x.id === active);
  const levelColor =
    p.level === 'i' ? 'var(--lh-cyan)' :
    p.level === 'a' ? 'var(--lh-blue)' : '#9A9F00';

  return (
    <section id="detalle" style={{padding:'120px 0', background:'var(--bg-subtle)'}}>
      <div className="container">
        <div style={{maxWidth:760, marginBottom:48}}>
          <Eyebrow>// Explora el contenido</Eyebrow>
          <h2 style={{margin:'0 0 16px', fontSize:44, lineHeight:1.05, letterSpacing:'-0.02em'}}>
            Mira por dentro cada programa.
          </h2>
          <p className="lead" style={{margin:0}}>
            Selecciona un programa para ver los módulos, el perfil objetivo y las condiciones de la edición.
          </p>
        </div>

        <div style={{display:'grid', gridTemplateColumns:'260px 1fr', gap:24, alignItems:'start'}}>
          {/* Sidebar — program list */}
          <div style={{
            background:'#fff', border:'1px solid var(--border)', borderRadius:12,
            padding:6, position:'sticky', top:88,
          }}>
            {PROGRAMS.map(item => {
              const isActive = item.id === active;
              const lc = item.level === 'i' ? 'var(--lh-cyan)'
                      : item.level === 'a' ? 'var(--lh-blue)' : '#9A9F00';
              return (
                <button key={item.id} onClick={()=>setActive(item.id)} style={{
                  display:'flex', alignItems:'center', gap:12,
                  width:'100%', textAlign:'left', cursor:'pointer',
                  background: isActive ? 'var(--bg-subtle)' : 'transparent',
                  border:0, padding:'12px 12px', borderRadius:8, marginBottom:2,
                  fontFamily:'inherit',
                  position:'relative',
                }}>
                  {isActive && <div style={{
                    position:'absolute', left:0, top:8, bottom:8, width:3, background:lc, borderRadius:3,
                  }}/>}
                  <span style={{
                    fontFamily:'var(--font-mono)', fontSize:11, color:'var(--fg-subtle)', letterSpacing:'.06em',
                    width:34,
                  }}>{item.code}</span>
                  <div style={{flex:1, minWidth:0}}>
                    <div style={{
                      fontSize:14, fontWeight:600, color: isActive ? 'var(--fg)' : 'var(--fg-muted)',
                      whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis',
                    }}>{item.title}</div>
                  </div>
                  <LevelChip level={item.level} size={20}/>
                </button>
              );
            })}
          </div>

          {/* Detail panel */}
          <div style={{
            background:'#fff', border:'1px solid var(--border)', borderRadius:16,
            padding:0, overflow:'hidden',
          }}>
            <div style={{
              background:'var(--lh-navy)', color:'#fff',
              padding:'32px 36px', position:'relative', overflow:'hidden',
            }}>
              {/* Faint blueprint */}
              <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={{position:'relative', display:'flex', alignItems:'flex-start', justifyContent:'space-between', gap:24}}>
                <div>
                  <div style={{
                    display:'inline-flex',alignItems:'center',gap:10,
                    fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'.14em',
                    color:'rgba(255,255,255,.55)', textTransform:'uppercase', marginBottom:16,
                  }}>
                    <span>{p.code}</span>
                    <span style={{width:4, height:4, borderRadius:2, background:'rgba(255,255,255,.4)'}}/>
                    <span style={{color: levelColor, fontStyle:'italic'}}>nivel ({p.level})</span>
                  </div>
                  <h3 style={{margin:'0 0 6px', fontSize:32, lineHeight:1.1, color:'#fff', letterSpacing:'-0.02em'}}>
                    {p.title}
                  </h3>
                  <div style={{
                    fontSize:16, color:'rgba(255,255,255,.7)', fontStyle:'italic',
                  }}>{p.subtitle}</div>
                </div>
                <div style={{
                  width:64, height:64, borderRadius:14,
                  background:'rgba(255,255,255,.08)', border:'1px solid rgba(255,255,255,.16)',
                  display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0,
                  color: levelColor,
                }}>
                  <Icon name={p.icon} size={28} stroke={1.5}/>
                </div>
              </div>
              <p style={{
                position:'relative', margin:'24px 0 0', maxWidth:640,
                fontSize:16, color:'rgba(255,255,255,.82)', lineHeight:1.55,
              }}>{p.summary}</p>
            </div>

            <div style={{padding:'32px 36px', display:'grid', gridTemplateColumns:'1.2fr 1fr', gap:40}}>
              <div>
                <div style={{
                  fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'.14em',
                  textTransform:'uppercase', color:'var(--fg-subtle)', marginBottom:14,
                }}>Módulos</div>
                <ol style={{margin:0, padding:0, listStyle:'none'}}>
                  {p.modules.map((m, i)=>(
                    <li key={i} style={{
                      display:'flex', gap:14, padding:'12px 0',
                      borderTop: i===0 ? '1px solid var(--border)' : 0,
                      borderBottom:'1px solid var(--border)',
                    }}>
                      <span className="tnum" style={{
                        fontFamily:'var(--font-mono)', fontSize:12, color:'var(--fg-subtle)',
                        width:24, paddingTop:2, letterSpacing:'.04em',
                      }}>0{i+1}</span>
                      <span style={{fontSize:15, color:'var(--fg)', lineHeight:1.5}}>{m}</span>
                    </li>
                  ))}
                </ol>

                <div style={{
                  marginTop:24, padding:18, background:'var(--bg-subtle)',
                  borderRadius:12, border:'1px solid var(--border)',
                }}>
                  <div style={{
                    fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'.14em',
                    textTransform:'uppercase', color:'var(--fg-subtle)', marginBottom:8,
                    display:'flex', alignItems:'center', gap:6,
                  }}>
                    <Icon name="user" size={12}/> Perfil objetivo
                  </div>
                  <div style={{fontSize:14, color:'var(--fg)', lineHeight:1.55}}>{p.audience}</div>
                </div>
              </div>

              <div>
                <div style={{
                  background:'var(--bg-subtle)', borderRadius:12,
                  border:'1px solid var(--border)', padding:24,
                }}>
                  <div style={{
                    fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'.14em',
                    textTransform:'uppercase', color:'var(--fg-subtle)', marginBottom:8,
                  }}>Inversión</div>
                  <div className="tnum" style={{
                    fontFamily:'var(--font-display)', fontSize:40, fontWeight:700,
                    letterSpacing:'-0.02em', color:'var(--fg)', lineHeight:1,
                  }}>{eur(p.price)}</div>
                  <div style={{fontSize:12, color:'var(--fg-muted)', marginTop:6}}>por persona · IVA no incluido</div>

                  <div style={{
                    marginTop:14, display:'flex', alignItems:'center', gap:8,
                    padding:'8px 10px', borderRadius:8,
                    background:'rgba(0,181,226,.10)', border:'1px solid rgba(0,181,226,.28)',
                    fontSize:12, color:'var(--lh-navy)', lineHeight:1.35,
                  }}>
                    <Icon name="check" size={14} stroke={2.2}/>
                    <span><b>Bonificable FUNDAE</b> para empresas — gestionamos el trámite.</span>
                  </div>

                  <div style={{
                    marginTop:20, paddingTop:20, borderTop:'1px solid var(--border)',
                    display:'grid', gridTemplateColumns:'1fr', gap:12,
                  }}>
                    <DetailRow icon="calendar" label="Formato" value={p.duration} sub="3 días consecutivos · 16:00 — 20:00 h"/>
                    <DetailRow icon="users" label="Aforo" value={`Máx. ${p.capacity} alumnos`} sub="Sólo edición en vivo"/>
                    <DetailRow icon="globe" label="Modalidad" value="100 % online" sub="Edición de lanzamiento en directo · resto a tu ritmo"/>
                  </div>
                </div>

                <div style={{display:'flex', gap:10, marginTop:16}}>
                  <Button variant="primary" size="lg" iconAfter="arrow" full href="#inscripcion">
                    Reservar plaza
                  </Button>
                </div>
                <Button variant="tertiary" iconAfter="download" href={p.pdf} download={p.pdfName} target="_blank" style={{marginTop:8}}>
                  Descargar temario PDF
                </Button>

                {/* Trainer */}
                <TrainerCard/>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function DetailRow({ icon, label, value, sub }) {
  return (
    <div style={{display:'flex', alignItems:'flex-start', gap:12}}>
      <div style={{
        width:32, height:32, borderRadius:8, background:'#fff',
        border:'1px solid var(--border)',
        display:'flex',alignItems:'center',justifyContent:'center', color:'var(--lh-navy)',
        flexShrink:0,
      }}>
        <Icon name={icon} size={15}/>
      </div>
      <div style={{minWidth:0}}>
        <div style={{
          fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'.14em',
          textTransform:'uppercase', color:'var(--fg-subtle)', marginBottom:2,
        }}>{label}</div>
        <div style={{fontSize:14, fontWeight:600, color:'var(--fg)'}}>{value}</div>
        {sub && <div style={{fontSize:12, color:'var(--fg-muted)', marginTop:2}}>{sub}</div>}
      </div>
    </div>
  );
}

Object.assign(window, { ProgramDetail });

/* ========================================
   Trainer card — appears under the Inversión block.
   Eugenio Trillo León — CTO Lean Hydrogen.
   ======================================== */
function TrainerCard() {
  return (
    <div style={{
      marginTop:24, padding:20, borderRadius:12,
      background:'#fff', border:'1px solid var(--border)',
      display:'flex', flexDirection:'column', gap:14,
    }}>
      <div style={{
        fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'.14em',
        textTransform:'uppercase', color:'var(--fg-subtle)',
        display:'flex', alignItems:'center', gap:6,
      }}>
        <Icon name="user" size={12}/> Imparte
      </div>

      <div style={{display:'flex', alignItems:'flex-start', gap:14}}>
        {/* Trainer portrait. Falls back to initials avatar if photo missing. */}
        {TRAINER.photo ? (
          <img src={TRAINER.photo} alt={TRAINER.name}
            style={{
              width:56, height:56, borderRadius:'50%',
              objectFit:'cover', objectPosition:'center 30%',
              flexShrink:0, display:'block',
              boxShadow:'inset 0 0 0 1px rgba(0,26,112,.1)',
            }}/>
        ) : (
          <div aria-hidden style={{
            width:56, height:56, borderRadius:'50%',
            background:'linear-gradient(135deg, var(--lh-navy), var(--lh-blue))',
            color:'#fff', flexShrink:0,
            display:'flex', alignItems:'center', justifyContent:'center',
            fontFamily:'var(--font-display)', fontSize:18, fontWeight:700,
            letterSpacing:'.02em',
            boxShadow:'inset 0 0 0 4px rgba(255,255,255,.08)',
          }}>{TRAINER.initials}</div>
        )}

        <div style={{minWidth:0, flex:1}}>
          <div style={{fontSize:15, fontWeight:700, color:'var(--fg)', letterSpacing:'-0.005em'}}>
            {TRAINER.name}
          </div>
          <div style={{fontSize:12, color:'var(--fg-muted)', marginTop:2}}>
            {TRAINER.role}
          </div>
          <a href={TRAINER.linkedin} target="_blank" rel="noopener" style={{
            display:'inline-flex', alignItems:'center', gap:6, marginTop:8,
            fontSize:12, color:'var(--lh-blue)', textDecoration:'none',
            fontWeight:600,
          }}>
            <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
              <path d="M20.45 20.45h-3.55v-5.57c0-1.33-.03-3.04-1.85-3.04-1.86 0-2.14 1.45-2.14 2.95v5.66H9.36V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.38-1.85 3.61 0 4.28 2.38 4.28 5.47v6.27zM5.34 7.43A2.06 2.06 0 1 1 5.34 3.3a2.06 2.06 0 0 1 0 4.13zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.72V1.72C24 .77 23.2 0 22.22 0z"/>
            </svg>
            Ver perfil de LinkedIn
          </a>
        </div>
      </div>

      <p style={{margin:0, fontSize:13, lineHeight:1.55, color:'var(--fg-muted)'}}>
        {TRAINER.shortBio}
      </p>

      <div style={{display:'flex', flexWrap:'wrap', gap:6}}>
        {TRAINER.credentials.map(c => (
          <span key={c} style={{
            fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'.04em',
            padding:'3px 8px', borderRadius:4,
            background:'var(--bg-subtle)', color:'var(--fg-muted)',
            border:'1px solid var(--border)',
          }}>{c}</span>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { TrainerCard });
