function Nav() {
  return (
    <nav className="lo-nav">
      <a href="#top" className="lo-logo">
        <img src={(window.__resources && window.__resources.mascotPng) || "../../assets/octopus-mascot.png"} alt="" />
        <span>Little Octopus</span>
      </a>
      <div className="lo-nav-links">
        <a href="#features">防禦機制</a>
        <a href="#demo">互動演示</a>
        <a href="#waitlist" className="lo-btn lo-btn-primary lo-btn-sm">立即預約 <span className="lo-arrow">→</span></a>
      </div>
    </nav>
  );
}

function Hero() {
  return (
    <section className="lo-hero" id="top" style={{ borderRadius: '10px' }}>
      <span className="lo-pill">⚡ 針對 2026 Claude Code · Cursor · Copilot Agent 安全最佳化</span>
      <h1 className="lo-display lo-display-tight" style={{ borderRadius: '0px' }}>
        <span className="lo-line">別讓你的 AI 助手</span>
        <span className="lo-line lo-accent">成為引狼入室的內鬼</span>
      </h1>
      <p className="lo-sub">
        專為自主式 AI agent 使用者打造。無論是上網檢索、接收郵件，還是下載 Skill 與擴充功能——我們都在行為邊界為你守候，主動阻斷惡意攻擊。
      </p>

      <div className="lo-hero-cta">
        <a href="#waitlist" className="lo-btn lo-btn-primary lo-btn-lg">免費申請早鳥資格 <span className="lo-arrow">→</span></a>
        <a href="#demo" className="lo-btn lo-btn-secondary lo-btn-lg">查看Agent被攻擊的瞬間</a>
      </div>
      <div className="lo-eyebrow lo-hero-sub-label">Defense Mechanism</div>
    </section>
  );
}