<template>
  <section class="relative pt-32 pb-20 md:pt-40 md:pb-28 overflow-hidden">
    <!-- Background pattern -->
    <div class="absolute inset-0 dot-grid opacity-[0.03]" />
    <div class="absolute top-0 right-0 w-[600px] h-[600px] bg-eu-blue/[0.04] rounded-full blur-3xl -translate-y-1/2 translate-x-1/4" />

    <div class="section-container relative">
      <div class="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
        <!-- Left: copy -->
        <div>
          <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-eu-blue-100 text-eu-blue text-xs font-semibold tracking-wide uppercase mb-6">
            <span class="w-1.5 h-1.5 rounded-full bg-eu-blue animate-pulse" />
            Free &amp; Open
          </div>

          <h1 class="text-display-sm md:text-display text-ink text-balance">
            EU VAT Rates
            <span class="text-eu-blue">API</span>
          </h1>

          <p class="mt-4 text-subtitle text-ink-secondary font-heading">
            Free. No API key. Always up-to-date.
          </p>

          <p class="mt-4 text-base text-ink-muted leading-relaxed max-w-lg">
            Get current VAT rates for all 27 EU member states with a single API call. No registration, no rate limits, no nonsense.
          </p>

          <div class="flex flex-wrap gap-3 mt-8">
            <a
              href="#rates"
              class="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-eu-blue text-white font-semibold text-sm hover:bg-eu-blue-dark transition-all hover:shadow-glow"
            >
              View Rates
              <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 13.5 12 21m0 0-7.5-7.5M12 21V3" />
              </svg>
            </a>
            <a
              href="#playground"
              class="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg border-2 border-eu-blue/20 text-eu-blue font-semibold text-sm hover:border-eu-blue/40 hover:bg-eu-blue-100 transition-all"
            >
              Try the API
              <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="m6.75 7.5 3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25Z" />
              </svg>
            </a>
          </div>
        </div>

        <!-- Right: code snippet -->
        <div class="relative">
          <div class="absolute -inset-4 bg-eu-blue/[0.04] rounded-3xl blur-2xl" />
          <div class="relative code-block p-6 shadow-card">
            <!-- Top bar -->
            <div class="flex items-center gap-3 mb-4 pb-4 border-b border-white/10">
              <div class="flex gap-1.5">
                <span class="w-3 h-3 rounded-full bg-[#ff5f57]" />
                <span class="w-3 h-3 rounded-full bg-[#febc2e]" />
                <span class="w-3 h-3 rounded-full bg-[#28c840]" />
              </div>
              <span class="text-xs text-[#8b949e] font-mono">GET /api/v1/rates/DE</span>
            </div>

            <!-- JSON -->
            <pre class="text-[13px] leading-6"><span style="color:#8b949e">// Response 200 OK</span>
<span style="color:#ff7b72">{</span>
  <span style="color:#79c0ff">"country"</span>: <span style="color:#a5d6ff">"Germany"</span>,
  <span style="color:#79c0ff">"country_code"</span>: <span style="color:#a5d6ff">"DE"</span>,
  <span style="color:#79c0ff">"standard_rate"</span>: <span style="color:#79c0ff">19</span>,
  <span style="color:#79c0ff">"reduced_rates"</span>: <span style="color:#ff7b72">[</span><span style="color:#79c0ff">7</span><span style="color:#ff7b72">]</span>,
  <span style="color:#79c0ff">"currency"</span>: <span style="color:#a5d6ff">"EUR"</span>
<span style="color:#ff7b72">}</span></pre>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>
