import { AboutBus } from "@/components/about/about-bus";
import { Reveal } from "@/components/ui/reveal";

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

export function About() {
  return (
    <section className="relative overflow-hidden py-20 lg:py-28">
      <div className="mx-auto grid max-w-6xl items-start gap-12 px-4 sm:px-6 lg:grid-cols-[7fr_5fr] lg:gap-16">
        <div className="flex flex-col gap-8">
          <div className="flex flex-col gap-4">
            <h2 className="text-4xl font-medium tracking-tight text-[#11192d] sm:text-5xl">About Voyager</h2>
            <p className="text-base text-[#11192d]/70 sm:text-justify">
              <span className="font-bold">Technology That Makes Tourism Businesses Simpler</span>
              <br />
              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’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-4">
            <h3 className="text-2xl font-medium text-[#11192d]">Our Principles</h3>
            <div className="grid gap-4 sm:grid-cols-2">
              {principles.map((p, i) => (
                <Reveal key={p.title} delay={i * 80}>
                  <div className="flex h-full flex-col gap-2 rounded-3xl bg-[#0160d4]/3 px-6 py-4">
                    <h4 className="text-2xl font-medium text-[#11192d]">{p.title}</h4>
                    <p className="text-base text-[#11192d]/70">{p.description}</p>
                  </div>
                </Reveal>
              ))}
              <Reveal delay={principles.length * 80} className="sm:col-span-2">
                <div className="flex flex-col gap-2 rounded-3xl bg-[#0160d4]/3 px-6 py-4">
                  <h4 className="text-2xl font-medium text-[#11192d]">Affordable</h4>
                  <p className="text-base text-[#11192d]/70">
                    Enterprise-level capability shouldn’t require enterprise-level complexity.
                  </p>
                </div>
              </Reveal>
            </div>
          </div>
        </div>

        <Reveal delay={100} className="relative mx-auto w-64 sm:w-72 lg:mx-0">
          <AboutBus />
        </Reveal>
      </div>
    </section>
  );
}