<?php
/**
 * grabmail.io — homepage.
 */
declare(strict_types=1);

require_once __DIR__ . '/../includes/config.php';
require_once __DIR__ . '/../includes/data.php';

$BODY_CLASS = 'page-home';
require __DIR__ . '/../includes/header.php';
?>

<!-- ─────────────────────────── hero ─────────────────────────── -->
<section class="hero" aria-labelledby="hero-h">
  <?php /* Decorative, so it carries an empty alt and is hidden from assistive
           tech. Width and height are declared to reserve the space before the
           bytes arrive — otherwise the headline jumps as it loads. */ ?>
  <div class="hero-bg" aria-hidden="true">
    <img src="<?= e(gm_asset('img/hero-1920.webp')) ?>"
         srcset="<?= e(gm_asset('img/hero-960.webp')) ?> 960w, <?= e(gm_asset('img/hero-1920.webp')) ?> 1920w"
         sizes="100vw" width="1920" height="815" alt="" fetchpriority="high" decoding="async">
  </div>

  <div class="wrap hero-in">
    <p class="eyebrow">Free · No signup · No tracking</p>
    <h1 id="hero-h" class="hero-h"><?= e(GM_TAGLINE) ?></h1>
    <p class="hero-sub">
      Grab a throwaway inbox in one click and use it to sign up, verify or test.
      Read what arrives, then walk away — everything is deleted after
      <?= (int) GM_RETENTION_DAYS ?> days.
    </p>

    <!-- the generator -->
    <div class="grab" id="grab">
      <div class="grab-card">
        <div class="grab-row">
          <label class="sr-only" for="gm-address">Your disposable email address</label>
          <input class="grab-input" id="gm-address" data-address type="text" readonly
                 spellcheck="false" autocomplete="off" value="…">
          <button class="btn btn-primary grab-btn" type="button" data-copy>
            <span data-copy-label>Copy</span>
          </button>
        </div>
        <div class="grab-meta">
          <div class="grab-domain">
            <label class="grab-domain-l" for="gm-domain">Domain</label>
            <select class="grab-select" id="gm-domain" data-domain>
              <?php foreach (GM_PUBLIC_DOMAINS as $d): ?>
              <option value="<?= e($d) ?>"><?= e('@' . $d) ?></option>
              <?php endforeach; ?>
            </select>
          </div>
          <button class="btn btn-quiet" type="button" data-new>
            <svg viewBox="0 0 16 16" class="ic" aria-hidden="true" focusable="false"><path d="M13.5 8a5.5 5.5 0 1 1-1.6-3.9M13.5 2v3h-3" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
            New address
          </button>
        </div>
      </div>

      <div class="inbox" data-inbox data-api-live="<?= GM_API_LIVE ? '1' : '0' ?>">
        <div class="inbox-hd">
          <h2 class="inbox-h">Inbox</h2>
          <p class="inbox-count" data-count>No messages yet</p>
        </div>
        <div class="inbox-body" data-inbox-body>
          <div class="inbox-empty">
            <span class="pulse" aria-hidden="true"></span>
            <p class="inbox-empty-h">Waiting for your first message</p>
            <p class="inbox-empty-p">Send something to the address above — it usually shows up in a few seconds.</p>
          </div>
        </div>
      </div>
    </div>

    <ul class="hero-facts">
      <li>No account, ever</li>
      <li>Attachments up to <?= e(GM_MAX_ATTACHMENT) ?></li>
      <li>Free REST API</li>
      <li>Auto-deleted after <?= (int) GM_RETENTION_DAYS ?> days</li>
    </ul>
  </div>
</section>

<!-- ─────────────────────── how it works ─────────────────────── -->
<section class="sec" id="how" aria-labelledby="how-h">
  <div class="wrap">
    <header class="sec-hd">
      <p class="eyebrow">How it works</p>
      <h2 class="sec-h" id="how-h">Three steps, about ten seconds</h2>
      <p class="sec-sub">There is nothing to install, nothing to configure and nothing to remember.</p>
    </header>

    <ol class="steps">
      <?php foreach (GM_STEPS as $s): ?>
      <li class="step">
        <span class="step-n"><?= e($s['n']) ?></span>
        <h3 class="step-h"><?= e($s['title']) ?></h3>
        <p class="step-p"><?= e($s['body']) ?></p>
      </li>
      <?php endforeach; ?>
    </ol>
  </div>
</section>

<!-- ─────────────────────────── API ──────────────────────────── -->
<section class="sec sec-alt" id="api" aria-labelledby="api-h">
  <div class="wrap">
    <div class="split">
      <div class="split-txt">
        <p class="eyebrow">For developers</p>
        <h2 class="sec-h" id="api-h">An API you can read in a minute</h2>
        <p class="sec-sub">
          Three endpoints, JSON in and JSON out. No key and no account are needed
          on our public domains — useful when your CI has to check a signup email
          and nobody wants to babysit a real mailbox.
        </p>

        <table class="api-tbl">
          <caption class="sr-only">Public API endpoints</caption>
          <thead>
            <tr><th scope="col">Method</th><th scope="col">Endpoint</th><th scope="col">What it does</th></tr>
          </thead>
          <tbody>
            <?php foreach (GM_ENDPOINTS as $ep): ?>
            <tr>
              <td><span class="verb verb-<?= e(strtolower($ep['method'])) ?>"><?= e($ep['method']) ?></span></td>
              <td><code><?= e($ep['path']) ?></code></td>
              <td><?= e($ep['desc']) ?></td>
            </tr>
            <?php endforeach; ?>
          </tbody>
        </table>

        <p class="note">Rate limit: one request per second, per address. Be reasonable and you will never see it.</p>
      </div>

      <div class="split-code">
        <div class="code">
          <div class="code-hd"><span class="code-dot" aria-hidden="true"></span><span>List a mailbox</span></div>
<pre class="code-body"><code>$ curl https://<?= e(GM_DOMAIN) ?>/api/v1/mailbox \
    --data-urlencode "address=k7fq2m@<?= e(GM_DOMAIN) ?>" -G

{
  "address": "k7fq2m@<?= e(GM_DOMAIN) ?>",
  "count": 1,
  "messages": [
    {
      "id":      "01JR8W2K4",
      "from":    "no-reply@example.com",
      "subject": "Your verification code",
      "date":    "2026-08-04T18:31:07Z",
      "seen":    false,
      "attachments": 0
    }
  ]
}</code></pre>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ─────────────────────── your own domain ──────────────────── -->
<section class="sec" id="domains" aria-labelledby="dom-h">
  <div class="wrap">
    <div class="split split-rev">
      <div class="split-txt">
        <p class="eyebrow">Custom domains</p>
        <h2 class="sec-h" id="dom-h">Use your own domain, keep it private</h2>
        <p class="sec-sub">
          Add one MX record and every address on your domain becomes a mailbox
          here — <code>anything@yourdomain.com</code>, without creating any of them
          in advance. Your domain is never listed on this site, and only you can
          read what arrives.
        </p>

        <div class="mx">
          <div class="mx-hd">Add this to your DNS</div>
          <table class="mx-tbl">
            <thead><tr><th scope="col">Type</th><th scope="col">Name</th><th scope="col">Priority</th><th scope="col">Value</th></tr></thead>
            <tbody>
              <tr>
                <td><code>MX</code></td>
                <td><code>@</code></td>
                <td><code><?= (int) GM_MX_PRIO ?></code></td>
                <td class="mx-val">
                  <code data-mx><?= e(GM_MX_HOST) ?></code>
                  <button class="mx-copy" type="button" data-copy-mx aria-label="Copy the MX host">
                    <svg viewBox="0 0 16 16" class="ic" aria-hidden="true" focusable="false"><rect x="5.5" y="5.5" width="8" height="8" rx="1.5" fill="none" stroke="currentColor" stroke-width="1.4"/><path d="M10.5 5.5v-1a1.5 1.5 0 0 0-1.5-1.5H4a1.5 1.5 0 0 0-1.5 1.5v5A1.5 1.5 0 0 0 4 11h1" fill="none" stroke="currentColor" stroke-width="1.4"/></svg>
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <ul class="ticks">
          <li>Unlimited addresses on your domain, created on the fly</li>
          <li>Private — your domain is not listed and not shared</li>
          <li>Exactly the same API, scoped to your domain</li>
        </ul>
      </div>

      <div class="split-aside">
        <div class="pubdom">
          <h3 class="pubdom-h">Public domains</h3>
          <p class="pubdom-p">Anyone can use these, and anyone who knows the address can read the inbox.</p>
          <ul class="pubdom-l">
            <?php foreach (GM_PUBLIC_DOMAINS as $d): ?>
            <li><code>@<?= e($d) ?></code></li>
            <?php endforeach; ?>
          </ul>
          <p class="pubdom-n">Need privacy? Bring your own domain.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ───────────────────────── features ──────────────────────── -->
<section class="sec sec-alt" aria-labelledby="feat-h">
  <div class="wrap">
    <header class="sec-hd">
      <p class="eyebrow">What you get</p>
      <h2 class="sec-h" id="feat-h">Everything you need, nothing you don't</h2>
    </header>

    <ul class="feats">
      <?php foreach (GM_FEATURES as $f): ?>
      <li class="feat">
        <span class="feat-ic" aria-hidden="true"><?= gm_icon($f['icon']) ?></span>
        <h3 class="feat-h"><?= e($f['title']) ?></h3>
        <p class="feat-p"><?= e($f['body']) ?></p>
      </li>
      <?php endforeach; ?>
    </ul>
  </div>
</section>

<!-- ─────────────────────────── FAQ ──────────────────────────── -->
<section class="sec" id="faq" aria-labelledby="faq-h">
  <div class="wrap wrap-narrow">
    <header class="sec-hd">
      <p class="eyebrow">FAQ</p>
      <h2 class="sec-h" id="faq-h">Questions people actually ask</h2>
    </header>

    <?php /* <details> gives keyboard support, screen-reader semantics and
             find-in-page for free. A hand-rolled accordion would need all three
             written and tested; this one cannot regress. */ ?>
    <div class="faq">
      <?php foreach (GM_FAQ as $i => $f): ?>
      <details class="faq-i"<?= $i === 0 ? ' open' : '' ?>>
        <summary class="faq-q">
          <span><?= e($f['q']) ?></span>
          <svg class="faq-chev" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="m4 6 4 4 4-4" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
        </summary>
        <div class="faq-a"><p><?= e($f['a']) ?></p></div>
      </details>
      <?php endforeach; ?>
    </div>
  </div>
</section>

<!-- ─────────────────────────── CTA ──────────────────────────── -->
<section class="cta" aria-labelledby="cta-h">
  <div class="wrap wrap-narrow cta-in">
    <h2 class="cta-h" id="cta-h">Grab an address and get on with it</h2>
    <p class="cta-p">No account, no card, no cookie banner. It takes one click.</p>
    <div class="cta-act">
      <a class="btn btn-primary btn-lg" href="#grab">Grab an address</a>
      <a class="btn btn-ghost btn-lg" href="/docs/api">Read the API docs</a>
    </div>
  </div>
</section>

<?php require __DIR__ . '/../includes/footer.php'; ?>
