import Image from "next/image";
import shrimp3D from "./assets/shrimp.png";
import discordSymbol from "./assets/Discord-Symbol-Blurple.svg";
import linkedInSymbol from "./assets/LI-In-Bug.png";
import mediawikiSymbol from "./assets/mediawiki.png";
import DancingShrimps from "./dancing-shrimps/dancing-shrimps";

export default function ShrimpFeet() {
    const currentYear = new Date().getFullYear();
    return (
        <section>
            <div className="flex md:flex-row flex-col items-center lg:gap-10 gap-5 justify-center py-5 lg:px-25 px-4 bg-ashy-shrimp text-space-shrimp-blue">
                <div className="flex items-center">
                    <Image
                        src={shrimp3D}
                        alt="3D modeled shrimp"
                        width={774}
                        height={605}
                        className="w-[150px] h-auto"
                    />
                    <div>
                        <p className="font-bold text-cherry-shrimp text-xl">
                            Making games should be fun
                        </p>
                        <p>Shrimp Squad Inc.</p>
                        <a
                            href="mailto:contact@shrimpsquad.ca"
                            className="underline cursor-[unset] hover:font-bold"
                        >
                            contact@shrimpsquad.ca
                        </a>
                        <p>© {currentYear}</p>
                    </div>
                </div>
                <div className="flex gap-5 justify-center items-center">
                    <a
                        href="https://discord.gg/RVhc27mbAc"
                        target="_blank"
                        className="cursor-[unset]"
                    >
                        <Image
                            src={discordSymbol}
                            alt="discord symbol"
                            width={150}
                            height={150}
                            className="w-[48px] h-auto"
                        />
                    </a>
                    <a
                        href="https://dev.shrimpsquad.ca/"
                        target="_blank"
                        className="cursor-[unset]"
                    >
                        <Image
                            src={mediawikiSymbol}
                            alt="discord symbol"
                            width={135}
                            height={135}
                            className="w-[48px] h-auto"
                        />
                    </a>
                    <a
                        href="https://www.linkedin.com/company/shrimp-squad-inc/"
                        target="_blank"
                        className="cursor-[unset]"
                    >
                        <Image
                            src={linkedInSymbol}
                            alt="linkedIn symbol"
                            width={635}
                            height={540}
                            className="w-[48px] h-auto"
                        />
                    </a>
                </div>
            </div>
            <DancingShrimps />
        </section>
    );
}

//todo get centered shrimp image