astro_avtourist/frontend/src/components/home/WhyUs.astro

---

const sectionData = {
  subtitle: "Почему мы?",
  title: "Локальная экспертиза в Сургуте",
  floatingText:
    "Знаем специфику судов Сургута и регламенты местной полиции изнутри.",
  imageUrl:
      "/images/home/dogovor.avif",
};

const features = [
  {
    title: "Местный опыт",
    desc: "Мы работаем только в Сургуте и ХМАО. Это позволяет нам знать практику каждого судьи и особенности работы местных отделов ГИБДД.",
    icon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>`,
  },
  {
    title: "92% Успешных дел",
    desc: "Высокий процент выигранных дел по возврату прав и страховым спорам. Работаем на результат, а не на процесс.",
    icon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path><path d="m9 12 2 2 4-4"></path></svg>`,
  },
  {
    title: "Срочный выезд",
    desc: "Оперативно выезжаем на место ДТП или задержания в любой район города для фиксации нарушений.",
    icon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path><path d="M12 7v5l4 2"></path></svg>`,
  },
];
---

<section class="why-us-section" id="why-us">
  <div class="site-container">
    <!-- Левая колонка: Изображение -->
    <div class="image-column">
      <div class="image-wrapper animate-on-scroll" data-animation="scale-in">
        <img
          src={sectionData.imageUrl}
          alt="Юридическая практика"
          class="main-image"
          loading="lazy"
        />

        <!-- Плавающая бежевая плашка -->
        <div
          class="floating-card animate-on-scroll"
          data-animation="slide-up"
          data-delay="300"
        >
          <p>{sectionData.floatingText}</p>
        </div>
      </div>
    </div>

    <!-- Правая колонка: Текст и особенности -->
    <div class="content-column">
      <div class="section-header">
        <span class="subtitle animate-on-scroll" data-animation="fade-up"
          >{sectionData.subtitle}</span
        >
        <h2
          class="title animate-on-scroll"
          data-animation="slide-right"
          data-delay="100"
        >
          {sectionData.title}
        </h2>
      </div>

      <div class="features-list">
        {
          features.map((feature, index) => (
            <div
              class="feature-item animate-on-scroll"
              data-animation="stagger-item"
              data-delay={index * 150 + 200}
            >
              <div class="icon-box" set:html={feature.icon} />
              <div class="feature-text">
                <h3 class="feature-title">{feature.title}</h3>
                <p class="feature-desc">{feature.desc}</p>
              </div>
            </div>
          ))
        }
      </div>
    </div>
  </div>
</section>

<script>
  // Intersection Observer для анимаций при скроллинге
  const observerOptions = {
    root: null,
    rootMargin: "0px",
    threshold: 0.15,
  };

  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const delay = (entry.target as HTMLElement).dataset.delay || "0";

        setTimeout(
          () => {
            entry.target.classList.add("is-visible");
          },
          parseInt(delay as string),
        );

        // Отключаем наблюдение после появления
        observer.unobserve(entry.target);
      }
    });
  }, observerOptions);

  // Наблюдаем за всеми анимируемыми элементами
  document.querySelectorAll(".animate-on-scroll").forEach((el) => {
    observer.observe(el);
  });
</script>

<style>
  /* Общие стили секции */
  .why-us-section {
    padding: 6rem 2rem;
    background-color: #f4f6f9;
    font-family:
      system-ui,
      -apple-system,
      sans-serif;
    overflow: hidden; /* Предотвращаем горизонтальный скролл от анимаций */
  }

  .site-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
  }

  /* --- Базовые стили анимаций --- */
  .animate-on-scroll {
    opacity: 0;
    will-change: opacity, transform;
  }

  /* Fade In */
  [data-animation="fade-in"] {
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Fade Up */
  [data-animation="fade-up"] {
    transform: translateY(30px);
    transition:
      opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Slide Up (снизу вверх) */
  [data-animation="slide-up"] {
    transform: translateY(40px);
    transition:
      opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Slide Right (справа налево) */
  [data-animation="slide-right"] {
    transform: translateX(-40px);
    transition:
      opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Scale In (с увеличением) */
  [data-animation="scale-in"] {
    transform: scale(0.95);
    transition:
      opacity 1s cubic-bezier(0.4, 0, 0.2, 1),
      transform 1s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Stagger Item (для списка) */
  [data-animation="stagger-item"] {
    transform: translateX(-30px);
    transition:
      opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Активное состояние анимаций */
  .animate-on-scroll.is-visible {
    opacity: 1;
    transform: translate(0) scale(1);
  }

  /* --- Левая колонка (Изображение) --- */
  .image-column {
    position: relative;
    padding-bottom: 2rem;
    padding-right: 2rem;
  }

  .image-wrapper {
    position: relative;
    border-radius: 12px;
    overflow: visible;
  }

  .main-image {
    width: 100%;
    height: auto;
    aspect-ratio: 4/4.5;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  }

  /* Бежевая плавающая плашка с дополнительной анимацией тени */
  .floating-card {
    position: absolute;
    bottom: -30px;
    right: -30px;
    background-color: #fce1a8;
    padding: 1.8rem;
    border-radius: 6px;
    max-width: 320px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    z-index: 2;
    transition: box-shadow 0.5s ease 0.5s;
  }

  .floating-card.is-visible {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  }

  .floating-card p {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.5;
    color: #1e3050;
    margin: 0;
  }

  /* --- Правая колонка (Контент) --- */
  .section-header {
    margin-bottom: 3rem;
  }

  .subtitle {
    display: inline-block;
    color: #d4af37;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 1rem;
    padding: 0.5rem 1rem;
    background: rgba(212, 175, 55, 0.1);
    border-radius: 6px;
  }

  .title {
    color: #1e3050;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.02em;
  }

  /* Список особенностей (Features) */
  .features-list {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
  }

  .feature-item {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
  }

  /* Иконки с hover-эффектом */
  .icon-box {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    background-color: #122138;
    color: #ffffff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    box-shadow: 0 4px 10px rgba(18, 33, 56, 0.2);
    transition:
      transform 0.3s ease,
      box-shadow 0.3s ease;
  }

  .feature-item:hover .icon-box {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(18, 33, 56, 0.3);
  }

  /* Типографика текстов особенностей */
  .feature-text {
    flex-grow: 1;
    padding-top: 0.2rem;
  }

  .feature-title {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #1e3050;
    margin: 0 0 0.5rem 0;
    transition: color 0.3s ease;
  }

  .feature-item:hover .feature-title {
    color: #122138;
  }

  .feature-desc {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #6c7a8c;
    margin: 0;
  }

  /* --- Адаптивность --- */
  @media (max-width: 1024px) {
    .site-container {
      gap: 3rem;
    }

    .floating-card {
      right: -10px;
      max-width: 280px;
    }
  }

  @media (max-width: 768px) {
    .why-us-section {
      padding: 4rem 1.5rem;
    }

    .site-container {
      grid-template-columns: 1fr;
      gap: 3rem;
    }

    /* Центрирование заголовка на мобильных */
    .section-header {
      text-align: center;
      margin-bottom: 2.5rem;
    }

    .subtitle {
      font-size: 0.7rem;
      padding: 0.4rem 0.8rem;
    }

    .title {
      font-size: clamp(1.5rem, 5vw, 2rem);
    }

    /* Мобильные анимации - упрощаем направления */
    [data-animation="slide-right"] {
      transform: translateY(30px);
    }

    [data-animation="stagger-item"] {
      transform: translateY(20px);
    }

    .image-column {
      padding-right: 0;
      padding-bottom: 0;
    }

    .feature-item {
      gap: 1rem;
      justify-content: center;
      text-align: center;
    }

    .feature-text {
      text-align: center;
    }

    .feature-title {
      font-size: 1.1rem;
    }

    .feature-desc {
      font-size: 0.85rem;
    }

    .floating-card {
      bottom: -20px;
      right: 20px;
      left: 20px;
      max-width: none;
    }

    .icon-box {
      width: 40px;
      height: 40px;
    }
  }

  @media (max-width: 480px) {
    .why-us-section {
      padding: 3rem 1rem;
    }

    .subtitle {
      font-size: 0.65rem;
      letter-spacing: 2px;
      padding: 0.35rem 0.7rem;
    }

    .title {
      font-size: 1.4rem;
    }

    .feature-item {
      gap: 0.75rem;
    }

    .icon-box {
      width: 36px;
      height: 36px;
      padding: 7px;
    }

    .feature-title {
      font-size: 1rem;
    }

    .feature-desc {
      font-size: 0.8rem;
      line-height: 1.5;
    }

    .floating-card {
      padding: 1.2rem;
    }

    .floating-card p {
      font-size: 0.85rem;
    }
  }

  /* Уважаем prefers-reduced-motion */
  @media (prefers-reduced-motion: reduce) {
    .animate-on-scroll {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }
</style>