<script lang="ts">
  import { onMount } from 'svelte';
  import Swiper from 'swiper';
  import 'swiper/css';
  import 'swiper/css/pagination';
  import { Pagination, Autoplay } from 'swiper/modules';
  import PaginationEl from '../../pagination/Pagination.svelte';
  import { popupForm } from '../../../store';
  import { t } from '$lib/translations';
  import yahoo from '../../../assets/images/main/hero/Yahoo Finance.svg';
  import bw from '../../../assets/images/main/hero/businesswire_BIG.svg';
  import businessInsider from '../../../assets/images/main/hero/Business_Insider.svg';
  import fxempire from '../../../assets/images/main/hero/fxempire.svg';
  import fxstreet from '../../../assets/images/main/hero/fxs.svg';
  import monitorImage from '../../../assets/images/main/hero/monitor.webp';
  import monitor393 from '../../../assets/images/main/hero/monitor393.webp';
  import monitor480 from '../../../assets/images/main/hero/monitor480.webp';
  import monitor720 from '../../../assets/images/main/hero/monitor720.webp';
  import monitor1024 from '../../../assets/images/main/hero/monitor1024.webp';
  import customizableIcon from '../../../assets/images/main/hero/customizable.svg';
  import setupIcon from '../../../assets/images/main/hero/setup.svg';
  import modelIcon from '../../../assets/images/main/hero/model.svg';
  import technicalIcon from '../../../assets/images/main/hero/technical.svg';
  import award1 from '../../../assets/images/main/hero/award1.webp';
  import award2 from '../../../assets/images/main/hero/award2.webp';
  import award3 from '../../../assets/images/main/hero/award3.webp';
  import award4 from '../../../assets/images/main/hero/award4.webp';

  const features = [
    {
      icon: customizableIcon,
      text: $t('Fully customizable'),
    },
    {
      icon: setupIcon,
      text: $t('Setup in just 2 weeks'),
    },
    {
      icon: modelIcon,
      text: $t('All-inclusive white label model'),
    },
    {
      icon: technicalIcon,
      text: $t('No technical knowledge needed'),
    },
  ];

  const awards = [
    {
      image: award1,
      title: 'Best White Label Brokerage Provider',
      year: '2025',
    },
    {
      image: award2,
      title: 'Best White Label Broker',
      year: '2025',
    },
    {
      image: award3,
      title: 'Best White Label Solution for Brokers',
      year: '2025',
    },
    {
      image: award4,
      title: 'Best Provider for Brokers',
      year: '2025',
    },
  ];

  onMount(() => {
    const container: HTMLElement | null = document.querySelector('.block-hero__awards-swiper');
    const pagination: HTMLElement | null = document.querySelector('.block-hero__awards-pagination');

    if (!container || !pagination) return;

    new Swiper(container, {
      modules: [Pagination, Autoplay],
      slidesPerView: 1,
      spaceBetween: 16,
      loop: true,
      autoplay: {
        delay: 3000,
        disableOnInteraction: false,
      },
      pagination: {
        el: pagination,
        clickable: true,
      },
    });
  });
</script>

<div class="block-hero">
  <div class="block-hero__background">
    <picture>
      <source media="(max-width: 393px)" srcset={monitor393} />
      <source media="(max-width: 480px)" srcset={monitor480} />
      <source media="(max-width: 720px)" srcset={monitor720} />
      <source media="(max-width: 1024px)" srcset={monitor1024} />
      <img src={monitorImage} alt="Trading platform" class="block-hero__monitor" />
    </picture>
  </div>
  <div class="container container-main">
    <div class="block-hero__container">
      <div class="block-hero__left">
        <h1 class="block-hero__title">{$t('Starting brokerage has never been easier')}</h1>
        <p class="block-hero__subtitle">
          {$t('Ready-to-go solution for launching your own brokerage brand from scratch in just a few weeks')}
        </p>
        <button class="block-hero__button" on:click={() => popupForm.set(true)}>
          {$t('Request demo')}
        </button>

        <div class="block-hero__features">
          {#each features as feature (feature.text)}
            <div class="block-hero__feature">
              <div class="block-hero__feature-icon">
                <img src={feature.icon} alt="" />
              </div>
              <div class="block-hero__feature-text">{feature.text}</div>
            </div>
          {/each}
        </div>
      </div>

      <div class="block-hero__right">
        <div class="block-hero__stats">
          <div class="block-hero__stat">
            <div class="block-hero__stat-value">12</div>
            <div class="block-hero__stat-label">{$t('Years of experience')}</div>
          </div>
          <div class="block-hero__stat">
            <div class="block-hero__stat-value">65</div>
            <div class="block-hero__stat-label">{$t('Brokers since 2024')}</div>
          </div>
        </div>

        <div class="block-hero__awards">
          <div class="swiper block-hero__awards-swiper">
            <div class="swiper-wrapper">
              {#each awards as award (award.title)}
                <div class="swiper-slide">
                  <div class="block-hero__award-card">
                    <img src={award.image} alt={award.title} class="block-hero__award-image" />
                    <div class="block-hero__award-content">
                      <div class="block-hero__award-title">{award.title}</div>
                      <div class="block-hero__award-year">{award.year}</div>
                    </div>
                  </div>
                </div>
              {/each}
            </div>
          </div>
          <PaginationEl className="block-hero__awards-pagination" />
        </div>
      </div>

      <div class="block-hero__featured">
        <div class="block-hero__featured-label">{$t("We're featured in")}</div>
        <div class="block-hero__featured-logos-wrapper">
          <div class="block-hero__featured-logos">
            <img src={yahoo} alt="Yahoo Finance" class="block-hero__featured-logo" />
            <img src={bw} alt="Business Wire" class="block-hero__featured-logo" />
            <img src={businessInsider} alt="Business Insider" class="block-hero__featured-logo" />
            <img src={fxempire} alt="FX Empire" class="block-hero__featured-logo" />
            <img src={fxstreet} alt="FX Street" class="block-hero__featured-logo" />
            <!-- Дублируем для бесшовной прокрутки -->
            <img src={yahoo} alt="Yahoo Finance" class="block-hero__featured-logo" />
            <img src={bw} alt="Business Wire" class="block-hero__featured-logo" />
            <img src={businessInsider} alt="Business Insider" class="block-hero__featured-logo" />
            <img src={fxempire} alt="FX Empire" class="block-hero__featured-logo" />
            <img src={fxstreet} alt="FX Street" class="block-hero__featured-logo" />
            <!-- Дублируем для бесшовной прокрутки -->
            <img src={yahoo} alt="Yahoo Finance" class="block-hero__featured-logo" />
            <img src={bw} alt="Business Wire" class="block-hero__featured-logo" />
            <img src={businessInsider} alt="Business Insider" class="block-hero__featured-logo" />
            <img src={fxempire} alt="FX Empire" class="block-hero__featured-logo" />
            <img src={fxstreet} alt="FX Street" class="block-hero__featured-logo" />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style lang="scss">
  @import 'src/scss/variables';
  @import 'src/scss/media';
  @import 'src/scss/mixins';

  .block-hero {
    position: relative;
    padding: 390px 0 56px 0;
    background: #161618;
    overflow: hidden;
    width: 100%;

    @media (max-width: 1024px) {
      padding: 421px 0 56px 0;
    }

    @media (max-width: 720px) {
      padding: 276px 0 44px 0;
    }

    @media (max-width: 480px) {
      padding: 287px 0 43px 0;
    }

    &__background {
      position: absolute;
      inset: 0;
      z-index: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      pointer-events: none;
      top: -129px;
      left: -13px;

      @media (max-width: 1366px) {
        left: -124px;
      }

      @media (max-width: 1024px) {
        top: -499px;
        left: 44px;
      }

      @media (max-width: 720px) {
        top: -373px;
        left: -21px;
      }

      @media (max-width: 480px) {
        top: -595px;
        left: 0;
      }

      @media (max-width: 393px) {
        top: -704px;
        left: 0;
      }
    }

    &__monitor {
      width: 1320px;
      height: 900px;
      object-fit: contain;
      object-position: top;
      mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 85%);
      -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 85%);

      @media (max-width: 1024px) {
        width: 766px;
        height: 520px;
      }

      @media (max-width: 720px) {
        width: 766px;
        height: 520px;
      }

      @media (max-width: 480px) {
        width: 593px;
        height: 403px;
      }

      @media (max-width: 393px) {
        width: 484px;
        height: 329px;
      }
    }

    .container-main {
      position: relative;
      z-index: 1;
      max-width: 1440px;
      width: 100%;
      margin: 0 auto;
      padding: 0 56px;

      @media (max-width: 1366px) {
        padding: 0 40px;
      }
      @media (max-width: 1024px) {
        padding: 0 32px;
      }

      @media (max-width: 480px) {
        padding: 0 24px;
      }
      @media (max-width: 393px) {
        padding: 0 20px;
      }
    }

    &__container {
      position: relative;
      z-index: 1;

      @media (max-width: 720px) {
        display: flex;
        flex-direction: column;
        padding: 11px 0 0 0;
      }

      @media (max-width: 480px) {
        padding: 0;
      }
    }

    &__left {
      display: flex;
      flex-direction: column;
      gap: 20px;
      position: relative;
      z-index: 2;

      @media (max-width: 720px) {
        display: contents;
      }
    }

    &__title {
      font-size: 64px;
      line-height: 72px;
      color: #f9fbfc;
      max-width: 700px;
      font-weight: 40;

      @media (max-width: 1024px) {
        font-size: 56px;
        line-height: 68px;
      }

      @media (max-width: 1023px) {
        font-size: 36px;
        line-height: 44px;
        max-width: 406px;
      }

      @media (max-width: 720px) {
        order: 1;
        margin-bottom: 20px;
      }
    }

    &__subtitle {
      font-size: 16px;
      line-height: 20px;
      font-weight: 400;
      color: #adb1b7;
      margin-bottom: 16px;
      max-width: 589px;

      @media (max-width: 1023px) {
        font-size: 14px;
        line-height: 20px;
        max-width: 406px;
        margin-bottom: 4px;
      }

      @media (max-width: 720px) {
        order: 2;
        margin-bottom: 24px;
      }
    }

    &__button {
      padding: 8px 16px;
      background: #ff282b;
      font-weight: 450;
      color: #f9fbfc;
      border: none;
      border-radius: 1000px;
      font-size: 14px;
      line-height: 20px;
      width: fit-content;
      cursor: pointer;
      transition: background 0.2s ease;

      &:hover {
        background: #e60019;
      }
      &:active {
        background: #c70214;
      }

      @media (max-width: 720px) {
        order: 3;
        margin-bottom: 65px;
        font-size: 12px;
        line-height: 16px;
        padding: 8px 12px;
      }

      @media (max-width: 393px) {
        font-size: 14px;
        line-height: 20px;
        padding: 8px 16px;
      }
    }

    &__right {
      position: absolute;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 117px;
      z-index: 15;
      width: fit-content;
      max-width: 130px;

      top: -390px;
      right: -16.5px;

      @media (max-width: 1366px) {
        top: -341px;
        right: -23.5px;
      }

      @media (max-width: 1024px) {
        top: -410px;
        right: -28.5px;
        gap: 210px;
      }

      @media (max-width: 720px) {
        top: -403px;
        right: -30px;
        gap: 200px;
      }

      @media (max-width: 720px) {
        position: static;
        order: 4;
        max-width: 100%;
        width: 100%;
        align-items: stretch;
        margin-bottom: 34px;
      }
    }

    &__stats {
      display: flex;
      flex-direction: column;
      gap: 48px;

      @media (max-width: 720px) {
        flex-direction: row;
        gap: 24px;
        justify-content: space-between;
        width: 100%;
      }

      @media (max-width: 720px) {
        margin-top: -10px;
        gap: 15px;
      }
    }

    &__stat {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;

      @media (max-width: 1024px) {
        gap: 0;
      }

      @media (max-width: 720px) {
        align-items: flex-start;
        flex: 1 1 0;
        min-width: 0;
      }
    }

    &__stat-value {
      font-size: 36px;
      line-height: 40px;
      font-weight: 400;
      color: #f9fbfc;

      @media (max-width: 1024px) {
        font-size: 22px;
        line-height: 26px;
      }

      @media (max-width: 720px) {
        font-size: 22px;
        line-height: 26px;
      }
    }

    &__stat-label {
      font-size: 14px;
      line-height: 20px;
      font-weight: 400;
      color: #adb1b7;
      max-width: 81px;
      text-align: center;

      @media (max-width: 720px) {
        text-align: left;
        max-width: none;
      }
    }

    &__awards {
      width: fit-content;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 8px;

      @media (max-width: 720px) {
        display: none;
      }
    }

    &__awards-swiper {
      width: fit-content;
      max-width: 200px;
    }

    &__awards-swiper :global(.swiper-slide) {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    &__awards-pagination {
      position: relative;
    }

    :global(.pagination.block-hero__awards-pagination) {
      gap: 3px;

      :global(.swiper-pagination-bullet) {
        width: 4px;
        height: 4px;
        background: #525659;
        opacity: 1;
        border-radius: 50%;
        transition: background 0.3s ease;

        &:before {
          background: #525659;
          width: 4px;
          height: 4px;
        }

        &:after {
          display: none;
        }
      }

      :global(.swiper-pagination-bullet-active) {
        &:before {
          background: #adb1b7;
          width: 4px;
          height: 4px;
        }
      }
    }

    &__award-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      width: fit-content;
    }

    &__award-image {
      width: 55px;
      height: auto;
      object-fit: contain;
    }

    &__award-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      text-align: center;
    }

    &__award-title {
      font-size: 14px;
      line-height: 20px;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.9);
      max-width: 129px;
    }

    &__award-year {
      font-size: 12px;
      line-height: 18px;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.6);
    }

    &__features {
      display: flex;
      gap: 56px;
      margin-top: 35px;
      padding-bottom: 66px;
      margin-bottom: 39px;
      border-bottom: 1px solid #464646;

      @media (max-width: 1024px) {
        padding-bottom: 49px;
      }

      @media (max-width: 720px) {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 43px;
        margin-top: 40px;
        gap: 57px;
      }

      @media (max-width: 720px) {
        flex-wrap: wrap;
        order: 5;
        margin-top: 2px;
        column-gap: 28px;
        row-gap: 36px;
        padding-bottom: 26px;
        align-items: center;
      }
    }

    &__feature {
      display: flex;
      align-items: center;
      gap: 12px;

      @media (max-width: 1024px) {
        flex-direction: column;
        align-items: flex-start;
      }

      @media (max-width: 1023px) {
        max-width: 109px;
      }

      @media (max-width: 720px) {
        max-width: 119px;
      }

      @media (max-width: 720px) {
        width: calc(50% - 16px);
        flex: 0 0 calc(50% - 16px);
        max-width: none;
        gap: 16px;
      }
    }

    &__feature-icon {
      width: 28px;
      height: 28px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;

      @media (max-width: 480px) {
        width: 24px;
        height: 24px;
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }

    &__feature-text {
      font-size: 16px;
      line-height: 24px;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.8);

      @media (max-width: 1023px) {
        font-size: 14px;
        line-height: 20px;
      }
    }

    &__featured {
      display: flex;
      flex-direction: column;
      gap: 20px;
      align-items: center;

      @media (max-width: 720px) {
        order: 6;
      }

    }

    &__featured-label {
      font-size: 14px;
      line-height: 20px;
      font-weight: 400;
      color: #525659;
    }

    &__featured-logos-wrapper {
      width: 100%;
      overflow: hidden;
      height: 85px;
      position: relative;
      display: flex;
      align-items: center;
    }

    &__featured-logos {
      display: flex;
      align-items: center;
      gap: 100px;
      animation: marquee 20s linear infinite;
      width: fit-content;
    }

    @keyframes marquee {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-1154px);
      }
    }
  }
</style>