import { buttonVariants } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import Image from "next/image";
import Link from "next/link";
import {
  Banknote,
  Check,
  CircleAlert,
  CreditCard,
  Globe2,
  Landmark,
  Nfc,
  QrCode,
  ShieldCheck,
  Smartphone,
  Wrench,
  type LucideIcon,
} from "lucide-react";

interface PaymentMethod {
  id: string;
  label: string;
  icon: LucideIcon;
}

const paymentMethods: PaymentMethod[] = [
  { id: "cards", label: "Credit & Debit Cards", icon: CreditCard },
  { id: "e-wallets", label: "E-Wallets", icon: Smartphone },
  { id: "bank-transfers", label: "Bank Transfers", icon: Landmark },
  { id: "qr-payments", label: "QR Payments", icon: QrCode },
  { id: "rfid-cards", label: "RFID Cards", icon: Nfc },
  { id: "local-payments", label: "Local Payment Methods", icon: Banknote },
];

const keyBenefits = [
  "White-label application with integrated payments",
  "Support for multiple global and local payment channels",
  "Country-specific payment options for better user adoption",
  "Faster market launch for new CPO businesses",
  "Reduced IT complexity",
  "Improved customer convenience and payment success",
  "Scalable payment infrastructure for international expansion",
];

const internationalPaymentMarkets = [
  { id: "indonesia", name: "Indonesia", flag: "🇮🇩" },
  { id: "malaysia", name: "Malaysia", flag: "🇲🇾" },
  { id: "philippines", name: "Philippines", flag: "🇵🇭" },
  { id: "vietnam", name: "Vietnam", flag: "🇻🇳" },
];

export default function PaymentChannelsPage() {
  return (
    <div className="w-full">
      <section
        aria-labelledby="payment-channels-heading"
        className="w-full bg-[url('/images/header-bg.png')] bg-cover bg-center bg-no-repeat py-16 sm:py-20 lg:py-24"
      >
        <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
              id="payment-channels-heading"
              className="mt-4 max-w-2xl text-4xl font-bold tracking-tight text-gray-950 sm:text-5xl lg:text-6xl"
            >
              Payment Infrastructure
            </h1>

            <p className="mt-5 max-w-xl text-lg leading-relaxed text-gray-600">
              Launch your CPO business faster with a white-label charging
              experience built for global and country-specific payment methods.
            </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-lg">
            <Image
              src="/images/payments.png"
              alt="International payment application supporting global cards, digital wallets, bank transfers, and QR payments"
              width={1214}
              height={1295}
              priority
              sizes="(max-width: 559px) calc(100vw - 3rem), (max-width: 1023px) 512px, (max-width: 1159px) calc((100vw - 8.5rem) / 2), 512px"
              className="h-auto w-full object-contain"
            />
          </div>
        </div>
      </section>

      <section className="w-full bg-white py-16 sm:py-20">
        <div className="mx-auto flex w-full max-w-7xl flex-col gap-6 px-6 sm:px-10">
          <article className="flex h-full flex-col rounded-3xl border border-gray-200 bg-white p-7 shadow-sm sm:p-9">
            <div className="flex size-12 items-center justify-center rounded-xl bg-orange-100 text-orange-600">
              <CircleAlert aria-hidden="true" className="size-6" />
            </div>
            <p className="mt-6 text-sm font-semibold tracking-wider text-orange-600 uppercase">
              The Challenge
            </p>
            <h2 className="mt-2 text-2xl font-bold text-gray-950 sm:text-3xl">
              Payment complexity slows market entry
            </h2>
            <p className="mt-4 max-w-4xl leading-relaxed text-gray-600">
              Payment channels are often one of the biggest challenges for
              companies entering the EV charging business. Many CSMS platforms
              support limited payment options and fail to accommodate local
              methods that are essential in specific countries.
            </p>
          </article>

          <article className="grid overflow-hidden rounded-3xl border border-gray-200 bg-white shadow-sm lg:grid-cols-2 lg:items-center">
            <div className="p-7 sm:p-9 lg:p-12">
              <div className="flex size-12 items-center justify-center rounded-xl bg-green-600 text-white">
                <ShieldCheck aria-hidden="true" className="size-6" />
              </div>
              <p className="mt-6 text-sm font-semibold tracking-wider text-green-600 uppercase">
                TIAR AI Solves This
              </p>
              <h2 className="mt-2 text-2xl font-bold text-gray-950 sm:text-3xl">
                One application, multiple payment channels
              </h2>
              <p className="mt-4 leading-relaxed text-gray-600">
                Launch a white-label charging application that supports cards,
                e-wallets, bank transfers, QR payments, RFID cards, and other
                local payment options—ready for the needs of your market.
              </p>

              <div className="mt-6">
                <p className="text-sm font-semibold text-gray-950">
                  International Payment Coverage
                </p>
                <ul
                  aria-label="Supported international payment markets"
                  className="mt-3 flex flex-wrap gap-2"
                >
                  {internationalPaymentMarkets.map((market) => (
                    <li
                      key={market.id}
                      className="inline-flex items-center gap-2 rounded-full border border-green-100 bg-green-50 px-3 py-1.5 text-sm font-medium text-gray-700"
                    >
                      <span aria-hidden="true">{market.flag}</span>
                      {market.name}
                    </li>
                  ))}
                </ul>
                <p className="pt-2 text-sm font-semibold text-gray-950">
                  And more..
                </p>
              </div>
            </div>

            <div className="flex h-full items-center justify-center bg-gray-50 p-6 sm:p-8">
              <Image
                src="/images/payment.png"
                alt="TIAR AI payment application showing wallet and payment method options"
                width={1330}
                height={1183}
                sizes="(max-width: 1023px) 90vw, 50vw"
                className="h-auto w-full rounded-2xl object-contain"
              />
            </div>
          </article>
        </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">
              Payment Options
            </p>
            <h2 className="mt-3 text-3xl font-bold tracking-tight text-gray-950 sm:text-4xl">
              Let customers pay their way
            </h2>
            <p className="mt-4 text-lg leading-relaxed text-gray-600">
              Support familiar global channels and the local methods customers
              already trust.
            </p>
          </div>

          <div className="mt-10 grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-6">
            {paymentMethods.map((paymentMethod) => {
              const PaymentMethodIcon = paymentMethod.icon;

              return (
                <article
                  key={paymentMethod.id}
                  className="flex flex-col items-center rounded-2xl border border-gray-200 bg-white p-5 text-center shadow-sm"
                >
                  <div className="flex size-12 items-center justify-center rounded-xl bg-green-100 text-green-600">
                    <PaymentMethodIcon aria-hidden="true" className="size-6" />
                  </div>
                  <h3 className="mt-4 text-sm font-semibold text-gray-950">
                    {paymentMethod.label}
                  </h3>
                </article>
              );
            })}
          </div>
        </div>
      </section>

      <section className="w-full bg-white py-16 sm:py-20">
        <div className="mx-auto grid w-full max-w-7xl grid-cols-1 gap-6 px-6 sm:px-10 lg:grid-cols-2">
          <article className="flex h-full flex-col rounded-3xl border border-gray-200 bg-white p-7 shadow-sm sm:p-9">
            <div className="flex size-12 items-center justify-center rounded-xl bg-green-100 text-green-600">
              <Globe2 aria-hidden="true" className="size-6" />
            </div>
            <h2 className="mt-6 text-2xl font-bold text-gray-950 sm:text-3xl">
              Built for Local Markets, Ready for Global Scale
            </h2>
            <p className="mt-4 leading-relaxed text-gray-600">
              Every country has different payment habits. TIAR AI supports both
              global and local payment channels, helping CPOs deliver a smoother
              customer experience and higher payment success rates.
            </p>
          </article>

          <article className="flex h-full flex-col rounded-3xl border border-gray-200 bg-white p-7 shadow-sm sm:p-9">
            <div className="flex size-12 items-center justify-center rounded-xl bg-green-100 text-green-600">
              <Wrench aria-hidden="true" className="size-6" />
            </div>
            <h2 className="mt-6 text-2xl font-bold text-gray-950 sm:text-3xl">
              If It’s Not Available, We Can Build It
            </h2>
            <p className="mt-4 leading-relaxed text-gray-600">
              Need a local payment channel that is not yet supported? TIAR AI
              can develop and enable it for your application, helping you enter
              new markets without the burden of heavy IT development.
            </p>
          </article>
        </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="max-w-2xl">
            <p className="text-sm font-semibold tracking-[0.2em] text-green-600 uppercase">
              Key Benefits
            </p>
            <h2 className="mt-3 text-3xl font-bold tracking-tight text-gray-950 sm:text-4xl">
              Launch faster. Scale with confidence.
            </h2>
          </div>

          <ul className="mt-10 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
            {keyBenefits.map((benefit) => (
              <li
                key={benefit}
                className="flex items-start gap-3 rounded-2xl border border-gray-200 bg-white p-5 text-gray-700 shadow-sm"
              >
                <span className="mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-full bg-green-100 text-green-600">
                  <Check aria-hidden="true" className="size-4" />
                </span>
                <span className="leading-relaxed font-medium">{benefit}</span>
              </li>
            ))}
          </ul>
        </div>
      </section>
    </div>
  );
}