import { buttonVariants } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import Image from "next/image";
import Link from "next/link";
import {
  BrainCircuit,
  ChartNoAxesCombined,
  CircleAlert,
  RadioTower,
  RotateCw,
  TimerOff,
  Trophy,
  type LucideIcon,
} from "lucide-react";

interface SaasCsmsFeature {
  id: string;
  title: string;
  description: string;
  icon: LucideIcon;
  isFeatured?: boolean;
}

const saasCsmsFeatures: SaasCsmsFeature[] = [
  {
    id: "live-charger-monitoring",
    title: "Live Charger Monitoring",
    description:
      "Instantly see which chargers are online, active, offline, or experiencing issues across your entire network.",
    icon: RadioTower,
  },
  {
    id: "offline-duration-tracking",
    title: "Offline Duration Tracking",
    description:
      "Know exactly when a charger went offline and how long it has been unavailable, helping your team respond faster and reduce downtime.",
    icon: TimerOff,
  },
  {
    id: "offline-status-diagnosis",
    title: "Clear Offline Status Diagnosis",
    description:
      "Identify the reason behind charger downtime—whether it is a communication error, PLN power outage, charger fault, or specific error code.",
    icon: CircleAlert,
  },
  {
    id: "remote-charger-restart",
    title: "Remote Charger Restart",
    description:
      "Restart individual chargers remotely without sending a technician on-site, reducing operational cost and speeding up recovery time.",
    icon: RotateCw,
  },
  {
    id: "network-health-statistics",
    title: "Network Health Statistics",
    description:
      "Monitor the overall health of your charging network with clear performance statistics, uptime indicators, and operational insights.",
    icon: ChartNoAxesCombined,
  },
  {
    id: "station-performance-rankings",
    title: "Best & Worst Performing Station Rankings",
    description:
      "Instantly identify your top 10 best-performing charging stations and top 10 underperforming stations, helping you optimize operations, prioritize maintenance, and improve network profitability.",
    icon: Trophy,
  },
  {
    id: "ai-powered-problem-response",
    title: "AI-Powered Problem Response",
    description:
      "Get AI-assisted recommendations to understand charger issues and identify the best solution faster.",
    icon: BrainCircuit,
    isFeatured: true,
  },
];

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

        return (
          <article
            key={feature.id}
            className={cn(
              "flex flex-col gap-4 rounded-2xl border p-6 transition-transform duration-200 hover:-translate-y-1 sm:flex-row",
              feature.isFeatured
                ? "border-green-600 bg-green-600 text-white md:col-span-2"
                : "border-gray-200 bg-white text-gray-950",
            )}
          >
            <div
              className={cn(
                "flex size-12 shrink-0 items-center justify-center rounded-xl",
                feature.isFeatured ? "bg-white/15" : "bg-green-100",
              )}
            >
              <FeatureIcon
                aria-hidden="true"
                className={cn(
                  "size-6",
                  feature.isFeatured ? "text-white" : "text-green-600",
                )}
              />
            </div>

            <div>
              <h3 className="text-xl font-semibold">{feature.title}</h3>
              <p
                className={cn(
                  "mt-2 leading-relaxed",
                  feature.isFeatured ? "text-green-50" : "text-gray-600",
                )}
              >
                {feature.description}
              </p>
            </div>
          </article>
        );
      })}
    </div>
  );
}

export default function SaasCsmsPage() {
  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">
              CSMS Features
            </h1>
            <p className="mt-5 max-w-xl text-lg leading-relaxed text-gray-600">
              TIAR AI CSMS gives Charge Point Operators real-time visibility,
              remote control, and AI-powered troubleshooting to keep charging
              networks reliable, efficient, and always ready for customers.
            </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/CSMS.png"
              alt="TIAR AI CSMS dashboard showing charging network analytics and performance"
              width={1448}
              height={1086}
              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">
              every charger, every minute.
            </p>

            <h2 className="mt-4 text-3xl font-bold tracking-tight text-gray-950 sm:text-4xl">
              Stay in control
            </h2>

            <p className="mt-2 text-base leading-relaxed text-gray-600 sm:text-lg">
              manage uptime, reduce operational costs, improve performance, and
              keep your charging business moving.
            </p>

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

          <div className="mt-10 flex h-150 items-center justify-center overflow-hidden rounded-2xl border border-gray-200 bg-white">
            <Image
              src="/images/TIAR CSMS2.png"
              alt="TIAR Charging Management System dashboard"
              width={1536}
              height={1024}
              sizes="(max-width: 1280px) 100vw, 1280px"
              className="h-full w-full object-contain"
            />
          </div>
        </div>
      </section>

      <section className="w-full py-5 sm:py-5">
        <div className="mx-auto w-full px-6 sm:px-10">
          <div className="mx-auto max-w-4xl text-center">
            <p className="text-sm font-semibold tracking-[0.2em] text-green-600 uppercase">
              What We Offer
            </p>

            <h2 className="mt-3 text-3xl font-bold tracking-tight text-gray-950 sm:text-4xl">
              Complete Charger Visibility
            </h2>

            <p className="mt-4 text-base leading-relaxed text-gray-600 sm:text-lg">
              Monitor, diagnose, and control your entire charging network from
              one intelligent platform.
            </p>
          </div>

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