import styled from "styled-components";
import ContentWrapper from "../../../../Components/ContentWrapper/ContentWrapper";
import {eastGateLogo} from "./Static/east-gate-logo";
import { wvpLogo } from "./Static/wvp-logo";
import { iBornLogo } from "./Static/iborn-logo";
import { theBeetlesLogo } from "./Static/the-beetles-logo";
import { mofLogo } from "./Static/mof-logo";
import { urbanFmLogo } from "./Static/urban-fm-logo";

const StyledContainer = styled.section`
    font-family: Inter;

    .heading-2 {
        color: #000;
        font-family: Inter;
        font-size: 40px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        margin-bottom: 40px;
        text-transform: uppercase;
    }

    .heading-3 {
        color: #000;
        font-family: Inter;
        font-size: 40px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        margin-bottom: 40px;
        text-transform: uppercase;
    }

    .section-container {
        padding-top: 88px;
        padding-bottom: 88px;
        background-color: #cdf545;
    }

    .items {
        display: flex;
        gap: 16px;
        /* justify-content: center; */
        flex-wrap: wrap;

    }

    .item {
        width: 316px;
        height: 204px;
        background: rgba(0, 88, 64, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1 1 calc(25% - 20px);
        max-width: calc(25% - 20px);
        svg {
            width: 200px;
        }
    }

    .mb-30 {
        margin-bottom: 40px;
    }

    @media (max-width: 767px) {
        padding-top: 64px;

        .items {
            justify-content: center;
        }

        .heading-2 {
            font-size: 30px;
        }

        .section-container {
            padding-top: 44px;
            padding-bottom: 44px;
            background-color: #cdf545;
        }

        .item {
            width: 177px;
            height: 168px;
            flex: 1 1 calc(50% - 20px); /* Two blocks per row */
            max-width: calc(50% - 20px);
        }
    }
`;

const SponsorsSection = () => {
    return (
        <StyledContainer>
            <div className="section-container">
                <ContentWrapper>
                    <div className="mb-30">
                        <h2 className="heading-2">СПОНЗОРИ</h2>
                        <div className="items">
                            <div className="item">
                                {eastGateLogo}
                            </div>
                            <div className="item">
                                { wvpLogo }
                            </div>
                            <div className="item">
                                { iBornLogo }
                            </div>
                            <div className="item">
                                { theBeetlesLogo }
                            </div>
                        </div>
                    </div>
                    <div>
                    <h2 className="heading-3">Поддржувачи</h2>
                        <div className="items">
                            <div className="item">
                                { mofLogo }
                            </div>
                            <div className="item">
                                { urbanFmLogo }
                            </div>
                        </div>
                    </div>
                </ContentWrapper>
            </div>
        </StyledContainer>
    );
};

export default SponsorsSection;