/* Contact Section */
const SPLINE_URL = "https://my.spline.design/chips-bHCH3o2U4CjzWrEyqq6zr9mV/";

function ContactSection() {
  const isMobile = useIsMobile(640);
  const splineScale = isMobile ? 1.18 : 1.40;

  const containerRef = React.useRef(null);
  const iframeRef = React.useRef(null);
  const [splineLoaded, setSplineLoaded] = React.useState(false);

  // Defer Spline initialization until the section is near the viewport.
  // WebGL context creation is expensive — this prevents the lag spike on page load.
  React.useEffect(() => {
    const container = containerRef.current;
    if (!container) return;

    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          observer.disconnect();
          const iframe = iframeRef.current;
          if (iframe && !iframe.src.includes('spline.design')) {
            iframe.src = SPLINE_URL;
          }
        }
      },
      { rootMargin: '300px' }
    );

    observer.observe(container);
    return () => observer.disconnect();
  }, []);

  return (
    <section
      ref={containerRef}
      id="contact"
      className="relative rounded-t-[40px] sm:rounded-t-[50px] md:rounded-t-[60px] -mt-10 sm:-mt-12 md:-mt-14 z-20"
      style={{ height: "100vh", overflow: "hidden" }}
    >
      {/* Spline full-bleed background — pointer-events disabled to block zoom/pan */}
      <div
        style={{
          position: "absolute", inset: 0,
          pointerEvents: "none",
          transform: `scale(${splineScale})`,
          transformOrigin: "center center",
        }}
      >
        {/* Dark placeholder shown until Spline iframe loads */}
        {!splineLoaded && (
          <div style={{
            position: "absolute", inset: 0,
            background: "radial-gradient(ellipse at center, #1a0a2e 0%, #0C0C0C 70%)",
            zIndex: 1,
          }} />
        )}
        <iframe
          ref={iframeRef}
          frameBorder="0"
          width="100%"
          height="100%"
          style={{
            width: "100%", height: "100%", display: "block",
            opacity: splineLoaded ? 1 : 0,
            transition: "opacity 0.8s ease",
          }}
          title="Radial Glass 3D"
          scrolling="no"
          onLoad={() => setSplineLoaded(true)}
        />
      </div>

      {/* Foreground content centered */}
      <div className="relative z-10 h-full flex flex-col items-center justify-center gap-6 px-5 pointer-events-none">
        <FadeIn delay={0} y={40}>
          <h2
            className="hero-heading font-black uppercase leading-none tracking-tight text-center"
            style={{ fontSize: "clamp(2rem, 7vw, 90px)" }}
          >
            Contact
          </h2>
        </FadeIn>

        <FadeIn delay={0.15} y={20}>
          <p
            className="text-[#D7E2EA]/70 font-light uppercase tracking-widest text-center"
            style={{ fontSize: "clamp(0.75rem, 1.4vw, 1.1rem)" }}
          >
            Open to work · Medina, Saudi Arabia
          </p>
        </FadeIn>

        <FadeIn delay={0.25} y={20}>
          <a
            href="contact.html"
            className="contact-btn rounded-full text-white font-medium uppercase tracking-widest px-7 py-3 sm:px-10 sm:py-3.5 transition-transform duration-200 hover:scale-[1.04] active:scale-[0.97]"
            style={{ fontSize: "clamp(0.75rem, 1.1vw, 0.95rem)", pointerEvents: "auto" }}
          >
            Get In Touch
          </a>
        </FadeIn>
      </div>

      {/* Footer */}
      <p className="absolute bottom-6 w-full text-center text-[#D7E2EA]/30 text-xs uppercase tracking-widest z-10">
        © Mohamed Karar · Software Engineer
      </p>
    </section>
  );
}

Object.assign(window, { ContactSection });