// Top Nav + Hero
const IconMenu = (p) => (
  <svg width={p.size || 20} height={p.size || 20} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
    <path d="M4 7h16M4 12h16M4 17h16" />
  </svg>
);
const IconClose = (p) => (
  <svg width={p.size || 20} height={p.size || 20} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
    <path d="M6 6l12 12M18 6 6 18" />
  </svg>
);

const NAV_LINKS = [
  { href: "#features", label: "功能" },
  { href: "#why", label: "為什麼選 Qlivo" },
  { href: "#demo", label: "互動 Demo" },
  { href: "#cta", label: "聯絡業務" },
];

const Nav = () => {
  const [open, setOpen] = useState(false);

  useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);

  const close = () => setOpen(false);

  return (
    <nav style={{
      position: "fixed", top: 0, left: 0, right: 0, zIndex: 100,
      padding: "14px 0",
      background: "rgba(10,10,15,0.6)",
      backdropFilter: "blur(20px)",
      borderBottom: "1px solid rgba(255,255,255,0.04)",
    }}>
      <div className="container nav-bar-inner" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12 }}>
        <a href="#top" onClick={close} style={{ display: "flex", alignItems: "center", gap: 10, textDecoration: "none", color: "var(--text)", minWidth: 0 }}>
          <div style={{
            width: 30, height: 30, borderRadius: 8,
            background: "linear-gradient(135deg, #3B82F6, #22D3EE)",
            display: "flex", alignItems: "center", justifyContent: "center",
            boxShadow: "0 4px 16px -4px rgba(59,130,246,0.6)",
            flexShrink: 0,
          }}>
            <IconZap size={16} style={{ color: "white" }} />
          </div>
          <div style={{ display: "flex", flexDirection: "column", lineHeight: 1 }}>
            <span style={{ fontWeight: 900, fontSize: 18, letterSpacing: "-0.02em" }}>Qlivo</span>
            <span className="mono hide-mobile" style={{ fontSize: 9, color: "var(--text-4)", letterSpacing: "0.18em", marginTop: 2 }}>QLIVO YOUR WORK</span>
          </div>
        </a>

        <div className="nav-links">
          {NAV_LINKS.map((l) => (
            <a key={l.href} href={l.href} className="nav-link">{l.label}</a>
          ))}
        </div>

        <div className="nav-actions">
          <a href="#cta" className="btn btn-primary nav-cta-desktop" style={{ padding: "10px 18px", fontSize: 14 }}>
            預約 Demo <IconArrowRight size={15}/>
          </a>
          <button
            type="button"
            className="nav-mobile-toggle"
            aria-label={open ? "關閉選單" : "開啟選單"}
            aria-expanded={open}
            onClick={() => setOpen((v) => !v)}
          >
            {open ? <IconClose /> : <IconMenu />}
          </button>
        </div>
      </div>

      {open && (
        <>
          <div className="nav-drawer-backdrop" onClick={close} aria-hidden />
          <div className="nav-drawer" role="dialog" aria-label="網站導覽">
            {NAV_LINKS.map((l) => (
              <a key={l.href} href={l.href} className="nav-drawer-link" onClick={close}>{l.label}</a>
            ))}
            <a href="#cta" className="btn btn-primary nav-drawer-cta" onClick={close}>
              預約 Demo <IconArrowRight size={15}/>
            </a>
          </div>
        </>
      )}
    </nav>
  );
};

// Auto-cycling card stack for the hero mockup
const HeroCardStack = () => {
  const isPhone = useIsMobile(600);
  const [idx, setIdx] = useState(0);
  const [swiping, setSwiping] = useState(null);
  const emails = SAMPLE_EMAILS;
  const swipeDist = isPhone ? 140 : 380;

  useEffect(() => {
    const cycle = () => {
      setSwiping(emails[idx % emails.length].swipe);
      setTimeout(() => {
        setIdx((v) => v + 1);
        setSwiping(null);
      }, 700);
    };
    const t = setTimeout(cycle, 2400);
    return () => clearTimeout(t);
  }, [idx, emails]);

  const current = emails[idx % emails.length];
  const swipeX = swiping === "right" ? swipeDist : swiping === "left" ? -swipeDist : 0;
  const swipeRot = swiping === "right" ? 18 : swiping === "left" ? -18 : 0;

  const stackStyle = {
    position: "absolute",
    width: "100%",
    maxWidth: "min(300px, 92vw)",
    height: "min(420px, 60vh)",
    left: "50%",
    transform: "translateX(-50%)",
    borderRadius: 18,
  };

  return (
    <div className="hero-card-stack">
      <div style={{
        ...stackStyle,
        transform: "translateX(-50%) rotate(3deg) scale(0.94) translateY(8px)",
        background: "var(--panel)", border: "1px solid var(--border-soft)",
        opacity: 0.4, zIndex: 1,
      }} />
      <div style={{
        ...stackStyle,
        transform: "translateX(-50%) rotate(-2deg) scale(0.97) translateY(4px)",
        background: "var(--panel)", border: "1px solid var(--border-soft)",
        opacity: 0.7, zIndex: 2,
      }} />

      <div
        key={current.id + idx}
        className="hero-stack-card stack-shadow"
        style={{
          zIndex: 4,
          transform: `translateX(calc(-50% + ${swipeX}px)) rotate(${swipeRot}deg)`,
          opacity: swiping ? 0 : 1,
          transition: "transform .65s cubic-bezier(.5,.05,.2,1), opacity .65s ease",
        }}
      >
        <EmailCard email={current} compact />
        {swiping && (
          <div style={{
            position: "absolute", top: 24, right: swiping === "right" ? 24 : "auto", left: swiping === "left" ? 24 : "auto",
            padding: "8px 14px", borderRadius: 10,
            border: `2px solid ${swiping === "right" ? "var(--green)" : "var(--orange)"}`,
            color: swiping === "right" ? "var(--green)" : "var(--orange)",
            fontWeight: 800, fontSize: 14, letterSpacing: "0.05em",
            transform: `rotate(${swiping === "right" ? -8 : 8}deg)`,
            background: "rgba(0,0,0,0.4)",
          }}>
            {swiping === "right" ? "立即回覆" : "稍後處理"}
          </div>
        )}
      </div>

      <div style={{
        position: "absolute", bottom: 8, left: 0, right: 0,
        display: "flex", justifyContent: "center", gap: 32, zIndex: 10,
      }}>
        <div style={{
          width: 52, height: 52, borderRadius: 26,
          background: "rgba(249,115,22,0.1)",
          border: "1px solid rgba(249,115,22,0.4)",
          color: "var(--orange)",
          display: "flex", alignItems: "center", justifyContent: "center",
          boxShadow: swiping === "left" ? "0 0 0 6px rgba(249,115,22,0.2)" : "none",
          transition: "box-shadow .25s",
        }}><IconRotateLeft size={22}/></div>
        <div style={{
          width: 52, height: 52, borderRadius: 26,
          background: "rgba(52,211,153,0.1)",
          border: "1px solid rgba(52,211,153,0.4)",
          color: "var(--green)",
          display: "flex", alignItems: "center", justifyContent: "center",
          boxShadow: swiping === "right" ? "0 0 0 6px rgba(52,211,153,0.2)" : "none",
          transition: "box-shadow .25s",
        }}><IconReply size={22}/></div>
      </div>

      <div className="hide-mobile-decor" style={{
        position: "absolute", top: -8, right: -12,
        display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 6,
        zIndex: 20,
      }}>
        <div className="mono" style={{
          fontSize: 10, padding: "5px 10px",
          background: "var(--bg-2)", border: "1px solid var(--border)",
          borderRadius: 999, color: "var(--cyan)",
          letterSpacing: "0.12em",
          display: "flex", gap: 6, alignItems: "center",
        }}>
          <IconSpark size={11}/> AI 已分析
        </div>
      </div>
    </div>
  );
};

const Hero = () => {
  const isPhone = useIsMobile(600);

  return (
    <section id="top" className="hero-section" style={{ position: "relative", paddingTop: 140, paddingBottom: 80, overflow: "hidden" }}>
      <div className="hide-mobile-decor glow-blue" style={{
        position: "absolute", top: -200, right: -200,
        width: 800, height: 800, pointerEvents: "none",
      }} />
      <div className="hide-mobile-decor glow-cyan" style={{
        position: "absolute", top: 200, left: -300,
        width: 600, height: 600, pointerEvents: "none",
      }} />
      <div className="grid-bg hide-mobile-decor" style={{
        position: "absolute", inset: 0,
        maskImage: "radial-gradient(ellipse at 50% 0%, black, transparent 70%)",
        pointerEvents: "none",
      }} />

      <div className="container grid-hero" style={{ position: "relative" }}>
        <div>
          <div className="hero-tagline" style={{
            display: "inline-flex", alignItems: "center", gap: 10,
            padding: "6px 14px 6px 6px",
            background: "rgba(59,130,246,0.08)",
            border: "1px solid rgba(59,130,246,0.25)",
            borderRadius: 999,
            marginBottom: 32,
          }}>
            <span className="mono" style={{
              fontSize: 10, fontWeight: 600, padding: "3px 8px", borderRadius: 999,
              background: "var(--accent)", color: "white", letterSpacing: "0.08em",
            }}>NEW</span>
            <span className="mono" style={{ fontSize: 11, color: "var(--text-2)", letterSpacing: "0.08em" }}>
              {isPhone ? "AI 多執行緒摘要" : "新版 AI 引擎 · 多執行緒摘要上線"}
            </span>
          </div>

          <h1 style={{
            fontSize: "clamp(36px, 8vw, 80px)",
            lineHeight: 1.05,
            letterSpacing: "-0.035em",
            fontWeight: 900,
            marginBottom: 28,
          }}>
            把<span style={{ color: "var(--text-3)", fontWeight: 800 }}>收件匣</span>，<br className="br-desktop"/>
            變成滑一下就<br className="br-desktop"/>
            <span style={{ position: "relative", display: "inline-block" }}>
              <span style={{
                background: "linear-gradient(90deg, #60A5FA 0%, #22D3EE 100%)",
                WebkitBackgroundClip: "text",
                WebkitTextFillColor: "transparent",
                backgroundClip: "text",
              }}>清空</span>
              <span className="hide-mobile-decor" style={{
                position: "absolute", left: 0, bottom: -6, width: "100%", height: 4,
                background: "linear-gradient(90deg, #60A5FA, #22D3EE)",
                borderRadius: 2, opacity: 0.4,
              }} />
            </span>的牌堆。
          </h1>

          <p className="hero-lead" style={{
            fontSize: isPhone ? 16 : 19,
            lineHeight: 1.6,
            color: "var(--text-2)",
            maxWidth: 540,
            marginBottom: 40,
          }}>
            {isPhone
              ? "AI 把每封信壓成一張卡片：摘要、優先級、下一步。左滑稍後、右滑回覆，3 分鐘清空收件匣。"
              : <>Qlivo 用 AI 把每封信壓縮成一張卡片：摘要、優先級、下一步動作，一眼看完。<br className="br-desktop"/>
                左滑稍後處理，右滑立即回覆 — 30 分鐘的收件匣戰役，現在 3 分鐘解決。</>}
          </p>

          <div className="hero-actions" style={{ marginBottom: 56 }}>
            <a href="#cta" className="btn btn-primary">
              預約 30 分鐘 Demo <IconArrowRight size={16}/>
            </a>
            <a href="#demo" className="btn btn-ghost">
              {isPhone ? "試玩互動 Demo" : "立即試玩互動 Demo"}
            </a>
          </div>

          <div style={{ display: "flex", flexWrap: "wrap", gap: 20, alignItems: "center" }}>
            {[
              { icon: <IconBot size={14}/>, text: "AI 摘要引擎" },
              { icon: <IconShield size={14}/>, text: "端對端加密" },
              { icon: <IconLayers size={14}/>, text: isPhone ? "邊緣部署" : "Cloudflare 邊緣部署" },
            ].map((t, i) => (
              <div key={i} style={{ display: "flex", alignItems: "center", gap: 8, color: "var(--text-3)" }}>
                <span style={{ color: "var(--text-2)" }}>{t.icon}</span>
                <span className="mono" style={{ fontSize: 11, letterSpacing: "0.08em" }}>{t.text}</span>
              </div>
            ))}
          </div>
        </div>

        <div className="hero-card-wrap">
          <HeroCardStack />
        </div>
      </div>

      <div className="container hero-stats-wrap" style={{ marginTop: 100, position: "relative" }}>
        <div className="h-line" />
        <div className="grid-stats">
          {[
            { k: "92%", v: "處理速度提升" },
            { k: "3 分鐘", v: "每日平均處理時間" },
            { k: "0", v: "資料外洩風險" },
            { k: "1,200+", v: "B2B 團隊試用中" },
          ].map((s, i) => (
            <div key={i} className="stat-cell">
              <div style={{ fontSize: 36, fontWeight: 800, letterSpacing: "-0.03em", marginBottom: 6, fontFamily: "var(--font-sans)" }}>{s.k}</div>
              <div className="mono" style={{ fontSize: 11, color: "var(--text-3)", letterSpacing: "0.12em", textTransform: "uppercase" }}>{s.v}</div>
            </div>
          ))}
        </div>
        <div className="h-line" />
      </div>
    </section>
  );
};

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