---
import Layout from "@layouts/Layout.astro";
import { FAQ_PAGE_SEO } from "@constants/constants.ts";
import FaqAccordion from "@components/faq/FaqAccordion.astro";
import PageTitle from "@components/base/PageTitle.astro";
import type { FaqItem } from "../types/faq";

const faqItems: FaqItem[] = [
  {
    id: "1",
    question: "Сколько стоят услуги адвоката?",
    answer:
      "Стоимость услуг зависит от сложности дела. Первичная консультация бесплатна. Мы предлагаем почасовую оплату, фиксированную стоимость или абонентское обслуживание. Окончательная цена обсуждается после изучения материалов.",
    isOpen: true,
  },
  {
    id: "2",
    question: "Какие документы нужны для консультации?",
    answer:
      "Желательно иметь все документы по делу: паспорт, договоры, судебные решения, протоколы, переписку. Если чего-то не хватает — подскажем, что собрать.",
  },
  {
    id: "3",
    question: "Где проходят встречи?",
    answer:
      "Офис в центре Сургута: ул. Энгельса, д. 15, офис 405. Возможны онлайн-консультации и выезд к клиенту.",
  },
  {
    id: "4",
    question: "Как долго длится судебный процесс?",
    answer:
      "Простые дела — 2-3 месяца, сложные — от 6 месяцев до года. Мы стремимся ускорить процесс без потери качества.",
  },
  {
    id: "5",
    question: "Гарантируете ли вы результат?",
    answer:
      "Никто не может гарантировать 100% результат. Но мы обеспечиваем профессиональный подход, честную оценку перспектив и максимальную защиту ваших интересов.",
  },
  {
    id: "6",
    question: "Работаете ли с другими регионами?",
    answer:
      "Да, работаем по всей России дистанционно. При необходимости привлекаем коллег в других городах для очного участия.",
  },
  {
    id: "7",
    question: "Можно ли получить консультацию в выходные?",
    answer:
      "Да, по предварительной записи возможны консультации в выходные и вечернее время.",
  },
  {
    id: "8",
    question: "Какие споры вы ведете?",
    answer:
      "Гражданские, семейные, трудовые, уголовные, административные дела, арбитраж для бизнеса.",
  },
  {
    id: "9",
    question: "Как происходит оплата?",
    answer:
      "Наличные, безнал, карта. Возможна рассрочка. Перед работой заключаем договор с прозрачными условиями.",
  },
  {
    id: "10",
    question: "Что делать при срочной ситуации?",
    answer:
      "Звоните немедленно: +7 (922) 253-83-75. При задержании, обыске или допросе — не давайте показаний без адвоката.",
  },
];
---

<Layout
  title={FAQ_PAGE_SEO.title}
  description={FAQ_PAGE_SEO.description}
  pagePath="/faq"
>
  <section
    class="relative min-h-screen bg-[var(--color-navy)] pt-24 pb-16 overflow-hidden"
  >
    <!-- Фоновые элементы -->
    <div
      class="absolute inset-0 opacity-[0.02]"
      style="background-image: radial-gradient(circle at 1px 1px, var(--color-gold) 1px, transparent 0); background-size: 40px 40px;"
    >
    </div>
    <div
      class="absolute top-20 left-10 w-72 h-72 bg-[var(--color-gold)] opacity-[0.03] rounded-full blur-3xl"
    >
    </div>
    <div
      class="absolute bottom-20 right-10 w-96 h-96 bg-[var(--color-blue-primary)] opacity-[0.02] rounded-full blur-3xl"
    >
    </div>

    <div
      class="w-full px-4 md:container md:mx-auto md:px-4 md:max-w-7xl relative z-10"
    >
      <!-- Заголовок -->
      <PageTitle
        title="Часто задаваемые "
        highlightText="вопросы"
        highlightInTitle={true}
        titleColor="white"
        badgeText="Помощь клиентам"
        subtitle="Ответы на популярные вопросы о юридических услугах и сотрудничестве"
        titleSize="normal"
      />

      <!-- Список FAQ -->
      <div class="space-y-4 mb-16">
        {
          faqItems.map((item, index) => (
            <FaqAccordion
              question={item.question}
              answer={item.answer}
              isOpen={item.isOpen}
              index={index + 1}
            />
          ))
        }
      </div>

      <!-- CTA Блок -->
      <div
        class="relative bg-[var(--color-navy-dark)] border border-[var(--color-gray-600)]/20 rounded-3xl p-8 md:p-12 overflow-hidden"
      >
        <div
          class="absolute top-0 right-0 w-64 h-64 bg-[var(--color-gold)] opacity-[0.05] rounded-full blur-3xl translate-x-1/2 -translate-y-1/2"
        >
        </div>

        <div class="relative text-center">
          <div
            class="w-16 h-16 mx-auto mb-6 rounded-2xl bg-[var(--color-gold)]/10 border border-[var(--color-gold)]/20 flex items-center justify-center"
          >
            <svg
              class="w-8 h-8 text-[var(--color-gold)]"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                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"
              ></path>
            </svg>
          </div>

          <h2
            class="text-2xl md:text-3xl font-bold text-[var(--color-white)] mb-3"
          >
            Не нашли ответ?
          </h2>
          <p class="text-[var(--color-gray-400)] mb-8 max-w-md mx-auto">
            Свяжитесь с нами любым удобным способом — мы ответим на все ваши
            вопросы
          </p>

          <div class="flex flex-col sm:flex-row gap-4 justify-center">
            <a
              href="/#contact"
              class="group inline-flex items-center justify-center gap-2 px-8 py-4 bg-[var(--color-gold)] hover:bg-[var(--color-gold-hover)] text-[var(--color-white)] font-bold rounded-xl transition-all hover:shadow-lg hover:shadow-[var(--color-gold)]/30 hover:-translate-y-1"
            >
              Задать вопрос
              <svg
                class="w-4 h-4 group-hover:translate-x-1 transition-transform"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
              </svg>
            </a>
            <button
              data-consultation-modal
              class="inline-flex items-center justify-center gap-2 px-8 py-4 bg-[var(--color-navy)] border border-[var(--color-gray-600)]/30 text-[var(--color-white)] font-bold rounded-xl hover:border-[var(--color-gold)]/30 hover:bg-[var(--color-navy-darker)] transition-all cursor-pointer"
            >
              <svg
                class="w-5 h-5 text-[var(--color-gold)]"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  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"
                ></path>
              </svg>
              Позвонить
            </button>
          </div>
        </div>
      </div>
    </div>
  </section>
</Layout>
