// Hero — full-viewport cinematic video background with liquid-glass chrome.

const HERO_VIDEO =
  "https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260418_080021_d598092b-c4c2-4e53-8e46-94cf9064cd50.mp4";

// TODO(Mikky): fill in Instagram, TikTok and Spotify URLs.
const SOCIALS = [
  { name: "Instagram", href: "#" },
  { name: "TikTok", href: "#" },
  { name: "GitHub", href: "https://github.com/thaiduynguyen133" },
  { name: "LinkedIn", href: "https://www.linkedin.com/in/thai-duy-nguyen-367b8a212/" },
  { name: "Spotify", href: "#" },
];

const heroEntrance = (delay) => ({
  initial: { filter: "blur(10px)", opacity: 0, y: 20 },
  animate: { filter: "blur(0px)", opacity: 1, y: 0 },
  transition: { duration: 0.8, ease: "easeOut", delay },
});

function Hero() {
  const { motion } = window.Motion;
  const {
    FadingVideo,
    BlurText,
    ArrowUpRight,
    ClockIcon,
    GlobeIcon,
    Navbar,
    ParallaxLayer,
    TiltCard,
  } = window;

  return (
    <section id="home" className="relative h-screen bg-black overflow-hidden">
      {/* Background video — 120% scale (headroom for parallax), no overlay */}
      <ParallaxLayer strength={30} className="absolute inset-0 z-0">
        <FadingVideo
          src={HERO_VIDEO}
          className="absolute left-1/2 top-0 -translate-x-1/2 object-cover object-top"
          style={{ width: "120%", height: "120%" }}
        />
      </ParallaxLayer>

      <div className="relative z-10 h-full flex flex-col">
        <Navbar />

        {/* Hero content — drifts gently opposite the video for depth */}
        <ParallaxLayer
          strength={-10}
          className="flex-1 flex flex-col items-center justify-center text-center pt-24 px-4"
        >
          {/* Badge */}
          <motion.div {...heroEntrance(0.4)}>
            <div className="liquid-glass rounded-full flex items-center gap-3 p-1">
              <span className="rounded-full bg-white text-black px-3 py-1 text-xs font-semibold font-body">
                New
              </span>
              <span className="text-sm text-white/90 font-body pr-3">
                Open for freelance projects &amp; collabs — 2026
              </span>
            </div>
          </motion.div>

          {/* Headline */}
          <div className="mt-6">
            <BlurText
              text="I Turn Ideas Into Things People Use"
              delay={0.4}
              className="text-6xl md:text-7xl lg:text-[5.5rem] font-heading italic text-white leading-[0.8] max-w-2xl justify-center tracking-[-4px]"
            />
          </div>

          {/* Subheading */}
          <motion.p
            {...heroEntrance(0.8)}
            className="mt-4 text-sm md:text-base text-white max-w-2xl font-body font-light leading-tight"
          >
            Mikky Thai — Creative Technologist. I build websites and apps, design
            products, run social media, and make music. Simple as that: things you
            can use, watch, or listen to.
          </motion.p>

          {/* CTAs */}
          <motion.div {...heroEntrance(1.1)} className="flex items-center gap-6 mt-6">
            <a
              href="#work"
              className="liquid-glass-strong rounded-full px-5 py-2.5 text-sm font-medium text-white font-body flex items-center gap-2 transition-transform duration-300 hover:scale-105"
            >
              View My Work
              <ArrowUpRight className="h-5 w-5" />
            </a>
            <a
              href="#contact"
              className="text-sm font-medium text-white font-body flex items-center gap-2 transition-opacity duration-300 hover:opacity-70"
            >
              Contact Me
              <ArrowUpRight className="h-4 w-4" />
            </a>
          </motion.div>

          {/* Stats */}
          <motion.div {...heroEntrance(1.3)} className="flex items-stretch gap-4 mt-8">
            <TiltCard
              max={10}
              className="liquid-glass p-5 w-[220px] rounded-[1.25rem] flex flex-col items-start text-left"
            >
              <ClockIcon className="h-7 w-7 text-white" />
              <div className="mt-auto pt-6">
                <div className="font-heading italic text-white text-4xl tracking-[-1px] leading-none">
                  6+ Yrs
                </div>
                <div className="text-xs text-white font-body font-light mt-2">
                  Making things for the internet
                </div>
              </div>
            </TiltCard>
            <TiltCard
              max={10}
              className="liquid-glass p-5 w-[220px] rounded-[1.25rem] flex flex-col items-start text-left"
            >
              <GlobeIcon className="h-7 w-7 text-white" />
              <div className="mt-auto pt-6">
                <div className="font-heading italic text-white text-4xl tracking-[-1px] leading-none">
                  5
                </div>
                <div className="text-xs text-white font-body font-light mt-2">
                  Crafts — web, apps, product, social, music
                </div>
              </div>
            </TiltCard>
          </motion.div>
        </ParallaxLayer>

        {/* Socials (partners row) */}
        <motion.div
          {...heroEntrance(1.4)}
          className="flex flex-col items-center gap-4 pb-8"
        >
          <div className="liquid-glass rounded-full px-3.5 py-1 text-xs font-medium text-white font-body">
            Find me across the internet
          </div>
          <div className="flex items-center gap-12 md:gap-16 flex-wrap justify-center">
            {SOCIALS.map((s) => (
              <a
                key={s.name}
                href={s.href}
                {...(s.href.startsWith("http")
                  ? { target: "_blank", rel: "noreferrer" }
                  : {})}
                className="font-heading italic text-white text-2xl md:text-3xl tracking-tight transition-transform duration-300 hover:-translate-y-1"
              >
                {s.name}
              </a>
            ))}
          </div>
        </motion.div>
      </div>
    </section>
  );
}

window.Hero = Hero;