<script lang="ts">
  import Select from '../../../components/Select/Select.svelte';
  import { cookieVisible } from '../../../store.js';
  import { t } from '$lib/translations';

  let selectItem: undefined | number = undefined;
  let animation = false;

  const onChange = (value: undefined | number) => {
    animation = true;

    const timer = setTimeout(() => {
      animation = false;
      selectItem = value;
      clearTimeout(timer);
    }, 400);
  };

  const defaultItems = [
    [
      {
        title: $t('Rapid launch'),
        text: $t('Start your own brokerage business in as little as 2 weeks.'),
      },
      {
        title: $t('Comprehensive support'),
        text: $t('Over 90% of operational aspects are covered by our turnkey solution.'),
      },
    ],
    [
      {
        title: $t('Risk management'),
        text: $t("We'll deal with dealing risks, KYC, compliance, and security."),
      },
      {
        title: $t('Payment integration'),
        text: $t('Simplify the payment process via integrated gateways.'),
      },
    ],
  ];

  const roleItems = [
    [
      [
        {
          title: $t('Easy entry'),
          text: $t(
            'Fintechfuel simplifies the process of entering the trading world, providing user-friendly tools and educational resources.'
          ),
        },
        {
          title: $t('Guided journey'),
          text: $t(
            'Get step-by-step assistance in setting up your trading account and making informed investment decisions.'
          ),
        },
      ],
      [
        {
          title: $t('Diverse asset selection'),
          text: $t('Explore a wide range of trading instruments, allowing you to diversify your investment portfolio.'),
        },
        {
          title: $t('Security and compliance'),
          text: $t(
            'Our platform ensures KYC compliance and follows rigorous security measures to protect your funds and personal information.'
          ),
        },
      ],
    ],
    [
      [
        {
          title: $t('Lucrative partnership'),
          text: $t(
            'Partner with Fintechfuel and earn substantial commissions on the trading activities of your referred clients.'
          ),
        },
        {
          title: $t('Comprehensive tools'),
          text: $t('Access a suite of marketing and reporting tools to maximize your reach and track your earnings.'),
        },
      ],
      [
        {
          title: $t('Dedicated support'),
          text: $t('Benefit from dedicated broker support, ensuring you have the resources you need for success.'),
        },
        {
          title: $t('White label solutions'),
          text: $t(
            "Market our platform under your brand, boosting your brokerage's credibility and visibility in the market."
          ),
        },
      ],
    ],
    [
      [
        {
          title: $t('Enhanced services'),
          text: $t('Elevate your brokerage offerings with our comprehensive suite of turnkey solutions.'),
        },
        {
          title: $t('Efficient risk management'),
          text: $t(
            'Let our expert team manage risk on your behalf, allowing you to focus on growing your client base.'
          ),
        },
      ],
      [
        {
          title: $t('Scalable technology'),
          text: $t(
            'Our advanced technology can accommodate your growing client demands without compromising performance.'
          ),
        },
        {
          title: $t('White label solutions'),
          text: $t(
            "Market our platform under your brand, boosting your brokerage's credibility and visibility in the market."
          ),
        },
      ],
    ],
    [
      [
        {
          title: $t('Diversification of revenue'),
          text: $t(
            'Expand your offerings by introducing your users to binary options trading, adding a new revenue stream to your platform.'
          ),
        },
        {
          title: $t('Exciting trading experience'),
          text: $t(
            "Binary options provide users with an engaging and fast-paced trading experience, aligning well with your audience's preferences."
          ),
        },
      ],
      [
        {
          title: $t('Cross-market opportunities'),
          text: $t(
            'Attract your existing user base to binary options trading, offering them a seamless transition and access to new investment avenues.'
          ),
        },
        {
          title: $t('Increased user engagement'),
          text: $t(
            'Enhance user engagement and retention rates by offering an innovative and dynamic trading experience alongside your existing offerings.'
          ),
        },
      ],
    ],
  ];

  let visible = false;

  cookieVisible.subscribe((value) => {
    visible = value;
  });
</script>

<div class="solution {!visible ? 'cookie' : ''}">
  <div class="solutionContent first">
    <h2 class="solutionTitle">{$t('Build your own brokerage solution')}</h2>
    <p class="solutionText">
      {$t('Become the unique broker for any trader without much effort.')}
      {$t("FintechFuel's comprehensive toolset will help you offer an amazing trading experience.")}
    </p>
  </div>
  <div class="solutionContentScroll" style="position: relative; top: -165px;" />
  <div class="solutionContent center">
    <div class="solutionSelect">
      <p>{$t('I am')}</p>
      <Select className="solutionSelects" {onChange} />
      <span>{$t('Step into the trading world with ease')}</span>
    </div>
  </div>
  <div class="solutionContent">
    <div class="solutionGrid {animation ? 'animation' : ''}">
      {#if selectItem === undefined}
        {#each defaultItems as items}
          <div class="solutionGridCol">
            {#each items as item}
              <div class="solutionGridItem">
                <p>{item.title}</p>
                <span>{item.text}</span>
              </div>
            {/each}
          </div>
        {/each}
      {:else if roleItems[selectItem]?.length}
        {#each roleItems[selectItem] as item}
          <div class="solutionGridCol">
            {#each item as i}
              <div class="solutionGridItem">
                <p>{i.title}</p>
                <span>{i.text}</span>
              </div>
            {/each}
          </div>
        {/each}
      {/if}
      <div class="solutionGridCol">
        <div class="solutionGridItem">
          <p>{$t('Customization options')}</p>
          <span>{$t('Personalize the platform to align with your brand and user preferences.')}</span>
        </div>
        <div class="solutionGridItem">
          <p>{$t('White label solutions')}</p>
          <span>{$t('Market the platform under your unique brand')}</span>
        </div>
      </div>
    </div>
  </div>
</div>

<style lang="scss">
  @import '../../../scss/media';

  .solution {
    .solutionContent {
      margin-bottom: 96px;
      width: 100%;

      @include breakpoint-down('tabS') {
        margin-bottom: 64px;
      }

      @include breakpoint-down('mobM') {
        margin-bottom: 32px;
      }

      &:last-of-type {
        margin-bottom: 0;
      }

      &.first {
        max-width: 737px;

        @include breakpoint-down('mobM') {
          margin-bottom: 56px;
        }
      }

      &.center {
        @include breakpoint-down('mobM') {
          background: #faf9f8;
          position: sticky;
          top: 65px;
          z-index: 1;
          margin-top: -24px;
          padding-top: 24px;
          margin-bottom: 0;
          padding-bottom: 32px;
        }
      }
    }

    .solutionTitle {
      font-size: 72px;
      font-weight: 600;
      line-height: 94px;
      margin-bottom: 24px;

      @include breakpoint-down('tabM') {
        font-size: 48px;
        line-height: 58px;
      }

      @include breakpoint-down('mobM') {
        font-size: 32px;
        line-height: 42px;
      }
    }

    .solutionText {
      font-size: 24px;
      font-weight: 400;
      line-height: 36px;

      @include breakpoint-down('tabM') {
        font-size: 22px;
        line-height: 33px;
      }

      @include breakpoint-down('tabS') {
        font-size: 20px;
        line-height: 30px;
      }

      @include breakpoint-down('mobM') {
        font-size: 18px;
        line-height: 27px;
      }
    }

    .solutionSelect {
      display: flex;
      align-items: center;
      gap: 40px;
      max-width: 1126px;

      @include breakpoint-down('tabM') {
        flex-direction: column;
        align-items: flex-start;
        gap: 28px;
      }

      @include breakpoint-down('tabS') {
        gap: 24px;
      }

      @include breakpoint-down('mobM') {
        gap: 16px;
      }

      p {
        font-size: 48px;
        font-weight: 600;
        line-height: 62px;
        white-space: nowrap;

        @include breakpoint-down('tabS') {
          font-size: 32px;
          line-height: 42px;
        }
      }

      span {
        display: block;
        width: 100%;
        max-width: 168px;
        color: #73726c;

        @include breakpoint-down('tabM') {
          max-width: none;
        }

        @include breakpoint-down('tabS') {
          display: none;
        }
      }
    }

    .solutionGrid {
      display: flex;
      gap: 74px;
      height: auto;
      transition: 0.4s ease-in-out;

      @include breakpoint-down('tabM') {
        gap: 34px;
      }

      @include breakpoint-down('tabS') {
        column-gap: 25px;
        row-gap: 0;
        flex-wrap: wrap;
      }

      &.animation {
        opacity: 0;
        transform: translateY(20px);
      }
    }

    .solutionGridCol {
      display: grid;
      width: calc((100% - 74px * 2) / 3);
      grid-template-rows: 1fr 1fr;
      gap: 40px;

      @include breakpoint-down('tabM') {
        width: calc((100% - 34px * 2) / 3);
      }

      @include breakpoint-down('tabS') {
        width: calc((100% - 25px) / 2);
        gap: 32px;

        &:last-of-type {
          display: flex;
          width: 100%;
          gap: 25px;

          .solutionGridItem {
            width: calc((100% - 25px) / 2);
            border-bottom: none !important;
            border-top: thin solid #d9d7cc;
            padding-top: 32px;
            margin-top: 32px;
          }
        }
      }

      @include breakpoint-down('mobM') {
        display: block;
        width: 100%;

        &:last-of-type {
          flex-direction: column;
          gap: 0;

          .solutionGridItem {
            width: 100%;
            border-bottom: none !important;
            border-top: none;
            padding-top: 0;
            margin-top: 0;
            border-bottom: thin solid #d9d7cc !important;

            &:last-of-type {
              margin-bottom: 0;
              padding-bottom: 0;
              border-bottom: none !important;
            }
          }
        }
      }
    }

    .solutionGridItem {
      padding-bottom: 40px;
      border-bottom: thin solid #d9d7cc;

      @include breakpoint-down('tabS') {
        padding-bottom: 32px;
        margin-bottom: 32px;
      }

      p {
        font-size: 18px;
        font-weight: 600;
        line-height: 27px;
        letter-spacing: 0.005em;
        margin-bottom: 8px;

        @include breakpoint-down('mobM') {
          font-size: 16px;
          line-height: 24px;
        }
      }

      span {
        display: block;
      }

      &:last-of-type {
        padding-bottom: 0;
        margin-bottom: 0;
        border-bottom: none;

        @include breakpoint-down('mobM') {
          border-bottom: thin solid #d9d7cc;
          margin-bottom: 32px;
          padding-bottom: 32px;
        }
      }
    }

    &.cookie {
      .solutionContent {
        &.center {
          top: 120px;
        }
      }
    }
  }
</style>