// header-hero.jsx — Header + Hero (Bloque 1) · v2 familias

const PlayIcon = (props) => (
  <svg viewBox="0 0 24 24" fill="currentColor" {...props}>
    <path d="M8 5v14l11-7z"/>
  </svg>
);
const ArrowRight = (props) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
    <line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/>
  </svg>
);
const ArrowDown = (props) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
    <line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/>
  </svg>
);
const IconWarning = (props) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
    <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/>
    <path d="M12 9v4"/><path d="M12 17h.01"/>
  </svg>
);

function Header({ onCTA }) {
  return (
    <header className="header" data-comment-anchor="header">
      <div className="container">
        <div className="header-inner">
          <a href="#top" className="brandmark" aria-label="Generación IA por Racks University">
            <img src="assets/logos/shield-red.png" alt="" />
            <span className="brandmark-text">
              <span className="top">[COLEGIO] x Generación IA</span>
              <span className="sub">by RACKS University</span>
            </span>
          </a>
          <button className="btn btn--primary" onClick={onCTA}>
            Reservar plaza para el workshop <ArrowRight className="arrow" />
          </button>
        </div>
      </div>
    </header>
  );
}

function VideoPosterCard({ title, label, idLabel, variant }) {
  return (
    <div className={"video-card " + (variant || "")} role="img" aria-label={`Vídeo: ${title}`}>
      <div className="video-bg" />
      <div className="video-grain" />
      <div className="video-content">
        <div className="video-poster-meta">
          <span className="rec" /> <span>{idLabel}</span>
        </div>
        <h3 className="video-title">{title}</h3>
      </div>
      <button className="video-play-btn" aria-label={`Reproducir: ${label}`}>
        <PlayIcon />
      </button>
    </div>
  );
}

function Hero({ onCTA, layout }) {
  return (
    <section id="top" className="hero" data-style={layout} data-screen-label="01 Hero" data-comment-anchor="hero">
      <img className="hero-shield-bg" src="assets/logos/shield-red.png" alt="" aria-hidden="true" />
      <div className="container hero-grid">
        <div className="hero-copy reveal">
          <div className="eyebrow">Para familias · Alumnos 15–18 años</div>
          <h1 className="display-xl">
            Workshop gratuito de IA para familias y alumnos de [COLEGIO]
          </h1>
          <p className="lead-p">
            Descubre cómo tu hijo puede usar IA para estudiar mejor, organizarse y construir herramientas útiles antes que el resto.
          </p>
          <div className="hero-ctas">
            <button className="btn btn--primary btn--lg" onClick={onCTA}>
              Reservar plaza gratuita <ArrowRight className="arrow" />
            </button>
          </div>
          <div className="hero-trust">
            <span style={{ fontWeight: "600", color: "var(--red)", display: "flex", alignItems: "center", gap: 6 }}>
              <IconWarning style={{ width: 16, height: 16 }} /> Plazas limitadas
            </span>
            <span className="dot" />
            <span>Solo 20 plazas disponibles</span>
            <span className="dot" />
            <span>17/20 reservadas</span>
          </div>
        </div>
        <div className="hero-video-wrap reveal" style={{ transitionDelay: "120ms" }}>
          <VideoPosterCard
            title="Lo que tu hijo construye en 9 meses."
            label="Presentación del programa Generación IA"
            idLabel="Vídeo 01 · 02:14"
          />
        </div>
      </div>
    </section>
  );
}

window.Header = Header;
window.Hero = Hero;
window.VideoPosterCard = VideoPosterCard;
window.ArrowRight = ArrowRight;
window.ArrowDown = ArrowDown;
window.PlayIcon = PlayIcon;