import { buttonVariants } from "@/components/ui/button";
import { OcppFeatureTabs } from "@/components/sections/ocpp-feature-tabs";
import evseBrands from "@/data/evse-brands.json";
import { cn } from "@/lib/utils";
import Image from "next/image";
import Link from "next/link";

export default function OcppPage() {
  return (
    <div className="w-full">
      <section className="flex min-h-125 w-full items-center bg-[url('/images/header-bg.png')] bg-cover bg-center bg-no-repeat py-16 sm:py-20">
        <div className="mx-auto grid w-full max-w-7xl grid-cols-1 items-center gap-10 px-6 sm:px-10 lg:grid-cols-2 lg:gap-14">
          <div className="flex flex-col items-start">
            <h1 className="max-w-3xl text-4xl font-bold tracking-tight text-gray-950 sm:text-5xl">
              Experience the Power of OCPP EV Charging Software with TIAR.AI
            </h1>
            <p className="mt-5 max-w-2xl text-lg leading-relaxed text-gray-600">
              TIAR&apos;s EV Charging Platform is compatible with various
              hardware and fully embraces the Open Charge Point Protocol (OCPP).
            </p>
            <Link
              href="/book-demo"
              className={cn(
                buttonVariants({ size: "lg" }),
                "mt-8 bg-green-600 text-white hover:bg-green-700",
              )}
            >
              Book a Free Demo
            </Link>
          </div>

          <div className="mx-auto w-full max-w-xs lg:max-w-md">
            <Image
              src="/images/ocpp.png"
              alt="OCPP protocol connecting multiple EV charger brands"
              width={1254}
              height={1254}
              sizes="(max-width: 639px) 80vw, (max-width: 1023px) 320px, 448px"
              loading="eager"
              className="h-auto w-full object-contain"
            />
          </div>
        </div>
      </section>
      <section className="bg-grey-200 w-full py-16">
        <div className="mx-auto w-full max-w-7xl px-6 sm:px-10">
          <div className="mx-auto max-w-3xl text-center">
            <p className="text-sm font-semibold tracking-[0.2em] text-green-600 uppercase">
              Open Charge Point Protocol (OCPP)
            </p>
            <h2 className="mt-3 text-3xl font-bold tracking-tight text-gray-950 sm:text-4xl">
              How TIAR&apos;s OCPP Software Enables Seamless EV Charger
              Integration
            </h2>
            <p className="mt-4 text-lg leading-relaxed text-gray-600">
              Combine different EV charging hardware seamlessly using OCPP.
            </p>
          </div>

          <div className="mt-10">
            <OcppFeatureTabs />
          </div>
        </div>
      </section>

      <section className="w-full bg-gray-50 py-16 sm:py-20">
        <div className="mx-auto w-full max-w-7xl px-6 sm:px-10">
          <div className="mx-auto max-w-3xl text-center">
            <p className="text-sm font-semibold tracking-[0.2em] text-green-600 uppercase">
              TIAR Ecosystem
            </p>
            <h2 className="mt-3 text-3xl font-bold tracking-tight text-gray-950 sm:text-4xl">
              Supported Charger Brands
            </h2>
          </div>

          <ul className="mt-10 grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
            {evseBrands.map((evseBrand) => (
              <li
                key={evseBrand.imageUrl}
                className="flex min-h-32 items-center justify-center rounded-xl border border-gray-200 bg-white p-4 shadow-sm"
              >
                <Image
                  src={evseBrand.imageUrl}
                  alt={`${evseBrand.name} logo`}
                  width={240}
                  height={96}
                  sizes="(max-width: 639px) 50vw, (max-width: 767px) 33vw, (max-width: 1023px) 25vw, 16vw"
                  className="h-16 w-full object-contain"
                  unoptimized
                />
              </li>
            ))}
          </ul>
        </div>
      </section>
    </div>
  );
}