/* ============================================================
   main.jsx — App composition, scroll-reveal, mount
   ============================================================ */

const { useState: useStateM, useEffect: useEffectM, useRef: useRefM } = React;

/* ---------- Scroll reveal observer ---------- */
function useReveal() {
  useEffectM(() => {
    if (typeof IntersectionObserver === "undefined") return;
    const io = new IntersectionObserver((entries) => {
      for (const e of entries) {
        if (e.isIntersecting) {
          e.target.classList.add("in");
          io.unobserve(e.target);
        }
      }
    }, { rootMargin: "0px 0px -10% 0px", threshold: 0.05 });
    document.querySelectorAll(".reveal").forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);
}

/* ---------- Scroll guide — subtle flow drifting left→right and curving down ---------- */
function ScrollGuide() {
  return (
    <div aria-hidden="true" className="scroll-guide" style={{
      position: "relative",
      width: "100%",
      padding: "44px 0 56px",
      background: "transparent",
      pointerEvents: "none",
      overflow: "hidden",
      height: 140,
    }}>
      <svg
        viewBox="0 0 1400 140"
        preserveAspectRatio="none"
        style={{
          position: "absolute", inset: 0,
          width: "100%", height: "100%",
        }}>
        <defs>
          {/* static track gradient — graphite haze (warm grey) */}
          <linearGradient id="sgPath" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%"   stopColor="rgba(40,40,38,0)"/>
            <stop offset="22%"  stopColor="rgba(60,60,58,0.22)"/>
            <stop offset="50%"  stopColor="rgba(74,74,72,0.55)"/>
            <stop offset="78%"  stopColor="rgba(60,60,58,0.22)"/>
            <stop offset="100%" stopColor="rgba(40,40,38,0)"/>
          </linearGradient>
          {/* moving comet glow */}
          <radialGradient id="sgComet" cx="50%" cy="50%" r="50%">
            <stop offset="0%"  stopColor="rgba(255,250,238,0.20)"/>
            <stop offset="30%" stopColor="rgba(235,207,0,0.14)"/>
            <stop offset="70%" stopColor="rgba(235,207,0,0.03)"/>
            <stop offset="100%" stopColor="rgba(235,207,0,0)"/>
          </radialGradient>
          <filter id="sgBlur" x="-10%" y="-50%" width="120%" height="200%">
            <feGaussianBlur stdDeviation="14"/>
          </filter>
          {/* a path the comet follows — slight downward curve at the end */}
          <path id="sgRail" d="M -100 30 Q 700 50 1500 130"/>
        </defs>

        {/* static cream-gold-cream track, slightly diagonal */}
        <path
          d="M 40 30 L 1360 110"
          fill="none"
          stroke="url(#sgPath)"
          strokeWidth="70"
          strokeLinecap="round"
          filter="url(#sgBlur)"
          opacity="0.55"
        />

        {/* drifting glow that travels along the rail */}
        <g>
          <ellipse rx="260" ry="34" fill="url(#sgComet)" filter="url(#sgBlur)">
            <animateMotion dur="14s" repeatCount="indefinite" rotate="auto"
              keyTimes="0;0.5;1" keySplines="0.45 0 0.55 1; 0.45 0 0.55 1" calcMode="spline">
              <mpath href="#sgRail"/>
            </animateMotion>
            <animate attributeName="opacity"
              values="0;0.85;0.85;0"
              keyTimes="0;0.15;0.85;1"
              dur="14s" repeatCount="indefinite"/>
          </ellipse>
        </g>
      </svg>
    </div>
  );
}

/* ---------- App ---------- */
function App() {
  useReveal();
  return (
    <div id="top">
      <window.Header/>
      <window.HeroCarousel/>
      <window.TestimonialMarquee/>
      <window.SectionTechnical/>
      <ScrollGuide/>
      <window.SectionFundamental/>
      <ScrollGuide/>
      <window.SectionResearch/>
      <ScrollGuide/>
      <window.SectionCommunity/>
      <ScrollGuide/>
      <window.SectionEducation/>
      <ScrollGuide/>
      <window.SectionFounder/>
      <ScrollGuide/>
      <window.SectionTiers/>
      <window.SectionExit/>
      <ScrollGuide/>
      <window.SectionShop/>
      <ScrollGuide/>
      <window.SectionContact/>
      <window.Footer/>
    </div>
  );
}

// Same-page anchor links (e.g. "#tiers", "/#contact"): smooth-scroll to the
// section but DON'T push the #hash into the URL — the address stays the homepage.
// Cross-page anchors (target not on this page) fall through and navigate normally.
document.addEventListener("click", function (e) {
  const a = e.target && e.target.closest ? e.target.closest('a[href]') : null;
  if (!a) return;
  const href = a.getAttribute("href");
  const m = href && href.match(/^\/?#(.+)$/);
  if (!m) return;
  const el = document.getElementById(m[1]);
  if (!el) return;
  e.preventDefault();
  el.scrollIntoView({ behavior: "smooth", block: "start" });
});

ReactDOM.createRoot(document.getElementById("root")).render(<App/>);