/* Hero Section */
function Navbar() {
  const links = [
    { label: "About",        href: "#about" },
    { label: "Experience",   href: "#experience" },
    { label: "Projects",     href: "#projects" },
    { label: "Certificates", href: "certificates.html" },
    { label: "Contact",      href: "#contact" },
  ];
  return (
    <nav className="flex justify-between items-center px-6 md:px-10 pt-6 md:pt-8 w-full">
      {links.map((l, i) => (
        <a
          key={"nav-" + i}
          href={l.href}
          className="text-[#D7E2EA] font-medium uppercase tracking-wider transition-opacity duration-200 hover:opacity-70"
          style={{ fontSize: "clamp(0.62rem, 1.05vw, 1.4rem)" }}
        >
          {l.label}
        </a>
      ))}
    </nav>
  );
}

function HeroSection() {
  const sectionRef = React.useRef(null);
  const [portraitPos, setPortraitPos] = React.useState({ x: 0, y: 0 });
  const [portraitActive, setPortraitActive] = React.useState(false);
  const isMobile = useIsMobile(640);

  React.useEffect(() => {
    const handleMove = (e) => {
      const section = sectionRef.current;
      if (!section) return;
      const rect = section.getBoundingClientRect();
      // Only track while cursor is inside the hero section
      if (
        e.clientX < rect.left || e.clientX > rect.right ||
        e.clientY < rect.top || e.clientY > rect.bottom
      ) {
        setPortraitActive(false);
        setPortraitPos({ x: 0, y: 0 });
        return;
      }
      // Offset from center of the section
      const cx = rect.left + rect.width / 2;
      const cy = rect.top + rect.height / 2;
      const dx = (e.clientX - cx) / 7;
      const dy = (e.clientY - cy) / 7;
      setPortraitActive(true);
      setPortraitPos({ x: dx, y: dy });
    };
    window.addEventListener("mousemove", handleMove);
    return () => window.removeEventListener("mousemove", handleMove);
  }, []);

  return (
    <section
      ref={sectionRef}
      className="relative h-[100svh] flex flex-col"
      style={{ overflowX: "clip" }}
    >
      <Navbar />

      {/* Heading */}
      <div className="overflow-hidden w-full mt-3 sm:mt-4 md:-mt-5">
        <_motion.h1
          initial={{ opacity: 0, y: 40 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.7, delay: 0.15, ease: "easeOut" }}
          className="hero-heading font-black uppercase tracking-tight leading-none whitespace-nowrap w-full text-center px-2 text-[9.5vw] sm:text-[10.5vw] md:text-[11vw] lg:text-[12vw]"
        >
          Hi, i&apos;m Mohamed
        </_motion.h1>
      </div>

      {/* Portrait centered — wrapper uses margin auto to center, avoiding Framer Motion transform conflict */}
      <div
        className="absolute z-10 w-[420px] sm:w-[430px] md:w-[520px] lg:w-[620px]"
        style={{
          left: "50%",
          bottom: isMobile ? "auto" : 0,
          top: isMobile ? "40%" : "auto",
          transform: isMobile
            ? `translateX(-50%) translateY(-38%) translate3d(${portraitPos.x}px, ${portraitPos.y}px, 0)`
            : `translateX(-50%) translate3d(${portraitPos.x}px, ${portraitPos.y}px, 0)`,
          transition: portraitActive
            ? "transform 0.4s ease-out"
            : "transform 0.7s ease-in-out",
          willChange: "transform",
        }}
      >
        <FadeIn delay={0.6} y={30}>
          <img
            src="assets/images/portrait.png"
            alt="Portrait"
            className="w-full h-auto select-none pointer-events-none"
            draggable="false"
          />
        </FadeIn>
      </div>

      {/* Bottom bar */}
      <div className="mt-auto flex justify-between items-end pb-7 sm:pb-8 md:pb-10 px-6 md:px-10 relative z-20">
        <FadeIn delay={0.35} y={20}>
          <p
            className="text-[#D7E2EA] font-light uppercase tracking-wide leading-snug max-w-[160px] sm:max-w-[220px] md:max-w-[260px]"
            style={{ fontSize: "clamp(0.75rem, 1.4vw, 1.5rem)" }}
          >
            software engineer with a founding track record
          </p>
        </FadeIn>

        <FadeIn delay={0.5} y={20}>
          <a href="contact.html">
            <ContactButton />
          </a>
        </FadeIn>
      </div>
    </section>
  );
}

Object.assign(window, { HeroSection });