import Image from "next/image";

import aboutBg from "@/public/assets/images/our-mission-bg.png";
import avatar from "@/public/assets/avatars/avatar.png";
import avatar1 from "@/public/assets/avatars/avatar_1.png";
import avatar2 from "@/public/assets/avatars/avatar_2.png";
import avatar3 from "@/public/assets/avatars/avatar_3.png";

import TeamMemberCard from "@/components/about/TeamMemberCard";

const AboutPage = () => {
  return (
    <div>
      <section className="relative overflow-hidden w-full min-h-[600px] sm:min-h-[700px] md:aspect-[5/3] md:max-h-[900px] -mt-[75px] pt-[75px]">
        <div
          className="absolute inset-0 sm:top-[-75px] top-[-35px] overflow-hidden"
          style={{
            WebkitMaskImage:
              "linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 14%, rgba(0,0,0,1) 86%, rgba(0,0,0,0) 100%)",
            maskImage:
              "linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 14%, rgba(0,0,0,1) 86%, rgba(0,0,0,0) 100%)",
          }}
        >
          <Image
            src={aboutBg}
            alt="About background"
            fill
            className="object-cover h-full"
            style={{ objectPosition: "50% 20%" }}
            priority
          />
          {/* Mobile darkening overlay */}
          <div className="absolute inset-0 bg-black/35 md:bg-black/0" />
          <div className="pointer-events-none absolute left-1/2 top-[-36%] w-[260%] h-[62%] -translate-x-1/2 bg-[radial-gradient(circle_at_50%_-70%,rgba(127,19,236,0.88),rgba(127,19,236,0.52)_58%,rgba(25,16,34,0)_88%)] blur-[180px] opacity-95" />
          <div className="pointer-events-none absolute left-1/2 bottom-[-18%] w-[240%] h-[36%] -translate-x-1/2 bg-[radial-gradient(circle_at_50%_135%,rgba(127,19,236,0.82),rgba(127,19,236,0.36)_46%,rgba(25,16,34,0)_86%)] blur-[140px] opacity-[0.9]" />
        </div>

        <div className="relative z-10 w-full h-full flex items-center justify-center px-6 py-12 sm:py-12 md:py-8">
          <div className="max-w-4xl text-center">
            <h1 className="text-3xl sm:text-4xl lg:text-6xl font-mono font-extrabold text-white drop-shadow-[0_0_20px_rgba(127,19,236,0.7)]">
              Our Mission
            </h1>
            <p className="mt-4 sm:mt-6 text-sm sm:text-base font-mono leading-relaxed px-4">
              Us as human, we better work as a collective no matter the language
              or background we have. However we at LAN Codes believe we can
              bring one more player to the team, AI. Acceleration of machine
              learning language (MLL) models. "AI", is scary. In some way "I
              Robot" it may seem more real to some. However, for players in LAN
              Codes there is nothing that scares us. We are attempting to use
              our critical thinking and MLL's efficiency to remove the busy work
              and reduce human errors. While working on creating these systems
              our results will produce cost effective security with
              uncompromising safety. We believe that safety should not be a
              privilege.
            </p>
          </div>
        </div>
      </section>

      <section className="relative z-10 bg-[var(--color-1)]">
        <div className="pointer-events-none absolute -top-16 left-0 right-0 h-16 bg-gradient-to-b from-transparent via-[var(--color-1)]/38 to-[var(--color-1)]" />
        <div className="mx-auto px-4 sm:px-6 lg:px-8 pb-4 pt-4 max-w-[82.5%]">
          <div className="text-center mb-4">
            <h2 className="text-2xl sm:text-5xl font-mono">Founder</h2>
          </div>

          <div className="flex flex-col md:flex-row md:items-center md:justify-center gap-8 md:gap-12 max-w-3xl mx-auto">
            <TeamMemberCard
              avatar={avatar2}
              name="Milan Vucetic"
              position="Founder"
            />
            <p className="font-mono text-sm sm:text-base leading-relaxed text-white/90 text-center md:max-w-xl">
              I was always told you cannot reinvent the wheel, but you can make
              it better. While working in reactive security prevention, then
              moved towards proactive security prevention and a sprinkle of
              inspiration, I managed to find a gap in many security doors, and
              better yet a solution to tighten them up. With that goal I have
              managed to organize the team of fearless people and with their
              help LAN Codes became a reality from just an idea on a napkin.
            </p>
          </div>

          <div className="mt-6 text-center">
            <h3 className="text-xl sm:text-4xl font-mono">Meet the team</h3>
          </div>

          <div className="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-6 sm:gap-12 max-w-3xl mx-auto justify-items-center">
            <TeamMemberCard
              avatar={avatar1}
              name="Tevin Gary-Vincent"
              position="Head of Cybersecurity"
            />
            <TeamMemberCard
              avatar={avatar}
              name="Nenad Zivotic"
              position="Front-end Developer"
            />
            <TeamMemberCard
              avatar={avatar3}
              name="Stefan Djukelic"
              position="Back-end Developer"
            />
          </div>
        </div>
      </section>
    </div>
  );
};

export default AboutPage;