{% extends "base.html" %}

{% block title %}CleanCopy — Clipboard Cleaning for Windows{% endblock %}

{% block head %}
<style>
  .container {
    max-width: 800px;
  }

  .hero {
    text-align: center;
    margin-bottom: 2rem;
  }

  .hero-logo {
    width: 128px;
    height: 128px;
    margin-bottom: 1rem;
  }

  .hero h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
  }

  .hero .tagline {
    font-size: 1.2rem;
    color: var(--color-text-primary);
  }

  .features {
    margin: 2rem 0;
  }

  .feature {
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-border-subtle);
  }

  .feature:last-child {
    border-bottom: none;
  }

  .feature h3 {
    color: var(--color-accent);
    margin-bottom: 0.25rem;
  }

  .pricing {
    margin: 2.5rem 0;
    text-align: center;
    padding: 2rem;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-subtle);
    border-radius: 12px;
  }

  .pricing .price {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--color-accent);
  }

  .pricing .detail {
    color: var(--color-text-primary);
    margin-top: 0.5rem;
  }

  .cta {
    margin: 2rem 0;
    text-align: center;
  }

  .cta a {
    display: inline-block;
    padding: 1rem 2rem;
    background: var(--color-accent);
    color: var(--color-accent-text-on);
    text-decoration: none;
    border-radius: 8px;
    font-weight: bold;
    font-size: 1.1rem;
  }

  .cta a:hover {
    background: var(--color-accent-hover);
  }
</style>
{% endblock %}

{% block content %}
<div class="hero">
  <img src="/static/logo.png" alt="CleanCopy" class="hero-logo" />
  <h1>CleanCopy</h1>
  <p class="tagline">
    Lightweight clipboard cleaning for Windows. Silently sanitizes your
    clipboard text on trigger.
  </p>
</div>

<div class="pricing">
  <div class="price">{{ price }}</div>
  <div class="detail">
    One-time purchase · Lifetime license · Unlimited devices
  </div>
  <div class="cta">
    <a href="/api/checkout">Buy CleanCopy →</a>
  </div>
</div>

<div class="features">
  <div class="feature">
    <h3>Tracking Parameter Stripper</h3>
    <p>
      Removes marketing trackers (utm_*, gclid, fbclid, etc.) from URLs
      while keeping functional query arguments.
    </p>
  </div>
  <div class="feature">
    <h3>Smart Quotes &amp; Dash Fixer</h3>
    <p>
      Converts curly quotes and em/en-dashes to standard straight quotes
      and hyphens.
    </p>
  </div>
  <div class="feature">
    <h3>Line-Break Normalizer</h3>
    <p>
      Joins single-newline wraps from chat apps into continuous lines
      while preserving paragraphs.
    </p>
  </div>
  <div class="feature">
    <h3>Invisible Character Cleanup</h3>
    <p>
      Removes zero-width spaces, null bytes, and other invisible Unicode
      characters.
    </p>
  </div>
</div>

{% endblock %}