---
import Icon from './Icon.astro';
import SignupForm from './SignupForm.jsx';
import type { T } from '../i18n/strings';

interface Props { t: T }
const { t } = Astro.props;
---
<section class="hero">
  <div class="wrap grid">
    <div>
      <div class="eyebrow">{t('hero.eyebrow')}</div>
      <h1 class="h1-preline">{t('hero.h1')}</h1>
      <p class="lede">{t('hero.lede')}</p>

      <SignupForm
        client:idle
        ph={t('su.ph')}
        btn={t('su.btn')}
        ok={t('su.ok')}
        hint={t('su.hint')}
        dl={t('su.dl')}
      />

      <div class="trust">
        <span><Icon name="check" /><span>{t('hero.t1')}</span></span>
        <span><Icon name="check" /><span>{t('hero.t2')}</span></span>
        <span><Icon name="check" /><span>{t('hero.t3')}</span></span>
      </div>
    </div>

    <div class="orb-wrap">
      <div class="orb-card">
        <div class="orb">
          <svg class="ring" viewBox="0 0 184 184"><circle cx="92" cy="92" r="85" fill="none" stroke="rgba(255,255,255,.85)" stroke-width="4" stroke-linecap="round"></circle></svg>
          <Icon name="shield-check" class="ic" />
          <span class="tm">02:14:08</span>
          <span class="sf">{t('orb.cap')}</span>
        </div>
        <div class="orb-meta">
          <div class="m"><div class="k"><Icon name="arrow-down" /><span>{t('orb.down')}</span></div><div class="v">86.4<span class="orb-unit"> Mb/s</span></div></div>
          <div class="m"><div class="k"><Icon name="arrow-up" /><span>{t('orb.up')}</span></div><div class="v">12.1<span class="orb-unit"> Mb/s</span></div></div>
        </div>
        <div class="orb-node">
          <div class="cc">HK</div>
          <div class="orb-node-grow"><div class="nn">{t('orb.node')}</div><div class="ns">{t('orb.nodesub')}</div></div>
          <Icon name="chevron-right" class="orb-node-chev" />
        </div>
      </div>
    </div>
  </div>

  <div class="wrap strip">
    <span>{t('strip.txt')}</span>
    <span><Icon name="smartphone" />iOS</span>
    <span><Icon name="smartphone" />Android</span>
    <span><Icon name="laptop" />macOS</span>
    <span><Icon name="monitor" />Windows</span>
    <span><Icon name="terminal" />Linux</span>
  </div>
</section>