import { ash, lightLine, smoke } from '@/styles/colors';
import { BELOW_W_1024, BELOW_W_768 } from '@/styles/dimensions';
import styled from '@emotion/styled';
import { PaddedBlock, VerticalBlock } from './Layout';
import { Subtitle, Title } from './Typography';
import ConvolutionReverb from './devicebreakdowns/ConvolutionReverb';
import LiveCoding from './devicebreakdowns/LiveCoding';
import ParameterAutomation from './devicebreakdowns/ParameterAutomation';
import PortalsLink from './devicebreakdowns/PortalsLink';
import SidechainCompression from './devicebreakdowns/SidechainCompression';
import SignalSplit from './devicebreakdowns/SignalSplit';
import WavetableSynth from './devicebreakdowns/WavetableSynth';

const FeaturesGrid = styled.div`
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 0 30px 50px;
  @media screen and (${BELOW_W_1024}) {
    grid-template-columns: repeat(3, 1fr);
  }
  @media screen and (max-width: 880px) {
    grid-template-columns: repeat(2, 1fr);
  }
  @media screen and (max-width: 600px) {
    grid-template-columns: 1fr;
  }
`;

const SectionHeader = styled.div`
  max-width: 700px;
  margin-top: 5rem;
  margin-bottom: 20rem;
  @media screen and (${BELOW_W_1024}) {
    margin-bottom: 10rem;
  }
  @media screen and (${BELOW_W_768}) {
    margin-bottom: 5rem;
  }
`;

const SectionSubtitle = styled(Subtitle)`
  background: ${lightLine};
  width: fit-content;
  padding: 3px;
`;

const SectionTitle = styled(Title)`
  text-transform: lowercase;
  background-image: none;
  font-size: 6rem;
  @media screen and (${BELOW_W_1024}) {
    font-size: 5.6rem;
  }
`;

const FeatureBlock = styled.div``;

const TileBlock = styled.div`
  background: ${smoke};
  aspect-ratio: 1;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
`;

const Logo = styled.img`
  width: 50%;
  height: 50%;
`;

const EffectsBreakdownGrid = () => {
  return (
    <VerticalBlock>
      <PaddedBlock>
        <SectionHeader>
          <SectionSubtitle>Customizable down to code</SectionSubtitle>
          <SectionTitle>
            Full speed + full control,
            <span style={{ color: ash }}> with professionally-crafted presets and open-source synthesizers.</span>
          </SectionTitle>
        </SectionHeader>
      </PaddedBlock>
      <FeaturesGrid>
        <FeatureBlock>
          <WavetableSynth />
          <p>Full-Featured Wavetable Synth</p>
        </FeatureBlock>
        <FeatureBlock>
          <ConvolutionReverb />
          <p>Convolution Reverb</p>
        </FeatureBlock>
        <FeatureBlock>
          <SidechainCompression />
          <p>Sidechain Compression</p>
        </FeatureBlock>
        <FeatureBlock>
          <LiveCoding />
          <p>Live-Code any WavTool synth or effect</p>
        </FeatureBlock>
        <FeatureBlock>
          <PortalsLink />
          <p>Intuitive Cross-Track Routing</p>
        </FeatureBlock>
        <FeatureBlock>
          <ParameterAutomation />
          <p>Parameter Automation</p>
        </FeatureBlock>
        <FeatureBlock>
          <SignalSplit />
          <p>Multi-Input and Multi-Output effects</p>
        </FeatureBlock>
        <FeatureBlock>
          <TileBlock>
            <Logo src="/images/square-logo-white.svg" />
          </TileBlock>
          <p>... and much more</p>
        </FeatureBlock>
      </FeaturesGrid>
    </VerticalBlock>
  );
};

export default EffectsBreakdownGrid;