/* hero.jsx — Nav + Hero portada */
const { useState: useStateH, useEffect: useEffectH } = React;

function Nav() {
  const [scrolled, setScrolled] = useStateH(false);
  const [open, setOpen] = useStateH(false);
  useEffectH(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const links = [
  ["Perfil", "#perfil"],
  ["RDMAX", "#rdmax"],
  ["Curso", "#curso"],
  ["Casos", "#galeria"]];

  return (
    <header className={`nav ${scrolled ? "nav--solid" : ""}`}>
      <div className="wrap nav__inner">
        <a href="#top" className="nav__brand">
          <span className="nav__mark">MT</span>
          <span className="nav__name">
            Dra. María Eugenia Terán
            <em>ODONTÓLOGO - ESP.RADIOLOGÍA ORAL Y MAXILOFACIAL</em>
          </span>
        </a>
        <nav className="nav__links">
          {links.map(([l, h]) =>
          <a key={h} href={h}>{l}</a>
          )}
        </nav>
        <a href="#contacto" className="btn btn-primary nav__cta">Inscripciones</a>
        <button className="nav__burger" onClick={() => setOpen((o) => !o)} aria-label="Menú">
          <span /><span /><span />
        </button>
      </div>
      {open &&
      <div className="nav__mobile">
          {links.map(([l, h]) =>
        <a key={h} href={h} onClick={() => setOpen(false)}>{l}</a>
        )}
          <a href="#contacto" className="btn btn-primary" onClick={() => setOpen(false)}>Inscripciones</a>
        </div>
      }
    </header>);

}

function Hero({ t }) {
  return (
    <section className="hero" id="top">
      {/* background — abstract clinical gradient (replace with CBCT image when available) */}
      <div className="hero__bg"></div>
      <div className="hero__overlay" />
      <div className="hero__grid-lines" aria-hidden="true" />

      <div className="wrap hero__content">
        <div className="hero__left reveal">
          <div className="eyebrow" style={{ color: "var(--accent-bright)" }}>
            Radiología Oral &amp; Maxilofacial
          </div>
          <h1 className="hero__title">{t.heroTitle}</h1>
          {t.heroRole ? <p className="hero__role">{t.heroRole}</p> : null}
          <ul className="hero__creds">
            <li><Icon name="award" size={18} /> Directora Clínica RDMAX · Venezuela – Colombia</li>
            <li><Icon name="globe" size={18} /> Conferencista internacional</li>
            <li><Icon name="cpu" size={18} /> CBCT e Inteligencia Artificial aplicada al diagnóstico</li>
          </ul>
          <div className="hero__actions">
            <a href="#galeria" className="btn btn-primary">
              Ver portafolio clínico <span className="arrow"><Icon name="arrow" size={18} /></span>
            </a>
            <a href="#curso" className="btn btn-ghost on-dark">Explorar cursos</a>
          </div>
        </div>

        <div className="hero__right reveal" style={{ "--reveal-delay": "0.12s" }}>
          <div className="hero__portrait">
            <img
              className="hero__portrait-img"
              src="assets/dra-teran.jpg"
              alt="Dra. María Eugenia Terán — Radióloga Oral y Maxilofacial" />
            
            <div className="hero__portrait-tag">
              <span className="tag" style={{ background: "rgba(255,255,255,.12)", color: "#fff" }}></span>
            </div>
          </div>
          <div className="hero__badge">
            <span className="hero__badge-num">PhD</span>
            <span className="hero__badge-txt">Ciencias<br />Odontológicas</span>
          </div>
        </div>
      </div>

      <a href="#perfil" className="hero__scroll" aria-label="Desplazar">
        <span className="hero__scroll-dot" />
        <span>Perfil académico</span>
      </a>
    </section>);

}

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