import { lightLine, smoke } from '@/styles/colors';
import {
  BELOW_W_1024,
  BELOW_W_512,
  BELOW_W_768,
  contentBelowHeaderHeight,
  paddedMainContentWidth,
} from '@/styles/dimensions';
import styled from '@emotion/styled';
import ExportedImage from 'next-image-export-optimizer';
import HumanInTheLoop from '../images/human-in-the-loop.jpg';
import { VerticalBlock } from './Layout';
import { Body, EmphasizedCharacter, Title } from './Typography';

const BannerVerticalBlock = styled(VerticalBlock)`
  height: ${paddedMainContentWidth};
  max-height: ${contentBelowHeaderHeight};
  overflow-x: visible;
  position: relative;
  z-index: 12;
  @media screen and (${BELOW_W_1024}) {
    height: calc(1.2 * ${paddedMainContentWidth});
    max-height: none;
  }
  @media screen and (${BELOW_W_768}) {
    height: auto;
  }
`;

const BannerBody = styled(Body)`
  max-width: 40rem;
  color: ${smoke};
  @media screen and (${BELOW_W_768}) {
    & + & {
      margin-top: 1rem;
    }
  }
`;

const TextWrap = styled.div`
  display: flex;
  align-items: flex-start;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 48px;
  z-index: 2;
  gap: 9rem;

  @media screen and (${BELOW_W_1024}) {
    left: 48px;
  }

  @media screen and (${BELOW_W_768}) {
    position: static;
    padding: 48px;
    flex-direction: column;
    gap: 2rem;
  }

  @media screen and (${BELOW_W_512}) {
    padding: 48px 24px;
    flex-direction: column;
    gap: 2rem;
  }
`;

const TitleText = styled.div`
  flex-shrink: 0;
  max-width: 30rem;
`;

const BannerImage = styled.div`
  position: absolute;
  height: 100%;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  > img {
    object-fit: cover;
    object-position: 100% 100%;
  }
  @media screen and (${BELOW_W_1024}) {
    > img {
      object-position: 90% 100%;
    }
    height: 140rem;
  }
  @media screen and (${BELOW_W_768}) {
    height: 100%;
  }
`;

const BannerHeightWrapper = styled.div`
  position: relative;
  height: 100%;
  @media screen and (${BELOW_W_768}) {
    height: 70rem;
    max-height: none;
  }
  @media screen and (${BELOW_W_512}) {
    height: 60rem;
  }
`;

const BannerWidthWrapper = styled.div`
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(-1 * (100svw - ${paddedMainContentWidth}) / 2);
  right: calc(-1 * (100svw - ${paddedMainContentWidth}) / 2);
  overflow: hidden;
  @media screen and (${BELOW_W_768}) {
    right: 0rem;
    left: 0rem;
  }
`;

const Banner = () => {
  return (
    <BannerVerticalBlock>
      <BannerHeightWrapper>
        <BannerWidthWrapper>
          <BannerImage>
            <ExportedImage
              fill
              alt="Image of a person's hand, interacting with a physically instantiated MIDI clip"
              sizes="200vw"
              src={HumanInTheLoop}
            />
          </BannerImage>
        </BannerWidthWrapper>
      </BannerHeightWrapper>
      <TextWrap>
        <TitleText>
          <div>
            <Title style={{ ['--backdrop-color']: lightLine } as any}>Human</Title>
          </div>
          <div>
            <Title style={{ ['--backdrop-color']: lightLine } as any}>
              in the loop<EmphasizedCharacter>s</EmphasizedCharacter>
            </Title>
          </div>
        </TitleText>
        <BannerBody>
          We take a human-centric approach to AI tooling, with you, the musician, guiding our feature design and
          development roadmap.
          <br />
          <br />
          We consult with musicians at every skill level, crafting tools to elevate and enhance human creativity. Come
          build the future of music production with us.
        </BannerBody>
      </TextWrap>
    </BannerVerticalBlock>
  );
};

export default Banner;