/* SpeakMind — 2026 trend components
   TypeBanner: viewport-scaled brand mantra (text as architecture)
   PrintMarks: fixed registration marks (print details)
   useKineticType: scroll-driven variable font weight on section headlines */

/* ---- giant type banner: the hero mantra, restated at architectural scale ---- */
function TypeBanner() {
  return (
    <section className="type-banner" aria-hidden="true">
      <div className="tb-line tb-outline" data-kx="-1">STOP TYPING</div>
      <div className="tb-line tb-fill" data-kx="1">JUST TALK.</div>
      <div className="tb-cap mono">⌥space · 211 wpm · multilingual · macos</div>
    </section>
  );
}

/* ---- registration marks ---- */
function RegMark() {
  return (
    <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
      <circle cx="12" cy="12" r="6" fill="none" stroke="currentColor" strokeWidth="1"></circle>
      <line x1="12" y1="0" x2="12" y2="24" stroke="currentColor" strokeWidth="1"></line>
      <line x1="0" y1="12" x2="24" y2="12" stroke="currentColor" strokeWidth="1"></line>
    </svg>
  );
}

function PrintMarks() {
  return (
    <div className="print-marks" aria-hidden="true">
      <span className="tl"><RegMark /></span>
      <span className="tr"><RegMark /></span>
      <span className="bl"><RegMark /></span>
      <span className="br"><RegMark /></span>
    </div>
  );
}

/* ---- kinetic type: headline weight follows scroll position ----
   Headlines enter light (320) and settle to their normal 600 as they
   approach the upper third of the viewport. Banner lines also drift
   horizontally in opposite directions and gain weight near center. */
function useKineticType(enabled) {
  useEffect(() => {
    const HEADS = ".section-head h2, .lang-copy h2, .cta h2";
    const clear = () => {
      document.querySelectorAll(HEADS).forEach((el) => { el.style.fontWeight = ""; });
      document.querySelectorAll(".tb-line").forEach((el) => { el.style.fontWeight = ""; el.style.transform = ""; });
    };
    if (!enabled) { clear(); return undefined; }

    let raf = null;
    const update = () => {
      raf = null;
      const vh = window.innerHeight;
      document.querySelectorAll(HEADS).forEach((el) => {
        const r = el.getBoundingClientRect();
        const p = Math.max(0, Math.min(1, (vh * 0.95 - r.top) / (vh * 0.5)));
        el.style.fontWeight = String(Math.round(320 + p * 280));
      });
      document.querySelectorAll(".tb-line").forEach((el) => {
        const r = el.getBoundingClientRect();
        const mid = r.top + r.height / 2;
        const p = Math.max(-1, Math.min(1, (vh / 2 - mid) / (vh / 2)));
        const dir = parseFloat(el.dataset.kx || "1");
        el.style.transform = "translateX(" + (p * 44 * dir).toFixed(1) + "px)";
        el.style.fontWeight = String(Math.round(540 + (1 - Math.abs(p)) * 160));
      });
    };
    const onScroll = () => { if (!raf) raf = requestAnimationFrame(update); };
    update();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    return () => {
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", onScroll);
      if (raf) cancelAnimationFrame(raf);
      clear();
    };
  }, [enabled]);
}

window.SMTrends = { TypeBanner, PrintMarks, useKineticType };