Untitled

/* eslint-disable no-nested-ternary */
import React, { useState } from 'react';

import { Link } from 'react-router-dom';
import OurTrajectoryDisabled from '../../assets/img/ourTrajectory-disabled.png';
import OurTrajectoryEnabled from '../../assets/img/ourTrajectory-enabled.png';
import XpForBrazilDisabled from '../../assets/img/xpForBrazil-disabled.png';
import XpForBrazilEnabled from '../../assets/img/xpForBrazil-enabled.png';
import investmentAndDiversificationDisabled from '../../assets/img/investmentAndDiversification-disabled.png';
import investmentAndDiversificationEnabled from '../../assets/img/investmentAndDiversification-enabled.png';
import {
  LogoContainer,
  WelcomeText,
  TitleContainer,
  Title,
  WordContainer,
  TabContent,
  Description,
  Span,
  Button,
  SemiCircleContainer,
  Icon,
} from './atoms';
import Logo from '../../assets/img/logo.png';
import InfiniteScrollingText from './InfiniteScrollingText';

const activeTabContent = [
  {
    description: 'Veja a história da XP, de Porto Alegre para o Mundo',
    title: 'Nossa trajetória',
    button: { label: 'Conhecer', route: '/trajetoria' },
  },
  {
    description: 'Veja onde a maior corretora de investimentos do Brasil está',
    title: 'Marca pelo Brasil',
    button: { label: 'Conhecer', route: '/marca-pelo-brasil' },
  },
  {
    description:
      'Simule quanto seu patrimônio renderia com a marca em momentos importantes ',
    title: 'Investimento e diversificação',
    button: {
      label: 'Conhecer',
      route: '/simular',
    },
  },
];

function SemiCircleIcons() {
  const [activeIndex, setActiveIndex] = useState(0);

  const iconsData = [
    {
      id: 0,
      label: activeIndex === 0 ? OurTrajectoryEnabled : OurTrajectoryDisabled,
      testId: 'trajectory',
    },
    {
      id: 1,
      label: activeIndex === 1 ? XpForBrazilEnabled : MarcaForBrazilDisabled,
      testId: 'xp-for-brazil',
    },
    {
      id: 2,
      label:
        activeIndex === 2
          ? investmentAndDiversificationEnabled
          : investmentAndDiversificationDisabled,
      testId: 'investment-and-diversification',
    },
  ];

  const handleClick = (index: number) => {
    setActiveIndex(index);
  };

  const getPosition = (iconId: number) => {
    switch (activeIndex) {
      case 0:
        return iconId === 0 ? 'top' : 'right';
      case 1:
        return iconId === 0 ? 'left' : iconId === 1 ? 'top' : 'right';
      case 2:
        return iconId === 0 ? 'left' : iconId === 1 ? 'left' : 'top';
      default:
        return 'right';
    }
  };

  const isDisabled = (iconId: number) => {
    if (activeIndex === 0) return iconId === 2;
    if (activeIndex === 1) return false;
    if (activeIndex === 2) return iconId === 0;
    return false;
  };

  return (
    <>
      <LogoContainer>
        <img src={Logo} alt="Logo marca" width={84} height={84} />
      </LogoContainer>
      <WelcomeText variant="heading-4">Seja bem-vindo(a) a Marca</WelcomeText>
      <TitleContainer>
        <Title variant="heading-3">Invista com&nbsp;</Title>
        <WordContainer>
          <InfiniteScrollingText
            words={['inteligência', 'segurança', 'especialistas']}
          />
        </WordContainer>
      </TitleContainer>
      <SemiCircleContainer>
        {iconsData.map((icon, idx) => (
          <Icon
            key={icon.id}
            position={getPosition(icon.id)}
            disabled={isDisabled(icon.id)}
            onClick={() => handleClick(icon.id)}
            data-testid={icon.testId}
          >
            <img
              alt="icon"
              src={icon.label}
              width={activeIndex === idx ? 438 : 224}
              height={activeIndex === idx ? 438 : 224}
            />
          </Icon>
        ))}
        <TabContent>
          {activeTabContent.map(
            (content, index) => index === activeIndex && (
            <div key={content.title}>
              <Description>{content.description}</Description>
              <Span variant="heading-4">{content.title}</Span>
              <Link to={content.button.route}>
                <Button type="button" size="md">
                  {content.button.label}
                </Button>
              </Link>
            </div>
            ),
          )}
        </TabContent>
      </SemiCircleContainer>
    </>
  );
}

export default SemiCircleIcons;

import { SomaButton, SomaDescription, SomaHeading } from '@soma/react';
import styled, { keyframes, css } from 'styled-components';

export const LogoContainer = styled.div`
  display: inline;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;

  img {
    height: 168px;
    width: 168px;
    display: inline-block;
    margin-bottom: 40px;
    margin-top: 100px;
  }
`;

export const WelcomeText = styled(SomaHeading)`
  font-size: 64px;
  font-weight: 400;
  line-height: 82px;
  text-align: center;
  ${({ theme }) => css`
    color: ${theme.color.neutral.light.pure};
  `}
  margin-top: 78px;
`;

export const TitleContainer = styled.div`
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 96px;
`;

export const Title = styled(SomaHeading)`
  color: var(--Neutral-Light-Pure, var(--Colors-Light-Pure, #fff));
  text-align: center;
  font-variant-numeric: lining-nums proportional-nums;
  font-feature-settings: "clig" off, "liga" off;
  font-family: XP;
  font-size: 96px;
  font-style: normal;
  font-weight: 700;
  line-height: 82px; /* 85.417% */
`;

export const WordContainer = styled.div`
  // position: relative;
  height: 110px;
  // overflow: hidden;
  // min-width: 620px;
`;

export const TabContent = styled.div`
  display: block;
  align-items: center;
  justify-content: center;
  margin: 25%;
`;

export const Description = styled(SomaDescription)`
  width: 100%;
  display: inline-block;
  ${({ theme }) => css`
    color: ${theme.color.neutral.light.pure};
  `}
  font-family: XP;
  font-size: 40px;
  font-weight: 400;
  line-height: 82px;
  text-align: center;
`;

export const Span = styled(SomaHeading)`
  width: 100%;
  display: inline-block;
  ${({ theme }) => css`
    color: ${theme.color.neutral.light.pure};
  `}
  font-family: XP;
  font-size: 80px;
  font-weight: 700;
  line-height: 82px;
  text-align: center;
  margin-top: 16px;
`;

export const Button = styled(SomaButton)`
  width: 440px;
  height: 96px;
  padding: 0px 32px 0px 32px;
  gap: 0px;
  border-radius: 200px;
  opacity: 0px;
  margin-top: 80px;
  font-size: 28px;

  & > a {
    ${({ theme }) => css`
      color: ${theme.color.neutral.light.pure};
    `}
    text-decoration: none;
  }
`;

export const SemiCircleContainer = styled.div`
  ${(props) => css`
    position: relative;
    border-top-left-radius: 1600px;
    border-top-right-radius: 1600px;
    background-color: #333;
    margin: 298.52px auto 0;
    border: 1px solid #3d3d3d;
    background: linear-gradient(180deg, #121212 0%, #212121 43.11%);
    width: 2380px;
    height: 1200px;
  `}
`;

export const Icon = styled.div<{ disabled: boolean; position: string }>`
  width: 438px;
  height: 438px;
  position: absolute;
  background-color: transparent;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
  transition: all 1s ease-in-out;

  ${(props) => props.disabled
    && css`
      opacity: 0;
      pointer-events: none;
    `}

  ${(props) => props.position === 'top'
    && css`
      left: 50%;
      transform: translateX(-40%);
      top: -150px;
    `}

 ${(props) => props.position === 'left'
    && css`
      left: 3%;
      top: 40%;
      transform: translateX(-40%);
    `}

 ${(props) => props.position === 'right'
    && css`
      top: 40%;
      left: 94%;
      transform: translateX(-40%);
    `}
`;

const scroll = keyframes`
 0% { transform: translateY(0%); }
 100% { transform: translateY(-50%); }
`;

export const InfiniteWrapper = styled.div`
  width: 500px;
  height: 100px;
  overflow: hidden;
  position: relative;
`;

export const InfiniteTextWrapper = styled.div<{ duration: number }>`
  display: flex;
  flex-direction: column;
  position: absolute;
  width: 100%;
  animation: ${({ duration }) => css`
    ${scroll} ${duration}s linear infinite
  `};
  gap: 100px;
`;

export const InfiniteText = styled.div`
  font-family: XP;
  font-size: 96px;
  font-weight: 700;
  text-align: left;
  height: 50px;
  ${({ theme }) => css`
    color: ${theme.color.neutral.light.pure};
  `}
`;