{% extends "base.html" %}

{% block title %}{{ t.pnscore_page_title }}{% endblock %}

{% block head %}
<meta name="description" content="{{ t.pnscore_meta_desc }}">
<meta property="og:title" content="{{ t.pnscore_page_title }}">
<meta property="og:description" content="{{ t.pnscore_og_desc }}">
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "WebPage",
      "name": "{{ t.pnscore_page_title }}",
      "description": "{{ t.pnscore_meta_desc }}",
      "url": "{{ config.BASE_URL }}/{{ lang }}/padelnomics-score",
      "inLanguage": "{{ lang }}",
      "isPartOf": {
        "@type": "WebSite",
        "name": "Padelnomics",
        "url": "{{ config.BASE_URL }}"
      }
    },
    {
      "@type": "BreadcrumbList",
      "itemListElement": [
        {"@type": "ListItem", "position": 1, "name": "Home", "item": "{{ config.BASE_URL }}/{{ lang }}"},
        {"@type": "ListItem", "position": 2, "name": "Padelnomics Score", "item": "{{ config.BASE_URL }}/{{ lang }}/padelnomics-score"}
      ]
    },
    {
      "@type": "FAQPage",
      "mainEntity": [
        {
          "@type": "Question",
          "name": "{{ t.pnscore_faq_q1 }}",
          "acceptedAnswer": {"@type": "Answer", "text": "{{ t.pnscore_faq_a1 }}"}
        },
        {
          "@type": "Question",
          "name": "{{ t.pnscore_faq_q2 }}",
          "acceptedAnswer": {"@type": "Answer", "text": "{{ t.pnscore_faq_a2 }}"}
        },
        {
          "@type": "Question",
          "name": "{{ t.pnscore_faq_q3 }}",
          "acceptedAnswer": {"@type": "Answer", "text": "{{ t.pnscore_faq_a3 }}"}
        },
        {
          "@type": "Question",
          "name": "{{ t.pnscore_faq_q4 }}",
          "acceptedAnswer": {"@type": "Answer", "text": "{{ t.pnscore_faq_a4 }}"}
        },
        {
          "@type": "Question",
          "name": "{{ t.pnscore_faq_q5 }}",
          "acceptedAnswer": {"@type": "Answer", "text": "{{ t.pnscore_faq_a5 }}"}
        }
      ]
    }
  ]
}
</script>
{% endblock %}

{% block content %}
<main class="container-page py-12">
  <div class="max-w-3xl mx-auto">

    <!-- Hero -->
    <header class="text-center mb-12">
      <h1 class="text-3xl mb-2">
        <span style="font-family:'Bricolage Grotesque',sans-serif;font-weight:800;color:#0F172A;letter-spacing:-0.02em">padelnomics</span>
        Score
      </h1>
      <p class="text-lg text-slate">{{ t.pnscore_subtitle }}</p>
    </header>

    <!-- What It Is -->
    <section class="card mb-10" style="background:linear-gradient(135deg,#f0f9ff,#e0f2fe);border-color:#bae6fd">
      <h2 class="text-xl mb-3">{{ t.pnscore_what_h2 }}</h2>
      <p class="text-slate-dark leading-relaxed">{{ t.pnscore_what_intro }}</p>
    </section>

    <!-- Components -->
    <section class="mb-10">
      <h2 class="text-xl mb-4">{{ t.pnscore_components_h2 }}</h2>
      <p class="text-slate-dark leading-relaxed mb-6">{{ t.pnscore_components_intro }}</p>

      <div class="grid-2">
        <div class="card">
          <div style="font-size:1.5rem;margin-bottom:0.5rem">&#x1f465;</div>
          <h3 class="font-semibold text-navy mb-1">{{ t.pnscore_cat_market_h3 }}</h3>
          <p class="text-sm text-slate-dark">{{ t.pnscore_cat_market_p }}</p>
        </div>
        <div class="card">
          <div style="font-size:1.5rem;margin-bottom:0.5rem">&#x1f4b6;</div>
          <h3 class="font-semibold text-navy mb-1">{{ t.pnscore_cat_econ_h3 }}</h3>
          <p class="text-sm text-slate-dark">{{ t.pnscore_cat_econ_p }}</p>
        </div>
        <div class="card">
          <div style="font-size:1.5rem;margin-bottom:0.5rem">&#x1f3af;</div>
          <h3 class="font-semibold text-navy mb-1">{{ t.pnscore_cat_gap_h3 }}</h3>
          <p class="text-sm text-slate-dark">{{ t.pnscore_cat_gap_p }}</p>
        </div>
        <div class="card">
          <div style="font-size:1.5rem;margin-bottom:0.5rem">&#x1f3be;</div>
          <h3 class="font-semibold text-navy mb-1">{{ t.pnscore_cat_sports_h3 }}</h3>
          <p class="text-sm text-slate-dark">{{ t.pnscore_cat_sports_p }}</p>
        </div>
        <div class="card">
          <div style="font-size:1.5rem;margin-bottom:0.5rem">&#x1f4cd;</div>
          <h3 class="font-semibold text-navy mb-1">{{ t.pnscore_cat_catchment_h3 }}</h3>
          <p class="text-sm text-slate-dark">{{ t.pnscore_cat_catchment_p }}</p>
        </div>
        <div class="card">
          <div style="font-size:1.5rem;margin-bottom:0.5rem">&#x1f4ca;</div>
          <h3 class="font-semibold text-navy mb-1">{{ t.pnscore_cat_maturity_h3 }}</h3>
          <p class="text-sm text-slate-dark">{{ t.pnscore_cat_maturity_p }}</p>
        </div>
      </div>
    </section>

    <!-- Score Bands -->
    <section class="card mb-8">
      <h2 class="text-xl mb-4">{{ t.pnscore_read_h2 }}</h2>
      <div class="space-y-4">
        <div>
          <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.25rem">
            <span style="display:inline-block;width:12px;height:12px;border-radius:50%;background:#15803D;flex-shrink:0"></span>
            <span class="font-semibold text-navy">{{ t.pnscore_band_high_label }}</span>
          </div>
          <p class="text-sm text-slate-dark" style="margin-left:1.75rem">{{ t.pnscore_band_high_p }}</p>
        </div>
        <div>
          <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.25rem">
            <span style="display:inline-block;width:12px;height:12px;border-radius:50%;background:#0D9488;flex-shrink:0"></span>
            <span class="font-semibold text-navy">{{ t.pnscore_band_good_label }}</span>
          </div>
          <p class="text-sm text-slate-dark" style="margin-left:1.75rem">{{ t.pnscore_band_good_p }}</p>
        </div>
        <div>
          <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.25rem">
            <span style="display:inline-block;width:12px;height:12px;border-radius:50%;background:#D97706;flex-shrink:0"></span>
            <span class="font-semibold text-navy">{{ t.pnscore_band_mid_label }}</span>
          </div>
          <p class="text-sm text-slate-dark" style="margin-left:1.75rem">{{ t.pnscore_band_mid_p }}</p>
        </div>
        <div>
          <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.25rem">
            <span style="display:inline-block;width:12px;height:12px;border-radius:50%;background:#EA580C;flex-shrink:0"></span>
            <span class="font-semibold text-navy">{{ t.pnscore_band_low_label }}</span>
          </div>
          <p class="text-sm text-slate-dark" style="margin-left:1.75rem">{{ t.pnscore_band_low_p }}</p>
        </div>
      </div>
    </section>

    <!-- Data Sources -->
    <section class="card mb-8">
      <h2 class="text-xl mb-4">{{ t.pnscore_sources_h2 }}</h2>
      <p class="text-slate-dark leading-relaxed">{{ t.pnscore_sources_p }}</p>
    </section>

    <!-- Limitations -->
    <section class="card mb-8">
      <h2 class="text-xl mb-4">{{ t.pnscore_limits_h2 }}</h2>
      <div class="space-y-3 text-slate-dark leading-relaxed">
        <p>{{ t.pnscore_limits_p1 }}</p>
        <p>{{ t.pnscore_limits_p2 }}</p>
      </div>
    </section>

    <!-- CTA -->
    <div class="text-center my-12">
      <a href="{{ url_for('content.markets') }}" class="btn" style="margin-right:0.75rem">{{ t.pnscore_cta_markets }}</a>
      <a href="{{ url_for('planner.index') }}" class="btn-secondary" style="display:inline-block;padding:0.625rem 1.25rem;border-radius:6px;font-weight:600;font-size:0.875rem;text-decoration:none">{{ t.pnscore_cta_planner }}</a>
    </div>

    <!-- FAQ -->
    <section>
      <h2 class="text-xl mb-4">{{ t.pnscore_faq_h2 }}</h2>
      <div class="space-y-4">
        {% for i in range(1, 6) %}
        <details style="border:1px solid #E2E8F0;border-radius:8px;padding:0.75rem 1rem">
          <summary class="font-semibold text-navy" style="cursor:pointer">{{ t['pnscore_faq_q' ~ i] }}</summary>
          <p class="text-sm text-slate-dark mt-2">{{ t['pnscore_faq_a' ~ i] }}</p>
        </details>
        {% endfor %}
      </div>
    </section>

  </div>
</main>
{% endblock %}
