{% extends "base.html" %}

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

{% block content %}
<main>
  <!-- Hero -->
  <section class="hero pb-12">
    <div class="container-page">
      <h1 class="heading-display">Pick your depth of data</h1>
      <p>Every plan includes the full dashboard. Upgrade when you need more history, exports, or API access.</p>
    </div>
  </section>

  <!-- Pricing Cards -->
  <section class="container-page pb-16">
    <div class="grid-3 items-start">
      <!-- Explorer (Free) -->
      <div class="pricing-card">
        <div class="mb-6">
          <h3 class="text-xl mb-1">Explorer</h3>
          <div class="flex items-baseline gap-1">
            <span class="text-4xl font-bold text-espresso font-mono">$0</span>
            <span class="text-stone text-sm">/forever</span>
          </div>
        </div>
        <ul class="space-y-2 text-sm text-stone mb-8 flex-1">
          <li>&#10003; Full coffee dashboard</li>
          <li>&#10003; Last 5 years of data</li>
          <li>&#10003; Global &amp; country charts</li>
          <li>&#10003; Community support</li>
        </ul>
        <div>
          {% if user %}
            {% if (user.plan or 'free') == 'free' %}
            <button class="btn-outline w-full" disabled>Current plan</button>
            {% else %}
            <button class="btn-outline w-full" disabled>Explorer</button>
            {% endif %}
          {% else %}
            <a href="{{ url_for('auth.signup', plan='free') }}" class="btn-outline w-full text-center">Start free</a>
          {% endif %}
        </div>
      </div>

      <!-- Trader (Starter) — highlighted -->
      <div class="pricing-card-highlighted">
        <span class="pricing-badge">Most popular</span>
        <div class="mb-6 pt-2">
          <h3 class="text-xl mb-1">Trader</h3>
          <div class="flex items-baseline gap-1">
            <span class="text-4xl font-bold text-espresso font-mono">TBD</span>
            <span class="text-stone text-sm">/mo</span>
          </div>
        </div>
        <ul class="space-y-2 text-sm text-stone mb-8 flex-1">
          <li>&#10003; Full coffee history (18+ years)</li>
          <li>&#10003; CSV data export</li>
          <li>&#10003; REST API access (10k calls/mo)</li>
          <li>&#10003; Email support</li>
        </ul>
        <div>
          {% if user %}
            {% if (user.plan or 'free') == 'starter' %}
            <button class="btn w-full" disabled>Current plan</button>
            {% else %}
            <form method="post" action="{{ url_for('billing.checkout', plan='starter') }}">
              <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
              <button type="submit" class="btn w-full">Upgrade</button>
            </form>
            {% endif %}
          {% else %}
            <a href="{{ url_for('auth.signup', plan='starter') }}" class="btn w-full text-center">Get started</a>
          {% endif %}
        </div>
      </div>

      <!-- Analyst (Pro) -->
      <div class="pricing-card">
        <div class="mb-6">
          <h3 class="text-xl mb-1">Analyst</h3>
          <div class="flex items-baseline gap-1">
            <span class="text-4xl font-bold text-espresso font-mono">TBD</span>
            <span class="text-stone text-sm">/mo</span>
          </div>
        </div>
        <ul class="space-y-2 text-sm text-stone mb-8 flex-1">
          <li>&#10003; All 65 USDA commodities</li>
          <li>&#10003; Unlimited API calls</li>
          <li>&#10003; CSV &amp; API export</li>
          <li>&#10003; Priority support</li>
        </ul>
        <div>
          {% if user %}
            {% if (user.plan or 'free') == 'pro' %}
            <button class="btn-outline w-full" disabled>Current plan</button>
            {% else %}
            <form method="post" action="{{ url_for('billing.checkout', plan='pro') }}">
              <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
              <button type="submit" class="btn-outline w-full">Upgrade</button>
            </form>
            {% endif %}
          {% else %}
            <a href="{{ url_for('auth.signup', plan='pro') }}" class="btn-outline w-full text-center">Get started</a>
          {% endif %}
        </div>
      </div>
    </div>
  </section>

  <!-- FAQ -->
  <section class="container-page pb-16 max-w-2xl mx-auto">
    <div class="section-heading">
      <h2>Frequently asked questions</h2>
    </div>

    <details class="faq-item">
      <summary>Where does the data come from?</summary>
      <p>All data comes from the USDA Production, Supply &amp; Distribution (PSD) Online database, which is freely available. We extract, transform, and structure it daily into analytics-ready metrics.</p>
    </details>

    <details class="faq-item">
      <summary>What's the difference between 5 years and 18 years of history?</summary>
      <p>The free Explorer plan shows the last 5 market years. Trader and Analyst plans unlock the full dataset going back to 2006, giving you deeper context for long-term trend analysis.</p>
    </details>

    <details class="faq-item">
      <summary>Can I change plans later?</summary>
      <p>Yes. Upgrade or downgrade at any time. Changes take effect immediately with prorated billing handled by Paddle.</p>
    </details>

    <details class="faq-item">
      <summary>What format is the CSV export?</summary>
      <p>Standard CSV with headers. One row per country per market year. Compatible with Excel, Google Sheets, Python, R, and any tool that reads CSV.</p>
    </details>

    <details class="faq-item">
      <summary>How does the API work?</summary>
      <p>Generate an API key from your dashboard settings. Use Bearer token authentication with standard REST endpoints for commodity listing, time series, and country data. Full docs available after signup.</p>
    </details>

    <details class="faq-item">
      <summary>Is the free plan really free forever?</summary>
      <p>Yes. No trial period, no credit card required. The Explorer plan is free for as long as you use it.</p>
    </details>
  </section>
</main>
{% endblock %}
