<script setup>
import { RouterLink } from 'vue-router'
import SectionHero from '@/components/SectionHero.vue'

const pillars = [
  {
    title: 'Parallel by design',
    body: 'Datapaths are parallel from the first line of RTL. The architecture is not a serial CPU that we widened — it is parallel-native.',
  },
  {
    title: 'Verification-first',
    body: 'Every block ships with UVM testbenches, a coverage plan, and traceable test vectors. Heritage you can audit, not heritage you have to take on faith.',
  },
  {
    title: 'FPGA → ASIC portability',
    body: 'The same RTL synthesises on Xilinx UltraScale+, Intel Agilex, and standard 28nm / 40nm ASIC libraries. Prototype fast, ship slow, but with the same code.',
  },
  {
    title: 'Security as architecture',
    body: 'Constant-time datapaths, side-channel-aware routing, and a security white paper per release — not a checklist bolted on at integration time.',
  },
]
</script>

<template>
  <SectionHero
    eyebrow="Technology"
    title="An architecture built for AI, space, and robotics — in that order."
    subtitle="A short tour of the design principles that show up in every block we ship. If you want the spec-sheet version, request a datasheet."
  />

  <!-- PILLARS -->
  <section class="section">
    <div class="container">
      <div class="grid grid--2 pillars">
        <article v-for="(p, i) in pillars" :key="p.title" class="pillar">
          <span class="pillar__num mono">{{ String(i + 1).padStart(2, '0') }}</span>
          <h3>{{ p.title }}</h3>
          <p class="muted">{{ p.body }}</p>
        </article>
      </div>
    </div>
  </section>

  <!-- DIAGRAM -->
  <section class="section diagram-section">
    <div class="container">
      <div class="section-head">
        <span class="eyebrow">System view</span>
        <h2>The stack, at a glance.</h2>
        <p class="muted">Three product blocks. One shared verification toolchain. Same RTL from FPGA to ASIC.</p>
      </div>

      <div class="stack-diagram">
        <div class="layer layer--top">
          <span class="layer__title">Customer SoC / FPGA</span>
          <span class="layer__sub mono">Your design</span>
        </div>
        <div class="layer__pipe"></div>
        <div class="layer-row">
          <div class="layer layer--block">
            <span class="layer__title">AI Inference IP</span>
            <span class="layer__sub mono">INT8 / INT4</span>
          </div>
          <div class="layer layer--block">
            <span class="layer__title">Cybersecurity IP</span>
            <span class="layer__sub mono">AES · SHA · ECC</span>
          </div>
          <div class="layer layer--block">
            <span class="layer__title">Communication IP</span>
            <span class="layer__sub mono">SpaceWire · CAN · UART</span>
          </div>
        </div>
        <div class="layer__pipe"></div>
        <div class="layer layer--base">
          <span class="layer__title">Verification &amp; Integration Toolchain</span>
          <span class="layer__sub mono">UVM · Reference designs · Integration guides</span>
        </div>
      </div>
    </div>
  </section>

  <!-- CTA -->
  <section class="section text-center">
    <div class="container">
      <h2>Want the long version?</h2>
      <p class="muted">Request a technical brief or schedule a 30-minute architect call.</p>
      <RouterLink to="/contact" class="btn btn--primary">Request the brief</RouterLink>
    </div>
  </section>
</template>

<style scoped>
.pillars { gap: var(--space-5); }
.pillar {
  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-6);
  position: relative;
}
.pillar__num {
  color: var(--color-accent);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: var(--space-3);
}

.diagram-section {
  background: linear-gradient(180deg, transparent, var(--color-bg-soft), transparent);
  border-block: 1px solid var(--color-border-soft);
}
.section-head { margin-bottom: var(--space-6); max-width: 720px; }

.stack-diagram {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  max-width: 880px;
  margin: 0 auto;
}
.layer {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  text-align: center;
}
.layer--top {
  background: linear-gradient(180deg, rgba(0, 229, 255, 0.08), var(--color-surface));
  border-color: rgba(0, 229, 255, 0.3);
}
.layer--base {
  background: linear-gradient(0deg, rgba(0, 229, 255, 0.06), var(--color-surface));
  border-color: rgba(0, 229, 255, 0.25);
}
.layer__title { display: block; font-weight: 600; font-size: 1.05rem; color: var(--color-text); }
.layer__sub { display: block; color: var(--color-text-dim); font-size: 0.8rem; margin-top: var(--space-1); letter-spacing: 0.05em; }
.layer__pipe {
  width: 2px;
  height: 20px;
  background: var(--color-accent);
  align-self: center;
  opacity: 0.7;
}
.layer-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
@media (max-width: 720px) {
  .layer-row { grid-template-columns: 1fr; }
}
</style>
