// Shared bits — store badges, nav

function AppStoreBadge() {
  return (
    <a className="store-badge" href="https://apps.apple.com/app/steplet/id6769903201" aria-label="App Store でダウンロード">
      <div className="store-badge__icon">
        <svg width="22" height="26" viewBox="0 0 22 26" fill="currentColor">
          <path d="M17.6 13.7c-.03-2.8 2.3-4.15 2.4-4.22-1.32-1.92-3.36-2.18-4.08-2.21-1.74-.18-3.4 1.02-4.28 1.02-.9 0-2.25-1-3.7-.97-1.9.03-3.66 1.1-4.65 2.8-1.99 3.44-.51 8.53 1.42 11.32.95 1.36 2.07 2.88 3.53 2.83 1.42-.06 1.96-.92 3.67-.92 1.7 0 2.18.92 3.68.89 1.52-.03 2.48-1.38 3.4-2.75 1.07-1.58 1.51-3.12 1.53-3.2-.04-.02-2.93-1.12-2.96-4.46zM14.78 5.36c.79-.95 1.31-2.28 1.17-3.6-1.13.05-2.5.75-3.31 1.7-.73.84-1.36 2.18-1.19 3.48 1.26.1 2.54-.64 3.33-1.58z"/>
        </svg>
      </div>
      <div className="store-badge__text">
        <span className="store-badge__small">Download on the</span>
        <span className="store-badge__big">App Store</span>
      </div>
    </a>
  );
}

function GooglePlayBadge() {
  return (
    <a className="store-badge" href="https://play.google.com/store/apps/details?id=app.steplet.mobile" aria-label="Google Play でダウンロード">
      <div className="store-badge__icon">
        <svg width="24" height="26" viewBox="0 0 24 26" fill="none">
          <path d="M2.5 1.4c-.32.34-.5.86-.5 1.55v20.1c0 .69.18 1.21.5 1.55l.07.07L13.5 13.55v-.1L2.57 1.32l-.07.08z" fill="#34A0FF"/>
          <path d="M17.13 17.4l-3.63-3.85v-.1L17.13 9.6l.08.05 4.3 2.4c1.23.69 1.23 1.82 0 2.51l-4.3 2.4-.08.04z" fill="#FFCE3D"/>
          <path d="M17.21 17.35L13.5 13.5 2.5 24.6c.41.42 1.07.47 1.83.05l12.88-7.3" fill="#FF5050"/>
          <path d="M17.21 9.65L4.33.34C3.57-.07 2.91-.03 2.5.4L13.5 13.5l3.71-3.85z" fill="#3BC07F"/>
        </svg>
      </div>
      <div className="store-badge__text">
        <span className="store-badge__small">GET IT ON</span>
        <span className="store-badge__big">Google Play</span>
      </div>
    </a>
  );
}

function Nav() {
  return (
    <nav className="nav">
      <a className="nav__brand" href="#top">
        <img src={res('appLogo','assets/app_logo.png')} alt="Steplet" />
        <span className="nav__wordmark">STEPLET</span>
      </a>
      <div className="nav__links">
        <a href="#about">Stepletとは</a>
        <a href="#flow">遊び方</a>
        <a href="/contact">お問い合わせ</a>
        <a href="#download">ダウンロード</a>
      </div>
      <a className="nav__cta" href="#download">
        ダウンロード
        <span style={{fontSize:14}}>→</span>
      </a>
    </nav>
  );
}

window.Nav = Nav;
window.AppStoreBadge = AppStoreBadge;
window.GooglePlayBadge = GooglePlayBadge;
