{% extends "base.html" %}

{% block title %}Features — {{ config.APP_NAME }}{% endblock %}

{% block content %}
<main>
  <!-- Hero -->
  <section class="hero">
    <div class="container-page">
      <h1 class="heading-display">Built for coffee traders, not Wall Street</h1>
      <p>Every feature exists because an independent trader or roaster needed it.</p>
    </div>
  </section>

  <!-- Feature 1: Supply & Demand -->
  <section class="container-page py-12">
    <div class="grid-2 items-center">
      <div>
        <h2 class="text-2xl md:text-3xl mb-4">Supply &amp; Demand Dashboard</h2>
        <p class="text-stone mb-4">Interactive charts showing global coffee production, exports, imports, ending stocks, and total distribution by market year. Spot surplus and deficit years at a glance.</p>
        <ul class="space-y-2 text-sm text-stone">
          <li>&#10003; 18+ years of historical data (2006&ndash;present)</li>
          <li>&#10003; Line charts for production, trade, and consumption trends</li>
          <li>&#10003; Key metric cards for quick orientation</li>
          <li>&#10003; Auto-refreshed daily from USDA PSD Online</li>
        </ul>
      </div>
      <div class="bg-latte rounded-2xl h-64 flex items-center justify-center text-stone">
        <span class="text-sm">Supply &amp; Demand chart preview</span>
      </div>
    </div>
  </section>

  <hr class="container-page">

  <!-- Feature 2: Country Analysis -->
  <section class="container-page py-12">
    <div class="grid-2 items-center">
      <div class="order-2 md:order-1 bg-latte rounded-2xl h-64 flex items-center justify-center text-stone">
        <span class="text-sm">Country comparison preview</span>
      </div>
      <div class="order-1 md:order-2">
        <h2 class="text-2xl md:text-3xl mb-4">Country Analysis &amp; Comparison</h2>
        <p class="text-stone mb-4">Rank the world's coffee producers and consumers. Compare up to 10 countries side-by-side on any metric.</p>
        <ul class="space-y-2 text-sm text-stone">
          <li>&#10003; Top-N country rankings (production, exports, imports, stocks)</li>
          <li>&#10003; Year-over-year production change with directional coloring</li>
          <li>&#10003; Multi-country overlay charts</li>
          <li>&#10003; 65 commodity-country combinations from USDA data</li>
        </ul>
      </div>
    </div>
  </section>

  <hr class="container-page">

  <!-- Feature 3: Stock-to-Use -->
  <section class="container-page py-12">
    <div class="grid-2 items-center">
      <div>
        <h2 class="text-2xl md:text-3xl mb-4">Stock-to-Use Ratio</h2>
        <p class="text-stone mb-4">The ratio traders watch most closely. Track the global coffee stock-to-use ratio over time to gauge market tightness and anticipate price moves.</p>
        <ul class="space-y-2 text-sm text-stone">
          <li>&#10003; Global ratio trend chart spanning two decades</li>
          <li>&#10003; Ending stocks vs. total distribution breakdown</li>
          <li>&#10003; Historical context for current market conditions</li>
        </ul>
      </div>
      <div class="bg-latte rounded-2xl h-64 flex items-center justify-center text-stone">
        <span class="text-sm">Stock-to-use ratio preview</span>
      </div>
    </div>
  </section>

  <hr class="container-page">

  <!-- Feature 4: Export & API -->
  <section class="container-page py-12">
    <div class="grid-2 items-center">
      <div class="order-2 md:order-1 bg-latte rounded-2xl h-64 flex items-center justify-center text-stone">
        <span class="text-sm">API response preview</span>
      </div>
      <div class="order-1 md:order-2">
        <h2 class="text-2xl md:text-3xl mb-4">Data Export &amp; API Access</h2>
        <p class="text-stone mb-4">Download CSV files or integrate directly with your trading systems via REST API.</p>
        <ul class="space-y-2 text-sm text-stone">
          <li>&#10003; CSV export of any metric series</li>
          <li>&#10003; RESTful JSON API with Bearer token auth</li>
          <li>&#10003; Rate-limited and logged for security</li>
          <li>&#10003; Commodity listing, time series, and country endpoints</li>
        </ul>
      </div>
    </div>
  </section>

  <hr class="container-page">

  <!-- Feature 5: Pipeline -->
  <section class="container-page py-12">
    <div class="grid-2 items-center">
      <div>
        <h2 class="text-2xl md:text-3xl mb-4">Daily Automated Pipeline</h2>
        <p class="text-stone mb-4">Our pipeline extracts data from USDA PSD Online, transforms it through a 4-layer SQL pipeline, and delivers analytics-ready metrics every day.</p>
        <ul class="space-y-2 text-sm text-stone">
          <li>&#10003; Automated daily extraction from USDA</li>
          <li>&#10003; SQLMesh + DuckDB transformation pipeline</li>
          <li>&#10003; Incremental processing (only new data each day)</li>
          <li>&#10003; Auditable data lineage</li>
        </ul>
      </div>
      <div class="bg-latte rounded-2xl h-64 flex items-center justify-center text-stone">
        <span class="text-sm">Pipeline diagram preview</span>
      </div>
    </div>
  </section>

  <!-- CTA -->
  <section class="bg-latte py-16">
    <div class="container-page text-center">
      <h2 class="heading-display text-3xl md:text-4xl mb-4">Start with the free plan</h2>
      <p class="text-stone text-lg max-w-xl mx-auto mb-8">Real data, not a demo. 5 years of coffee market data, charts, and metrics.</p>
      <div class="flex flex-col sm:flex-row gap-3 justify-center">
        <a href="{{ url_for('auth.signup') }}" class="btn">Start free</a>
        <a href="{{ url_for('billing.pricing') }}" class="btn-outline">View pricing</a>
      </div>
    </div>
  </section>
</main>
{% endblock %}
