<?php
/* Template Name: Contact Page */
get_header();
?>

<!-- Hero Section -->
<section class="gradient-bg py-24 px-8">
  <div class="max-w-7xl mx-auto text-center">
    <h1 class="text-4xl md:text-6xl font-black tracking-tighter text-on-surface mb-6">
      Skontaktuj się z nami
    </h1>
    <p class="text-md md:text-xl text-secondary max-w-2xl mx-auto leading-relaxed">
      Jesteśmy tutaj, aby pomóc w rozwoju Twojego biznesu. Odpowiadamy na wszystkie zapytania zazwyczaj w ciągu 24
      godzin roboczych.
    </p>
  </div>
</section>
<!-- Main Content Section: Asymmetric Layout -->
<section class="py-24 px-8 max-w-7xl mx-auto bg-white">
  <div class="grid grid-cols-1 lg:grid-cols-12 gap-16">
    <!-- Contact Details & Map (Left) -->
    <div class="lg:col-span-5 space-y-12">
      <div class="space-y-8">
        <div>
          <h2 class="text-3xl font-black tracking-tight mb-8">Informacje kontaktowe</h2>
          <div class="space-y-6">
            <div class="flex items-start gap-4">
              <div class="w-12 h-12 rounded-full bg-primary/5 flex items-center justify-center text-primary shrink-0">
                <span class="material-symbols-outlined" data-icon="mail">mail</span>
              </div>
              <div>
                <p class="text-sm font-bold text-primary uppercase tracking-widest mb-1">Email</p>
                <p class="text-lg font-medium">kontakt@safly.pl</p>
              </div>
            </div>
            <div class="flex items-start gap-4">
              <div class="w-12 h-12 rounded-full bg-primary/5 flex items-center justify-center text-primary shrink-0">
                <span class="material-symbols-outlined" data-icon="call">call</span>
              </div>
              <div>
                <p class="text-sm font-bold text-primary uppercase tracking-widest mb-1">Telefon</p>
                <p class="text-lg font-medium">+48 123 456 789</p>
              </div>
            </div>
            <div class="flex items-start gap-4">
              <div class="w-12 h-12 rounded-full bg-primary/5 flex items-center justify-center text-primary shrink-0">
                <span class="material-symbols-outlined" data-icon="location_on">location_on</span>
              </div>
              <div>
                <p class="text-sm font-bold text-primary uppercase tracking-widest mb-1">Adres</p>
                <p class="text-lg font-medium leading-tight">Warszawa, Poloneza 93</p>
              </div>
            </div>
          </div>
        </div>
        <!-- Map Placeholder -->
        <div
          class="rounded-xl overflow-hidden bg-surface-container-highest aspect-video relative group">
          <div class="absolute inset-0 bg-slate-200" data-location="Warszawa" style="">
            <img class="w-full h-full object-cover opacity-60 mix-blend-multiply filter grayscale"
              data-alt="Top down minimal map view of Warsaw city center streets in monochromatic blue and grey tones"
              src="https://lh3.googleusercontent.com/aida-public/AB6AXuDyZFI_pxCRSl7lXqZ8Al8sTiomknKZFONDOAHBvuDCkwkMLeSG02ePrK7XcBOJRN5Ze_2OmI5OPLJMzo6aQL9zLJ-uT6dgjsUSsBKKu3C_dycM5oEeJyjrV4d11WANmqqFb89mt4R-a6E7_0f6VsAsgtUtkeL5rU8AzuJkda-mSpMnYUkQWTnPnmlAzGiBcMQsvCxuk7W38tyltHs-CKElo87BliFEj659ZQtJ8Xt6brCVGUEG5-elZa_39BSMy7Df7sVdOhSPSvA" />
          </div>
          <div class="absolute inset-0 flex items-center justify-center">
            <div class="bg-white p-4 rounded-xl shadow-xl flex items-center gap-3 border border-outline-variant/50">
              <div class="w-3 h-3 bg-primary rounded-full animate-pulse"></div>
              <span class="font-bold text-sm tracking-tight">Nasze biuro w Warszawie</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Contact Form (Right) -->
    <div class="lg:col-span-7 bg-white p-8 md:p-12 rounded-xl shadow-xl border border-outline-variant/30">
      <form class="space-y-6">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div class="space-y-2">
            <label class="text-sm font-bold text-secondary-container text-on-secondary-container">Imię i
              nazwisko</label>
            <input
              class="w-full px-4 py-3 rounded-xl border-slate-200 bg-surface focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all"
              placeholder="Jan Kowalski" type="text" />
          </div>
          <div class="space-y-2">
            <label class="text-sm font-bold text-secondary-container text-on-secondary-container">Adres email</label>
            <input
              class="w-full px-4 py-3 rounded-xl border-slate-200 bg-surface focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all"
              placeholder="jan@przyklad.pl" type="email" />
          </div>
        </div>
        <div class="space-y-2">
          <label class="text-sm font-bold text-secondary-container text-on-secondary-container">Temat wiadomości</label>
          <select
            class="w-full px-4 py-3 rounded-xl border-slate-200 bg-surface focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all appearance-none">
            <option>Zapytanie o usługi</option>
            <option>Abonament prawny dla JDG</option>
          </select>
        </div>
        <div class="space-y-2">
          <label class="text-sm font-bold text-secondary-container text-on-secondary-container">Wiadomość</label>
          <textarea
            class="w-full px-4 py-3 rounded-xl border-slate-200 bg-surface focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all resize-none"
            placeholder="W czym możemy Ci pomóc?" rows="5"></textarea>
        </div>
        <button
          class="w-full bg-primary text-white py-4 rounded-xl font-bold text-lg hover:opacity-90 transition-all flex items-center justify-center gap-2"
          type="submit">
          Wyślij wiadomość
        </button>
      </form>
    </div>
  </div>
</section>
<!-- FAQ Section: Grid Layout -->
<section class="bg-surface-container-low py-32 px-8">
  <div class="max-w-7xl mx-auto">
    <div class="text-center mb-16">
      <h2 class="text-4xl font-black tracking-tight mb-4 text-on-surface">Często zadawane pytania</h2>
      <p class="text-secondary max-w-xl mx-auto text-slate-600">Znajdź szybkie odpowiedzi na najpopularniejsze pytania dotyczące
        współpracy z nami.</p>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
      <!-- FAQ Card 1 -->
      <div class="bg-white p-8 rounded-xl border border-outline-variant/50 hover:shadow-lg transition-shadow">
        <h3 class="text-xl font-black mb-3 text-primary">Jak zacząć współpracę?</h3>
        <p class="text-secondary leading-relaxed text-slate-600">
          To proste. Wypełnij formularz powyżej lub zadzwoń do nas. Umówimy się na bezpłatną konsultację, podczas której
          przeanalizujemy Twoje potrzeby i zaproponujemy najlepsze rozwiązanie.
        </p>
      </div>
      <!-- FAQ Card 2 -->
      <div class="bg-white p-8 rounded-xl border border-outline-variant/50 hover:shadow-lg transition-shadow">
        <h3 class="text-xl font-black mb-3 text-primary">Jakich dokumentów potrzebuję?</h3>
        <p class="text-secondary leading-relaxed text-slate-600">
          Na początek wystarczą podstawowe informacje o Twojej firmie. Szczegółową listę dokumentów przekażemy Ci po
          wstępnej analizie wybranego modelu współpracy.
        </p>
      </div>
      <!-- FAQ Card 3 -->
      <div class="bg-white p-8 rounded-xl border border-outline-variant/50 hover:shadow-lg transition-shadow">
        <h3 class="text-xl font-black mb-3 text-primary">Czy oferujecie wsparcie po wdrożeniu?</h3>
        <p class="text-secondary leading-relaxed text-slate-600">
          Tak, zapewniamy pełne wsparcie powdrożeniowe oraz regularne aktualizacje systemów, aby Twoje procesy biznesowe
          zawsze przebiegały bez zakłóceń.
        </p>
      </div>
      <!-- FAQ Card 4 -->
      <div class="bg-white p-8 rounded-xl border border-outline-variant/50 hover:shadow-lg transition-shadow">
        <h3 class="text-xl font-black mb-3 text-primary">Jaki jest czas realizacji?</h3>
        <p class="text-secondary leading-relaxed text-slate-600">
          Każdy projekt jest unikalny. Wstępne propozycje przygotowujemy w 48h, a pełne wdrożenie zależy od
          skomplikowania procesu, zazwyczaj trwa od 2 do 6 tygodni.
        </p>
      </div>
    </div>
  </div>
</section>

<?php get_footer(); ?>
