<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Contact Us — LexaClip</title>
  <meta name="description" content="Get in touch with the LexaClip team. Questions, feedback or account requests — we reply within one business day." />
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" />
  <style>body { font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif; }</style>
</head>
<body>
<div class="min-h-screen bg-white">

  <%- include('partials/site-header', { active: 'contact' }) %>

  <main>
    <section class="relative overflow-hidden px-4 py-24 sm:py-28">
      <!-- Yumuşak arka plan vurgusu -->
      <div class="pointer-events-none absolute left-1/2 top-0 -z-10 h-[420px] w-[720px] -translate-x-1/2 rounded-full bg-gradient-to-b from-violet-100/70 via-fuchsia-50/40 to-transparent blur-3xl" aria-hidden="true"></div>

      <div class="mx-auto max-w-2xl text-center">
        <h1 class="text-4xl font-bold text-slate-800 md:text-[52px] md:leading-tight">Contact Us</h1>
        <p class="mx-auto mt-4 max-w-md text-base leading-relaxed text-zinc-500">
          Questions, feedback, billing or account requests — one address covers it all.
        </p>

        <div class="mx-auto mt-12 max-w-lg rounded-3xl border border-zinc-200/80 bg-white p-8 shadow-[0_20px_60px_-20px_rgba(109,40,217,0.15)] sm:p-10">
          <div class="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-br from-violet-600 to-fuchsia-500 shadow-lg shadow-violet-500/25">
            <svg class="h-7 w-7 text-white" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3.5 7 8.5 6 8.5-6"/></svg>
          </div>

          <a href="mailto:support@lumerexa.com" class="mt-6 inline-block break-all text-2xl font-semibold text-slate-900 transition hover:text-violet-600 sm:text-[1.7rem]">
            support@lumerexa.com
          </a>

          <p class="mt-4 text-sm leading-relaxed text-zinc-500">
            We read every message and usually reply within one business day. Include the email
            address you use in LexaClip so we can help faster.
          </p>

          <a href="mailto:support@lumerexa.com?subject=LexaClip%20support" class="mt-8 inline-block rounded-full bg-slate-900 px-7 py-3 text-sm font-semibold text-white transition hover:bg-slate-800">
            Write to us
          </a>
        </div>

        <p class="mt-10 text-sm text-zinc-400">
          Looking for a quick answer? Check the <a href="/faq" class="font-medium text-violet-600 hover:underline">FAQ</a>
          — most questions are already covered there.
        </p>
      </div>
    </section>
  </main>

  <footer class="relative border-t border-white/10 bg-[#1e1b4b]">
    <div class="pointer-events-none absolute bottom-4 right-4 select-none text-[10rem] font-bold leading-none text-white/5" aria-hidden="true">LexaClip</div>
    <div class="relative mx-auto w-[90%] max-w-[90%] px-4 py-12 sm:px-6 lg:px-8">
      <div class="flex flex-col items-center justify-between gap-6 sm:flex-row">
        <div class="flex items-center gap-2 text-sm text-slate-300">
          <span class="text-lg font-bold text-white">LexaClip</span>
          <span>· a <a href="https://lumerexa.com" class="font-medium text-white hover:underline">Lumerexa</a> product</span>
        </div>
        <div class="flex items-center gap-6 text-sm text-slate-300">
          <a href="/" class="transition hover:text-white">Home</a>
          <a href="/price" class="transition hover:text-white">Pricing</a>
          <a href="/privacy" class="transition hover:text-white">Privacy Policy</a>
          <a href="/terms" class="transition hover:text-white">Terms of Use</a>
          <span>© <%= new Date().getFullYear() %> Lumerexa</span>
        </div>
      </div>
    </div>
  </footer>

</div>
</body>
</html>
