import type { Metadata } from "next";
import { AboutBus } from "@/components/about/about-bus";
import { Navbar } from "@/components/layout/navbar";
import { Footer } from "@/components/layout/footer";
import { Breadcrumb } from "@/components/ui/breadcrumb";
import { ButtonLink } from "@/components/ui/button";
import Image from "next/image";
import { Reveal } from "@/components/ui/reveal";

export const metadata: Metadata = {
  title: "About us — VOYAGER",
  description: "Voyager is an AI-powered business operating platform for tour operators, transportation companies and rental businesses.",
};

const principles = [
  { title: "Simple", text: "Powerful technology shouldn’t feel complicated." },
  { title: "Connected", text: "Your systems should work together." },
  { title: "Scalable", text: "Your software should grow with your business." },
  { title: "Intelligence", text: "AI should help your team, not replace the people who know your business." },
  { title: "Affordable", text: "Enterprise-level capability shouldn’t require enterprise-level complexity." },
];

const stats = [
  { value: "37mil", label: "Yearly Tickets" },
  { value: "360", label: "Operation" },
  { value: "280", label: "Clients" },
  { value: "50", label: "Countries" },
  { value: "102", label: "Employees" },
];

const aims = [
  {
    title: "Vision",
    image: "/vision.png",
    text: "To give every tour and transportation business the tools of a global enterprise, in one connected platform that grows with them.",
  },
  {
    title: "Mission",
    image: "/mission.png",
    text: "To simplify how tourism businesses book, manage and grow by bringing ticketing, operations, distribution, payments and AI together.",
  },
];

export default function AboutPage() {
  return (
    <>
      <Navbar />
      <main className="flex-1 overflow-x-clip">
        <section className="pb-12 pt-4 lg:pb-20">
          <div className="mx-auto flex max-w-6xl flex-col gap-6 px-4 sm:px-6">
            <Breadcrumb current="About us" />

            <div className="grid items-start gap-10 lg:grid-cols-[6fr_4fr]">
              <div className="flex flex-col gap-6">
                <h1 className="text-4xl font-medium leading-tight tracking-tight text-[#11192d] sm:text-5xl">
                  Voyager<span className="text-icon">,</span> the ticketing solution for tour operators
                </h1>

                <div className="flex flex-col gap-1">
                  <h2 className="text-xs font-bold text-[#11192d]">Technology That Makes Tourism Businesses Simpler</h2>
                  <p className="text-xs leading-relaxed text-[#11192d]/70">
                    Voyager is an AI-powered business operating platform for tour operators, transportation companies, rental businesses and tourism
                    enterprises. Voyager was created around a simple idea: tour operators shouldn&rsquo;t have to build their business around their
                    software. The software should adapt to the business. Voyager brings tour booking, ticketing, operations, fleet management, CRM,
                    payments, communication, distribution, marketing and AI together in one connected platform.
                  </p>
                </div>

                <div className="flex flex-col gap-3">
                  <h2 className="text-lg font-medium text-[#11192d]">Our Principles</h2>
                  <ul className="grid gap-3 sm:grid-cols-2">
                    {principles.map((p, i) => (
                      <li key={p.title} className={i === principles.length - 1 && principles.length % 2 === 1 ? "sm:col-span-2" : ""}>
                        <Reveal delay={(i % 2) * 90} className="h-full">
                          <div className="flex h-full flex-col gap-1 rounded-2xl bg-[#0160d4]/4 p-4">
                            <h3 className="text-base font-medium text-[#11192d]">{p.title}</h3>
                            <p className="max-w-56 text-xs text-[#11192d]/60 sm:max-w-none">{p.text}</p>
                          </div>
                        </Reveal>
                      </li>
                    ))}
                  </ul>
                </div>
              </div>

              <div className="mx-auto w-72 sm:w-80 lg:mx-0 lg:w-full lg:max-w-sm lg:justify-self-center">
                <AboutBus priority />
              </div>
            </div>
          </div>
        </section>

        <section className="py-12 lg:py-16">
          <div className="mx-auto grid max-w-6xl gap-6 px-4 pt-20 sm:px-6 md:grid-cols-2">
            {aims.map((a, i) => (
              <Reveal key={a.title} delay={i * 90}>
                <div className="relative flex h-full min-h-[22rem] flex-col justify-end rounded-3xl bg-[#0160d4]/4 p-8">
                  <div aria-hidden className="pointer-events-none absolute inset-0 overflow-hidden rounded-3xl">
                    <div className="absolute -left-10 top-1/3 h-24 w-[130%] -rotate-6 rounded-full border-[14px] border-[#0160d4]/8" />
                  </div>
                  <Image src={a.image} alt="" width={460} height={370} sizes="(min-width: 768px) 24rem, 80vw" className="pointer-events-none absolute inset-x-0 -top-16 mx-auto h-auto w-[75%] max-w-sm" />
                  <h2 className="relative text-lg font-bold text-[#11192d]">{a.title}</h2>
                  <p className="relative mt-2 text-xs leading-relaxed text-[#11192d]/70">{a.text}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </section>

        <section className="py-12 lg:py-16">
          <div className="mx-auto flex max-w-6xl flex-col gap-4 px-4 sm:px-6">
            <h2 className="flex flex-wrap items-end gap-x-4 leading-none">
              <span className="bg-linear-to-r from-[#0160d4] to-[#0a8bff]/10 bg-clip-text text-[7rem] font-black leading-[0.85] text-transparent sm:text-[9rem]">
                WHY
              </span>
              <span className="pb-2 text-3xl font-medium text-[#11192d] sm:text-4xl">
                Choose Voyager<span className="text-accent">?</span>
              </span>
            </h2>

            <ul className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5">
              {stats.map((s) => (
                <li key={s.label} className="flex flex-col items-center gap-1 rounded-2xl bg-[#0160d4]/4 px-4 py-4 text-center">
                  <span className="text-3xl font-medium text-[#0160d4]">{s.value}</span>
                  <span className="text-xs text-[#11192d]/70">{s.label}</span>
                </li>
              ))}
            </ul>

            <div className="flex flex-col items-start justify-between gap-4 rounded-2xl border border-[#0160d4]/12 bg-white p-3 pl-5 sm:flex-row sm:items-center">
              <p className="flex items-center gap-2 text-lg font-medium text-[#11192d]">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden className="size-5 text-icon">
                  <path d="m5 3 14 7-6 2-2 6L5 3Z" />
                </svg>
                Wanna try?
              </p>
              <ButtonLink href="/#demo" className="h-9 rounded-lg px-4 text-xs">
                Become a Voyager Customer
              </ButtonLink>
            </div>
          </div>
        </section>
      </main>
      <Footer />
    </>
  );
}