---
import { localePath, t, type Lang } from '../../i18n/ui';
interface Props { lang: Lang }
const { lang } = Astro.props;
const ui = t(lang);
const s = ui.verifier.soon;
const n = s.notify;
---
<section class="shero night" aria-labelledby="shero-title">
  <div class="container shero__inner">
    <div class="shero__text">
      <p class="eyebrow">{s.eyebrow}</p>
      <h1 id="shero-title" class="display shero__title">
        {s.title.map((line, i) => <span class:list={['line', { 'line--muted': i > 0 }]}>{line}</span>)}
      </h1>
      <p class="shero__lead">{s.lead}</p>
    </div>

    <form class="signup hud-frame" id="notify" action="/notify" method="post" lang={lang} aria-labelledby="notify-title">
      <div class="signup__head">
        <h2 id="notify-title" class="signup__title">{n.title}</h2>
        <p class="signup__body">{n.body}</p>
      </div>
      <input type="hidden" name="lang" value={lang} />
      <input type="hidden" name="list" value="cipherverifier-alpha" />
      <p class="visually-hidden" aria-hidden="true">
        <label for="notify-website">{ui.contact.form.honeypot}</label>
        <input type="text" id="notify-website" name="website" tabindex="-1" autocomplete="off" />
      </p>
      <div class="signup__field">
        <label class="signup__label" for="notify-email">{n.email}</label>
        <input class="signup__input" id="notify-email" name="email" type="email" autocomplete="email" placeholder={n.placeholder} required />
      </div>
      <div class="signup__consent">
        <input id="notify-consent" name="consent" type="checkbox" value="yes" required />
        <label for="notify-consent">{n.consent} <a href={localePath(lang, '/privacy')}>{n.privacy}</a></label>
      </div>
      <button class="button signup__submit" type="submit">{n.submit}</button>
    </form>

    <!-- Status strip: the menu bar's HUD language, set along the foot of the hero. -->
    <dl class="readout hud-frame" aria-label={s.status.label}>
      <div class="readout__cell readout__cell--head">{s.status.label}</div>
      {s.status.rows.map((r) => (
        <div class="readout__cell">
          <dt>{r.key}</dt>
          <dd>{'live' in r && r.live && <span class="readout__live" aria-hidden="true" />}{r.value}</dd>
        </div>
      ))}
    </dl>
  </div>
</section>

<style>
  .line { display: block; }
  .line--muted { color: var(--ink-muted); }
  .shero__inner {
    display: grid;
    gap: var(--space-8);
    padding-block: var(--space-9) var(--space-7);
    min-height: calc(100svh - var(--header-height));
    align-content: end;
  }
  .shero__text { display: grid; gap: var(--space-5); justify-items: start; }
  .shero__title { text-wrap: balance; }
  .shero__lead { max-width: 26em; color: var(--ink-muted); }

  /* Fade the headline in line by line: the page's one load moment. */
  .shero__title .line, .shero__lead, .signup, .readout {
    opacity: 0;
    animation: shero-in var(--dur-slow) var(--ease) forwards;
  }
  .shero__title .line:nth-child(1) { animation-delay: 120ms; }
  .shero__title .line:nth-child(2) { animation-delay: 280ms; }
  .shero__lead { animation-delay: 440ms; }
  .signup, .readout { animation-delay: 600ms; }
  @keyframes shero-in { to { opacity: 1; } }
  @media (prefers-reduced-motion: reduce) {
    .shero__title .line, .shero__lead, .signup, .readout { animation: none; opacity: 1; }
  }

  /* Sign-up: a framed instrument panel. */
  .signup {
    --hud-line: var(--hud-line-on-night);
    display: grid;
    gap: var(--space-5);
    padding: var(--space-6);
    align-content: start;
    justify-items: start;
  }
  .signup__head { display: grid; gap: var(--space-2); }
  .signup__title { font-size: var(--step-h3); letter-spacing: var(--track-h3); line-height: var(--leading-h3); font-weight: var(--weight-medium); }
  .signup__body { color: var(--ink-muted); }
  .signup__field { display: grid; gap: var(--space-2); width: 100%; }
  .signup__label { font-size: var(--step-small); line-height: var(--leading-small); color: var(--ink-muted); }
  .signup__input {
    width: 100%;
    min-width: 0;
    background: transparent;
    border: 0;
    border-bottom: var(--hairline) solid var(--line);
    border-radius: 0;
    padding: var(--space-3) 0;
    transition: border-color var(--dur-fast) var(--ease);
  }
  .signup__input::placeholder { color: var(--ink-muted); opacity: 0.7; }
  .signup__input:focus-visible { border-bottom-color: currentColor; }
  .signup__consent {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-3);
    align-items: start;
    font-size: var(--step-small);
    line-height: var(--leading-small);
    color: var(--ink-muted);
  }
  .signup__consent input { width: 1.1em; height: 1.1em; margin: 0.15em 0 0; accent-color: var(--paper); }
  .signup__consent a { color: var(--ink); text-decoration: underline; text-decoration-thickness: var(--hairline); text-underline-offset: 0.2em; }

  /* Readout: stacked on small screens, one strip of cells on wide ones. */
  .readout {
    --hud-line: var(--hud-line-on-night);
    display: grid;
    font-family: var(--font-mono);
    font-size: var(--step-micro);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    line-height: var(--leading-small);
  }
  .readout__cell {
    display: grid;
    grid-template-columns: 8rem 1fr;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
  }
  .readout__cell + .readout__cell { border-top: var(--hairline) solid var(--line-on-night); }
  .readout__cell--head, .readout dt { color: var(--ink-muted); }
  .readout dd { display: flex; align-items: center; gap: var(--space-2); }
  .readout__live { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--signal); flex: none; }

  @media (max-width: 30rem) {
    .signup { padding: var(--space-5); }
  }

  /* Wide: headline across seven columns, sign-up across four beside it, the strip along the foot. */
  @media (min-width: 64rem) {
    .shero__inner {
      grid-template-columns: repeat(12, minmax(0, 1fr));
      column-gap: var(--gap);
      row-gap: var(--space-9);
      align-items: end;
    }
    .shero__text { grid-column: 1 / span 7; }
    .signup { grid-column: 9 / span 4; }
    .readout { grid-column: 1 / -1; grid-template-columns: 1fr 2fr 2fr 2fr; }
    .readout__cell { grid-template-columns: 1fr; gap: var(--space-1); padding: var(--space-4) var(--space-5); }
    .readout__cell + .readout__cell { border-top: 0; border-left: var(--hairline) solid var(--line-on-night); }
  }
</style>