/* ===================================================
   HOME APP — full-screen sections, centered titles
   =================================================== */
function smoothScrollTo(e) {
  const href = e.currentTarget.getAttribute('href');
  if (!href || !href.startsWith('#')) return;
  const target = document.querySelector(href);
  if (!target) return;
  e.preventDefault();
  const start = window.scrollY;
  const end   = target.getBoundingClientRect().top + window.scrollY;
  const dist  = end - start;
  const dur   = Math.min(1400, Math.max(800, Math.abs(dist) * 0.6));
  const t0    = performance.now();
  // easeInOutCubic
  const ease = (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
  const tick = (now) => {
    const t = Math.min(1, (now - t0) / dur);
    window.scrollTo(0, start + dist * ease(t));
    if (t < 1) requestAnimationFrame(tick);
  };
  requestAnimationFrame(tick);
}

function HomeApp() {
  const { data: tags }    = useJson('/data/tags.json');
  const { data: authors } = useJson('/data/authors.json');

  return (
    <main className="home">
        {/* SECTION 1 — INTRO / HERO */}
        <section className="screen screen--hero" id="intro" data-screen-label="01 Inicio">
          <div className="container screen__inner">
            <h1 className="hero__title">
              El repositorio<br/>
              de lo que <em>construimos.</em>
            </h1>
            <p className="hero__lead">
              En Horum Labs, somos un equipo de ingenieros y diseñadores dedicados a crear herramientas digitales excepcionales. 
              Desde infraestructuras escalables hasta interfaces de usuario refinadas, nos enfocamos en el detalle que transforma un producto funcional en una experiencia inolvidable.
            </p>
            <div className="hero__actions">
              <TransitionLink href="/repo" className="btn btn--primary">Ver el repositorio <Icon.ArrowRight /></TransitionLink>
              <a href="#stack" className="btn btn--ghost" onClick={smoothScrollTo}>Nuestro stack</a>
              <a href="#authors" className="btn btn--ghost" onClick={smoothScrollTo}>Autores</a>
            </div>
          </div>
        </section>

        {/* SECTION 2 — STACK / FULL BLEED CAROUSEL */}
        <section className="screen screen--stack" id="stack">
          <div className="screen__head screen__head--center">
            <p className="section__label">/ stack · 002</p>
            <h2 className="section__title">Tecnologías que tenemos en las manos.</h2>
          </div>
          <div className="stack-bleed">
            {tags ? <TagCarousel tags={tags} /> : <div className="carousel-fullbleed"></div>}
          </div>
        </section>

        {/* SECTION 3 — AUTHORS */}
        <section className="screen screen--authors" id="authors">
          <div className="screen__head screen__head--center">
            <p className="section__label">/ autores · 003</p>
            <h2 className="section__title">Las personas detrás.</h2>
          </div>
          <div className="container">
            {authors ? (
              <div className="authors-grid">
                {authors.map(a => <AuthorCard key={a.id} author={a} />)}
              </div>
            ) : (
              <div className="empty">cargando autores…</div>
            )}
          </div>
        </section>
      </main>
  );
}

window.HomeApp = HomeApp;