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

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

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

<template>
  <SectionHero
    eyebrow="Careers"
    title="Build silicon that flies."
    subtitle="We're a small founding team in Surat and at IIST. The bar is high; so is the autonomy. If you want to own real RTL, real verification, and real customer relationships from day one, we should talk."
  />

  <section class="section section--tight">
    <div class="container">
      <div class="why-grid">
        <div>
          <h3 class="mono mono-head">Why us</h3>
          <ul class="reasons">
            <li>Founder-led engineering. You sit next to the people who decide what to build.</li>
            <li>Real flight-heritage work — variants of our IP have flown.</li>
            <li>Ownership over a block, not a sliver.</li>
            <li>Equity for the first ten people.</li>
            <li>Surat HQ + IIST presence — both real labs.</li>
          </ul>
        </div>
        <div>
          <h3 class="mono mono-head">How we hire</h3>
          <ol class="steps">
            <li><strong>Intro chat</strong> (30 min) — what you've shipped, what you want next.</li>
            <li><strong>Technical deep-dive</strong> (90 min) — a real problem from our stack.</li>
            <li><strong>Founder round</strong> — values, autonomy, expectations.</li>
            <li><strong>Offer</strong> within a week.</li>
          </ol>
        </div>
      </div>
    </div>
  </section>

  <hr class="divider container" />

  <section class="section section--tight">
    <div class="container">
      <span class="eyebrow">Open roles</span>
      <h2>What we're hiring for.</h2>

      <div v-if="loading" class="dim mono">Loading…</div>
      <div v-else-if="!jobs.length" class="empty">
        <p class="muted">
          No open roles posted right now. We always want to hear from VLSI, RTL,
          verification, and DSP engineers — send us a note.
        </p>
        <RouterLink :to="{ path: '/contact', query: { interest: 'careers' } }" class="btn btn--primary">
          Introduce yourself
        </RouterLink>
      </div>
      <div v-else class="jobs">
        <article v-for="j in jobs" :key="j.slug" class="job">
          <div>
            <h3>{{ j.title }}</h3>
            <p class="dim mono job__meta">{{ j.location_label }} · {{ j.employment_type }} · posted {{ j.posted_at }}</p>
          </div>
          <RouterLink :to="{ path: '/contact', query: { interest: 'careers' } }" class="btn btn--ghost">
            Apply →
          </RouterLink>
        </article>
      </div>
    </div>
  </section>
</template>

<style scoped>
.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
}
@media (max-width: 760px) { .why-grid { grid-template-columns: 1fr; } }
.mono-head {
  color: var(--color-text-dim);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.reasons, .steps {
  display: grid;
  gap: var(--space-3);
  color: var(--color-text-muted);
}
.reasons { list-style: none; padding: 0; }
.reasons li { padding-left: var(--space-5); position: relative; }
.reasons li::before {
  content: '+';
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-weight: 600;
}
.steps { padding-left: var(--space-5); }
.steps li::marker { color: var(--color-accent); font-family: var(--font-mono); }

.jobs {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.job {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.job h3 { margin: 0 0 var(--space-1); font-size: 1.15rem; }
.job__meta { margin: 0; font-size: 0.8rem; }

.empty {
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
  margin-top: var(--space-5);
}
.empty p { margin: 0 0 var(--space-4); }
</style>
