<script setup>
import { onMounted, ref } from 'vue'
import { RouterLink } from 'vue-router'
import { api } from '@/api/client'
import SectionHero from '@/components/SectionHero.vue'
import ProductCard from '@/components/ProductCard.vue'

const products = ref([])
const loading = ref(true)

onMounted(async () => {
  try { products.value = await api.listProducts() }
  catch (e) {}
  finally { loading.value = false }
})
</script>

<template>
  <SectionHero
    eyebrow="Products"
    title="IP cores for AI, space, and robotics."
    subtitle="Three production-bound blocks. Quote-based licensing. Datasheets and evaluation kits on request."
  />

  <section class="section">
    <div class="container">
      <div v-if="loading" class="dim mono">Loading…</div>
      <div v-else class="grid grid--3">
        <ProductCard v-for="p in products" :key="p.slug" :product="p" />
      </div>

      <div class="cta-inline">
        <p class="muted">Looking for a custom block or full ASIC service?</p>
        <RouterLink to="/contact" class="btn btn--ghost">Start a conversation →</RouterLink>
      </div>
    </div>
  </section>
</template>

<style scoped>
.cta-inline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-7);
  padding: var(--space-5);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
}
@media (max-width: 640px) { .cta-inline { flex-direction: column; align-items: flex-start; } }
.cta-inline p { margin: 0; }
</style>
