<% const sent = typeof query !== 'undefined' && query.sent === '1'; %>

<div id="contact-page" data-sent="<%= sent ? '1' : '0' %>">

<!-- Hero -->
<section class="pt-32 pb-16 px-6 relative overflow-hidden" style="background:linear-gradient(160deg,#0b1f3a 0%,#142d55 100%)">
  <div class="absolute" style="width:500px;height:400px;top:-80px;right:-100px;background:radial-gradient(circle,rgba(128,101,248,.15) 0%,transparent 70%);pointer-events:none"></div>
  <div class="absolute" style="width:350px;height:350px;bottom:-60px;left:-60px;background:radial-gradient(circle,rgba(19,179,180,.1) 0%,transparent 70%);pointer-events:none"></div>

  <div class="max-w-4xl mx-auto text-center relative">
    <nav class="flex justify-center items-center gap-2 text-xs mb-6" style="color:rgba(255,255,255,.4)">
      <a href="/" class="hover:text-white transition-colors">Home</a>
      <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
      <span style="color:rgba(255,255,255,.7)">Contact</span>
    </nav>
    <span class="inline-block text-xs font-bold uppercase tracking-widest px-3 py-1.5 rounded-full mb-5"
          style="background:rgba(128,101,248,.2);color:#c4b5fd">Get in touch</span>
    <h1 class="text-4xl md:text-5xl font-black text-white mb-4 leading-tight">
      We'd love to <span class="grad-text">hear from you.</span>
    </h1>
    <p class="text-sm md:text-base max-w-xl mx-auto" style="color:rgba(255,255,255,.6);line-height:1.8">
      Whether you're evaluating Analytics Grade, need support, or want to partner with us — our team is online and ready to help.
    </p>
    <div class="inline-flex items-center gap-2 mt-6 px-4 py-2 rounded-full" style="background:rgba(19,179,180,.15);border:1px solid rgba(19,179,180,.3)">
      <span class="pulse-dot w-1.5 h-1.5 rounded-full inline-block" style="background:#13b3b4"></span>
      <span class="text-xs font-semibold" style="color:#13b3b4">Team online now · Avg response time: 2 hours</span>
    </div>
  </div>
</section>

<!-- Contact type cards -->
<section class="py-14 px-6 bg-white">
  <div class="max-w-5xl mx-auto">
    <p class="text-center text-xs font-bold uppercase tracking-widest text-gray-400 mb-7">What can we help you with?</p>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4" id="contact-cards">
      <button type="button" data-type="sales" onclick="selectContact(this,'sales')"
              class="contact-type-card group flex flex-col items-center text-center p-5 rounded-2xl border-2 border-gray-100 bg-white hover:border-purple transition-all">
        <div class="w-11 h-11 rounded-xl flex items-center justify-center mb-3 group-hover:scale-110 transition-transform" style="background:rgba(128,101,248,.1)">
          <svg class="w-5 h-5" fill="none" stroke="#8065f8" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
        </div>
        <p class="font-bold text-navy text-sm">Sales</p>
        <p class="text-[10px] text-gray-400 mt-1">Pricing, demos &amp; trials</p>
      </button>
      <button type="button" data-type="support" onclick="selectContact(this,'support')"
              class="contact-type-card group flex flex-col items-center text-center p-5 rounded-2xl border-2 border-gray-100 bg-white hover:border-teal transition-all">
        <div class="w-11 h-11 rounded-xl flex items-center justify-center mb-3 group-hover:scale-110 transition-transform" style="background:rgba(19,179,180,.1)">
          <svg class="w-5 h-5" fill="none" stroke="#13b3b4" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
        </div>
        <p class="font-bold text-navy text-sm">Support</p>
        <p class="text-[10px] text-gray-400 mt-1">Technical help &amp; bugs</p>
      </button>
      <button type="button" data-type="partnerships" onclick="selectContact(this,'partnerships')"
              class="contact-type-card group flex flex-col items-center text-center p-5 rounded-2xl border-2 border-gray-100 bg-white hover:border-blue transition-all">
        <div class="w-11 h-11 rounded-xl flex items-center justify-center mb-3 group-hover:scale-110 transition-transform" style="background:rgba(68,144,211,.1)">
          <svg class="w-5 h-5" fill="none" stroke="#4490d3" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71"/><path stroke-linecap="round" stroke-linejoin="round" d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"/></svg>
        </div>
        <p class="font-bold text-navy text-sm">Partnerships</p>
        <p class="text-[10px] text-gray-400 mt-1">Integrations &amp; resellers</p>
      </button>
      <button type="button" data-type="press" onclick="selectContact(this,'press')"
              class="contact-type-card group flex flex-col items-center text-center p-5 rounded-2xl border-2 border-gray-100 bg-white hover:border-gray-400 transition-all">
        <div class="w-11 h-11 rounded-xl flex items-center justify-center mb-3 group-hover:scale-110 transition-transform" style="background:rgba(11,31,58,.07)">
          <svg class="w-5 h-5" fill="none" stroke="#0b1f3a" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"/></svg>
        </div>
        <p class="font-bold text-navy text-sm">Press</p>
        <p class="text-[10px] text-gray-400 mt-1">Media &amp; PR enquiries</p>
      </button>
    </div>
  </div>
</section>

<!-- Form + sidebar -->
<section class="pt-20 pb-20 px-6 bg-gray-50">
  <div class="max-w-5xl mx-auto flex gap-10 items-start flex-col lg:flex-row">

    <div class="flex-1 min-w-0 w-full">
      <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-8">

        <% if (sent) { %>
        <div class="mb-6 flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-semibold text-teal" style="background:rgba(19,179,180,.1);border:1px solid rgba(19,179,180,.25)">
          <svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
          Your message has been sent. We'll be back to you within 2 business days.
        </div>
        <% } %>

        <h2 class="text-xl font-extrabold text-navy mb-1">Send us a message</h2>
        <p class="text-sm text-gray-500 mb-7">Fill in the form and we'll be back to you within 2 business days.</p>

        <form id="contact-form" action="/form/contact" method="post" class="space-y-5">
          <input type="hidden" name="name" id="field-name" />
          <input type="hidden" name="subject" id="field-subject" />
          <input type="hidden" name="formType" id="field-form-type" value="contact" />
          <input type="hidden" id="contact-type" value="" />
          <textarea name="message" id="field-message" class="hidden" aria-hidden="true"></textarea>

          <div class="grid sm:grid-cols-2 gap-4">
            <div>
              <label class="form-label" for="first-name">First name <span class="text-red-400">*</span></label>
              <input id="first-name" type="text" class="form-input" placeholder="Sarah" autocomplete="given-name" />
              <p class="error-msg text-[10px] text-red-500 mt-1 hidden">Please enter your first name.</p>
            </div>
            <div>
              <label class="form-label" for="last-name">Last name <span class="text-red-400">*</span></label>
              <input id="last-name" type="text" class="form-input" placeholder="Mitchell" autocomplete="family-name" />
              <p class="error-msg text-[10px] text-red-500 mt-1 hidden">Please enter your last name.</p>
            </div>
          </div>

          <div class="grid sm:grid-cols-2 gap-4">
            <div>
              <label class="form-label" for="email">Work email <span class="text-red-400">*</span></label>
              <input id="email" name="email" type="email" class="form-input" placeholder="email@apexagency.com" autocomplete="email" />
              <p class="error-msg text-[10px] text-red-500 mt-1 hidden">Please enter a valid email address.</p>
            </div>
            <div>
              <label class="form-label" for="company">Agency / company</label>
              <input id="company" type="text" class="form-input" placeholder="Apex Agency" autocomplete="organization" />
            </div>
          </div>

          <div class="grid sm:grid-cols-2 gap-4">
            <div>
              <label class="form-label" for="phone">Phone (optional)</label>
              <input id="phone" type="tel" class="form-input" placeholder="+1 (555) 000-0000" autocomplete="tel" />
            </div>
            <div>
              <label class="form-label" for="team-size">Team size</label>
              <select id="team-size" class="form-input form-select">
                <option value="" selected>Select…</option>
                <option>1–5 people</option>
                <option>6–20 people</option>
                <option>21–50 people</option>
                <option>51–100 people</option>
                <option>100+ people</option>
              </select>
            </div>
          </div>

          <div>
            <label class="form-label">Type of enquiry</label>
            <div class="flex flex-wrap gap-2 mt-1" id="pill-group">
              <button type="button" data-val="Sales / pricing" class="contact-pill px-3.5 py-1.5 rounded-full text-xs font-semibold border border-gray-200 text-gray-600">Sales / pricing</button>
              <button type="button" data-val="Product demo" class="contact-pill px-3.5 py-1.5 rounded-full text-xs font-semibold border border-gray-200 text-gray-600">Product demo</button>
              <button type="button" data-val="Technical support" class="contact-pill px-3.5 py-1.5 rounded-full text-xs font-semibold border border-gray-200 text-gray-600">Technical support</button>
              <button type="button" data-val="Integration help" class="contact-pill px-3.5 py-1.5 rounded-full text-xs font-semibold border border-gray-200 text-gray-600">Integration help</button>
              <button type="button" data-val="Partnership" class="contact-pill px-3.5 py-1.5 rounded-full text-xs font-semibold border border-gray-200 text-gray-600">Partnership</button>
              <button type="button" data-val="Press / media" class="contact-pill px-3.5 py-1.5 rounded-full text-xs font-semibold border border-gray-200 text-gray-600">Press / media</button>
              <button type="button" data-val="Other" class="contact-pill px-3.5 py-1.5 rounded-full text-xs font-semibold border border-gray-200 text-gray-600">Other</button>
            </div>
            <input type="hidden" id="enquiry-type" value="" />
          </div>

          <div>
            <label class="form-label" for="message">Message <span class="text-red-400">*</span></label>
            <textarea id="message" rows="5" class="form-input resize-none"
                      placeholder="Tell us what you're working on, what you need, or what questions you have…"></textarea>
            <div class="flex justify-between mt-1">
              <p class="error-msg text-[10px] text-red-500 hidden">Please write a message.</p>
              <p class="text-[10px] text-gray-400 ml-auto"><span id="char-count">0</span> / 1000</p>
            </div>
          </div>

          <div>
            <label class="form-label" for="source">How did you hear about Analytics Grade?</label>
            <select id="source" class="form-input form-select">
              <option value="" selected>Select…</option>
              <option>Google Search</option>
              <option>LinkedIn</option>
              <option>Word of mouth / referral</option>
              <option>Blog / article</option>
              <option>Conference / event</option>
              <option>Social media</option>
              <option>Other</option>
            </select>
          </div>

          <div>
            <div class="flex items-start gap-3">
              <input type="checkbox" id="consent" class="sr-only" />
              <div id="consent-box" class="w-4 h-4 rounded border-2 border-gray-300 transition-all cursor-pointer flex items-center justify-center shrink-0 mt-0.5">
                <svg class="w-2.5 h-2.5 text-white hidden" fill="none" stroke="white" stroke-width="3" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
              </div>
              <label for="consent" class="text-xs text-gray-500 leading-relaxed cursor-pointer">
                I agree to Analytics Grade's <a href="/privacy" class="text-purple hover:underline">Privacy Policy</a> and consent to being contacted about my enquiry.
              </label>
            </div>
            <p id="consent-error" class="text-[10px] text-red-500 mt-1 hidden">Please accept the privacy policy to continue.</p>
          </div>

          <button type="submit" id="submit-btn"
                  class="w-full py-3.5 rounded-xl font-bold text-sm text-white flex items-center justify-center gap-2"
                  style="background:linear-gradient(135deg,#8065f8,#4490d3)">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/></svg>
            Send message
          </button>
        </form>
      </div>
    </div>

    <aside class="hidden lg:flex flex-col gap-5 shrink-0 w-full lg:w-72 max-w-full">
      <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-6 overflow-hidden">
        <h4 class="text-xs font-bold uppercase tracking-widest text-gray-400 mb-5">Reach us directly</h4>
        <div class="space-y-4">
          <div class="flex gap-3 items-start">
            <div class="w-9 h-9 rounded-xl flex items-center justify-center shrink-0" style="background:rgba(128,101,248,.1)">
              <svg class="w-4 h-4" fill="none" stroke="#8065f8" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
            </div>
            <div class="min-w-0 flex-1">
              <p class="text-xs font-bold text-navy">General</p>
              <a href="mailto:hello@analyticsgrade.com" class="text-xs text-purple hover:underline break-all leading-snug block">hello@analyticsgrade.com</a>
            </div>
          </div>
          <div class="flex gap-3 items-start">
            <div class="w-9 h-9 rounded-xl flex items-center justify-center shrink-0" style="background:rgba(19,179,180,.1)">
              <svg class="w-4 h-4" fill="none" stroke="#13b3b4" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
            </div>
            <div class="min-w-0 flex-1">
              <p class="text-xs font-bold text-navy">Support</p>
              <a href="mailto:support@analyticsgrade.com" class="text-xs text-teal hover:underline break-all leading-snug block">support@analyticsgrade.com</a>
            </div>
          </div>
          <div class="flex gap-3 items-start">
            <div class="w-9 h-9 rounded-xl flex items-center justify-center shrink-0" style="background:rgba(68,144,211,.1)">
              <svg class="w-4 h-4" fill="none" stroke="#4490d3" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
            </div>
            <div class="min-w-0 flex-1">
              <p class="text-xs font-bold text-navy">Sales</p>
              <a href="mailto:info@analyticsgrade.com" class="text-xs text-blue hover:underline break-all leading-snug block">info@analyticsgrade.com</a>
            </div>
          </div>
          <div class="flex gap-3 items-start">
            <div class="w-9 h-9 rounded-xl flex items-center justify-center shrink-0" style="background:rgba(11,31,58,.07)">
              <svg class="w-4 h-4" fill="none" stroke="#0b1f3a" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg>
            </div>
            <div class="min-w-0 flex-1">
              <p class="text-xs font-bold text-navy">Canada</p>
              <a href="tel:+12363010104" class="text-xs text-gray-500 hover:text-navy block">+1 (236) 301-0104</a>
              <a href="mailto:caninfo@marketingplanet.global" class="text-xs text-gray-500 hover:text-navy break-all leading-snug block mt-0.5">caninfo@marketingplanet.global</a>
            </div>
          </div>
          <div class="flex gap-3 items-start">
            <div class="w-9 h-9 rounded-xl flex items-center justify-center shrink-0" style="background:rgba(11,31,58,.07)">
              <svg class="w-4 h-4" fill="none" stroke="#0b1f3a" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg>
            </div>
            <div class="min-w-0 flex-1">
              <p class="text-xs font-bold text-navy">United States</p>
              <a href="tel:+13108790727" class="text-xs text-gray-500 hover:text-navy block">+1 (310) 879-0727</a>
              <a href="mailto:usinfo@marketingplanet.global" class="text-xs text-gray-500 hover:text-navy break-all leading-snug block mt-0.5">usinfo@marketingplanet.global</a>
            </div>
          </div>
        </div>
      </div>

      <div class="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">
        <div class="map-grid relative" style="height:140px;background:#f8f9ff">
          <div class="absolute" style="top:35%;left:72%;transform:translate(-50%,-50%)">
            <div class="w-3 h-3 rounded-full bg-purple shadow-lg"></div>
            <div class="absolute -top-5 left-1/2 -translate-x-1/2 text-[8px] font-bold text-navy whitespace-nowrap">Sydney</div>
          </div>
          <div class="absolute" style="top:28%;left:22%;transform:translate(-50%,-50%)">
            <div class="w-2.5 h-2.5 rounded-full bg-teal shadow-lg"></div>
            <div class="absolute -top-5 left-1/2 -translate-x-1/2 text-[8px] font-bold text-navy whitespace-nowrap">London</div>
          </div>
          <svg class="absolute inset-0 w-full h-full opacity-20" viewBox="0 0 400 140" preserveAspectRatio="xMidYMid meet">
            <ellipse cx="200" cy="70" rx="190" ry="60" fill="none" stroke="#8065f8" stroke-width="0.5"/>
            <line x1="10" y1="70" x2="390" y2="70" stroke="#8065f8" stroke-width="0.3"/>
            <line x1="200" y1="10" x2="200" y2="130" stroke="#8065f8" stroke-width="0.3"/>
          </svg>
        </div>
        <div class="p-5">
          <h4 class="text-xs font-bold uppercase tracking-widest text-gray-400 mb-4">Our offices</h4>
          <div class="space-y-3">
            <div class="flex gap-2.5 items-start">
              <svg class="w-3.5 h-3.5 text-purple shrink-0 mt-0.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
              <div>
                <p class="text-xs font-bold text-navy">Sydney HQ</p>
                <p class="text-[10px] text-gray-400 leading-relaxed">Level 12, 333 George Street<br/>Sydney NSW 2000, Australia</p>
              </div>
            </div>
            <div class="flex gap-2.5 items-start">
              <svg class="w-3.5 h-3.5 text-teal shrink-0 mt-0.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
              <div>
                <p class="text-xs font-bold text-navy">London</p>
                <p class="text-[10px] text-gray-400 leading-relaxed">4th Floor, 30 Moorgate<br/>London EC2R 6PJ, UK</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- <div class="rounded-2xl p-5" style="background:linear-gradient(160deg,#0b1f3a,#1a3560)">
        <div class="flex items-center gap-2 mb-3">
          <span class="pulse-dot w-1.5 h-1.5 rounded-full inline-block" style="background:#13b3b4"></span>
          <p class="text-xs font-bold text-white">Live chat available</p>
        </div>
        <p class="text-[10px] mb-4" style="color:rgba(255,255,255,.5)">Talk to a human right now — no bots, no queues. Average wait under 3 minutes.</p>
        <a href="mailto:info@analyticsgrade.com"
           class="w-full py-2.5 rounded-xl text-xs font-bold text-white flex items-center justify-center gap-2"
           style="background:linear-gradient(135deg,#8065f8,#4490d3)">
          <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>
          Email support
        </a>
      </div> -->

      <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-5">
        <h4 class="text-xs font-bold uppercase tracking-widest text-gray-400 mb-4">Follow us</h4>
        <div class="flex gap-2.5">
          <a href="#" class="w-9 h-9 rounded-xl border border-gray-200 flex items-center justify-center hover:border-purple transition-colors" aria-label="X">
            <svg class="w-4 h-4 text-gray-500" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.73-8.835L1.254 2.25H8.08l4.26 5.632 5.905-5.632Zm-1.161 17.52h1.833L7.084 4.126H5.117Z"/></svg>
          </a>
          <a href="#" class="w-9 h-9 rounded-xl border border-gray-200 flex items-center justify-center hover:border-purple transition-colors" aria-label="LinkedIn">
            <svg class="w-4 h-4 text-gray-500" fill="currentColor" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
          </a>
        </div>
      </div>
    </aside>

  </div>
</section>

<!-- FAQ
<section class="py-20 px-6 bg-white" id="faq">
  <div class="max-w-3xl mx-auto">
    <div class="text-center mb-12">
      <span class="inline-block text-xs font-bold uppercase tracking-widest px-3 py-1.5 rounded-full mb-4"
            style="background:rgba(128,101,248,.1);color:#8065f8">FAQ</span>
      <h2 class="text-3xl font-extrabold text-navy">Common questions</h2>
    </div>
    <div class="space-y-3" id="faq-list">
      <div class="faq-item bg-gray-50 rounded-2xl border border-gray-100 overflow-hidden">
        <button type="button" class="faq-trigger w-full flex items-center justify-between px-6 py-4 text-left">
          <span class="font-bold text-navy text-sm pr-4">How quickly does Analytics Grade sync data after connecting a platform?</span>
          <svg class="faq-icon w-4 h-4 text-gray-400 shrink-0" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
        </button>
        <div class="faq-answer px-6">
          <p class="text-sm text-gray-500 leading-relaxed pb-5">Initial sync typically completes within 2 minutes for most platforms. Historical data backfill runs in the background and is usually complete within 15–30 minutes.</p>
        </div>
      </div>
      <div class="faq-item bg-gray-50 rounded-2xl border border-gray-100 overflow-hidden">
        <button type="button" class="faq-trigger w-full flex items-center justify-between px-6 py-4 text-left">
          <span class="font-bold text-navy text-sm pr-4">Can I white-label dashboards with my agency's branding?</span>
          <svg class="faq-icon w-4 h-4 text-gray-400 shrink-0" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
        </button>
        <div class="faq-answer px-6">
          <p class="text-sm text-gray-500 leading-relaxed pb-5">Yes — white-labelling is available on the Pro and Agency plans. You can upload your logo, set brand colors, and use a custom subdomain for client-facing views.</p>
        </div>
      </div>
      <div class="faq-item bg-gray-50 rounded-2xl border border-gray-100 overflow-hidden">
        <button type="button" class="faq-trigger w-full flex items-center justify-between px-6 py-4 text-left">
          <span class="font-bold text-navy text-sm pr-4">How does the 14-day free trial work?</span>
          <svg class="faq-icon w-4 h-4 text-gray-400 shrink-0" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
        </button>
        <div class="faq-answer px-6">
          <p class="text-sm text-gray-500 leading-relaxed pb-5">Sign up with your email — no credit card required. You get full access to the Pro plan for 14 days. At the end of the trial you can choose a plan or your account will downgrade to read-only mode.</p>
        </div>
      </div>
      <div class="faq-item bg-gray-50 rounded-2xl border border-gray-100 overflow-hidden">
        <button type="button" class="faq-trigger w-full flex items-center justify-between px-6 py-4 text-left">
          <span class="font-bold text-navy text-sm pr-4">Is my client's data secure on Analytics Grade?</span>
          <svg class="faq-icon w-4 h-4 text-gray-400 shrink-0" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
        </button>
        <div class="faq-answer px-6">
          <p class="text-sm text-gray-500 leading-relaxed pb-5">All data is encrypted in transit (TLS 1.3) and at rest (AES-256). We're SOC 2 Type II compliant and GDPR ready. You can export or delete all data at any time.</p>
        </div>
      </div>
      <div class="faq-item bg-gray-50 rounded-2xl border border-gray-100 overflow-hidden">
        <button type="button" class="faq-trigger w-full flex items-center justify-between px-6 py-4 text-left">
          <span class="font-bold text-navy text-sm pr-4">What's the typical response time for support tickets?</span>
          <svg class="faq-icon w-4 h-4 text-gray-400 shrink-0" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
        </button>
        <div class="faq-answer px-6">
          <p class="text-sm text-gray-500 leading-relaxed pb-5">Starter plan: email within 1 business day. Pro plan: live chat under 4 hours. Agency plan: dedicated account manager with a 2-hour response SLA during business hours.</p>
        </div>
      </div>
    </div>
  </div>
</section> -->

<!-- CTA -->
<section class="py-16 px-6" style="background:linear-gradient(135deg,#8065f8,#4490d3)">
  <div class="max-w-3xl mx-auto text-center">
    <h2 class="text-2xl md:text-3xl font-extrabold text-white mb-3">Not sure yet? Try it yourself.</h2>
    <p class="text-white/70 text-sm mb-6">No sales call needed. Start a free trial and connect your first integration in minutes.</p>
    <a href="/auth/register" class="inline-block px-8 py-3.5 rounded-xl font-bold text-sm bg-white text-navy hover:bg-gray-50 transition-colors shadow-lg">
      Start Free Trial — 14 days, no card
    </a>
  </div>
</section>

</div>

<!-- Success toast -->
<div id="toast" class="fixed bottom-6 left-1/2 -translate-x-1/2 z-50 opacity-0 translate-y-4 pointer-events-none"
     style="transition:opacity .3s,transform .3s">
  <div class="flex items-center gap-3 px-5 py-3.5 rounded-2xl shadow-2xl text-white text-sm font-semibold"
       style="background:linear-gradient(135deg,#0b1f3a,#1a3560);border:1px solid rgba(128,101,248,.3)">
    <svg class="w-5 h-5 text-teal" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
    Message sent! We'll reply within 2 hours.
  </div>
</div>
