{% extends "core/base.html" %}
{% block title %}{{ SHORT_DOMAIN }} · URL shortener · {{ CREDIT_NAME }}{% endblock %}
{% block content %}
<div class="hero-section">
  <div class="hero-content">
    <h1 class="hero-title">{{ SHORT_DOMAIN }}</h1>
    <p class="hero-subtitle hero-subtitle--wide">
      Short links for campaigns and trusted callers. Built by
      {{ CREDIT_NAME }} — not an open public shortener.
    </p>
    <div class="hero-cta">
      <a href="{{ CONTACT_URL }}" class="btn">Request access</a>
    </div>
  </div>
</div>

<div class="section" style="background: var(--surface-color);">
  <div class="container">
    <h2 class="section-title">A shortener you can hand to SMS</h2>
    <p style="text-align: center; max-width: 820px; margin: 0 auto; color: var(--text-muted); font-size: 1.1rem;">
      {{ SHORT_DOMAIN }} turns a long HTTPS URL into a short path like
      <strong>/a3k9xm</strong>. Recipients tap it and get a 302 to your site.
      Creating links is Bearer-authenticated — only onboarded services can mint.
    </p>
  </div>
</div>

<div class="section">
  <div class="container">
    <h2 class="section-title">Want access?</h2>
    <div class="card-grid">
      <div class="card">
        <h3 class="card-title">For your product</h3>
        <p class="card-text">
          We issue a named token and allowlist your destination hosts.
          Your app POSTs to the API and drops <code>short_url</code> into SMS or email.
        </p>
      </div>
      <div class="card">
        <h3 class="card-title">Not self-serve</h3>
        <p class="card-text">
          There is no public signup. If you want this for a campaign or another
          {{ CREDIT_NAME }} property, talk to us.
        </p>
      </div>
      <div class="card">
        <h3 class="card-title">Talk to us</h3>
        <p class="card-text">
          Contact <a href="{{ CREDIT_URL }}">aimloperations.com</a> and tell us
          which hosts you need to shorten to.
        </p>
        <a href="{{ CONTACT_URL }}" class="btn" style="margin-top: 1rem; padding: 0.7rem 1.4rem;">Contact</a>
      </div>
    </div>
  </div>
</div>
{% endblock %}