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

<!-- BEGIN: Hero Section -->
<section class="relative pt-16 pb-24 lg:pt-24 lg:pb-32 overflow-hidden gradient-bg">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
    <div class="grid lg:grid-cols-2 gap-16 items-center">
      <!-- Hero Content -->
      <div data-purpose="hero-text-content">
        <span
          class="inline-block py-1 px-3 rounded-full bg-brand/10 text-brand text-xs font-bold tracking-wider uppercase mb-6"><?php echo safly_token_value('product', 'product_hero_badge', 'TEXT'); ?></span>
        <h1 class="text-4xl lg:text-5xl font-extrabold text-navy-900 leading-tight mb-6">
          <?php echo safly_token_value('product', 'product_hero_title_before', 'TEXT'); ?> <span
            class="text-brand"><?php echo safly_token_value('product', 'product_hero_title_highlight', 'TEXT'); ?></span>
          <?php echo safly_token_value('product', 'product_hero_title_after', 'TEXT'); ?></h1>
        <h2 class="text-xl text-slate-600 font-medium mb-8 leading-relaxed max-w-xl">
          <?php echo safly_token_value('product', 'product_hero_subtitle', 'TEXT'); ?></h2>
        <p class="text-lg text-slate-500 mb-10">
          <?php echo safly_token_value('product', 'product_hero_desc_before', 'TEXT'); ?><br
            class="hidden md:block" /><?php echo safly_token_value('product', 'product_hero_desc_after', 'TEXT'); ?></p>
        <div class="flex flex-wrap gap-4">
          <a class="bg-brand text-white px-8 py-4 rounded-custom font-bold text-lg hover:shadow-lg hover:shadow-brand/20 transition-all"
            href="#pricing"><?php echo safly_token_value('product', 'product_hero_primary_label', 'TEXT'); ?></a>
          <a class="bg-white text-navy-900 border border-slate-200 px-8 py-4 rounded-custom font-bold text-lg hover:bg-slate-50 transition-all"
            href="#how-it-works"><?php echo safly_token_value('product', 'product_hero_secondary_label', 'TEXT'); ?></a>
        </div>
        <div class="mt-10 flex items-center gap-4">
          <div class="flex -space-x-3">
            <div class="w-10 h-10 rounded-full border-2 border-white bg-slate-200"></div>
            <div class="w-10 h-10 rounded-full border-2 border-white bg-slate-300"></div>
            <div class="w-10 h-10 rounded-full border-2 border-white bg-slate-400"></div>
          </div>
          <p class="text-sm text-slate-500">
            <span>Doświadczenie zdobyte przy pracy z ponad 500 klientami</span>
          </p>
        </div>
      </div>
      <!-- Hero Form Card -->
      <div class="lg:ml-auto w-full max-w-md" data-purpose="hero-form">
        <div class="bg-white p-8 lg:p-10 rounded-2xl shadow-2xl shadow-slate-200 border border-slate-100">
          <h3 class="text-2xl font-bold text-navy-900 mb-2">
            <?php echo safly_token_value('product', 'product_hero_form_title', 'TEXT'); ?></h3>
          <p class="text-slate-500 mb-8"><?php echo safly_token_value('product', 'product_hero_form_text', 'TEXT'); ?>
          </p>
          <form action="#" class="space-y-4">
            <div>
              <label class="block text-sm font-semibold text-slate-700 mb-1">Imię i nazwisko</label>
              <input class="w-full rounded-custom border-slate-200 focus:ring-brand focus:border-brand"
                placeholder="Jan Kowalski" type="text" />
            </div>
            <div>
              <label class="block text-sm font-semibold text-slate-700 mb-1">E-mail firmowy</label>
              <input class="w-full rounded-custom border-slate-200 focus:ring-brand focus:border-brand"
                placeholder="jan@firma.pl" type="email" />
            </div>
            <div>
              <label class="block text-sm font-semibold text-slate-700 mb-1">Telefon</label>
              <input class="w-full rounded-custom border-slate-200 focus:ring-brand focus:border-brand"
                placeholder="+48 000 000 000" type="tel" />
            </div>
            <button
              class="w-full bg-brand text-white py-4 rounded-custom font-bold text-lg hover:bg-brand-dark transition-colors mt-4"
              type="submit"><?php echo safly_token_value('product', 'product_hero_form_button', 'TEXT'); ?></button>
            <p class="text-[10px] text-slate-400 text-center leading-tight">
              <?php echo safly_token_value('product', 'product_hero_form_disclaimer', 'TEXT'); ?></p>
          </form>
        </div>
      </div>
    </div>
  </div>
  <!-- Decorative background elements -->
  <div
    class="absolute top-0 right-0 -translate-y-1/2 translate-x-1/2 w-[800px] h-[800px] bg-brand/5 rounded-full blur-3xl -z-10">
  </div>
</section>
<!-- END: Hero Section -->
<!-- BEGIN: Why Section -->
<section class="py-24 bg-white">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center max-w-3xl mx-auto mb-16">
      <h2 class="text-3xl md:text-4xl font-extrabold text-navy-900 mb-6 leading-tight">
        <?php echo safly_token_value('product', 'product_problem_title_line1', 'TEXT'); ?><br /><?php echo safly_token_value('product', 'product_problem_title_line2', 'TEXT'); ?>
      </h2>
      <p class="text-lg text-slate-600"><?php echo safly_token_value('product', 'product_problem_intro', 'TEXT'); ?></p>
    </div>
    <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mb-16">
      <?php echo safly_token_value('product', 'product_problem_cards_html', 'HTML'); ?></div>
    <div class="bg-brand rounded-2xl p-8 md:p-12 lg:px-24 text-center">
      <p class="text-2xl md:text-3xl font-bold text-white">
        <?php echo safly_token_value('product', 'product_problem_banner_text', 'TEXT'); ?></p>
    </div>
  </div>
</section>
<!-- END: Why Section -->
<!-- BEGIN: How It Works -->
<section class="py-24 bg-slate-50" id="how-it-works">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-16">
      <h2 class="text-3xl md:text-4xl font-extrabold text-navy-900 mb-4">
        <?php echo safly_token_value('product', 'product_steps_title', 'TEXT'); ?></h2>
      <div class="w-20 h-1.5 bg-brand mx-auto rounded-full"></div>
    </div>
    <div class="grid md:grid-cols-3 gap-12 relative">
      <?php echo safly_token_value('product', 'product_steps_cards_html', 'HTML'); ?></div>
  </div>
</section>
<!-- END: How It Works -->
<!-- BEGIN: Benefits Checklist -->
<section class="py-24 bg-navy-900 text-white overflow-hidden relative">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
    <div class="grid lg:grid-cols-2 gap-20 items-center">
      <div>
        <h2 class="text-3xl md:text-5xl font-extrabold mb-8 leading-tight">
          <?php echo safly_token_value('product', 'product_benefits_title_before', 'TEXT'); ?><br /><span
            class="text-brand"><?php echo safly_token_value('product', 'product_benefits_title_highlight', 'TEXT'); ?></span>
        </h2>
        <ul class="space-y-6"><?php echo safly_token_value('product', 'product_benefits_list_html', 'HTML'); ?></ul>
      </div>
      <div class="relative">
        <div class="rounded-2xl overflow-hidden shadow-2xl rotate-3 hover:rotate-0 transition-transform duration-500">
          <img alt="<?php echo safly_token_value('product', 'product_benefits_image_alt', 'TEXT'); ?>"
            class="w-full h-auto" src="<?php echo safly_token_value('product', 'product_benefits_image', 'IMG'); ?>" />
        </div>
      </div>
    </div>
  </div>
  <div class="absolute top-1/2 left-0 w-64 h-64 bg-brand/10 rounded-full blur-3xl"></div>
</section>
<!-- END: Benefits Checklist -->
<!-- BEGIN: Comparison Section -->
<section class="py-24 bg-white">
  <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-16">
      <h2 class="text-3xl font-extrabold text-navy-900 mb-4">
        <?php echo safly_token_value('product', 'product_compare_title', 'TEXT'); ?></h2>
      <p class="text-slate-600"><?php echo safly_token_value('product', 'product_compare_intro', 'TEXT'); ?></p>
    </div>
    <div class="overflow-x-auto">
      <table class="w-full border-separate border-spacing-0">
        <thead>
          <tr>
            <th
              class="p-6 text-left text-xs font-bold text-slate-400 uppercase tracking-widest border-b border-slate-100">
              Cecha</th>
            <th
              class="p-6 text-left text-xs font-bold text-slate-400 uppercase tracking-widest border-b border-slate-100">
              Jednorazowa porada</th>
            <th
              class="p-6 text-left text-xs font-bold text-brand uppercase tracking-widest border-b border-brand/20 bg-brand/5 rounded-t-2xl">
              Abonament Safly</th>
          </tr>
        </thead>
        <tbody class="text-sm font-medium">
          <tr>
            <td class="p-6 border-b border-slate-100 font-bold text-navy-900">Podejście</td>
            <td class="p-6 border-b border-slate-100 text-slate-500">Reagujesz dopiero, gdy jest za późno</td>
            <td class="p-6 border-b border-brand/20 bg-brand/5 text-brand font-bold">Spokój na codzień</td>
          </tr>
          <tr>
            <td class="p-6 border-b border-slate-100 font-bold text-navy-900">Dostępność</td>
            <td class="p-6 border-b border-slate-100 text-slate-500">Tracisz czas na research i porównania</td>
            <td class="p-6 border-b border-brand/20 bg-brand/5 text-brand font-bold">Stała opieka prawna</td>
          </tr>
          <tr>
            <td class="p-6 border-b border-slate-100 font-bold text-navy-900">Relacja</td>
            <td class="p-6 border-b border-slate-100 text-slate-500">Brak ciągłości wiedzy</td>
            <td class="p-6 border-b border-brand/20 bg-brand/5 text-brand font-bold">Prewencja zamiast gaszenia pożarów</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="mt-12 text-center p-8 bg-slate-50 rounded-2xl italic text-slate-600">
      "Tak jak ubezpieczenie – najlepiej mieć, zanim będzie potrzebne."
    </div>
  </div>
</section>
<!-- END: Comparison Section -->
<!-- BEGIN: Pakiet Startowy -->
<section class="py-24 bg-slate-50">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex flex-col md:flex-row justify-between items-end mb-12 gap-6">
      <div class="max-w-2xl">
        <h2 class="text-3xl md:text-4xl font-extrabold text-navy-900 mb-4">
          <?php echo safly_token_value('product', 'product_package_title', 'TEXT'); ?></h2>
        <p class="text-lg text-slate-600"><?php echo safly_token_value('product', 'product_package_intro', 'TEXT'); ?>
        </p>
      </div>
      <div class="text-right">
        <p class="text-sm text-slate-500 font-bold uppercase tracking-widest">Cena od</p>
        <p class="text-4xl font-black text-brand">399 zł <span class="text-xl font-medium text-slate-400">netto</span>
        </p>
      </div>
    </div>
    <div class="grid md:grid-cols-3 gap-8">
      <!-- Pillar 1 -->
      <div class="bg-white p-8 rounded-2xl border border-slate-200 shadow-sm">
        <h3 class="text-xl font-bold text-navy-900 mb-6 flex items-center gap-2">
          <span class="w-2 h-8 bg-brand rounded-full"></span> Fundament prawny
        </h3>
        <ul class="space-y-4 text-slate-600">
          <li class="check-list-item">Checklista obowiązków</li>
          <li class="check-list-item">Doradztwo podatkowe</li>
          <li class="check-list-item">Zarządca sukcesyjny</li>
        </ul>
      </div>
      <!-- Pillar 2 -->
      <div class="bg-white p-8 rounded-2xl border border-slate-200 shadow-sm">
        <h3 class="text-xl font-bold text-navy-900 mb-6 flex items-center gap-2">
          <span class="w-2 h-8 bg-brand rounded-full"></span> Umowy i dokumenty
        </h3>
        <ul class="space-y-4 text-slate-600">
          <li class="check-list-item">Umowa z kontrahentem</li>
          <li class="check-list-item">Umowa o pracę/zlecenie</li>
          <li class="check-list-item">NDA i wezwanie do zapłaty</li>
          <li class="check-list-item">Dokumentacja RODO</li>
        </ul>
      </div>
      <!-- Pillar 3 -->
      <div class="bg-white p-8 rounded-2xl border border-brand/20 shadow-xl shadow-brand/5 relative overflow-hidden">
        <h3 class="text-xl font-bold text-navy-900 mb-6 flex items-center gap-2">
          <span class="w-2 h-8 bg-brand rounded-full"></span> Wsparcie eksperta
        </h3>
        <ul class="space-y-4 text-slate-600">
          <li class="check-list-item">1h konsultacji z prawnikiem</li>
          <li class="check-list-item">Sprawdzenie wybranej umowy</li>
          <li class="check-list-item">10% zniżki na abonament</li>
        </ul>
      </div>
    </div>
    <div
      class="mt-16 bg-navy-900 rounded-2xl p-8 md:p-12 text-white flex flex-col md:flex-row items-center justify-between gap-8">
      <div>
        <h3 class="text-2xl font-bold mb-2">Potrzebujesz czegoś więcej?</h3>
        <p class="text-slate-400">Rejestracja znaku towarowego, Regulamin sklepu, Koncesje i inne.</p>
      </div>
      <a class="bg-brand text-white px-10 py-4 rounded-custom font-bold hover:bg-brand-dark transition-all whitespace-nowrap"
        href="#contact">Zapytaj o wycenę</a>
    </div>
  </div>
</section>
<!-- END: Pakiet Startowy -->
<!-- BEGIN: Pricing Table -->
<section class="py-24 bg-white" id="pricing">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-16">
      <h2 class="text-4xl font-extrabold text-navy-900 mb-4">
        <?php echo safly_token_value('product', 'product_pricing_title', 'TEXT'); ?></h2>
      <p class="text-slate-600"><?php echo safly_token_value('product', 'product_pricing_intro', 'TEXT'); ?></p>
    </div>
    <div class="grid lg:grid-cols-3 gap-8">
      <?php echo safly_token_value('product', 'product_pricing_cards_html', 'HTML'); ?></div>
    <div class="mt-12 flex flex-wrap justify-center gap-8 text-sm text-slate-500 font-medium">
      <span class="flex items-center gap-2"><svg class="w-4 h-4 text-brand" fill="currentColor" viewbox="0 0 20 20">
          <path clip-rule="evenodd"
            d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
            fill-rule="evenodd"></path>
        </svg> -15% przy płatności rocznej</span>
      <span class="flex items-center gap-2"><svg class="w-4 h-4 text-brand" fill="currentColor" viewbox="0 0 20 20">
          <path clip-rule="evenodd"
            d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
            fill-rule="evenodd"></path>
        </svg> Gwarancja ceny przez 12 m-cy</span>
      <span class="flex items-center gap-2"><svg class="w-4 h-4 text-brand" fill="currentColor" viewbox="0 0 20 20">
          <path clip-rule="evenodd"
            d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
            fill-rule="evenodd"></path>
        </svg> Łatwa zmiana pakietu</span>
    </div>
  </div>
</section>
<!-- END: Pricing Table -->
<!-- BEGIN: Audit Section -->
<section class="py-16 bg-brand">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center text-white">
    <h2 class="text-3xl font-extrabold mb-4"><?php echo safly_token_value('product', 'product_audit_title', 'TEXT'); ?>
    </h2>
    <p class="text-xl mb-8 opacity-90"><?php echo safly_token_value('product', 'product_audit_description', 'TEXT'); ?>
    </p>
    <div class="inline-flex items-center bg-white/10 backdrop-blur-sm px-6 py-4 rounded-2xl border border-white/20">
      <?php echo safly_token_value('product', 'product_audit_box_html', 'HTML'); ?></div>
  </div>
</section>
<!-- END: Audit Section -->
<!-- BEGIN: For Whom Section -->
<section class="py-24 bg-white">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid lg:grid-cols-2 gap-20 items-center">
      <div>
        <h2 class="text-3xl font-extrabold text-navy-900 mb-8">
          <?php echo safly_token_value('product', 'product_fit_title', 'TEXT'); ?></h2>
        <ul class="space-y-4 mb-12"><?php echo safly_token_value('product', 'product_fit_list_html', 'HTML'); ?></ul>
        <div class="p-6 bg-slate-50 border-l-4 border-slate-300 rounded-r-xl">
          <?php echo safly_token_value('product', 'product_fit_note_html', 'HTML'); ?></div>
      </div>
      <div class="bg-navy-900 rounded-3xl p-10 text-white">
        <h3 class="text-2xl font-bold mb-8"><?php echo safly_token_value('product', 'product_cases_title', 'TEXT'); ?>
        </h3>
        <div class="grid sm:grid-cols-2 gap-6 text-sm">
          <?php echo safly_token_value('product', 'product_cases_grid_html', 'HTML'); ?></div>
      </div>
    </div>
  </div>
</section>
<!-- END: For Whom Section -->
<!-- BEGIN: Final CTA & Form -->
<section class="py-24 bg-slate-50" id="contact">
  <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
    <div
      class="bg-white rounded-[32px] p-8 md:p-16 shadow-2xl shadow-navy-900/10 border border-slate-100 relative overflow-hidden">
      <div class="absolute top-0 right-0 w-32 h-32 bg-brand/5 rounded-full -translate-y-1/2 translate-x-1/2"></div>
      <div class="relative z-10">
        <div class="text-center mb-12">
          <h2 class="text-3xl md:text-4xl font-extrabold text-navy-900 mb-4">
            <?php echo safly_token_value('product', 'product_contact_title', 'TEXT'); ?></h2>
          <p class="text-lg text-slate-600"><?php echo safly_token_value('product', 'product_contact_intro', 'TEXT'); ?>
          </p>
        </div>
        <form class="space-y-6">
          <div class="grid md:grid-cols-2 gap-6">
            <div>
              <label class="block text-sm font-semibold text-slate-700 mb-2">Imię</label>
              <input class="w-full px-4 py-3 rounded-custom border-slate-200 focus:ring-brand focus:border-brand"
                placeholder="Twoje imię" type="text" />
            </div>
            <div>
              <label class="block text-sm font-semibold text-slate-700 mb-2">Nazwisko</label>
              <input class="w-full px-4 py-3 rounded-custom border-slate-200 focus:ring-brand focus:border-brand"
                placeholder="Twoje nazwisko" type="text" />
            </div>
          </div>
          <div>
            <label class="block text-sm font-semibold text-slate-700 mb-2">E-mail</label>
            <input class="w-full px-4 py-3 rounded-custom border-slate-200 focus:ring-brand focus:border-brand"
              placeholder="adres@email.pl" type="email" />
          </div>
          <div>
            <label class="block text-sm font-semibold text-slate-700 mb-2">Jak możemy pomóc?</label>
            <textarea class="w-full px-4 py-3 rounded-custom border-slate-200 focus:ring-brand focus:border-brand"
              placeholder="Opisz krótko swoją sytuację..." rows="4"></textarea>
          </div>
          <button
            class="w-full bg-brand text-white py-5 rounded-custom font-extrabold text-xl hover:bg-brand-dark transition-all shadow-lg shadow-brand/20"><?php echo safly_token_value('product', 'product_contact_button', 'TEXT'); ?></button>
        </form>
      </div>
    </div>
  </div>
</section>
<!-- END: Final CTA & Form -->

<?php get_footer(); ?>
