<script setup>
import { ref } from 'vue'
import { api } from '@/api/client'

const email = ref('')
const status = ref('idle') // idle | loading | success | error
const message = ref('')

async function subscribe() {
  if (!email.value) return
  status.value = 'loading'
  try {
    await api.subscribeNewsletter(email.value, 'footer')
    status.value = 'success'
    message.value = "You're on the list."
    email.value = ''
  } catch (err) {
    status.value = 'error'
    message.value = 'Something went wrong. Try again in a moment.'
  }
}

const year = new Date().getFullYear()
</script>

<template>
  <footer class="footer">
    <div class="container footer__grid">
      <div class="footer__brand">
        <div class="brand-line">
          <svg width="28" height="28" viewBox="0 0 64 64" aria-hidden="true">
            <defs>
              <linearGradient id="fg" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0%" stop-color="#0B1437"/>
                <stop offset="100%" stop-color="#00E5FF"/>
              </linearGradient>
            </defs>
            <rect width="64" height="64" rx="14" fill="url(#fg)"/>
            <path d="M16 44 L26 28 L36 38 L48 18" stroke="#F4F6FB" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          <strong>RisingCompute</strong>
        </div>
        <p class="footer__tagline">Accelerating the compute — IP cores for AI, space, and robotics.</p>
        <p class="footer__incub mono">Incubated at STIIC · IIST</p>
      </div>

      <div>
        <h4>Company</h4>
        <ul>
          <li><RouterLink to="/about">About</RouterLink></li>
          <li><RouterLink to="/careers">Careers</RouterLink></li>
          <li><RouterLink to="/blog">Insights</RouterLink></li>
          <li><RouterLink to="/contact">Contact</RouterLink></li>
        </ul>
      </div>

      <div>
        <h4>Products</h4>
        <ul>
          <li><RouterLink to="/products/ai-inference-ip">AI Inference IP</RouterLink></li>
          <li><RouterLink to="/products/cybersecurity-ip">Cybersecurity IP</RouterLink></li>
          <li><RouterLink to="/products/communication-ip">Communication IP</RouterLink></li>
          <li><RouterLink to="/technology">Technology</RouterLink></li>
        </ul>
      </div>

      <div class="footer__news">
        <h4>Newsletter</h4>
        <p class="dim">Quarterly technical updates. No spam.</p>
        <form class="footer__sub" @submit.prevent="subscribe">
          <input
            v-model="email"
            type="email"
            required
            placeholder="you@company.com"
            aria-label="Email address"
          />
          <button type="submit" class="btn btn--primary" :disabled="status === 'loading'">
            {{ status === 'loading' ? '…' : 'Subscribe' }}
          </button>
        </form>
        <p v-if="status === 'success'" class="footer__msg footer__msg--ok">{{ message }}</p>
        <p v-if="status === 'error'" class="footer__msg footer__msg--err">{{ message }}</p>
      </div>
    </div>

    <div class="container footer__bottom">
      <p class="dim">© {{ year }} RisingCompute Pvt Ltd · Surat, Gujarat, India</p>
      <p class="dim">
        <RouterLink to="/contact">Privacy</RouterLink> ·
        <RouterLink to="/contact">Terms</RouterLink> ·
        <a href="mailto:contact@risingcompute.in">contact@risingcompute.in</a>
      </p>
    </div>
  </footer>
</template>

<style scoped>
.footer {
  border-top: 1px solid var(--color-border-soft);
  padding: var(--space-8) 0 var(--space-5);
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.25));
  margin-top: var(--space-9);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: var(--space-7);
  margin-bottom: var(--space-7);
}
@media (max-width: 900px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .footer__grid { grid-template-columns: 1fr; }
}

.brand-line {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  color: var(--color-text);
}
.footer__tagline { color: var(--color-text-muted); max-width: 280px; }
.footer__incub { color: var(--color-text-dim); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }

.footer h4 {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin-bottom: var(--space-4);
}
.footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2);
}
.footer ul a {
  color: var(--color-text-muted);
  font-size: 0.92rem;
}
.footer ul a:hover { color: var(--color-accent); }

.footer__sub {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.footer__sub input {
  flex: 1;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.7rem 0.9rem;
  font-family: var(--font-sans);
  color: var(--color-text);
  font-size: 0.9rem;
}
.footer__sub input:focus {
  outline: none;
  border-color: var(--color-accent);
}
.footer__sub button { padding: 0.7rem 1rem; font-size: 0.9rem; }
.footer__msg { font-size: 0.85rem; margin-top: var(--space-2); }
.footer__msg--ok { color: var(--color-success); }
.footer__msg--err { color: var(--color-error); }

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-soft);
  font-size: 0.85rem;
}
@media (max-width: 640px) {
  .footer__bottom { flex-direction: column; gap: var(--space-2); }
}
.footer__bottom a { color: var(--color-text-muted); }
.footer__bottom a:hover { color: var(--color-accent); }
</style>
