import { buttonVariants } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import Image from "next/image";
import Link from "next/link";
import {
  CarFront,
  CreditCard,
  Globe,
  MapPinned,
  ShieldCheck,
  SlidersHorizontal,
  Smartphone,
  WalletCards,
} from "lucide-react";

const frontAppFeatures = [
  {
    id: "native-mobile-app",
    title: "Native Mobile App",
    description:
      "Available on Google Play Store and Apple App Store, giving users a smooth mobile charging experience.",
    icon: Smartphone,
  },
  {
    id: "web-app-access",
    title: "Web App Access",
    description:
      "Customers can start using the service instantly without downloading an app.",
    icon: Globe,
  },
  {
    id: "payment-channels",
    title: "Local & Global Payment Channels",
    description:
      "Support relevant payment methods across ASEAN, Asia, the US, Latin America, Europe, Africa, the Middle East, and Australia. If your preferred payment channel is not available, we can develop and enable it for your application—without requiring IT support from your team.",
    icon: WalletCards,
  },
  {
    id: "secure-user-access",
    title: "Secure User Access",
    description:
      "Built-in security features such as OTP verification help protect user accounts and payment activities.",
    icon: ShieldCheck,
  },
  {
    id: "charger-navigation",
    title: "Google Maps Charger Navigation",
    description:
      "Integrated charger direction finder helps users easily locate and navigate to charging stations.",
    icon: MapPinned,
  },
  {
    id: "flexible-tariff-schemes",
    title: "Flexible Tariff Schemes",
    description:
      "Configure pricing based on your business needs, customer segments, locations, or charging models.",
    icon: SlidersHorizontal,
  },
  {
    id: "ev-charging-support",
    title: "2-Wheeler & 4-Wheeler Charging Support",
    description:
      "Serve electric cars, motorcycles, scooters, fleets, and other EV use cases through one platform.",
    icon: CarFront,
  },
  {
    id: "rfid-payment-card-support",
    title: "RFID Payment Card Support",
    description:
      "Enable fast and convenient charging access using RFID payment cards.",
    icon: CreditCard,
  },
];

function FeatureCard() {
  return (
    <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
      {frontAppFeatures.map((feature) => {
        const FeatureIcon = feature.icon;

        return (
          <article
            key={feature.id}
            className="rounded-2xl border border-green-100 bg-white p-6"
          >
            <div className="flex size-12 items-center justify-center rounded-xl bg-green-100">
              <FeatureIcon
                aria-hidden="true"
                className="size-6 text-green-600"
              />
            </div>

            <h4 className="mt-5 text-xl font-semibold text-gray-950">
              {feature.title}
            </h4>

            <p className="mt-2 leading-relaxed text-gray-600">
              {feature.description}
            </p>
          </article>
        );
      })}
    </div>
  );
}

export default function FrontAppPage() {
  return (
    <section 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-xl text-4xl font-bold tracking-tight text-gray-950 sm:text-5xl lg:text-6xl">
              All-in-One White-Label Front App
            </h1>
            <p className="mt-5 max-w-xl text-lg leading-relaxed text-gray-600">
              Deliver a seamless and secure charging experience with TIAR AI’s
              white-label Front App, designed for both mobile and web access
              across global markets.
            </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-xl">
            <Image
              src="/images/white-label.png"
              alt="White-label EV charging application customized with a company's colors, logo, fonts, and icons"
              width={1353}
              height={1163}
              priority
              sizes="(max-width: 1023px) 90vw, 50vw"
              className="h-auto w-full object-contain"
            />
          </div>
        </div>
      </section>

      <section className="w-full py-5 sm:py-10">
        <div className="mx-auto w-full px-6 sm:px-10">
          <div className="mx-auto text-center">
            <p className="text-sm font-semibold tracking-[0.2em] text-green-600 uppercase">
              Our Service. Your Brand.
            </p>

            <h2 className="mt-4 text-3xl font-bold tracking-tight text-gray-950 sm:text-4xl">
              Make It Yours
            </h2>

            <p className="mt-2 text-base leading-relaxed text-gray-600 sm:text-lg">
              TIAR AI Front App makes EV charging simple, secure, and
              scalable—under your own brand.
            </p>

            <div
              aria-hidden="true"
              className="mx-auto my-4 h-1 w-16 rounded-full bg-green-600"
            />
          </div>

          <div className="mt-10">
            <FeatureCard />
          </div>
        </div>
      </section>
    </section>
  );
}