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

export const metadata: Metadata = {
  title: 'Charter Bus Rental Locations | South Florida Service Areas',
  description:
    'Tesaut Transportation provides charter bus rental throughout South Florida. View all service locations including Miami, Fort Lauderdale, Boca Raton, West Palm Beach, and more.',
  alternates: { canonical: '/locations' },
}

export default function LocationsPage() {
  const miamiDade = locations.filter((l) => l.county === 'Miami-Dade County')
  const broward = locations.filter((l) => l.county === 'Broward County')
  const palmBeach = locations.filter((l) => l.county === 'Palm Beach County')

  const groups = [
    { county: 'Miami-Dade County', items: miamiDade },
    { county: 'Broward County', items: broward },
    { county: 'Palm Beach County', items: palmBeach },
  ]

  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 Service Locations
          </h1>
          <p className="mt-4 text-white/70 text-lg md:text-xl max-w-2xl mx-auto">
            {COMPANY.shortName} serves South Florida from Miami to West Palm Beach.
            Find your city below and get a custom quote today.
          </p>
        </div>
      </section>

      {/* Location Grid */}
      <section className="py-16 md:py-24 bg-white">
        <div className="max-w-7xl mx-auto px-4">
          {groups.map((group) => (
            <div key={group.county} className="mb-16">
              <h2 className="text-2xl font-heading font-extrabold text-charcoal mb-8 flex items-center gap-3">
                <MapPin className="w-6 h-6 text-accent-500" />
                {group.county}
              </h2>
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                {group.items.map((location) => (
                  <Link
                    key={location.slug}
                    href={`/locations/${location.slug}`}
                    className="group block bg-white rounded-xl p-6 shadow-md hover:shadow-xl hover:-translate-y-1 transition-all duration-300 border border-gray-100"
                  >
                    <div className="flex items-start gap-3 mb-3">
                      <MapPin className="w-5 h-5 text-accent-500 shrink-0 mt-0.5" />
                      <h3 className="font-heading font-bold text-charcoal text-lg group-hover:text-accent-500 transition-colors">
                        {location.city}
                      </h3>
                    </div>
                    <p className="text-gray-500 text-sm mb-4 line-clamp-2">
                      {location.metaDescription}
                    </p>
                    <span className="inline-flex items-center gap-1 text-accent-600 text-sm font-semibold group-hover:gap-2 transition-all">
                      View {location.city} <ArrowRight className="w-4 h-4" />
                    </span>
                  </Link>
                ))}
              </div>
            </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">
            Don&apos;t See Your City?
          </h2>
          <p className="text-white/70 text-lg mb-8">
            We serve all of South Florida. Contact us for service in your area —
            we likely cover it already.
          </p>
          <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>
        </div>
      </section>
    </>
  )
}