import Image from "next/image";
import { LockKeyhole, RotateCcw, Shield } from "lucide-react";

import heroBanner from "@/public/assets/images/homescreen_bg.png";
import FeatureCard from "@/components/FeatureCard";
import GetStartedButton from "@/components/navigation/GetStartedButton";

const HomePage = () => {
  return (
    <div>
      <main>
        <div>
          <section className="relative overflow-hidden w-full min-h-[500px] sm:min-h-[600px] md:aspect-[16/9] md:max-h-[900px] -mt-[75px] pt-[75px] md:pt-[75px]">
            {/* Background image */}
            <div
              className="absolute inset-0 top-[-75px] overflow-hidden"
              style={{
                WebkitMaskImage:
                  "linear-gradient(to bottom, rgba(0,0,0,0) 10%, rgba(0,0,0,0.3) 12%, rgba(0,0,0,1) 16%, rgba(0,0,0,1) 88%, rgba(0,0,0,0) 100%)",
                maskImage:
                  "linear-gradient(to bottom, rgba(0,0,0,0) 10%, rgba(0,0,0,0.3) 12%, rgba(0,0,0,1) 16%, rgba(0,0,0,1) 88%, rgba(0,0,0,0) 100%)",
              }}
            >
              <Image
                src={heroBanner}
                alt="Hero background"
                fill
                priority
                className="object-cover h-full"
                style={{ objectPosition: "50% 42.5%" }}
              />
              <div className="absolute inset-0 bg-gradient-to-b from-black/3 via-black/6 to-black/9" />
              <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_35%,rgba(127,19,236,0.03),rgba(16,0,40,0.06)_58%,rgba(0,0,0,0.12))]" />
              {/* Mobile darkening overlay */}
              <div className="absolute inset-0 bg-black/30 md:bg-black/0" />
            </div>

            <div className="relative z-10 w-full h-full flex items-center px-6 sm:px-10 md:pl-16 lg:pl-24 py-12 sm:py-12 md:py-8">
              <div>
                <h1 className="text-2xl sm:text-3xl md:text-4xl lg:text-6xl">
                  <span className="font-mono font-semibold w-[100px]">
                    Cost-Effective{" "}
                  </span>
                  <span className="text-[var(--color-8)] font-semibold">
                    Security
                  </span>
                  <br />
                  <span className="font-mono font-semibold w-[100px]">
                    Uncompromising{" "}
                  </span>
                  <span className="text-[var(--color-5)] font-semibold">
                    Safety
                  </span>
                </h1>

                <p className="mt-2 font-bold max-w-4xl text-lg sm:text-xl md:text-2xl">
                  Security that is{" "}
                  <span className="text-[var(--color-9)]">tailored</span>
                </p>
                <p className="mb-2 font-bold max-w-4xl text-lg sm:text-xl md:text-2xl">
                  for{" "}
                  <span className="text-[var(--color-5)]">your business</span>{" "}
                  needs
                </p>

                <GetStartedButton />
              </div>
            </div>
          </section>
        </div>

        <section id="services" 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 w-full max-w-6xl px-4 sm:px-6 lg:px-8 py-6 sm:py-16 md:py-20">
            <div className="text-center">
              <h2 className="text-2xl sm:text-3xl font-extrabold font-mono">
                Comprehensive Cybersecurity Services
              </h2>
              <p className="mt-3 max-w-3xl mx-auto text-md sm:text-lg font-mono">
                Lan Codes offers a range of services in one simple package
                designed to protect your business from cyber threats, ensuring
                data security and operational continuity.
              </p>
            </div>

            <div className="mt-6 sm:mt-10 grid grid-cols-1 md:grid-cols-3 gap-4">
              <FeatureCard
                icon={<Shield color="green" size={30} />}
                title="Risk Detection"
                description="Be on top of your end users and ensure there are no weak links in the chain. Have active reminders on your high risk users."
              />

              <FeatureCard
                icon={<LockKeyhole color="red" size={30} />}
                title="Data Encryption & Security"
                description="Robust data encryption and security measures to protect sensitive information and ensure compliance with industry standard."
              />

              <FeatureCard
                icon={<RotateCcw color="purple" size={30} />}
                title="24/7 Monitoring & Assistance"
                description="Round-the-clock monitoring and assistance to address and resolve any security incidents, minimizing downtime and potential damage."
              />
            </div>
          </div>
        </section>
      </main>
    </div>
  );
};

export default HomePage;