{% extends "base.html" %}

{% block title %}{{ article.title }}{% endblock %}

{% block head %}
  <meta name="description" content="{{ article.meta_description or '' }}">
  {% if article.og_image_url %}
  <meta property="og:image" content="{{ article.og_image_url }}">
  {% endif %}
  <meta property="og:title" content="{{ article.title }}">
  <meta property="og:description" content="{{ article.meta_description or '' }}">
  <meta property="og:type" content="article">
  <link rel="canonical" href="{{ config.BASE_URL }}{{ article.url_path }}">
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": {{ article.title | tojson }},
    "description": {{ (article.meta_description or '') | tojson }},
    "datePublished": {{ (article.published_at or article.created_at)[:10] | tojson }},
    "dateModified": {{ (article.updated_at or article.published_at or article.created_at)[:10] | tojson }},
    "publisher": {
      "@type": "Organization",
      "name": {{ config.APP_NAME | tojson }},
      "url": {{ config.BASE_URL | tojson }}
    }
  }
  </script>
{% endblock %}

{% block content %}
<div class="container-page" style="max-width:760px;margin:0 auto;padding:40px 20px;">

  <!-- Breadcrumb -->
  <nav style="font-size:13px;color:#78716C;margin-bottom:24px;">
    <a href="{{ url_for('public.landing') }}" style="color:#78716C;text-decoration:none;">Home</a>
    <span style="margin:0 6px;">›</span>
    <a href="/coffee" style="color:#78716C;text-decoration:none;">Coffee</a>
    <span style="margin:0 6px;">›</span>
    <span>{{ article.title }}</span>
  </nav>

  <!-- Article header -->
  <header style="margin-bottom:32px;">
    <h1 style="font-size:2rem;font-weight:700;line-height:1.2;color:#1C1917;margin:0 0 12px;">
      {{ article.title }}
    </h1>
    {% if article.meta_description %}
    <p style="font-size:1.05rem;color:#57534E;line-height:1.6;margin:0 0 16px;">
      {{ article.meta_description }}
    </p>
    {% endif %}
    <p style="font-size:12px;color:#A8A29E;margin:0;">
      Published {{ article.published_at[:10] if article.published_at else "" }}
      · Data source: USDA PSD Online
    </p>
  </header>

  <!-- Article body (rendered from template) -->
  <article class="prose" style="line-height:1.7;color:#292524;">
    {{ body_html | safe }}
  </article>

  <!-- CTA footer -->
  <div style="margin-top:48px;padding:24px;background:#FDF8F4;border:1px solid #E8DFD5;border-radius:12px;">
    <p style="margin:0 0 12px;font-weight:600;color:#1C1917;">Track live coffee market data</p>
    <p style="margin:0 0 16px;font-size:14px;color:#57534E;">
      BeanFlows provides daily-updated supply & demand analytics, CFTC positioning data,
      and ICE warehouse stocks for coffee traders.
    </p>
    <a href="{{ url_for('auth.signup') }}" class="btn">Get Started Free →</a>
  </div>

</div>
{% endblock %}
