import type { Metadata } from 'next'
import Link from 'next/link'
import { Route, ArrowRight, MapPin, Clock } from 'lucide-react'
import { routes } from '@/lib/routes-data'
import { COMPANY } from '@/lib/constants'

export const metadata: Metadata = {
  title: 'Charter Bus Routes from Miami | Florida Group Transportation',
  description:
    'Charter bus routes from Miami to Orlando, Key West, Tampa & more. Tesaut Transportation handles all major Florida routes for groups of 20–56 passengers.',
  alternates: { canonical: '/routes' },
}

export default function RoutesPage() {
  return (
    <>
      {/* Hero */}
      <section className="relative pt-32 pb-20 md:pt-40 md:pb-28 bg-primary-900">
        <div className="absolute inset-0 bg-gradient-to-b from-primary-900/80 to-primary-900" />
        <div className="relative max-w-5xl mx-auto px-4 text-center">
          <h1 className="text-4xl md:text-5xl font-heading font-extrabold text-white">
            Charter Bus Routes from Miami
          </h1>
          <p className="mt-4 text-white/70 text-lg md:text-xl max-w-2xl mx-auto">
            Comfortable, direct group transportation from South Florida to Florida&apos;s top destinations.
            Groups of 20–56 passengers.
          </p>
        </div>
      </section>

      {/* Routes Grid */}
      <section className="py-16 md:py-24 bg-white">
        <div className="max-w-7xl mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {routes.map((route) => (
              <Link
                key={route.slug}
                href={`/routes/${route.slug}`}
                className="group block bg-white rounded-xl shadow-md hover:shadow-xl hover:-translate-y-1 transition-all duration-300 border border-gray-100 overflow-hidden"
              >
                <div className="p-6">
                  <div className="flex items-center gap-3 mb-4">
                    <div className="w-10 h-10 bg-accent-500/10 rounded-lg flex items-center justify-center">
                      <Route className="w-5 h-5 text-accent-500" />
                    </div>
                    <h2 className="font-heading font-bold text-charcoal text-lg group-hover:text-accent-500 transition-colors">
                      {route.origin} → {route.destination}
                    </h2>
                  </div>

                  <p className="text-gray-500 text-sm mb-4 line-clamp-3">
                    {route.metaDescription}
                  </p>

                  <div className="flex gap-4 mb-4">
                    <div className="flex items-center gap-1.5 text-sm text-gray-600">
                      <MapPin className="w-4 h-4 text-accent-500" />
                      {route.distance}
                    </div>
                    <div className="flex items-center gap-1.5 text-sm text-gray-600">
                      <Clock className="w-4 h-4 text-accent-500" />
                      {route.travelTime}
                    </div>
                  </div>

                  <span className="inline-flex items-center gap-1 text-accent-600 text-sm font-semibold group-hover:gap-2 transition-all">
                    View Route Details <ArrowRight className="w-4 h-4" />
                  </span>
                </div>
              </Link>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="py-16 md:py-24 bg-primary-900 text-white text-center">
        <div className="max-w-3xl mx-auto px-4">
          <h2 className="text-2xl md:text-3xl font-heading font-extrabold mb-4">
            Need a Custom Route?
          </h2>
          <p className="text-white/70 text-lg mb-8">
            We travel anywhere in Florida and beyond. Contact us for a custom quote
            for your group&apos;s specific route.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Link
              href="/quote-request"
              className="inline-flex items-center gap-2 bg-accent-500 hover:bg-accent-600 text-white px-8 py-4 rounded-lg text-lg font-heading font-bold shadow-2xl hover:scale-102 transition-all duration-200"
            >
              Request a Quote <ArrowRight className="w-5 h-5" />
            </Link>
            <a
              href={COMPANY.phoneHref}
              className="inline-flex items-center gap-2 bg-white/10 hover:bg-white/20 text-white px-8 py-4 rounded-lg text-lg font-heading font-bold border border-white/20 transition-all duration-200"
            >
              Call {COMPANY.phone}
            </a>
          </div>
        </div>
      </section>
    </>
  )
}