{% extends "base.html" %}

{% block title %}{{ config.APP_NAME }} — Coffee Market Data Without the Bloomberg Price Tag{% endblock %}

{% block content %}
<main>
  <!-- Hero -->
  <section class="hero">
    <div class="container-page">
      <h1 class="heading-display">Coffee market data without the Bloomberg price tag</h1>
      <p>18 years of USDA production, trade, and stock data for every coffee-producing country. Charts, exports, and API. Updated daily.</p>
      <div class="flex flex-col sm:flex-row gap-3 justify-center">
        <a href="{{ url_for('auth.signup') }}" class="btn">Start free &mdash; no credit card</a>
        <a href="{{ url_for('public.features') }}" class="btn-outline">See what's included</a>
      </div>
    </div>
  </section>

  <!-- Problem -->
  <section class="container-page py-16">
    <div class="section-heading">
      <h2>Good coffee data shouldn't cost $24,000 a year</h2>
      <p>Independent traders face bad options for getting the data they need.</p>
    </div>
    <div class="grid-3">
      <div class="feature-card text-center">
        <div class="feature-icon">&#128176;</div>
        <h3>Bloomberg Terminal</h3>
        <p>$24,000/yr &mdash; Overkill for most independent traders.</p>
      </div>
      <div class="feature-card text-center">
        <div class="feature-icon">&#128196;</div>
        <h3>Manual USDA Digging</h3>
        <p>$0 but hours of work &mdash; No charts, no API, just flat files.</p>
      </div>
      <div class="feature-card text-center">
        <div class="feature-icon">&#127970;</div>
        <h3>Other Platforms</h3>
        <p>$200&ndash;500/mo &mdash; Built for hedge funds trading 50 commodities.</p>
      </div>
    </div>
  </section>

  <!-- Value Props -->
  <section class="bg-latte py-16">
    <div class="container-page">
      <div class="section-heading">
        <h2>What you get</h2>
      </div>
      <div class="grid-3">
        <div class="feature-card">
          <div class="feature-icon">&#128200;</div>
          <h3>Supply &amp; Demand Charts</h3>
          <p>18+ years of production, exports, imports, and ending stocks. Interactive and filterable by market year.</p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">&#127758;</div>
          <h3>Country Comparison</h3>
          <p>Compare up to 10 producing countries side-by-side on any metric. See who's growing, who's shrinking.</p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">&#128202;</div>
          <h3>Stock-to-Use Ratio</h3>
          <p>The ratio that moves prices. Track the global coffee stock-to-use ratio to gauge market tightness.</p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">&#128229;</div>
          <h3>CSV &amp; API Export</h3>
          <p>Your data, your format. Download CSV files or integrate directly with your trading systems via REST API.</p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">&#9889;</div>
          <h3>Daily Refresh</h3>
          <p>Our pipeline runs daily against USDA PSD Online. Latest data within hours of USDA publishing.</p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">&#128275;</div>
          <h3>Public Data, Open Method</h3>
          <p>No black box. Built on freely available USDA data with a fully transparent transformation pipeline.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- How It Works -->
  <section class="container-page py-16">
    <div class="section-heading">
      <h2>How it works</h2>
    </div>
    <div class="grid-3 text-center">
      <div>
        <div class="step-number">1</div>
        <h4 class="mb-2">Sign up with your email</h4>
        <p class="text-sm text-stone">Magic link, no password. You're in within seconds.</p>
      </div>
      <div>
        <div class="step-number">2</div>
        <h4 class="mb-2">Explore the dashboard</h4>
        <p class="text-sm text-stone">Charts and metrics are ready. No setup, no configuration.</p>
      </div>
      <div>
        <div class="step-number">3</div>
        <h4 class="mb-2">Export or connect via API</h4>
        <p class="text-sm text-stone">CSV downloads or REST API for your own models and tools.</p>
      </div>
    </div>
  </section>

  <!-- Final CTA -->
  <section class="bg-latte py-16">
    <div class="container-page text-center">
      <h2 class="heading-display text-3xl md:text-4xl mb-4">See the data before you decide</h2>
      <p class="text-stone text-lg max-w-xl mx-auto mb-8">Free plan includes 5 years of coffee market data. No credit card. No sales call. Just data.</p>
      <a href="{{ url_for('auth.signup') }}" class="btn">Start free</a>
    </div>
  </section>
</main>
{% endblock %}
