function Nav() {
  return (
    <nav className="lo-nav">
      <a href="#top" className="lo-logo">
        <img src="../../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" style={{ fontFamily: '-apple-system', borderRadius: '0px' }}>
        別讓你的 <span className="lo-en">AI</span> 代理<br/>
        <span className="lo-accent" style={{ fontFamily: '"Hiragino Sans"' }}>成為引狼入室的內鬼</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>
  );
}