<template>
  <SectionWrapper class="about-us-section" :style="backgroundStyle">
    <div class="about-us-section__wrapper">
      <Image
        v-if="isImageVisible"
        class="about-us-section__image"
      />

      <div class="about-us-section__content">
        <Title v-if="isTitleVisible" />
        <Stats />
      </div>
    </div>
  </SectionWrapper>
</template>

<script setup lang="ts">
import { useBackgroundElementDesign } from '@lightspeed/crane';
import { computed, CSSProperties } from 'vue';

import Image from './component/Image.vue';
import type { Design } from './type.ts';
import { useVisibilityProvider } from './util/visibility-provider.ts';
import Stats from './component/Stats.vue';
import Title from './component/Title.vue';
import SectionWrapper from '../../shared/components/SectionWrapper.vue';

const { isImageVisible, isTitleVisible } = useVisibilityProvider();

const backgroundDesign = useBackgroundElementDesign<Design>('background');
const background = computed(() => ({
  type: backgroundDesign.background?.type,
  solidColor: backgroundDesign.background?.solid?.color as Color,
  fromColor: backgroundDesign.background?.gradient?.fromColor as Color,
  toColor: backgroundDesign.background?.gradient?.toColor as Color,
}));

const backgroundStyle = computed<CSSProperties>(() => {
  if (background.value.type === 'gradient') {
    return { 'background-image': `linear-gradient(to right, ${background.value.fromColor.hex}, ${background.value.toColor.hex})` };
  }
  return { 'background-color': background.value.solidColor.hex };
});
</script>

<style lang="scss" scoped>
.about-us-section {
  &__wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 75px;

    @media screen and (min-width: 900px) {
      grid-template-columns: 1fr 1fr;
      align-items: center;
      gap: 100px;
    }
  }

  &__image {
    max-width: 479px;
    max-height: 610px;
    margin: 0 auto;
  }

  &__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-self: center;
  }
}
</style>
