---
import Button from "../base/Button.astro";
import { CONTACT_CONSTANTS } from "@constants/constants.ts";

export interface Props {
  author: {
    name: string;
    avatar: string;
    role?: string;
  };
}

const { author } = Astro.props;

const benefits = [
  { text: "Анализ ситуации и перспектив дела" },
  { text: "Понятные рекомендации по действиям" },
  { text: "Оценка рисков и варианты решения" },
];
---

<div
  class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 sticky top-30"
>
  <!-- Автор -->
  <div class="text-center pb-6 border-b border-gray-100">
    <img
      src={author.avatar}
      alt={author.name}
      class="w-20 h-20 rounded-full object-cover mx-auto mb-4 border-4 border-blue-primary"
    />
    <h3 class="text-lg font-bold text-gray-900">
      {author.name}
    </h3>
    <p class="text-sm text-gray-500">
      {author.role || "Юрист"}
    </p>
  </div>

  <!-- Блок консультации -->
  <div
    class="mt-6 relative overflow-hidden rounded-xl bg-gradient-to-br from-[var(--color-navy)] via-[var(--color-navy-dark)] to-[var(--color-navy-darker)] p-6 text-white shadow-xl"
  >
    <!-- Декоративные элементы -->
    <div
      class="absolute top-0 right-0 -mt-8 -mr-8 w-32 h-32 bg-gold opacity-20 rounded-full blur-3xl"
    >
    </div>
    <div
      class="absolute bottom-0 left-0 -mb-8 -ml-8 w-24 h-24 bg-blue-primary opacity-10 rounded-full blur-2xl"
    >
    </div>

    <!-- Иконка по центру -->
    <div class="relative flex justify-center mb-5">
      <div
        class="w-16 h-16 bg-linear-to-br from-[var(--color-gold)] to-[var(--color-gold-hover)] rounded-2xl flex items-center justify-center shadow-lg shadow-[var(--color-gold)]/30"
      >
        <svg
          class="w-8 h-8 text-white"
          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>
    </div>

    <!-- Контент -->
    <div class="relative text-center">
      <h4 class="text-xl font-bold mb-2">Требуется консультация?</h4>
      <p class="text-slate-300 text-sm leading-relaxed mb-5">
        Получите профессиональную правовую помощь по вашему вопросу. Первичная
        консультация бесплатно.
      </p>

      <!-- Преимущества -->
      <ul class="space-y-3 mb-6 text-sm text-white text-left">
        {
          benefits.map((benefit) => (
            <li class="flex items-start gap-3">
              <div class="w-5 h-5 rounded-full bg-gold flex items-center justify-center shrink-0 mt-0.5">
                <svg
                  class="w-3 h-3 text-white"
                  fill="currentColor"
                  viewBox="0 0 20 20"
                >
                  <path
                    fill-rule="evenodd"
                    d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                    clip-rule="evenodd"
                  />
                </svg>
              </div>
              <span>{benefit.text}</span>
            </li>
          ))
        }
      </ul>

      <!-- Кнопка -->
      <Button
        text="Получить консультацию"
        variant="primary-white-text"
        size="md"
        data-consultation-modal
        className="flex items-center justify-center gap-2 group cursor-pointer"
      />

      <!-- Дополнительная информация -->
      <div
        class="flex items-center justify-center gap-4 mt-4 text-xs text-slate-400"
      >
        <span class="flex items-center gap-1">
          <svg
            class="w-3 h-3"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
          Ответ за 15 минут
        </span>
        <span class="w-1 h-1 bg-slate-500 rounded-full"></span>
        <span>Конфиденциально</span>
      </div>
    </div>
  </div>
</div>
