/* global React */
const { useState } = React;

/* ---------- Icon set (Lucide-style) ---------- */
function Icon({ name, size = 18, stroke = 1.75 }) {
  const paths = {
    arrow: <path d="M5 12h14M13 6l6 6-6 6" />,
    arrowDown: <path d="M12 5v14M6 13l6 6 6-6" />,
    check: <path d="M5 12l5 5L20 7" />,
    plus: <path d="M12 5v14M5 12h14" />,
    minus: <path d="M5 12h14" />,
    x: <path d="M6 6l12 12M18 6L6 18" />,
    chevron: <path d="m6 9 6 6 6-6" />,
    chevronr: <path d="m9 6 6 6-6 6" />,
    globe: <g><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></g>,
    calendar: <g><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 9h18M8 3v4M16 3v4"/></g>,
    clock: <g><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></g>,
    users: <g><circle cx="9" cy="8" r="3.5"/><path d="M2 21a7 7 0 0 1 14 0M16 11a3 3 0 1 0 0-6M22 21a6 6 0 0 0-6-6"/></g>,
    user: <g><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></g>,
    euro: <path d="M18 5a7 7 0 1 0 0 14M4 10h8M4 14h8"/>,
    factory: <path d="M3 21V11l5 3V11l5 3V8l8-3v16zM7 17v2M11 17v2M15 17v2M19 17v2"/>,
    flask: <path d="M9 3h6M10 3v6L4.5 18a2 2 0 0 0 1.7 3h11.6a2 2 0 0 0 1.7-3L14 9V3"/>,
    book: <path d="M4 4h12a4 4 0 0 1 4 4v13H8a4 4 0 0 1-4-4V4zM4 17a4 4 0 0 1 4-4h12"/>,
    bolt: <path d="M13 2L4 14h7l-1 8 9-12h-7l1-8z"/>,
    chart: <path d="M3 3v18h18M7 14l3-3 4 4 5-7"/>,
    cpu: <g><rect x="6" y="6" width="12" height="12" rx="1"/><path d="M9 2v3M15 2v3M9 19v3M15 19v3M2 9h3M2 15h3M19 9h3M19 15h3"/></g>,
    shield: <path d="M12 3l8 3v6c0 5-4 8-8 9-4-1-8-4-8-9V6l8-3z"/>,
    droplet: <path d="M12 3s7 7 7 12a7 7 0 1 1-14 0c0-5 7-12 7-12z"/>,
    wrench: <path d="M14 6a4 4 0 0 1 5 5l-3 1-9 9-3-3 9-9 1-3z"/>,
    play: <path d="M6 4l14 8-14 8z"/>,
    mail: <g><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></g>,
    linkedin: <g><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M8 10v8M8 6.5v.01M12 10v8M12 13a3 3 0 0 1 6 0v5"/></g>,
    youtube: <g><rect x="3" y="6" width="18" height="12" rx="3"/><path d="m11 10 4 2-4 2z" fill="currentColor" stroke="none"/></g>,
    download: <path d="M12 3v12m-5-5 5 5 5-5M4 21h16"/>,
    grid: <g><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></g>,
    list: <g><path d="M8 6h13M8 12h13M8 18h13"/><circle cx="4" cy="6" r="1" fill="currentColor"/><circle cx="4" cy="12" r="1" fill="currentColor"/><circle cx="4" cy="18" r="1" fill="currentColor"/></g>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
         stroke="currentColor" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round"
         style={{flexShrink:0,display:'inline-block',verticalAlign:'middle'}}>
      {paths[name] || null}
    </svg>
  );
}

/* ---------- Logo (LH brand) ---------- */
function Logo({ variant = "color", height = 28 }) {
  const src = variant === "white" ? "assets/logo-white.svg"
    : variant === "mark"  ? "assets/logo-mark.svg"
    : variant === "black" ? "assets/logo-black.svg"
    : "assets/logo-color.svg";
  return <img src={src} alt="Lean Hydrogen" style={{height, display:'block'}}/>;
}

/* ---------- Wordmark for "Escuela de Protones" ----------
   Lockup: custom isotype (proton-arrow inside electron orbit, with
   electron dot) + wordmark in display type. The isotype is supplied
   as a PNG asset — variants navy (default) / white (for dark bg). */
function EPMark({ height = 28, color = "var(--lh-navy)", accent = "var(--lh-cyan)", variant }) {
  const isDark = variant === 'white' ||
                 (typeof color === 'string' && (color === '#fff' || color === 'white'));
  const markSrc = isDark ? 'assets/ep-logo-white.png' : 'assets/ep-logo.png';
  return (
    <div style={{
      display:'inline-flex', alignItems:'center',
      gap: height*0.34,
      color,
      whiteSpace:'nowrap',
    }}>
      <img src={markSrc} alt="" aria-hidden
        style={{ height: height*1.05, width:'auto', display:'block', flexShrink:0 }}/>
      <div style={{
        display:'inline-flex', alignItems:'baseline', gap:0,
        fontFamily:'var(--font-display)',
        fontSize: height*0.62,
        lineHeight: 1,
        letterSpacing:'-0.02em',
      }}>
        <span style={{fontWeight:700}}>Escuela</span>
        <span style={{
          fontWeight:400, opacity:.55,
          margin:'0 0.28em',
        }}>de</span>
        <span style={{fontWeight:700}}>Protones</span>
      </div>
    </div>
  );
}

/* ---------- Pictographic mark — just the proton/orbit glyph ---------- */
function ProtonGlyph({ size = 48, color = "var(--lh-navy)", accent = "var(--lh-cyan)", strokeWidth = 1.5 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" fill="none" aria-hidden>
      {/* proton (nucleus) */}
      <circle cx="32" cy="32" r="10" fill={color}/>
      <text x="32" y="36" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="10" fontWeight="700" fill="#fff">p+</text>
      {/* orbit 1 */}
      <ellipse cx="32" cy="32" rx="26" ry="10" stroke={accent} strokeWidth={strokeWidth} transform="rotate(20 32 32)"/>
      {/* orbit 2 */}
      <ellipse cx="32" cy="32" rx="26" ry="10" stroke={color} strokeOpacity=".3" strokeWidth={strokeWidth} transform="rotate(-30 32 32)"/>
      {/* electron */}
      <circle cx="56" cy="24" r="3.2" fill={accent}/>
    </svg>
  );
}

/* ---------- Badge / chip ---------- */
function Badge({ children, variant = "default", style }) {
  const variants = {
    default:  { background:'#E8F1FC', color:'#001A70', border:'1px solid transparent' },
    onDark:   { background:'rgba(255,255,255,.08)', color:'#fff', border:'1px solid rgba(255,255,255,.18)' },
    cyan:     { background:'rgba(0,181,226,.15)', color:'#00B5E2', border:'1px solid rgba(0,181,226,.35)' },
    yellow:   { background:'rgba(224,231,34,.22)', color:'#6B6F00', border:'1px solid rgba(224,231,34,.6)' },
    outline:  { background:'#fff', color:'#001A70', border:'1px solid #DDE4ED' },
    soft:     { background:'#F6F8FB', color:'#4A5668', border:'1px solid #EEF2F7' },
  };
  return (
    <span style={{
      display:'inline-flex', alignItems:'center', gap:6,
      padding:'4px 10px', borderRadius:999,
      fontSize:12, fontWeight:600, letterSpacing:'.02em',
      whiteSpace:'nowrap',
      ...(variants[variant] || variants.default),
      ...style,
    }}>{children}</span>
  );
}

/* ---------- Button ---------- */
function Button({ children, variant = "primary", size = "md", icon, iconAfter, onClick, type = "button", disabled, full, href, target, download, style }) {
  const base = {
    display:'inline-flex', alignItems:'center', justifyContent:'center', gap:8,
    fontFamily:'inherit', fontWeight:600, cursor: disabled?'not-allowed':'pointer',
    border:'1px solid transparent', borderRadius:8,
    transition:'all 200ms cubic-bezier(.2,.8,.2,1)',
    textDecoration:'none',
    width: full ? '100%' : 'auto',
    opacity: disabled ? 0.4 : 1,
  };
  const sizes = {
    sm:{ padding:'7px 14px', fontSize:13 },
    md:{ padding:'10px 18px', fontSize:14 },
    lg:{ padding:'14px 22px', fontSize:15 },
  };
  const variants = {
    primary:   { background:'#001A70', color:'#fff' },
    secondary: { background:'#fff', color:'#001A70', borderColor:'#DDE4ED' },
    tertiary:  { background:'transparent', color:'#307FE2', padding:'10px 4px' },
    accent:    { background:'#E0E722', color:'#001A70' },
    ghost:     { background:'transparent', color:'#001A70' },
    onDark:    { background:'#fff', color:'#001A70' },
    onDarkGhost: { background:'transparent', color:'#fff', borderColor:'rgba(255,255,255,.25)' },
    cyan:      { background:'#00B5E2', color:'#001A70' },
  };
  const hoverStyles = {
    primary:   { background:'#1A3180' },
    secondary: { background:'#F6F8FB', borderColor:'#C2CCD8' },
    tertiary:  { color:'#001A70' },
    accent:    { background:'#d6dd1f' },
    ghost:     { background:'#F6F8FB' },
    onDark:    { background:'#F6F8FB' },
    onDarkGhost: { background:'rgba(255,255,255,.08)', borderColor:'rgba(255,255,255,.4)' },
    cyan:      { background:'#16C2EB' },
  };
  const [hover, setHover] = useState(false);
  const merged = {...base, ...sizes[size], ...variants[variant], ...(hover && !disabled ? hoverStyles[variant] : {}), ...style};
  if (href) {
    return (
      <a href={href} onClick={onClick} target={target} rel={target === '_blank' ? 'noopener' : undefined} download={download}
         onMouseEnter={()=>setHover(true)} onMouseLeave={()=>setHover(false)} style={merged}>
        {icon && <Icon name={icon} size={size==='lg'?18:16}/>}
        {children}
        {iconAfter && <Icon name={iconAfter} size={size==='lg'?18:16}/>}
      </a>
    );
  }
  return (
    <button type={type} onClick={onClick} disabled={disabled}
            onMouseEnter={()=>setHover(true)} onMouseLeave={()=>setHover(false)} style={merged}>
      {icon && <Icon name={icon} size={size==='lg'?18:16}/>}
      {children}
      {iconAfter && <Icon name={iconAfter} size={size==='lg'?18:16}/>}
    </button>
  );
}

/* ---------- Card ---------- */
function Card({ children, hover = true, padding = 24, onClick, style }) {
  const [h, setH] = useState(false);
  return (
    <div onMouseEnter={()=>setH(true)} onMouseLeave={()=>setH(false)} onClick={onClick}
         style={{
           background:'#fff', border:'1px solid #EEF2F7', borderRadius:12,
           padding, cursor: onClick?'pointer':'auto',
           boxShadow: hover && h
             ? '0 12px 32px rgba(0,26,112,.08), 0 4px 12px rgba(0,26,112,.05)'
             : '0 1px 2px rgba(0,26,112,.06), 0 1px 3px rgba(0,26,112,.04)',
           transform: hover && h ? 'translateY(-2px)' : 'none',
           transition:'all 200ms cubic-bezier(.2,.8,.2,1)',
           ...style,
         }}>
      {children}
    </div>
  );
}

/* ---------- Eyebrow ---------- */
function Eyebrow({ children, color = '#00B5E2', mono = true }) {
  return <div style={{
    fontFamily: mono ? 'var(--font-mono)' : 'var(--font-sans)',
    fontSize:12, fontWeight:600, letterSpacing:'.12em', textTransform:'uppercase',
    color, marginBottom:12,
  }}>{children}</div>;
}

/* ---------- Level chip ---------- */
function LevelChip({ level, size = 28, withLabel = false }) {
  const labels = { i: 'Introductorio', a: 'Avanzado', e: 'Experto' };
  const colors = {
    i: { bg:'rgba(0,181,226,.14)', fg:'var(--lh-cyan)', border:'rgba(0,181,226,.35)' },
    a: { bg:'rgba(48,127,226,.14)', fg:'var(--lh-blue)', border:'rgba(48,127,226,.4)' },
    e: { bg:'rgba(224,231,34,.22)', fg:'#6B6F00', border:'rgba(224,231,34,.7)' },
  };
  const c = colors[level];
  return (
    <div style={{display:'inline-flex', alignItems:'center', gap:10}}>
      <span style={{
        width:size, height:size, borderRadius:'50%',
        background: c.bg, color: c.fg, border: `1px solid ${c.border}`,
        display:'inline-flex', alignItems:'center', justifyContent:'center',
        fontFamily:'var(--font-mono)', fontSize: Math.round(size*0.46), fontWeight:600, fontStyle:'italic',
        lineHeight: 1,
      }}>{level}</span>
      {withLabel && <span style={{fontSize:13, fontWeight:600, color:'var(--fg)'}}>{labels[level]}</span>}
    </div>
  );
}

Object.assign(window, { Icon, Logo, EPMark, ProtonGlyph, Badge, Button, Card, Eyebrow, LevelChip });