// subpage-app.jsx — shared base for sub-pages
// Uses KHeader, KFooter, KCTAFinal from main sections, plus the page-specific component

function applyTweaksFromHtml() {
  const html = document.documentElement;
  if (!html.hasAttribute("data-accent")) html.setAttribute("data-accent", "orange");
  if (!html.hasAttribute("data-type")) html.setAttribute("data-type", "jakarta");
}

function useOnScrollReveal() {
  React.useEffect(() => {
    const reveal = (el) => el.classList.add("in");
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => { if (e.isIntersecting) { reveal(e.target); io.unobserve(e.target); } });
      },
      { rootMargin: "0px 0px -40px 0px", threshold: 0.01 }
    );
    document.querySelectorAll(".k-anim:not(.in)").forEach((el) => {
      const r = el.getBoundingClientRect();
      if (r.top < window.innerHeight - 40) reveal(el);
      else io.observe(el);
    });
    setTimeout(() => {
      document.querySelectorAll(".k-anim:not(.in)").forEach((el) => {
        const r = el.getBoundingClientRect();
        if (r.top < window.innerHeight) reveal(el);
      });
    }, 2500);
    return () => io.disconnect();
  }, []);
}

function PageShell({ page, eyebrow, title, sub, children }) {
  applyTweaksFromHtml();
  useOnScrollReveal();
  return (
    <div className="k-shell">
      <KHeader current={page} />

      <section className="k-page-hero" data-screen-label={"00 Hero · " + page}>
        <a href={window.B("")} className="k-back-link k-anim">← Volver a inicio</a>
        <div className="k-anim delay-1">
          <span className="k-eyebrow"><span className="k-dot" /> {eyebrow}</span>
        </div>
        <h1 className="k-h0 k-anim delay-2" style={{ marginTop: 24, maxWidth: 1000 }}>
          {title}
        </h1>
        {sub && (
          <p className="k-body k-body-lg k-anim delay-3" style={{ marginTop: 24, maxWidth: 720 }}>
            {sub}
          </p>
        )}
      </section>

      {children}

      <KCTAFinal />
      <KFooter />
      <KWhatsApp />
    </div>
  );
}

Object.assign(window, { PageShell, useOnScrollReveal, applyTweaksFromHtml });