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

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

onMounted(async () => {
  try {
    const [p, b] = await Promise.all([api.listProducts(), api.listPosts()])
    products.value = p
    posts.value = b.slice(0, 3)
  } catch (e) { /* surface a friendlier UI in production */ }
  finally { loading.value = false }
})

const values = [
  { name: 'Fast', body: 'Parallel architectures, deterministic latency, throughput-per-watt that ships.' },
  { name: 'Reliable', body: 'Verification-first design. Heritage you can audit, not heritage you have to take on faith.' },
  { name: 'Robust', body: 'Built for orbits, factory floors, and defense supply chains — not a controlled bench.' },
]
</script>

<template>
  <!-- HERO -->
  <section class="hero">
    <div class="container hero__inner">
      <div class="hero__copy">
        <span class="eyebrow">Semiconductor IP · India · Flight-heritage</span>
        <h1>Accelerating the compute.</h1>
        <p class="hero__sub">
          Parallel hardware architectures and IP cores for <strong>AI</strong>, <strong>space</strong>,
          and <strong>robotics</strong>. Designed in India, flown in orbit.
        </p>
        <div class="hero__cta">
          <RouterLink to="/contact" class="btn btn--primary">Talk to us</RouterLink>
          <RouterLink to="/technology" class="btn btn--ghost">Read the architecture brief →</RouterLink>
        </div>
        <div class="hero__proof">
          <span class="pill">IIST · STIIC</span>
          <span class="pill">Flight-heritage IP</span>
          <span class="pill">Founded 2026</span>
        </div>
      </div>

      <!-- Decorative compute visual -->
      <div class="hero__visual" aria-hidden="true">
        <svg viewBox="0 0 420 420" xmlns="http://www.w3.org/2000/svg">
          <defs>
            <linearGradient id="chipGrad" x1="0" y1="0" x2="1" y2="1">
              <stop offset="0%" stop-color="#00E5FF" stop-opacity="0.55"/>
              <stop offset="100%" stop-color="#0B1437" stop-opacity="0"/>
            </linearGradient>
            <linearGradient id="lineGrad" x1="0" y1="0" x2="1" y2="0">
              <stop offset="0%" stop-color="#00E5FF" stop-opacity="0"/>
              <stop offset="50%" stop-color="#00E5FF" stop-opacity="0.7"/>
              <stop offset="100%" stop-color="#00E5FF" stop-opacity="0"/>
            </linearGradient>
          </defs>
          <!-- Outer ring -->
          <circle cx="210" cy="210" r="200" fill="none" stroke="#2A3463" stroke-width="1"/>
          <circle cx="210" cy="210" r="150" fill="none" stroke="#2A3463" stroke-width="1" stroke-dasharray="2 4"/>
          <!-- Chip square -->
          <rect x="130" y="130" width="160" height="160" rx="16" fill="url(#chipGrad)" stroke="#00E5FF" stroke-width="1.5" opacity="0.9"/>
          <!-- Pins -->
          <g stroke="#00E5FF" stroke-width="1.5" opacity="0.7">
            <line x1="50" y1="170" x2="130" y2="170"/>
            <line x1="50" y1="210" x2="130" y2="210"/>
            <line x1="50" y1="250" x2="130" y2="250"/>
            <line x1="290" y1="170" x2="370" y2="170"/>
            <line x1="290" y1="210" x2="370" y2="210"/>
            <line x1="290" y1="250" x2="370" y2="250"/>
            <line x1="170" y1="50" x2="170" y2="130"/>
            <line x1="210" y1="50" x2="210" y2="130"/>
            <line x1="250" y1="50" x2="250" y2="130"/>
            <line x1="170" y1="290" x2="170" y2="370"/>
            <line x1="210" y1="290" x2="210" y2="370"/>
            <line x1="250" y1="290" x2="250" y2="370"/>
          </g>
          <!-- Inner grid -->
          <g stroke="#00E5FF" stroke-width="0.6" opacity="0.5">
            <line x1="170" y1="150" x2="170" y2="270"/>
            <line x1="210" y1="150" x2="210" y2="270"/>
            <line x1="250" y1="150" x2="250" y2="270"/>
            <line x1="150" y1="170" x2="270" y2="170"/>
            <line x1="150" y1="210" x2="270" y2="210"/>
            <line x1="150" y1="250" x2="270" y2="250"/>
          </g>
          <!-- Animated traveling pulse -->
          <rect x="50" y="209" width="320" height="2" fill="url(#lineGrad)">
            <animate attributeName="x" from="-120" to="420" dur="3s" repeatCount="indefinite"/>
          </rect>
          <!-- Core text -->
          <text x="210" y="216" text-anchor="middle" fill="#F4F6FB" font-family="JetBrains Mono" font-size="14" letter-spacing="2">RC-01</text>
        </svg>
      </div>
    </div>
  </section>

  <!-- VALUES -->
  <section class="section section--tight">
    <div class="container">
      <div class="values-grid">
        <div v-for="v in values" :key="v.name" class="value">
          <h3>{{ v.name }}.</h3>
          <p>{{ v.body }}</p>
        </div>
      </div>
    </div>
  </section>

  <!-- PRODUCTS -->
  <section class="section">
    <div class="container">
      <div class="section-head">
        <span class="eyebrow">What we ship</span>
        <h2>One vendor for AI, security, and comms IP.</h2>
        <p class="muted section-head__lead">
          Our IP catalogue covers the three blocks every modern payload, robot, and edge product
          ends up integrating — usually from three different vendors.
        </p>
      </div>

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

  <!-- PROOF -->
  <section class="section proof">
    <div class="container proof__inner">
      <div>
        <span class="eyebrow">Flight heritage</span>
        <h2>Our IP has flown.<br/>Yours can too.</h2>
        <p class="muted">
          The founding team spent two years inside the SSPACE lab at IIST building computation
          systems for satellites. The IP that flew on those missions is the same IP we're
          productising for the open market.
        </p>
        <RouterLink to="/about" class="btn btn--ghost">Read our story →</RouterLink>
      </div>
      <div class="proof__stats">
        <div><strong>2+</strong><span>years in flight programmes</span></div>
        <div><strong>3</strong><span>IP cores in customer-ready testing</span></div>
        <div><strong>5</strong><span>engineers across system + RTL</span></div>
      </div>
    </div>
  </section>

  <!-- BLOG -->
  <section class="section">
    <div class="container">
      <div class="section-head">
        <span class="eyebrow">Insights</span>
        <h2>Notes from the lab.</h2>
      </div>

      <div v-if="loading" class="dim mono">Loading…</div>
      <div v-else class="grid grid--3">
        <RouterLink
          v-for="post in posts"
          :key="post.slug"
          :to="`/blog/${post.slug}`"
          class="post-card"
        >
          <span class="pill">{{ post.category_label }}</span>
          <h3>{{ post.title }}</h3>
          <p class="muted">{{ post.excerpt }}</p>
          <span class="mono dim">{{ post.author_name }} · {{ post.read_time_minutes }} min</span>
        </RouterLink>
      </div>
    </div>
  </section>

  <!-- CTA -->
  <section class="section cta">
    <div class="container cta__inner">
      <h2>Start an evaluation.</h2>
      <p class="muted">One business-day reply. Conversations land with an engineer, not a sales rep.</p>
      <RouterLink to="/contact" class="btn btn--primary">Talk to us</RouterLink>
    </div>
  </section>
</template>

<style scoped>
/* ---------- Hero ---------- */
.hero {
  padding: var(--space-9) 0 var(--space-8);
  position: relative;
  overflow: hidden;
}
.hero__inner {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--space-7);
  align-items: center;
}
@media (max-width: 980px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__visual { order: -1; max-width: 380px; margin: 0 auto; }
}
.hero__sub {
  font-size: 1.2rem;
  color: var(--color-text-muted);
  max-width: 580px;
  margin: var(--space-4) 0 var(--space-6);
}
.hero__sub strong { color: var(--color-text); font-weight: 600; }
.hero__cta {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}
.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.hero__visual svg {
  width: 100%;
  height: auto;
  max-width: 480px;
  filter: drop-shadow(0 10px 40px rgba(0, 229, 255, 0.15));
}

/* ---------- Values ---------- */
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
@media (max-width: 760px) { .values-grid { grid-template-columns: 1fr; } }
.value {
  border-left: 2px solid var(--color-accent);
  padding: var(--space-2) var(--space-5);
}
.value h3 { font-size: 1.4rem; margin-bottom: var(--space-2); }
.value p { margin: 0; color: var(--color-text-muted); }

/* ---------- Section heads ---------- */
.section-head { margin-bottom: var(--space-6); max-width: 720px; }
.section-head h2 { margin-bottom: var(--space-3); }
.section-head__lead { font-size: 1.05rem; }

/* ---------- Proof ---------- */
.proof {
  background: linear-gradient(180deg, transparent, var(--color-bg-soft), transparent);
  border-top: 1px solid var(--color-border-soft);
  border-bottom: 1px solid var(--color-border-soft);
}
.proof__inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-7);
  align-items: center;
}
@media (max-width: 860px) { .proof__inner { grid-template-columns: 1fr; } }
.proof__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.proof__stats > div {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-4);
  text-align: center;
}
.proof__stats strong {
  display: block;
  font-size: 2rem;
  color: var(--color-accent);
  font-family: var(--font-mono);
  margin-bottom: var(--space-1);
}
.proof__stats span { color: var(--color-text-dim); font-size: 0.85rem; }

/* ---------- Blog tease ---------- */
.post-card {
  background: linear-gradient(180deg, var(--color-surface), var(--color-surface-2));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  color: var(--color-text);
  transition: border-color var(--transition), transform var(--transition);
}
.post-card:hover {
  border-color: rgba(0, 229, 255, 0.4);
  transform: translateY(-3px);
  color: var(--color-text);
}
.post-card h3 { margin: 0; font-size: 1.2rem; }
.post-card p { margin: 0; flex: 1; }

/* ---------- Final CTA ---------- */
.cta {
  text-align: center;
  background:
    radial-gradient(600px 240px at 50% 50%, rgba(0, 229, 255, 0.12), transparent 70%);
}
.cta__inner { max-width: 640px; margin: 0 auto; }
.cta h2 { margin-bottom: var(--space-3); }
.cta p { margin-bottom: var(--space-5); }
</style>
