'use client'
import Link from 'next/link'
import { ArrowRight, MapPin, CheckCircle2, Building2 } from 'lucide-react'
import { type LocationData } from '@/lib/locations-data'
import { ScrollReveal } from '@/components/ui/ScrollReveal'
import { COMPANY } from '@/lib/constants'

interface LocationPageTemplateProps {
  location: LocationData
}

export function LocationPageTemplate({ location }: LocationPageTemplateProps) {
  return (
    <>
      {/* Hero */}
      <section className="relative pt-32 pb-20 md:pt-40 md:pb-28 bg-primary-900 overflow-hidden">
        <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">
          <div className="w-16 h-16 bg-accent-500/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
            <MapPin className="w-8 h-8 text-accent-400" />
          </div>
          <h1 className="text-4xl md:text-5xl lg:text-6xl font-heading font-extrabold text-white">
            Charter Bus Rental in {location.city}
          </h1>
          <p className="mt-4 text-white/70 text-lg md:text-xl max-w-2xl mx-auto">
            Professional group transportation serving {location.city} and {location.county}
          </p>
          <div className="mt-8 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"
            >
              Get a Free 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"
            >
              {COMPANY.phone}
            </a>
          </div>
        </div>
      </section>

      {/* Overview */}
      <section className="py-16 md:py-24 bg-white">
        <div className="max-w-5xl mx-auto px-4">
          <ScrollReveal>
            <div className="max-w-3xl mx-auto text-center">
              <h2 className="text-2xl md:text-3xl font-heading font-extrabold text-charcoal mb-6">
                {COMPANY.shortName} in {location.city}
              </h2>
              <p className="text-gray-600 text-lg leading-relaxed">
                {location.overview}
              </p>
            </div>
          </ScrollReveal>
        </div>
      </section>

      {/* Services Offered */}
      <section className="py-16 md:py-24 bg-pearl">
        <div className="max-w-7xl mx-auto px-4">
          <ScrollReveal>
            <div className="text-center mb-12">
              <h2 className="text-2xl md:text-3xl font-heading font-extrabold text-charcoal">
                Services Available in {location.city}
              </h2>
              <p className="mt-3 text-gray-500 text-lg">
                Whatever the occasion, we have the right vehicle and expertise
              </p>
            </div>
          </ScrollReveal>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {location.servicesOffered.map((service, i) => (
              <ScrollReveal key={service} delay={0.1 * (i % 3)}>
                <div className="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition-shadow h-full border-l-4 border-accent-500">
                  <div className="flex items-start gap-3">
                    <CheckCircle2 className="w-6 h-6 text-accent-500 shrink-0 mt-0.5" />
                    <p className="font-heading font-bold text-charcoal">{service}</p>
                  </div>
                </div>
              </ScrollReveal>
            ))}
          </div>

          <div className="text-center mt-10">
            <Link
              href="/services"
              className="inline-flex items-center gap-2 text-accent-600 font-heading font-semibold hover:underline"
            >
              View All Services <ArrowRight className="w-4 h-4" />
            </Link>
          </div>
        </div>
      </section>

      {/* Local Landmarks & Neighborhoods */}
      <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 gap-12">
            <ScrollReveal>
              <div>
                <h2 className="text-2xl md:text-3xl font-heading font-extrabold text-charcoal mb-6">
                  Neighborhoods We Serve
                </h2>
                <ul className="space-y-3">
                  {location.neighborhoods.map((neighborhood) => (
                    <li key={neighborhood} className="flex items-center gap-3 text-gray-700">
                      <MapPin className="w-5 h-5 text-accent-500 shrink-0" />
                      <span>{neighborhood}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </ScrollReveal>

            <ScrollReveal delay={0.1}>
              <div>
                <h2 className="text-2xl md:text-3xl font-heading font-extrabold text-charcoal mb-6">
                  Key Landmarks & Venues
                </h2>
                <ul className="space-y-3">
                  {location.landmarks.map((landmark) => (
                    <li key={landmark} className="flex items-center gap-3 text-gray-700">
                      <Building2 className="w-5 h-5 text-accent-500 shrink-0" />
                      <span>{landmark}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </ScrollReveal>
          </div>
        </div>
      </section>

      {/* County Callout */}
      <section className="py-16 md:py-24 bg-pearl">
        <div className="max-w-4xl mx-auto px-4">
          <ScrollReveal>
            <div className="bg-primary-50 rounded-2xl p-8 md:p-12">
              <div className="flex items-start gap-4">
                <MapPin className="w-8 h-8 text-accent-500 shrink-0 mt-1" />
                <div>
                  <h2 className="text-xl md:text-2xl font-heading font-extrabold text-charcoal mb-3">
                    Serving {location.county}
                  </h2>
                  <p className="text-gray-600 leading-relaxed">
                    Our {location.city} charter bus service covers all of {location.county} and beyond.
                    With pickup locations throughout {location.city} and surrounding communities,
                    we make group transportation effortless. From a single hotel to multiple stops across the county,
                    we coordinate every detail.
                  </p>
                  <div className="flex flex-wrap gap-2 mt-4">
                    {COMPANY.serviceAreas.map((area) => (
                      <span
                        key={area}
                        className="bg-white text-primary-700 px-4 py-1.5 rounded-full text-sm font-medium shadow-sm"
                      >
                        {area}
                      </span>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </ScrollReveal>
        </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">
          <ScrollReveal>
            <h2 className="text-2xl md:text-3xl font-heading font-extrabold mb-4">
              Book Your {location.city} Charter Bus Today
            </h2>
            <p className="text-white/70 text-lg mb-8">
              Get a free, no-obligation quote for your {location.city} group transportation.
              We respond within 24 hours and can accommodate groups of 20 to 56 passengers.
            </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"
              >
                Get Your Free 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>
          </ScrollReveal>
        </div>
      </section>
    </>
  )
}