<script setup lang="ts">
const features = [
  {
    icon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="w-6 h-6"><circle cx="12" cy="12" r="10"/><path d="M12 6v2m0 8v2m-4.24-2.76 1.42-1.42m5.64-5.64 1.42-1.42M6 12h2m8 0h2m-2.76 4.24-1.42-1.42m-5.64-5.64L7.76 7.76"/></svg>`,
    title: 'All 27 EU Countries',
    description: 'Standard, reduced, and special VAT rates for every member state.',
  },
  {
    icon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"/></svg>`,
    title: 'No Authentication',
    description: 'No API keys, no sign-up. Just send a GET request.',
  },
  {
    icon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182"/></svg>`,
    title: 'Always Current',
    description: 'Rates sourced and synced regularly from official EU data.',
  },
  {
    icon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5"/></svg>`,
    title: 'Simple JSON',
    description: 'Clean, predictable JSON responses. Easy to integrate anywhere.',
  },
]
</script>

<template>
  <section id="features" class="section-padding bg-surface-soft">
    <div class="section-container">
      <div class="text-center mb-14 animate-on-scroll">
        <h2 class="text-title md:text-display-sm text-ink">
          Built for developers
        </h2>
        <p class="mt-3 text-ink-muted max-w-lg mx-auto">
          A straightforward API that does one thing well — delivering EU VAT rates without friction.
        </p>
      </div>

      <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-5">
        <div
          v-for="(feature, i) in features"
          :key="feature.title"
          class="animate-on-scroll group relative bg-white rounded-2xl p-6 border border-surface-border hover:border-eu-blue/20 hover:shadow-card transition-all duration-300"
          :style="{ transitionDelay: `${i * 80}ms` }"
        >
          <div class="w-10 h-10 rounded-xl bg-eu-blue-100 text-eu-blue flex items-center justify-center mb-4 group-hover:bg-eu-blue group-hover:text-white transition-colors duration-300" v-html="feature.icon" />
          <h3 class="font-heading font-semibold text-ink mb-1.5">
            {{ feature.title }}
          </h3>
          <p class="text-sm text-ink-muted leading-relaxed">
            {{ feature.description }}
          </p>
        </div>
      </div>
    </div>
  </section>
</template>
