/* ===========================================================
   IGEC — Secciones (parte 1): Nav, Hero, Historia, Servicios
   =========================================================== */

const NAV_H = 76;
function scrollToId(id) {
  const el = document.getElementById(id);
  if (!el) return;
  const y = el.getBoundingClientRect().top + window.scrollY - (NAV_H - 8);
  window.scrollTo({ top: y, behavior: "smooth" });
}

/* ---------- Navbar ---------- */
function Navbar({ data }) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  const [active, setActive] = useState("inicio");

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  useEffect(() => {
    const ids = data.nav.map((n) => n.id);
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) setActive(e.target.id); });
    }, { rootMargin: "-45% 0px -50% 0px", threshold: 0 });
    ids.forEach((id) => { const el = document.getElementById(id); if (el) io.observe(el); });
    return () => io.disconnect();
  }, [data]);

  const go = (e, id) => { e.preventDefault(); setOpen(false); scrollToId(id); };

  return (
    <header className={`nav ${scrolled ? "is-scrolled" : ""}`}>
      <div className="container">
        <div className="nav__inner">
          <a href="#inicio" className="brand" onClick={(e) => go(e, "inicio")}>
            <span className="brand__logo"><Logo size={40} /></span>
            <span className="brand__text">
              <span className="brand__name">Instituto Gestáltico</span>
              <span className="brand__sub">{data.sigla} · {data.ciudad}</span>
            </span>
          </a>

          <nav className="nav__links">
            {data.nav.map((n) => (
              <a key={n.id} href={`#${n.id}`} onClick={(e) => go(e, n.id)}
                 className={`nav__link ${active === n.id ? "is-active" : ""}`}>{n.label}</a>
            ))}
          </nav>

          <a href="#contacto" className="btn btn--primary nav__cta" onClick={(e) => go(e, "contacto")}>
            Reservar consulta
          </a>

          <button className={`nav__toggle ${open ? "is-open" : ""}`} aria-label="Menú" onClick={() => setOpen((o) => !o)}>
            <span></span>
          </button>
        </div>

        <nav className={`nav__mobile ${open ? "is-open" : ""}`}>
          {data.nav.map((n) => (
            <a key={n.id} href={`#${n.id}`} onClick={(e) => go(e, n.id)}>{n.label}</a>
          ))}
          <a href="#contacto" className="btn btn--primary btn--block" onClick={(e) => go(e, "contacto")}>Reservar consulta</a>
        </nav>
      </div>
    </header>
  );
}

/* ---------- Hero ---------- */
function Hero({ data }) {
  const v = data.visitanos;
  return (
    <section className="hero" id="inicio">
      <span className="hero__blob hero__blob--1"></span>
      <span className="hero__blob hero__blob--2"></span>
      <div className="container">
        <div className="hero__grid">
          <div className="hero__copy">
            <div className="hero__logo-wrap">
              <span className="hero__logo"><Logo size={148} /></span>
            </div>
            <Reveal as="div" className="hero__eyebrow">Terapia Gestalt · {data.ciudad}</Reveal>
            <Reveal as="h1" delay={60}>
              Crecer en el <span className="soft">aquí y ahora</span>
            </Reveal>
            <Reveal as="p" className="hero__lead" delay={140}>{data.introHero}</Reveal>
            <Reveal as="div" className="hero__actions" delay={200}>
              <a href="#contacto" className="btn btn--primary" onClick={(e) => { e.preventDefault(); scrollToId("contacto"); }}>
                Reservar una consulta <span className="arrow"><Icon.arrow width="18" height="18" /></span>
              </a>
              <a href="#servicios" className="btn btn--ghost" onClick={(e) => { e.preventDefault(); scrollToId("servicios"); }}>
                Conocer las propuestas
              </a>
            </Reveal>
            <Reveal as="div" className="hero__meta" delay={260}>
              <span className="hero__meta-item"><span className="dot"></span>Lunes a viernes · <b>14 a 20 h</b></span>
              <span className="hero__meta-item"><span className="dot"></span><b>{v.direccion}</b></span>
            </Reveal>
          </div>

          <div className="hero__art">
            <FigureGround />
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Historia ---------- */
function Historia({ data }) {
  const h = data.historia;
  return (
    <section className="section section--alt" id="historia">
      <div className="container historia__grid">
        <Reveal className="historia__body">
          <Kicker>{h.kicker}</Kicker>
          <h2 style={{ fontSize: "clamp(30px,4.4vw,46px)" }}>{h.titulo}</h2>
          <div style={{ marginTop: 22 }}>
            {h.parrafos.map((p, i) => <p key={i} className="muted">{p}</p>)}
          </div>
          <div className="pilares">
            {h.pilares.map((p, i) => (
              <div className="pilar" key={i}>
                <span className="pilar__mark"></span>
                <div>
                  <h4>{p.titulo}</h4>
                  <p>{p.texto}</p>
                </div>
              </div>
            ))}
          </div>
        </Reveal>
        <Reveal delay={120} className="historia__art-wrap">
          <Placeholder className="historia__art" label="foto — el espacio / la sede" />
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- Servicios ---------- */
function ServicioCard({ s, i }) {
  const [open, setOpen] = useState(false);
  return (
    <Reveal className={`servicio ${open ? "is-open" : ""}`} delay={i * 90}>
      <span className="servicio__num">0{i + 1}</span>
      <h3>{s.nombre}</h3>
      <p className="servicio__resumen">{s.resumen}</p>
      <div className="servicio__detalle"><p>{s.detalle}</p></div>
      <button className="servicio__toggle" onClick={() => setOpen((o) => !o)}>
        {open ? "Menos" : "Saber más"} <span className="chev"><Icon.chevron width="15" height="15" /></span>
      </button>
      <div className="servicio__tags">
        {s.items.map((t, k) => <span className="servicio__tag" key={k}>{t}</span>)}
      </div>
    </Reveal>
  );
}

function Servicios({ data }) {
  const s = data.servicios;
  return (
    <section className="section section--center" id="servicios">
      <div className="container">
        <div className="section__head">
          <Kicker>{s.kicker}</Kicker>
          <h2>{s.titulo}</h2>
          <p>{s.intro}</p>
        </div>
        <div className="servicios__grid">
          {s.items.map((item, i) => <ServicioCard s={item} i={i} key={i} />)}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Navbar, Hero, Historia, Servicios, scrollToId, NAV_H });