---
const email = 'contact@nowyousea.fr';
---

<section id="contact" class="section">
  <div class="container-narrow">
    <div class="relative overflow-hidden rounded-3xl border border-tide-400/20 bg-gradient-to-br from-abyss-800/70 via-abyss-900/70 to-abyss-950 p-8 md:p-14">
      <!-- Ambient -->
      <div class="pointer-events-none absolute inset-0 opacity-80">
        <div class="absolute -top-24 -right-24 h-96 w-96 rounded-full bg-tide-500/20 blur-3xl"></div>
        <div class="absolute -bottom-24 -left-24 h-96 w-96 rounded-full bg-lagoon-500/15 blur-3xl"></div>
      </div>

      <div class="relative grid gap-10 lg:grid-cols-[1.1fr_1fr] lg:items-center">
        <div>
          <span class="eyebrow">Contact</span>
          <h2 class="h-section mt-4">Parlons de votre port, de votre façade, de votre parc.</h2>
          <p class="lead mt-6">
            Vous gérez un port, une aire marine protégée, ou un projet éolien ? Vous cherchez un
            outil de terrain pour produire des données environnementales sans y consacrer un
            budget de recherche ? Écrivez-nous — on revient vite.
          </p>

          <div class="mt-8 flex flex-wrap gap-3">
            <a href={`mailto:${email}?subject=Demande%20de%20d%C3%A9mo%20NowYouSea`} class="btn btn-primary">
              <svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <rect x="3" y="5" width="18" height="14" rx="2"/>
                <path d="M3 7l9 6 9-6"/>
              </svg>
              Demander une démo
            </a>
            <a href={`mailto:${email}`} class="btn btn-ghost">
              {email}
            </a>
          </div>
        </div>

        <div class="grid gap-4">
          <div class="rounded-xl border border-white/10 bg-white/[0.03] p-5">
            <div class="flex items-start gap-4">
              <span class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-tide-500/15 text-tide-400 ring-1 ring-tide-400/30">
                <svg viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                  <rect x="3" y="5" width="18" height="14" rx="2"/>
                  <path d="M3 7l9 6 9-6"/>
                </svg>
              </span>
              <div>
                <div class="text-[11px] font-medium uppercase tracking-widest text-foam-100/55">Email</div>
                <a href={`mailto:${email}`} class="mt-1 block font-display text-foam-50 hover:text-tide-400">{email}</a>
                <p class="mt-1 text-xs text-foam-100/55">Réponse sous 48h ouvrées.</p>
              </div>
            </div>
          </div>

          <div class="rounded-xl border border-white/10 bg-white/[0.03] p-5">
            <div class="flex items-start gap-4">
              <span class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-lagoon-500/15 text-lagoon-400 ring-1 ring-lagoon-400/30">
                <svg viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                  <path d="M12 2a10 10 0 1 0 10 10"/>
                  <path d="M12 2v10l7 4"/>
                </svg>
              </span>
              <div>
                <div class="text-[11px] font-medium uppercase tracking-widest text-foam-100/55">Démo terrain</div>
                <p class="mt-1 text-sm text-foam-50">Sur sollicitation — présentation de l'architecture &amp; de prototypes.</p>
              </div>
            </div>
          </div>

          <div class="rounded-xl border border-white/10 bg-white/[0.03] p-5">
            <div class="flex items-start gap-4">
              <span class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-violet-500/15 text-violet-300 ring-1 ring-violet-400/30">
                <svg viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                  <path d="M4 6h16v12H4z"/>
                  <path d="M4 10h16"/>
                  <circle cx="8" cy="14" r="1" fill="currentColor"/>
                </svg>
              </span>
              <div>
                <div class="text-[11px] font-medium uppercase tracking-widest text-foam-100/55">Partenariats</div>
                <p class="mt-1 text-sm text-foam-50">Ports, collectivités, AMP, opérateurs éoliens, bureaux d'études.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>