import type { Metadata } from "next";
import Image from "next/image";
import {
  Building2,
  ChartNoAxesCombined,
  Globe2,
  Network,
  ShieldCheck,
  Waypoints,
  Zap,
  type LucideIcon,
} from "lucide-react";

export const metadata: Metadata = {
  title: "About TIAR",
  description:
    "Discover TIAR AI's vision, mission, and journey from experienced operators to scalable EV business infrastructure.",
};

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

const companyPrinciples: CompanyPrinciple[] = [
  {
    id: "operator-experience",
    label: "Built from operator experience",
    icon: Building2,
  },
  {
    id: "real-world-validation",
    label: "Validated in real-world operations",
    icon: ChartNoAxesCombined,
  },
  {
    id: "scalable-infrastructure",
    label: "Designed as scalable infrastructure",
    icon: Network,
  },
];

const historyMilestones = [
  {
    id: "telecommunications-foundation",
    number: "01",
    title: "Telecommunications Foundation",
    description:
      "Our team spent decades building and operating complex connected networks. That experience taught us how to manage real-time connectivity, thousands of devices, billing, customers, field operations, and the need for 24/7 reliability.",
  },
  {
    id: "becoming-an-operator",
    number: "02",
    title: "Becoming a Charge Point Operator",
    description:
      "When we entered the EV industry and established Parkingplus in Indonesia, we experienced the realities of running a CPO firsthand and discovered how closely EV charging operations resemble telecommunications networks.",
  },
  {
    id: "discovering-the-gap",
    number: "03",
    title: "Discovering the SaaS Gap",
    description:
      "After trying three SaaS providers, we repeatedly faced limitations in local payment integration, tariff structures, business models, reporting, and operational workflows. Essential customization demanded too much time, IT development, and resources.",
  },
  {
    id: "building-tiar-ai",
    number: "04",
    title: "Building the Platform We Needed",
    description:
      "We asked what it would take to launch and operate a CPO without a large IT or back-office team. TIAR AI became that answer, while Parkingplus served as the first real-world testing ground for charger management, payments, tariffing, financial reporting, revenue sharing, intelligence, and automation.",
  },
  {
    id: "scaling-globally",
    number: "05",
    title: "Scaling Beyond Our Own Operations",
    description:
      "TIAR AI is evolving from a solution built for our own operational challenges into scalable digital infrastructure for CPOs worldwide—making EV businesses easier to launch, smarter to operate, and simpler to scale.",
  },
];

export default function AboutPage() {
  return (
    <div className="w-full bg-white">
      <section className="w-full bg-gray-50 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
            id="vision"
            className="scroll-mt-24 rounded-3xl border border-gray-200 bg-white p-8 shadow-sm sm:p-10"
          >
            <div className="flex size-12 items-center justify-center rounded-2xl bg-green-100 text-green-600">
              <Globe2 aria-hidden="true" className="size-6" />
            </div>
            <h2 className="mt-8 text-3xl font-bold tracking-tight text-gray-950 sm:text-4xl">
              Vision
            </h2>
            <p className="mt-5 text-lg leading-relaxed text-gray-600">
              To accelerate global EV adoption by empowering businesses to grow
              and scale effortlessly.
            </p>
          </article>

          <article
            id="mission"
            className="scroll-mt-24 rounded-3xl border border-green-200 bg-green-50 p-8 shadow-sm sm:p-10"
          >
            <div className="flex size-12 items-center justify-center rounded-2xl bg-green-600 text-white">
              <Zap aria-hidden="true" className="size-6" />
            </div>
            <h2 className="mt-8 text-3xl font-bold tracking-tight text-gray-950 sm:text-4xl">
              Mission
            </h2>
            <p className="mt-5 text-lg leading-relaxed text-gray-600">
              To provide the ultimate operating system for EV businesses by
              unifying CSMS, Business Intelligence, Financial Intelligence, and
              CRM in one plug-and-play platform. We remove technical and
              operational barriers so companies can launch faster, stay lean,
              and focus on expansion.
            </p>
          </article>
        </div>
      </section>

      <section id="history" className="w-full scroll-mt-24 py-16 sm:py-24">
        <div className="mx-auto grid w-full max-w-7xl grid-cols-1 gap-12 px-6 sm:px-10 lg:grid-cols-[0.75fr_1.25fr] lg:gap-20">
          <div className="lg:sticky lg:top-28 lg:self-start">
            <div className="flex size-12 items-center justify-center rounded-2xl bg-green-600 text-white">
              <Waypoints aria-hidden="true" className="size-6" />
            </div>
            <h2 className="mt-7 text-3xl font-bold tracking-tight text-gray-950 sm:text-4xl">
              Our History
            </h2>
            <p className="mt-5 max-w-md text-lg leading-relaxed text-gray-600">
              Built by operators. Driven by experience. Designed for the future.
              Every stage of our journey shaped the platform we offer today.
            </p>
            <Image
              src="/images/tiar_team.jpeg"
              alt="TIAR team"
              width={1014}
              height={1280}
              sizes="(max-width: 639px) calc(100vw - 3rem), (max-width: 1023px) 448px, (max-width: 1279px) calc((100vw - 10rem) * 0.375), 420px"
              className="mt-8 h-auto w-full max-w-md rounded-2xl"
            />
          </div>

          <ol className="relative border-l border-green-200 pl-7 sm:pl-10">
            {historyMilestones.map((milestone, index) => (
              <li
                key={milestone.id}
                className={
                  index === historyMilestones.length - 1
                    ? "relative pb-0"
                    : "relative pb-12"
                }
              >
                <span className="absolute -left-10 flex size-6 items-center justify-center rounded-full border-4 border-white bg-green-600 sm:-left-13" />
                <span className="text-sm font-bold tracking-[0.16em] text-green-600">
                  {milestone.number}
                </span>
                <h3 className="mt-2 text-2xl font-bold tracking-tight text-gray-950">
                  {milestone.title}
                </h3>
                <p className="mt-4 text-lg leading-relaxed text-gray-600">
                  {milestone.description}
                </p>
              </li>
            ))}
          </ol>
        </div>
      </section>

      <section className="w-full pb-16 sm:pb-24">
        <div className="mx-auto w-full max-w-7xl px-6 sm:px-10">
          <div className="grid overflow-hidden rounded-3xl bg-green-950 text-white lg:grid-cols-[0.7fr_1.3fr]">
            <div className="flex items-center justify-center bg-green-900 p-10 sm:p-14">
              <ShieldCheck
                aria-hidden="true"
                className="size-20 text-green-200 sm:size-24"
              />
            </div>
            <div className="p-8 sm:p-12 lg:p-14">
              <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
                Data Protection by Design
              </h2>
              <p className="mt-5 text-lg leading-relaxed text-green-100">
                We understand that charging data is a valuable business asset.
                Each CPO&apos;s data is isolated in a dedicated virtual machine
                and database, with access controlled by the CPO&apos;s own
                credentials. TIAR AI maintains strict confidentiality and
                protects customer data according to applicable laws and
                contractual obligations.
              </p>
            </div>
          </div>
        </div>
      </section>

      <section className="w-full bg-green-50 py-16 text-center sm:py-20">
        <div className="mx-auto w-full max-w-4xl px-6 sm:px-10">
          <h2 className="text-3xl font-bold tracking-tight text-gray-950 sm:text-4xl">
            Grow &amp; Prosper Together
          </h2>
          <p className="mx-auto mt-5 max-w-2xl text-lg leading-relaxed text-gray-600">
            We have been in your shoes and understand the challenges. Your goals
            are our goals, and your growth is our growth.
          </p>
        </div>
      </section>
    </div>
  );
}