function Nav() {
  const lang = useLang();
  const T = window.__I18N__[lang].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">{T.defense}</a>
        <a href="#demo">{T.demo}</a>
        <a href="#waitlist" className="lo-btn lo-btn-primary lo-btn-sm">
          {T.cta} <span className="lo-arrow">{T.ctaArrow}</span>
        </a>
        <LangSwitch />
      </div>
    </nav>
  );
}

function Hero() {
  const lang = useLang();
  const T = window.__I18N__[lang].hero;
  return (
    <section className="lo-hero" id="top" style={{ borderRadius: '10px' }}>
      <span className="lo-pill">{T.pill}</span>
      <h1 className="lo-display lo-display-tight" style={{ borderRadius: '0px' }}>
        <span className="lo-line">{T.titleA}</span>
        <span className="lo-line lo-accent">{T.titleB}</span>
      </h1>
      <p className="lo-sub">{T.sub}</p>

      <div className="lo-hero-cta">
        <a href="#waitlist" className="lo-btn lo-btn-primary lo-btn-lg">
          {T.ctaPrimary} <span className="lo-arrow">→</span>
        </a>
        <a href="#demo" className="lo-btn lo-btn-secondary lo-btn-lg">{T.ctaSecondary}</a>
      </div>
      <div className="lo-eyebrow lo-hero-sub-label">{T.eyebrow}</div>
    </section>
  );
}