import Section from "@/components/Section";
import Generating from "@/components/Generating";
import Image from "@/components/Image";
import Heading from "@/components/Heading";

type ServicesProps = {
    containerClassName?: string;
};

const Services = ({ containerClassName }: ServicesProps) => (
    <Section>
        <div className={`container ${containerClassName || ""}`}>
            <Heading
                title="Generative AI made for creators."
                text="Brainwave unlocks the potential of AI-powered applications"
            />
            <div className="relative">
                <div className="relative z-1 flex items-center h-[38.75rem] mb-5 p-8 border border-n-1/10 rounded-3xl overflow-hidden lg:h-[38.75rem] lg:p-20 xl:h-[45.75rem]">
                    <div className="absolute top-0 left-0 w-full h-full pointer-events-none md:w-3/5 xl:w-auto">
                        <Image
                            className="w-full h-full object-cover md:object-right"
                            src="/images/services/service-1.png"
                            width={797}
                            height={733}
                            alt="Smartest AI"
                        />
                    </div>
                    <div className="relative z-1 max-w-[17rem] ml-auto">
                        <h4 className="h4 mb-4">Smartest AI</h4>
                        <p className="bpdy-2 mb-[3.125rem] text-n-3">
                            Brainwave unlocks the potential of AI-powered
                            applications
                        </p>
                        <ul className="body-2">
                            {[
                                "Photo generating",
                                "Photo enhance",
                                "Seamless Integration",
                            ].map((item, index) => (
                                <li
                                    className="flex items-start py-4 border-t border-n-6"
                                    key={index}
                                >
                                    <Image
                                        src="/images/check.svg"
                                        width={24}
                                        height={24}
                                        alt="Check"
                                    />
                                    <p className="ml-4">{item}</p>
                                </li>
                            ))}
                        </ul>
                    </div>
                    <Generating className="absolute left-4 right-4 bottom-4 border border-n-1/10 lg:left-1/2 lg-right-auto lg:bottom-8 lg:-translate-x-1/2" />
                </div>
                <div className="relative z-1 grid gap-5 lg:grid-cols-2">
                    <div className="relative min-h-[38.75rem] border border-n-1/10 rounded-3xl overflow-hidden">
                        <div className="absolute inset-0">
                            <Image
                                className="w-full h-full object-cover"
                                src="/images/services/service-2.png"
                                width={630}
                                height={748}
                                alt="Smartest AI"
                            />
                        </div>
                        <div className="absolute inset-0 flex flex-col justify-end p-8 bg-gradient-to-b from-n-8/0 to-n-8/90 lg:p-15">
                            <h4 className="h4 mb-4">Photo editing</h4>
                            <p className="body-2 text-n-3">
                                {`Automatically enhance your photos using our AI app's
                            photo editing feature. Try it now!`}
                            </p>
                        </div>
                        <div className="absolute top-8 right-8 max-w-[17.5rem] py-6 px-8 bg-black rounded-t-xl rounded-bl-xl font-code text-base lg:top-16 lg:right-[8.75rem] lg:max-w-[17.5rem]">
                            Hey Brainwave, enhance this photo
                            <svg
                                className="absolute left-full bottom-0"
                                xmlns="http://www.w3.org/2000/svg"
                                width="26"
                                height="37"
                            >
                                <path d="M21.843 37.001c3.564 0 5.348-4.309 2.829-6.828L3.515 9.015A12 12 0 0 1 0 .53v36.471h21.843z" />
                            </svg>
                        </div>
                    </div>
                    <div className="p-4 bg-n-7 rounded-3xl overflow-hidden lg:min-h-[45.75rem]">
                        <div className="py-12 px-4 xl:px-8">
                            <h4 className="h4 mb-4">Video generation</h4>
                            <p className="body-2 mb-[2.25rem] text-n-3">
                                The world’s most powerful AI photo and video art
                                generation engine.What will you create?
                            </p>
                            <ul className="flex items-center justify-between">
                                {[
                                    "/images/icons/recording-03.svg",
                                    "/images/icons/recording-01.svg",
                                    "/images/icons/disc-02.svg",
                                    "/images/icons/chrome-cast.svg",
                                    "/images/icons/sliders-04.svg",
                                ].map((item, index) => (
                                    <li
                                        className={`flex items-center justify-center ${
                                            index === 2
                                                ? "w-[3rem] h-[3rem] p-0.25 bg-conic-gradient rounded-2xl md:w-[4.5rem] md:h-[4.5rem]"
                                                : "flex w-10 h-10 bg-n-6 rounded-2xl md:w-15 md:h-15"
                                        }`}
                                        key={index}
                                    >
                                        <div
                                            className={
                                                index === 2
                                                    ? "flex items-center justify-center w-full h-full bg-n-7 rounded-[0.9375rem]"
                                                    : ""
                                            }
                                        >
                                            <Image
                                                src={item}
                                                width={24}
                                                height={24}
                                                alt={item}
                                            />
                                        </div>
                                    </li>
                                ))}
                            </ul>
                        </div>
                        <div className="relative h-[20.5rem] bg-n-8 rounded-xl overflow-hidden md:h-[25rem]">
                            <Image
                                className="w-full h-full object-cover"
                                src="/images/services/service-3.png"
                                width={517}
                                height={400}
                                alt="Smartest AI"
                            />
                            <div className="absolute top-8 left-[3.125rem] w-full max-w-[14rem] pt-2.5 pr-2.5 pb-7 pl-5 bg-n-6 rounded-t-xl rounded-br-xl font-code text-base md:max-w-[17.5rem]">
                                Video generated!
                                <div className="absolute left-5 -bottom-[1.125rem] flex items-center justify-center w-[2.25rem] h-[2.25rem] bg-color-1 rounded-[0.75rem]">
                                    <Image
                                        src="/images/brainwave-symbol-white.svg"
                                        width={26}
                                        height={26}
                                        alt="Brainwave"
                                    />
                                </div>
                                <div className="tagline absolute right-2.5 bottom-1 text-[0.625rem] text-n-3 uppercase">
                                    just now
                                </div>
                                <svg
                                    className="absolute right-full bottom-0 -scale-x-100"
                                    xmlns="http://www.w3.org/2000/svg"
                                    width="26"
                                    height="37"
                                >
                                    <path
                                        className="fill-n-6"
                                        d="M21.843 37.001c3.564 0 5.348-4.309 2.829-6.828L3.515 9.015A12 12 0 0 1 0 .53v36.471h21.843z"
                                    />
                                </svg>
                            </div>
                            <div className="absolute left-0 bottom-0 w-full flex items-center p-6">
                                <svg
                                    className="mr-3"
                                    xmlns="http://www.w3.org/2000/svg"
                                    width="24"
                                    height="24"
                                    fill="none"
                                >
                                    <path
                                        d="M8.006 2.802l.036.024 10.549 7.032.805.567c.227.183.494.437.648.808a2 2 0 0 1 0 1.532c-.154.371-.421.625-.648.808-.217.175-.5.364-.805.567L8.006 21.198l-.993.627c-.285.154-.676.331-1.132.303a2 2 0 0 1-1.476-.79c-.276-.365-.346-.788-.375-1.111S4 19.502 4 19.054V4.99v-.043l.029-1.174c.03-.323.1-.746.375-1.11a2 2 0 0 1 1.476-.79c.456-.027.847.149 1.132.304s.62.378.993.627z"
                                        fill="#fff"
                                    />
                                </svg>
                                <div className="flex-1 bg-[#D9D9D9]">
                                    <div className="w-1/2 h-0.5 bg-color-1"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="absolute top-0 -left-[10rem] w-[56.625rem] h-[56.625rem] opacity-50 mix-blend-color-dodge pointer-events-none">
                    <Image
                        className="absolute top-1/2 left-1/2 w-[79.5625rem] max-w-[79.5625rem] h-[88.5625rem] -translate-x-1/2 -translate-y-1/2"
                        src="/images/gradient.png"
                        width={1417}
                        height={1417}
                        alt="Gradient"
                    />
                </div>
            </div>
        </div>
    </Section>
);

export default Services;