import { ButtonLink } from "@/components/ui/button";
import { Reveal } from "@/components/ui/reveal";

type Solution = { letter: string; title: string; description: string; cta: string; tone: "blue" | "orange" };

const solutions: Solution[] = [
  { letter: "H", title: "Hop-on Hop-off Tour Software", description: "Manage routes, stops, schedules, tickets, capacity, vehicles and daily operations.", cta: "Explore HOHO", tone: "blue" },
  { letter: "S", title: "Sightseeing Tour Software", description: "Manage guided tours, departures, guides, vehicles, pickups and customers.", cta: "Explore Sightseeing", tone: "orange" },
  { letter: "C", title: "Charter & Transportation Management Software", description: "Manage quotes, group bookings, vehicles, drivers, itineraries, contracts and payments.", cta: "Explore Charters", tone: "blue" },
  { letter: "V", title: "Vehicle Rental Management Software", description: "Manage rental availability, contracts, payments, vehicle assignments and utilization.", cta: "Explore Rentals", tone: "orange" },
  { letter: "G", title: "Growing Tour Operator Software", description: "Start with booking and add CRM, fleet, scheduling, payments, marketing and AI as you grow.", cta: "See How Voyager Scales", tone: "blue" },
  { letter: "E", title: "Enterprise Tourism Management Software", description: "Centralize multiple products, locations, fleets, teams and business operations.", cta: "Talk to Sales", tone: "orange" },
];

const tones = {
  blue: { card: "bg-[#0160d4]/3", tile: "bg-[#0160d4]/5", letter: "from-[#0160d4] to-[#5ab0ff]" },
  orange: { card: "bg-[#f3610c]/3", tile: "bg-[#f3610c]/5", letter: "from-[#f3610c] to-[#ffa66b]" },
};

export function Solutions() {
  return (
    <section id="solutions" className="relative scroll-mt-4 py-20 lg:py-28">
      <div className="mx-auto flex max-w-6xl flex-col items-center gap-8 px-4 sm:px-6">
        <div className="flex flex-col items-center gap-4 text-center">
          <h2 className="text-5xl font-medium tracking-tight text-[#11192d] sm:text-[64px] sm:leading-tight">Solutions</h2>
          <p className="max-w-sm text-base text-[#11192d]/70">Tour Operator Software Built for Your Business</p>
        </div>

        <div className="grid w-full gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {solutions.map((s, i) => {
            const t = tones[s.tone];
            return (
              <Reveal key={s.letter} delay={(i % 3) * 90}>
                <div className={`flex h-full flex-col gap-4 rounded-3xl p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-lg ${t.card}`}>
                  <div className={`grid size-20 place-items-center rounded-3xl ${t.tile}`}>
                    <span className={`bg-linear-to-br ${t.letter} bg-clip-text text-[40px] font-black leading-none text-transparent`}>
                      {s.letter}
                    </span>
                  </div>
                  <div className="flex grow flex-col gap-2">
                    <h3 className="text-2xl font-bold text-[#11192d]">{s.title}</h3>
                    <p className="text-sm text-[#11192d]/70">{s.description}</p>
                  </div>
                  <ButtonLink href="#demo" variant="outline" size="lg" className="h-12 w-full rounded-xl border-[#0160d4]/12">
                    {s.cta}
                  </ButtonLink>
                </div>
              </Reveal>
            );
          })}
        </div>
      </div>
    </section>
  );
}