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

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

onMounted(async () => {
  try { founders.value = await api.listFounders() }
  catch (e) {}
  finally { loading.value = false }
})

const values = [
  { name: 'Fast', body: 'We measure things. We ship blocks. We don\'t hide behind roadmaps.' },
  { name: 'Reliable', body: 'Verification-first. Documentation that an integrator can actually use.' },
  { name: 'Robust', body: 'Designed for orbits and factory floors — robustness is the baseline, not a feature.' },
]
</script>

<template>
  <SectionHero
    eyebrow="About"
    title="Built by a satellite-software team, for everyone who needs that compute."
    subtitle="RisingCompute designs parallel hardware architectures and IP cores for AI, space, and robotics. The founders met in the SSPACE lab at IIST — and brought the same standards out into the open."
  />

  <!-- STORY -->
  <section class="section section--tight">
    <div class="container story">
      <div>
        <span class="eyebrow">Our story</span>
        <h2>Closing the compute gap.</h2>
      </div>
      <div class="story__body">
        <p>
          RisingCompute began in 2026 inside the SSPACE lab at IIST, where our founding
          team spent two years building computation systems for satellites — IP that has
          since flown in space.
        </p>
        <p>
          Working at that level taught us something simple: the difference between what a
          research team can do with AI and what most engineers and companies can do comes
          down to the compute they have access to. We started RisingCompute to close that
          gap. By building parallel hardware architectures and reusable IP cores, we make
          accelerated compute scalable and easy to integrate — so an aerospace OEM, a
          robotics startup, or a defense electronics lab can get research-grade
          performance without rebuilding the stack from scratch.
        </p>
      </div>
    </div>
  </section>

  <hr class="divider container" />

  <!-- FOUNDERS -->
  <section class="section section--tight">
    <div class="container">
      <div class="section-head">
        <span class="eyebrow">Founders</span>
        <h2>Three engineers. One full stack.</h2>
        <p class="muted">
          Every founder owns a clear technical domain. Together we cover system architecture
          down to silicon.
        </p>
      </div>

      <div v-if="loading" class="dim mono">Loading…</div>
      <div v-else class="grid grid--3">
        <FounderCard v-for="f in founders" :key="f.name" :founder="f" />
      </div>
    </div>
  </section>

  <hr class="divider container" />

  <!-- VALUES -->
  <section class="section section--tight">
    <div class="container">
      <div class="section-head">
        <span class="eyebrow">Core values</span>
        <h2>Fast. Reliable. Robust.</h2>
      </div>
      <div class="grid grid--3">
        <div v-for="v in values" :key="v.name" class="value-card">
          <h3>{{ v.name }}</h3>
          <p>{{ v.body }}</p>
        </div>
      </div>
    </div>
  </section>

  <!-- FACTS -->
  <section class="section section--tight">
    <div class="container facts">
      <div>
        <span class="eyebrow">Where we are</span>
        <h3 class="facts__h">Surat, Gujarat</h3>
        <p class="muted">Primary office and engineering team.</p>
      </div>
      <div>
        <span class="eyebrow">Where we're incubated</span>
        <h3 class="facts__h">STIIC · IIST</h3>
        <p class="muted">Space Technology Incubation & Innovation Cell, IIST.</p>
      </div>
      <div>
        <span class="eyebrow">Stage</span>
        <h3 class="facts__h">Pre-revenue</h3>
        <p class="muted">Founded 2026. Three IP cores in customer-ready testing.</p>
      </div>
    </div>
  </section>

  <!-- CTA -->
  <section class="section text-center">
    <div class="container">
      <h2>Work with us.</h2>
      <p class="muted">Talk to the founders directly — engineering-first conversations only.</p>
      <RouterLink to="/contact" class="btn btn--primary">Talk to us</RouterLink>
    </div>
  </section>
</template>

<style scoped>
.story {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: var(--space-7);
}
@media (max-width: 860px) { .story { grid-template-columns: 1fr; } }
.story__body p { font-size: 1.05rem; }

.section-head { margin-bottom: var(--space-6); max-width: 720px; }

.value-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-6);
}
.value-card h3 {
  font-family: var(--font-mono);
  color: var(--color-accent);
  margin-bottom: var(--space-3);
  font-size: 1.1rem;
  letter-spacing: 0.05em;
}

.facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
@media (max-width: 860px) { .facts { grid-template-columns: 1fr; } }
.facts__h { margin: var(--space-3) 0 var(--space-2); }
</style>
