/* global React, window */
const { FadingVideo, BlurText, Reveal, Starfield, GlassChip, GlassButton, Icon } = window;

function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  React.useEffect(() => {
    const on = () => setScrolled(window.scrollY > 40);
    on();
    window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);

  const links = [
    { label: "工作经历", href: "#work", en: "WORK" },
    { label: "Web Coding", href: "#works", en: "CODING" },
    { label: "个人兴趣", href: "#life", en: "LIFE" }
  ];

  const onJump = (e, href) => {
    e.preventDefault();
    setMenuOpen(false);
    const el = document.querySelector(href);
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  return (
    <header className="fixed top-11 md:top-4 left-0 right-0 z-50 px-4 md:px-5 pointer-events-none">
      <div className="portfolio-topbar-grid mx-auto w-full max-w-[1600px] grid grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center">
        {/* logo */}
        <a href="#top" onClick={(e) => onJump(e, "#top")} className="pointer-events-auto justify-self-start liquid-glass rounded-full h-11 pl-2 pr-2 md:pr-5 py-1.5 flex items-center gap-3">
          <span className="liquid-glass-strong rounded-full h-8 w-8 flex items-center justify-center font-heading italic text-lg">林</span>
          <span className="hidden md:inline font-cn text-sm tracking-[0.2em] text-white/90">林宜静 · YIJING</span>
        </a>
        {/* center pill */}
        <nav
          className="portfolio-main-nav liquid-glass rounded-full h-11 px-1.5 py-1.5 hidden lg:flex items-center gap-1 pointer-events-auto justify-self-center"
        >
          {links.map((l) => (
            <a key={l.href} href={l.href} onClick={(e) => onJump(e, l.href)}
              className="font-cn text-sm text-white/85 hover:text-white px-4 py-2 rounded-full hover:bg-white/5 transition-colors">
              {l.label}
            </a>
          ))}
        </nav>
        {/* mobile menu button */}
        <button
          type="button"
          aria-label="菜单"
          onClick={() => setMenuOpen((o) => !o)}
          className="pointer-events-auto justify-self-end lg:hidden liquid-glass rounded-full w-10 h-10 flex items-center justify-center"
        >
          <span className="relative w-4 h-3 flex flex-col justify-between">
            <span className={"block h-[1.5px] w-full bg-white rounded-full transition-all duration-300 " + (menuOpen ? "translate-y-[5.5px] rotate-45" : "")}></span>
            <span className={"block h-[1.5px] w-full bg-white rounded-full transition-all duration-300 " + (menuOpen ? "opacity-0" : "")}></span>
            <span className={"block h-[1.5px] w-full bg-white rounded-full transition-all duration-300 " + (menuOpen ? "-translate-y-[5.5px] -rotate-45" : "")}></span>
          </span>
        </button>
      </div>

      {/* mobile dropdown */}
      <div className={"lg:hidden mx-auto max-w-6xl mt-2 transition-all duration-300 origin-top pointer-events-auto " + (menuOpen ? "opacity-100 scale-100" : "opacity-0 scale-95 pointer-events-none")}>
        <nav className="liquid-glass rounded-3xl p-2 flex flex-col">
          {links.map((l) => (
            <a key={l.href} href={l.href} onClick={(e) => onJump(e, l.href)}
              className="flex items-center justify-between px-4 py-3 rounded-2xl hover:bg-white/5 transition-colors">
              <span className="font-cn text-base text-white/90">{l.label}</span>
              <span className="font-mono text-[10px] tracking-[0.25em] text-white/40">{l.en}</span>
            </a>
          ))}
        </nav>
      </div>
    </header>
  );
}

function Hero() {
  const { motion } = window.Motion || {};
  const MD = motion ? motion.div : "div";
  const heroAnim = motion
    ? {
        initial: { opacity: 0, y: 18 },
        animate: { opacity: 1, y: 0 },
        transition: { duration: 1.2, delay: 0, ease: [0.22, 0.61, 0.36, 1] }
      }
    : {};

  const TITLE = "让 AI 成为新的创作语言";
  const titleStyle = "xiaowei";
  const titleStyles = {
    // Ref 1 「星河来信」— luminous brush calligraphy, white core → cyan-blue halo
    xinghe: {
      fontFamily: "'Ma Shan Zheng', cursive",
      color: "#f4f9ff",
      letterSpacing: "0.1em",
      fontWeight: 400,
      fontSize: "clamp(2.1rem, 6.2vw, 5.4rem)",
      textShadow:
        "0 0 6px rgba(226,240,255,.95), 0 0 16px rgba(140,195,255,.9), 0 0 36px rgba(70,140,235,.75), 0 0 72px rgba(40,95,205,.55)"
    },
    // Ref 2 「我要全力奔向你」— heavy condensed gothic, metallic sheen + chromatic light
    jiguang: {
      fontFamily: "'Noto Sans SC', sans-serif",
      fontWeight: 900,
      letterSpacing: "0.01em",
      fontSize: "clamp(1.9rem, 5.6vw, 4.8rem)",
      transform: "skewX(-9deg) scaleX(0.95)",
      backgroundImage:
        "linear-gradient(100deg,#93acc8 0%,#ffffff 36%,#e2ecf8 52%,#8aa4c2 78%,#cdddef 100%)",
      WebkitBackgroundClip: "text",
      backgroundClip: "text",
      color: "transparent",
      filter:
        "drop-shadow(-2px 0 1px rgba(255,70,110,.5)) drop-shadow(2px 0 1px rgba(60,200,255,.55)) drop-shadow(0 0 26px rgba(150,200,255,.6))"
    },
    // Original — airy thin Song display, now shown bold (stroke-thickened)
    xiaowei: {
      fontFamily: "'ZCOOL XiaoWei', serif",
      color: "#ffffff",
      letterSpacing: "0.06em",
      fontWeight: 400,
      fontSize: "clamp(1.8rem, 5.3vw, 4.7rem)",
      WebkitTextStroke: "0.9px #ffffff",
      textShadow: "0 0 1px #ffffff, 0 4px 40px rgba(0,0,0,.7)"
    }
  };
  const styleOptions = [
    ["xinghe", "星河 · 流光毛笔"],
    ["jiguang", "疾光 · 透视黑体"],
    ["xiaowei", "小薇 · 空灵宋体"]
  ];

  return (
    <section id="top" className="relative min-h-[50vh] md:min-h-screen w-full overflow-hidden bg-black">
      {/* ── Layer -1 · dynamic deep-space nebula backdrop (底图) ────── */}
      <div className="absolute inset-0 z-0 overflow-hidden pointer-events-none">
        <div className="nebula-field absolute inset-[-25%]"></div>
        <div className="nebula-field nebula-field--b absolute inset-[-25%]"></div>
      </div>

      {/* ── Layer 0 · original video 头图 (21:9 contain), over the nebula ────── */}
      <div className="absolute inset-0 z-0 flex items-start md:items-center justify-center pt-[195px] md:pt-0">
        <FadingVideo
          src="assets/hero.mp4"
          poster="assets/hero-poster.jpg"
          videoId="hero-video"
          className="max-w-full max-h-full hero-video-el"
          style={{
            width: "100%",
            aspectRatio: "21 / 9",
            objectFit: "contain",
            transform: "translateY(40px)"
          }}
          loop
        />
        {/* black mask above (so top is darker; title legible) */}
        <div className="absolute inset-x-0 top-0 h-[55%] bg-gradient-to-b from-black via-black/80 to-transparent pointer-events-none"></div>
        {/* bottom fade into section below */}
        <div className="absolute inset-x-0 bottom-0 h-32 bg-gradient-to-b from-transparent to-black pointer-events-none"></div>
      </div>

      {/* ── Layer 1 · rotating nebula orbits (CSS, extends beyond viewport) ────── */}
      <div className="absolute inset-0 z-[1] pointer-events-none overflow-visible">
        <div className="absolute left-1/2 top-[58%] -translate-x-1/2 -translate-y-1/2" style={{ width: "180vw", height: "180vw", maxWidth: 2400, maxHeight: 2400 }}>
          {/* orbit ring 1 - slow */}
          <div className="absolute inset-0 rounded-full opacity-40"
               style={{
                 background: "conic-gradient(from 0deg, transparent 0%, rgba(120,160,255,0.0) 20%, rgba(140,180,255,0.18) 40%, rgba(180,200,255,0.28) 50%, rgba(140,180,255,0.18) 60%, transparent 80%, transparent 100%)",
                 mask: "radial-gradient(circle, transparent 38%, #000 41%, #000 44%, transparent 47%)",
                 WebkitMask: "radial-gradient(circle, transparent 38%, #000 41%, #000 44%, transparent 47%)",
                 animation: "spinSlow 60s linear infinite",
                 willChange: "transform"
               }}></div>
          {/* orbit ring 2 - medium, reverse */}
          <div className="absolute inset-0 rounded-full opacity-35"
               style={{
                 background: "conic-gradient(from 90deg, transparent 0%, rgba(170,140,255,0.22) 25%, rgba(220,200,255,0.32) 35%, rgba(170,140,255,0.22) 45%, transparent 75%)",
                 mask: "radial-gradient(circle, transparent 28%, #000 31%, #000 33%, transparent 36%)",
                 WebkitMask: "radial-gradient(circle, transparent 28%, #000 31%, #000 33%, transparent 36%)",
                 animation: "spinRev 90s linear infinite",
                 willChange: "transform"
               }}></div>
          {/* orbit ring 3 - outer wide */}
          <div className="absolute inset-0 rounded-full opacity-30"
               style={{
                 background: "conic-gradient(from 180deg, transparent 0%, transparent 10%, rgba(120,180,255,0.12) 30%, rgba(180,220,255,0.22) 45%, rgba(120,180,255,0.12) 60%, transparent 80%)",
                 mask: "radial-gradient(circle, transparent 47%, #000 50%, #000 52%, transparent 55%)",
                 WebkitMask: "radial-gradient(circle, transparent 47%, #000 50%, #000 52%, transparent 55%)",
                 animation: "spinSlow 120s linear infinite",
                 willChange: "transform"
               }}></div>
        </div>
        {/* ambient starfield drifting */}
        <Starfield density={70} className="absolute inset-0 opacity-70" />
        <div className="absolute inset-0 stars opacity-25"></div>
      </div>

      <Nav />

      {/* ── Layer 2 · text content, no frame ────── */}
      <div className="relative z-10 min-h-[50vh] md:min-h-screen flex flex-col px-6 md:px-12 pt-28 md:pt-40 pb-6 md:pb-12">
        <div className="flex flex-col items-center text-center max-w-6xl mx-auto w-full">
          <MD className="md:whitespace-nowrap mb-6 mt-4" {...heroAnim}>
            <h1 className="leading-[1.14] inline-block tracking-tight"
                style={{ fontSize: "clamp(1.65rem, 6vw, 5.4rem)", color: "#ffffff", textShadow: "0 2px 30px rgba(0,0,0,.55)" }}>
              <span className="font-cn font-light">让 </span>
              <span className="font-heading italic">AI</span>
              <span className="font-cn font-light"> 成为新的创作语言</span>
            </h1>
          </MD>

          <Reveal delay={0.3}>
            <p className="font-cn text-white/85 text-sm md:text-base max-w-xl mt-2 leading-relaxed"
               style={{ textShadow: "0 2px 20px rgba(0,0,0,.6)" }}>
              AI 产品经理 / <span className="italic font-heading">剪映 CapCut</span> 视频创作 × Agent
            </p>
          </Reveal>
        </div>

        {/* push the scroll cue to the bottom of viewport */}
        <div className="flex-1"></div>

        <Reveal delay={0.45}>
          <div className="max-w-6xl mx-auto w-full flex items-center justify-between font-mono text-[10px] text-white/55 tracking-[0.25em]">
            <span>◉ 00 / 04 ── INTRO</span>
            <span className="hidden sm:flex items-center gap-2">
              SCROLL <span className="h-[1px] w-12 bg-gradient-to-r from-white/70 to-transparent"></span> WORK
            </span>
            <span>SHENZHEN · CN</span>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero });