import { buttonVariants } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import Link from "next/link";
import Image from "next/image";

import {
  BadgeDollarSign,
  CreditCard,
  FileChartColumn,
  Gift,
  HandCoins,
  Map as MapIcon,
  PanelsTopLeft,
  TicketPercent,
  Timer,
  TrendingUp,
  UsersRound,
  type LucideIcon,
} from "lucide-react";

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

const monetizationFeatures: MonetizationFeature[] = [
  {
    id: "flexible-tariff-management",
    title: "Flexible Tariff Management",
    description:
      "Create dynamic pricing models based on kWh, charging time, one-time fees, idle time, or any combination that fits your business strategy.",
    icon: BadgeDollarSign,
  },
  {
    id: "rfid-card-management",
    title: "RFID Card Management",
    description:
      "Manage RFID cards for customers, fleets, members, or corporate users to enable faster and more convenient charging access.",
    icon: CreditCard,
  },
  {
    id: "smart-idle-fee-configuration",
    title: "Smart Idle Fee Configuration",
    description:
      "Apply idle fees using different models to improve charger availability, reduce overstaying, and increase station efficiency.",
    icon: Timer,
  },
  {
    id: "loyalty-program-management",
    title: "Loyalty Program Management",
    description:
      "Reward returning customers and encourage repeat charging through customizable loyalty programs.",
    icon: Gift,
  },
  {
    id: "coupon-management",
    title: "Coupon Management",
    description:
      "Launch promotions, discounts, campaign vouchers, and customer acquisition programs with easy coupon control.",
    icon: TicketPercent,
  },
  {
    id: "automated-financial-reports",
    title: "Automated Financial Reports",
    description:
      "Automatically track energy bills, revenue, gross profit, and key financial performance metrics—without manual reporting work.",
    icon: FileChartColumn,
  },
  {
    id: "automated-profit-sharing",
    title: "Automated Profit Sharing",
    description:
      "Simplify revenue distribution with automated profit-sharing reports for CPOs, investors, and landlords.",
    icon: HandCoins,
  },
  {
    id: "charging-session-heatmap",
    title: "Charging Session Heatmap",
    description:
      "See charger usage patterns based on charging sessions, helping you identify high-demand locations, peak usage areas, and expansion opportunities.",
    icon: MapIcon,
  },
  {
    id: "customer-behavior-insights",
    title: "Customer Behavior Insights",
    description:
      "Understand how customers return over time, including second-time, third-time, and repeat charging behavior—so you can improve retention and lifetime value.",
    icon: UsersRound,
  },
  {
    id: "roi-payback-prediction",
    title: "ROI & Payback Prediction",
    description:
      "Forecast investment performance with ROI and payback period prediction tools to support smarter business decisions.",
    icon: TrendingUp,
  },
  {
    id: "role-based-views",
    title: "Role-Based Views",
    description:
      "Provide tailored dashboard views for CPOs, landlords, and investors, giving each stakeholder the insights they need without unnecessary complexity.",
    icon: PanelsTopLeft,
    // isFeatured: true,
  },
];

function MonetizationFeatureGrid() {
  return (
    <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
      {monetizationFeatures.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 SaasMonetizationPage() {
  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">
              Monetization Dashboard
            </h1>
            <p className="mt-5 max-w-xl text-lg leading-relaxed text-gray-600">
              TIAR AI Monetization Dashboard helps CPOs, landlords, and
              investors manage pricing, track revenue, automate financial
              reporting, and understand customer behavior—all from one powerful
              business dashboard.
            </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 rounded-3xl border border-green-100 bg-white/80 p-2 shadow-xl">
            <Image
              src="/images/monet.png"
              alt="TIAR AI monetization dashboard showing tariffs, revenue, charging sessions, and utilization"
              width={1536}
              height={1024}
              priority
              sizes="(max-width: 1023px) 90vw, 576px"
              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">
              everything profitable
            </p>

            <h2 className="mt-4 text-3xl font-bold tracking-tight text-gray-950 sm:text-4xl">
              Control your profit
            </h2>

            <p className="mt-2 text-base leading-relaxed text-gray-600 sm:text-lg">
              manage pricing, track revenue, automate financial reporting, and
              understand customer behavior
            </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 MONET2.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-3xl 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">
              Business &amp; Financial Intelligence
            </h2>

            <p className="mt-4 text-base leading-relaxed text-gray-600 sm:text-lg">
              Manage pricing, automate financial operations, understand customer
              behavior, and make smarter investment decisions from one
              dashboard.
            </p>
          </div>

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