const { motion: HeroMotion } = window.Motion;

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

const entrance = {
  initial: { filter: "blur(10px)", opacity: 0, y: 20 },
  animate: { filter: "blur(0px)", opacity: 1, y: 0 },
};

const easeOut = [0, 0, 0.2, 1];

function Navbar() {
  const links = [
    { label: "首页", href: "#home" },
    { label: "个人优势", href: "#capabilities" },
    { label: "专业技能", href: "#capabilities" },
    { label: "项目经历", href: "#capabilities" },
    { label: "联系方式", href: "mailto:nsmith0303@live.hccc.edu" },
  ];

  return (
    <nav className="pointer-events-none fixed left-0 top-4 z-50 w-full px-4 md:px-8 lg:px-16" aria-label="主导航">
      <div className="mx-auto flex w-full items-center justify-between">
        <a
          href="#home"
          aria-label="杨佳澎主页"
          className="liquid-glass pointer-events-auto flex h-12 w-12 shrink-0 items-center justify-center rounded-full font-heading text-[2rem] italic leading-none text-white"
        >
          y
        </a>

        <div className="liquid-glass pointer-events-auto hidden items-center rounded-full px-1.5 py-1.5 lg:flex">
          {links.map((link) => (
            <a
              key={link.label}
              href={link.href}
              className="whitespace-nowrap px-3 py-2 font-body text-sm font-medium text-white/90 hover:text-white"
            >
              {link.label}
            </a>
          ))}
          <a
            href="mailto:nsmith0303@live.hccc.edu"
            className="ml-1 flex items-center gap-1.5 whitespace-nowrap rounded-full bg-white px-4 py-2 font-body text-sm font-medium text-black"
          >
            邮件联系
            <ArrowUpRight className="h-4 w-4" />
          </a>
        </div>

        <div className="h-12 w-12 shrink-0" aria-hidden="true" />
      </div>
    </nav>
  );
}

function StatCard({ icon, value, label }) {
  return (
    <article className="liquid-glass flex w-[min(220px,43vw)] flex-col rounded-[1.25rem] p-4 text-left sm:w-[220px] sm:p-5">
      <div className="flex h-7 w-7 items-center justify-center text-white">{icon}</div>
      <div className="mt-7 font-heading text-3xl italic leading-none tracking-[-1px] text-white sm:text-4xl">
        {value}
      </div>
      <p className="mt-2 font-body text-[11px] font-light leading-tight text-white sm:text-xs">{label}</p>
    </article>
  );
}

function Partners() {
  return (
    <HeroMotion.div
      {...entrance}
      transition={{ duration: 0.7, delay: 1.4, ease: easeOut }}
      className="flex flex-col items-center gap-4 px-4 pb-8"
    >
      <div className="liquid-glass max-w-[94vw] rounded-full px-3.5 py-1 text-center font-body text-[11px] font-medium text-white sm:text-xs">
        唐山 · 随时到岗 · 185 3257 8678 · nsmith0303@live.hccc.edu
      </div>
      <div className="flex max-w-full flex-wrap items-center justify-center gap-x-8 gap-y-1 font-heading text-2xl italic tracking-tight text-white md:gap-x-16 md:text-3xl">
        {["Linux", "Shell", "Nginx", "MySQL", "Git"].map((skill) => (
          <span key={skill}>{skill}</span>
        ))}
      </div>
    </HeroMotion.div>
  );
}

function Hero() {
  return (
    <section id="home" className="hero-section relative flex h-screen min-h-[780px] flex-col overflow-hidden bg-black">
      <FadingVideo
        src={HERO_VIDEO}
        className="absolute left-1/2 top-0 z-0 -translate-x-1/2 object-cover object-top"
        style={{ width: "120%", height: "120%", opacity: 0 }}
      />

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

        <div className="flex flex-1 flex-col items-center justify-center px-4 pb-8 pt-24 text-center">
          <HeroMotion.div
            {...entrance}
            transition={{ duration: 0.7, delay: 0.4, ease: easeOut }}
            className="liquid-glass flex items-center gap-2 rounded-full p-1"
          >
            <span className="rounded-full bg-white px-3 py-1 font-body text-xs font-semibold text-black">Open</span>
            <span className="pr-3 font-body text-[11px] text-white/90 sm:text-sm">
              初级 Linux 运维工程师 · 可随时到岗
            </span>
          </HeroMotion.div>

          <BlurText
            text="Linux Operations Built on Practice"
            className="mt-5 max-w-2xl justify-center font-heading text-5xl italic leading-[0.8] tracking-[-3px] text-white sm:text-6xl md:text-7xl md:tracking-[-4px] lg:text-[5.5rem]"
          />

          <HeroMotion.p
            {...entrance}
            transition={{ duration: 0.7, delay: 0.8, ease: easeOut }}
            className="mt-4 max-w-2xl font-body text-sm font-light leading-tight text-white md:text-base"
          >
            杨佳澎，天津工业职业学院信息安全技术应用专业大专毕业生。专注 Linux 基础运维，愿从服务器巡检、
            服务管理、账号权限、日志排查与文档整理做起，持续提升网络、数据库和自动化运维能力。
          </HeroMotion.p>

          <HeroMotion.div
            {...entrance}
            transition={{ duration: 0.7, delay: 1.1, ease: easeOut }}
            className="mt-6 flex items-center gap-6"
          >
            <a
              href="#capabilities"
              className="liquid-glass-strong flex items-center gap-2 rounded-full px-5 py-2.5 font-body text-sm font-medium text-white"
            >
              查看项目实践
              <ArrowUpRight className="h-5 w-5" />
            </a>
            <a
              href="mailto:nsmith0303@live.hccc.edu"
              className="flex items-center gap-2 font-body text-sm font-medium text-white"
            >
              联系我
              <ArrowUpRight className="h-4 w-4" />
            </a>
          </HeroMotion.div>

          <HeroMotion.div
            {...entrance}
            transition={{ duration: 0.7, delay: 1.3, ease: easeOut }}
            className="mt-8 flex items-stretch gap-3 sm:gap-4"
          >
            <StatCard icon={<ClockIcon />} value="2025" label="天津工业职业学院 · 信息安全技术应用" />
            <StatCard icon={<GlobeIcon />} value="2 项" label="Linux 与 Nginx 基础运维实践" />
          </HeroMotion.div>
        </div>

        <Partners />
      </div>
    </section>
  );
}

window.Hero = Hero;