'use client'
import Link from 'next/link'
import { ArrowRight, MapPin, Clock, Route, CheckCircle2 } from 'lucide-react'
import { type RouteData } from '@/lib/routes-data'
import { ScrollReveal } from '@/components/ui/ScrollReveal'
import { COMPANY } from '@/lib/constants'

interface RoutePageTemplateProps {
  route: RouteData
}

export function RoutePageTemplate({ route }: RoutePageTemplateProps) {
  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">
            <Route 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 {route.origin} to {route.destination}
          </h1>
          <p className="mt-4 text-white/70 text-lg md:text-xl max-w-2xl mx-auto">
            Comfortable group transportation from South Florida to {route.destination}
          </p>

          {/* Route Stats */}
          <div className="flex flex-col sm:flex-row gap-6 justify-center mt-8 mb-8">
            <div className="flex items-center gap-2 bg-white/10 rounded-lg px-5 py-3">
              <MapPin className="w-5 h-5 text-accent-400" />
              <span className="text-white font-medium">{route.distance}</span>
            </div>
            <div className="flex items-center gap-2 bg-white/10 rounded-lg px-5 py-3">
              <Clock className="w-5 h-5 text-accent-400" />
              <span className="text-white font-medium">{route.travelTime}</span>
            </div>
          </div>

          <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 Quote <ArrowRight className="w-5 h-5" />
          </Link>
        </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">
                {route.origin} to {route.destination} Group Travel
              </h2>
              <p className="text-gray-600 text-lg leading-relaxed">
                {route.overview}
              </p>
            </div>
          </ScrollReveal>
        </div>
      </section>

      {/* Highlights */}
      <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">
                Top Destinations Along This Route
              </h2>
              <p className="mt-3 text-gray-500 text-lg">
                Everything waiting for your group in {route.destination}
              </p>
            </div>
          </ScrollReveal>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {route.highlights.map((highlight, i) => (
              <ScrollReveal key={highlight} 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">{highlight}</p>
                  </div>
                </div>
              </ScrollReveal>
            ))}
          </div>
        </div>
      </section>

      {/* Why Choose Us */}
      <section className="py-16 md:py-24 bg-white">
        <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">
                <Route 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">
                    Why Book This Route With {COMPANY.shortName}?
                  </h2>
                  <p className="text-gray-600 leading-relaxed mb-4">
                    Our professional drivers know Florida&apos;s highways inside and out. We handle the driving
                    so your group can relax, socialize, and arrive at {route.destination} refreshed and ready.
                    With modern coaches accommodating 20–56 passengers, we&apos;re the right fit for any group size.
                  </p>
                  <ul className="space-y-2">
                    {['Professional CDL-licensed drivers', 'Air-conditioned modern coaches', 'On-time departure guarantee', 'Flexible pickup locations across South Florida', 'Groups of 20–56 passengers'].map((item) => (
                      <li key={item} className="flex items-center gap-2 text-gray-600 text-sm">
                        <CheckCircle2 className="w-4 h-4 text-accent-500 shrink-0" />
                        {item}
                      </li>
                    ))}
                  </ul>
                </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">
              Ready to Book Your {route.origin} → {route.destination} Bus?
            </h2>
            <p className="text-white/70 text-lg mb-8">
              Get a free, custom quote for your group. We respond within 24 hours.
            </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>
    </>
  )
}