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

const route = useRoute()
const defaultInterest = String(route.query.interest || 'other')
</script>

<template>
  <SectionHero
    eyebrow="Talk to us"
    title="Start an evaluation."
    subtitle="Conversations land with an engineer, not a sales rep. One business-day reply."
  />

  <section class="section">
    <div class="container contact-grid">
      <div class="contact-info">
        <h3>Direct lines</h3>
        <ul>
          <li>
            <span class="dim mono">Email</span>
            <a href="mailto:contact@risingcompute.in">contact@risingcompute.in</a>
          </li>
          <li>
            <span class="dim mono">HQ</span>
            <p>Surat, Gujarat, India</p>
          </li>
          <li>
            <span class="dim mono">Incubation</span>
            <p>STIIC · IIST, Thiruvananthapuram</p>
          </li>
          <li>
            <span class="dim mono">Hours</span>
            <p>Mon–Fri · 09:30–18:30 IST</p>
          </li>
        </ul>

        <hr class="divider" />

        <h3>What to expect</h3>
        <ol class="steps">
          <li>A short reply from a founder within one business day.</li>
          <li>A 30-minute qualification call.</li>
          <li>Datasheet + reference design under NDA.</li>
          <li>Evaluation licence terms.</li>
        </ol>
      </div>

      <div>
        <ContactForm :default-interest="defaultInterest" />
      </div>
    </div>
  </section>
</template>

<style scoped>
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-7);
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-info ul {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-5);
  display: grid;
  gap: var(--space-4);
}
.contact-info li { display: grid; gap: var(--space-1); }
.contact-info li span.mono {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.contact-info li p { margin: 0; }
.contact-info a { font-size: 1.05rem; }

.steps {
  padding-left: var(--space-5);
  display: grid;
  gap: var(--space-2);
  color: var(--color-text-muted);
}
.steps li::marker { color: var(--color-accent); font-family: var(--font-mono); }
</style>
