const { motion } = window.Motion;
const { useEffect, useRef, useState } = React;
const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

const reveal = (delay) => prefersReducedMotion ? {
  initial: false,
  whileInView: { filter: "blur(0px)", opacity: 1, y: 0 },
  viewport: { once: true, amount: 0.1 },
  transition: { duration: 0 },
} : {
  initial: { filter: "blur(10px)", opacity: 0, y: 20 },
  whileInView: { filter: "blur(0px)", opacity: 1, y: 0 },
  viewport: { once: true, amount: 0.1 },
  transition: { duration: 0.7, ease: "easeOut", delay },
};

const navItems = [
  ["首页", "#home"],
  ["航程", "#capabilities"],
  ["世界", "#ai-scenery"],
  ["创新", "#batch-production"],
];

function Navbar({ onBook }) {
  const [mobileOpen, setMobileOpen] = useState(false);
  return (
    <nav aria-label="主导航" className="fixed left-0 right-0 top-4 z-50 flex items-center justify-between px-5 md:px-8 lg:px-16">
      <a href="#home" aria-label="返回首页" className="liquid-glass flex h-12 w-12 items-center justify-center rounded-full font-heading text-2xl italic text-white"><span className="glass-content">越</span></a>
      <div className="liquid-glass hidden items-center rounded-full px-1.5 py-1.5 md:flex">
        <div className="glass-content flex items-center">
          {navItems.map(([label, href]) => <a key={label} href={href} className="nav-link px-3 py-2 font-body text-sm font-medium text-white/90">{label}</a>)}
          <button type="button" onClick={onBook} className="nav-link px-3 py-2 font-body text-sm font-medium text-white/90">发射计划</button>
          <button type="button" onClick={onBook} className="action ml-1 flex items-center gap-2 whitespace-nowrap rounded-full bg-white px-4 py-2 font-body text-sm font-medium text-black">预订席位 <ArrowUpRight className="h-4 w-4" /></button>
        </div>
      </div>
      <button type="button" aria-expanded={mobileOpen} aria-controls="mobile-menu" onClick={() => setMobileOpen((open) => !open)} className="liquid-glass flex h-12 w-12 items-center justify-center rounded-full font-body text-xs font-medium text-white md:invisible"><span className="glass-content">{mobileOpen ? "关闭" : "菜单"}</span></button>
      {mobileOpen && <motion.div id="mobile-menu" initial={prefersReducedMotion ? false : { opacity: 0, y: -8 }} animate={{ opacity: 1, y: 0 }} className="liquid-glass absolute left-5 right-5 top-16 rounded-[1.25rem] p-2 md:hidden">
        <div className="glass-content grid grid-cols-2 gap-1">
          {navItems.map(([label, href]) => <a key={label} href={href} onClick={() => setMobileOpen(false)} className="rounded-xl px-4 py-3 text-center font-body text-sm text-white">{label}</a>)}
          <button type="button" onClick={() => { setMobileOpen(false); onBook(); }} className="col-span-2 rounded-xl bg-white px-4 py-3 font-body text-sm font-medium text-black">预订首次航程</button>
        </div>
      </motion.div>}
    </nav>
  );
}

function StatCard({ icon, number, label }) {
  return <div className="liquid-glass card hero-stat flex flex-col rounded-[1.25rem] p-4 text-left md:p-5"><div className="glass-content">{icon}<div className="hero-stat-number mt-5 font-heading text-3xl italic leading-none tracking-[-1px] text-white md:mt-7 md:text-4xl">{number}</div><div className="mt-2 font-body text-[11px] font-light text-white md:text-xs">{label}</div></div></div>;
}

function BookingDialog({ open, onClose }) {
  const [submitted, setSubmitted] = useState(false);
  const nameRef = useRef(null);
  useEffect(() => {
    if (!open) return;
    setSubmitted(false);
    const previousOverflow = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    const onKey = (event) => event.key === "Escape" && onClose();
    window.addEventListener("keydown", onKey);
    setTimeout(() => nameRef.current?.focus(), 0);
    return () => { document.body.style.overflow = previousOverflow; window.removeEventListener("keydown", onKey); };
  }, [open, onClose]);
  if (!open) return null;
  return <div className="dialog-backdrop fixed inset-0 z-[80] flex items-center justify-center p-5" onMouseDown={onClose}>
    <motion.div role="dialog" aria-modal="true" aria-labelledby="booking-title" initial={prefersReducedMotion ? false : { opacity: 0, scale: .96, y: 16 }} animate={{ opacity: 1, scale: 1, y: 0 }} onMouseDown={(event) => event.stopPropagation()} className="liquid-glass w-full max-w-md rounded-[1.5rem] p-6 md:p-8">
      <div className="glass-content">
        <div className="flex items-start justify-between gap-4"><div><p className="font-body text-xs text-white/60">2026 首次载人航程</p><h2 id="booking-title" className="mt-2 font-heading text-4xl italic text-white">预订你的席位</h2></div><button type="button" onClick={onClose} aria-label="关闭预订窗口" className="rounded-full px-3 py-2 font-body text-sm text-white/70">关闭</button></div>
        {submitted ? <div className="py-10 text-center"><p className="font-heading text-3xl italic">登记成功</p><p className="mt-3 font-body text-sm font-light text-white/75">任务团队会在舱位开放后第一时间与你联系。</p><button type="button" onClick={onClose} className="mt-6 rounded-full bg-white px-5 py-2.5 font-body text-sm font-medium text-black">返回旅程</button></div> :
        <form className="mt-6 space-y-4" onSubmit={(event) => { event.preventDefault(); setSubmitted(true); }}>
          <label className="block font-body text-xs text-white/70">姓名<input ref={nameRef} required className="field mt-2 font-body text-sm" placeholder="请输入姓名" /></label>
          <label className="block font-body text-xs text-white/70">联系邮箱<input required type="email" className="field mt-2 font-body text-sm" placeholder="name@example.com" /></label>
          <label className="block font-body text-xs text-white/70">感兴趣的航程<select className="field mt-2 font-body text-sm" defaultValue="mars"><option value="mars">火星首次载人航程</option><option value="lunar">月球轨道旅居计划</option><option value="deep">深空探索候补名单</option></select></label>
          <button type="submit" className="action mt-2 w-full rounded-full bg-white px-5 py-3 font-body text-sm font-medium text-black">加入优先名单</button>
          <p className="text-center font-body text-[11px] font-light text-white/50">提交仅用于演示，不会发送或保存个人信息。</p>
        </form>}
      </div>
    </motion.div>
  </div>;
}

function LiftoffDialog({ open, onClose }) {
  useEffect(() => {
    if (!open) return;
    const onKey = (event) => event.key === "Escape" && onClose();
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, onClose]);
  if (!open) return null;
  return <div className="dialog-backdrop fixed inset-0 z-[80] flex items-center justify-center p-5" onMouseDown={onClose}>
    <motion.div role="dialog" aria-modal="true" aria-labelledby="liftoff-title" initial={prefersReducedMotion ? false : { opacity: 0, scale: .97 }} animate={{ opacity: 1, scale: 1 }} onMouseDown={(event) => event.stopPropagation()} className="liquid-glass w-full max-w-4xl overflow-hidden rounded-[1.5rem]">
      <div className="glass-content"><div className="flex items-center justify-between px-5 py-4"><h2 id="liftoff-title" className="font-heading text-2xl italic">观看启航</h2><button type="button" onClick={onClose} className="font-body text-sm text-white/70">关闭</button></div><video className="aspect-video w-full bg-black object-cover" src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260418_080021_d598092b-c4c2-4e53-8e46-94cf9064cd50.mp4" controls autoPlay muted playsInline /></div>
    </motion.div>
  </div>;
}

function Hero({ onBook, onLiftoff }) {
  return (
    <section id="home" className="relative flex h-[100svh] min-h-[640px] overflow-hidden bg-black">
      <FadingVideo src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260418_080021_d598092b-c4c2-4e53-8e46-94cf9064cd50.mp4" className="absolute left-1/2 top-0 z-0 -translate-x-1/2 object-cover object-top" style={{ width: "120%", height: "120%" }} />
      <div className="relative z-10 flex h-full w-full flex-col">
        <Navbar onBook={onBook} />
        <main className="hero-main flex min-h-0 flex-1 flex-col items-center justify-center px-4 pb-2 pt-20 text-center">
          <motion.div {...reveal(0.4)} className="liquid-glass mb-3 flex items-center gap-2 rounded-full py-1 pl-1"><div className="glass-content flex items-center gap-2"><span className="rounded-full bg-white px-3 py-1 font-body text-xs font-semibold text-black">新航程</span><span className="pr-3 font-body text-xs text-white/90 md:text-sm">首次载人火星航程将于 2026 年抵达</span></div></motion.div>
          <BlurText as="h1" text="越过天际 奔赴浩瀚宇宙" className="hero-heading hero-copy max-w-3xl justify-center font-heading text-[2.75rem] italic leading-[0.9] tracking-[-2px] text-white md:text-7xl md:leading-[0.82] md:tracking-[-4px] lg:text-[5.5rem]" />
          <motion.p {...reveal(0.8)} className="hero-copy mt-3 max-w-2xl font-body text-xs font-light leading-snug text-white md:text-base md:leading-tight">以从未想象过的方式探索宇宙。先锋级星舰与突破性工程，让安全而非凡的深空旅行真正触手可及。</motion.p>
          <motion.div {...reveal(1.1)} className="mt-4 flex items-center gap-4 md:gap-6">
            <button type="button" onClick={onBook} className="liquid-glass-strong action flex items-center gap-2 rounded-full px-4 py-2.5 font-body text-xs font-medium text-white md:px-5 md:text-sm"><span className="glass-content flex items-center gap-2">开启你的航程 <ArrowUpRight /></span></button>
            <button type="button" onClick={onLiftoff} className="action flex items-center gap-2 font-body text-xs font-medium text-white md:text-sm">观看启航 <Play /></button>
          </motion.div>
          <motion.div {...reveal(1.3)} className="hero-stats mt-4 flex w-full max-w-[456px] items-stretch justify-center gap-3 md:mt-6 md:gap-4"><StatCard icon={<Clock />} number="34.5 分钟" label="影像平均观看时长" /><StatCard icon={<Globe />} number="28 亿+" label="覆盖全球探索者" /></motion.div>
        </main>
        <motion.div {...reveal(1.4)} className="hero-partners flex flex-col items-center gap-2 px-4 pb-4 md:gap-3 md:pb-6">
          <div className="liquid-glass rounded-full px-3.5 py-1 font-body text-[10px] font-medium text-white md:text-xs"><span className="glass-content">与全球顶尖航天先驱共同探索</span></div>
          <div className="partner-row flex gap-5 font-heading text-lg italic tracking-tight text-white md:gap-12 md:text-2xl lg:gap-16 lg:text-3xl">{["永曜", "维拉", "顶峰", "轨道", "泽诺"].map((name) => <span key={name}>{name}</span>)}</div>
        </motion.div>
      </div>
    </section>
  );
}

const cards = [
  { id: "ai-scenery", title: "智能场景", icon: "M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21H5Zm1-4h12l-3.75-5-3 4L9 13l-3 4Z", tags: ["自然语境", "照片级真实", "无限场景", "生态氛围"], body: "智能系统会分析产品特征，生成难辨真假的自然环境——从冰岛峭壁到薄雾森林。" },
  { id: "batch-production", title: "批量制作", icon: "M4 6.47 5.76 10H20v8H4V6.47M22 4h-4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.89-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4Z", tags: ["快速扩展", "视觉统一", "高效省时", "即刻发布"], body: "数分钟内完成整条产品线的视觉塑造，为目录与社交媒体建立统一形象，无需数周精修。" },
  { id: "smart-lighting", title: "智能光影", icon: "M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1Zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7Z", tags: ["光线追踪", "物理阴影", "影棚品质", "日光同步"], body: "自动调整光线与材质，以真实阴影和自然日照实现毫无破绽的场景融合。" },
];

function CapabilityCard({ card, index }) {
  return (
    <motion.article id={card.id} {...reveal(0.15 + index * 0.12)} className="liquid-glass card capability-card scroll-mt-24 flex flex-col rounded-[1.25rem] p-5 md:p-6">
      <div className="glass-content flex h-full flex-col">
        <div className="flex items-start justify-between gap-3">
          <div className="liquid-glass flex h-11 w-11 shrink-0 items-center justify-center rounded-[0.75rem]"><span className="glass-content"><MaterialIcon path={card.icon} /></span></div>
          <div className="flex max-w-[72%] flex-wrap justify-end gap-1.5">{card.tags.map((tag) => <span key={tag} className="liquid-glass whitespace-nowrap rounded-full px-3 py-1 font-body text-[11px] text-white/90"><span className="glass-content">{tag}</span></span>)}</div>
        </div>
        <div className="flex-1" />
        <div className="mt-5"><h3 className="font-heading text-3xl italic leading-none tracking-[-1px] text-white md:text-4xl">{card.title}</h3><p className="mt-3 max-w-[32ch] font-body text-sm font-light leading-relaxed text-white/90">{card.body}</p></div>
      </div>
    </motion.article>
  );
}

function Capabilities() {
  return (
    <section id="capabilities" className="relative min-h-screen overflow-hidden bg-black">
      <FadingVideo src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260418_094631_d30ab262-45ee-4b7d-99f3-5d5848c8ef13.mp4" className="absolute inset-0 z-0 h-full w-full object-cover" />
      <div className="relative z-10 flex min-h-screen flex-col px-6 pb-8 pt-24 md:px-16 md:pb-6 md:pt-20 lg:px-20">
        <motion.header {...reveal(0)}><p className="mb-4 font-body text-sm text-white/80">// 核心能力</p><h2 className="capability-heading hero-copy font-heading text-6xl italic leading-[0.9] tracking-[-3px] text-white md:text-7xl lg:text-[5.4rem]">创作方式<br />全面进化</h2></motion.header>
        <div className="capability-grid mt-12 grid grid-cols-1 gap-5 md:mt-8 md:grid-cols-3 md:gap-6">{cards.map((card, index) => <CapabilityCard key={card.title} card={card} index={index} />)}</div>
      </div>
    </section>
  );
}

function App() {
  const [bookingOpen, setBookingOpen] = useState(false);
  const [liftoffOpen, setLiftoffOpen] = useState(false);
  return <><Hero onBook={() => setBookingOpen(true)} onLiftoff={() => setLiftoffOpen(true)} /><Capabilities /><BookingDialog open={bookingOpen} onClose={() => setBookingOpen(false)} /><LiftoffDialog open={liftoffOpen} onClose={() => setLiftoffOpen(false)} /></>;
}

window.Navbar = Navbar;
window.StatCard = StatCard;
window.BookingDialog = BookingDialog;
window.LiftoffDialog = LiftoffDialog;
window.Hero = Hero;
window.CapabilityCard = CapabilityCard;
window.Capabilities = Capabilities;
window.App = App;
ReactDOM.createRoot(document.getElementById("root")).render(<App />);