"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
import TextAbout from '@/components/sections/about/TextAbout';
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="slide-background"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="medium"
      sizing="large"
      background="none"
      cardStyle="inset"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="Aspen Mountain"
          navItems={[
            { name: "Services", id: "services" },
            { name: "Gallery", id: "gallery" },
            { name: "About", id: "about" },
            { name: "Rates", id: "pricing" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Book Now",            href: "booking"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboardSplit
          logoText="ASPEN MOUNTAIN TRANSPORTATION"
          description="Premium luxury taxi service in Aspen, Colorado. Book your ride in seconds with our professional drivers and premium fleet. Available 24/7 for your comfort and convenience."
          background={{ variant: "radial-gradient" }}
          buttons={[
            { text: "Book a Ride", href: "booking" },
            { text: "Learn More", href: "services" }
          ]}
          layoutOrder="default"
          imageSrc="https://img.b2bpic.net/free-photo/beautiful-vista-high-rocky-snowy-mountains-hills-with-forest_181624-1879.jpg"
          imageAlt="Scenic Aspen mountain landscape"
          frameStyle="card"
          logoLineHeight={1.2}
        />
      </div>

      <div id="booking" data-section="booking">
        <TextAbout
          title="Book Your Ride Instantly - Licensed, Insured, and Ready to Go"
          buttons={[
            { text: "Reserve Now", href: "#contact" }
          ]}
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardThree
          title="Premium Services"
          description="Experience luxury transportation with our comprehensive service offerings tailored to your needs"
          tag="Our Services"
          features={[
            {
              id: "01",              title: "Airport Transfers",              description: "Reliable transportation to and from Aspen-Pitkin County Airport with professional drivers and luxury vehicles",              imageSrc: "https://img.b2bpic.net/free-photo/young-business-woman-sitting-car_1303-22820.jpg",              imageAlt: "luxury car interior premium comfortable"
            },
            {
              id: "02",              title: "City Tours",              description: "Explore the natural beauty and upscale lifestyle of Aspen with knowledgeable, professional guides",              imageSrc: "https://img.b2bpic.net/free-photo/nature-scene-usa-vegetation-flora_23-2149870988.jpg",              imageAlt: "aspen downtown street architecture upscale"
            },
            {
              id: "03",              title: "Corporate Travel",              description: "Professional transportation for business meetings and corporate events with discretion and reliability",              imageSrc: "https://img.b2bpic.net/free-photo/safeguard-crew-monitoring-area_23-2148404044.jpg",              imageAlt: "luxury suv car transportation ride"
            },
            {
              id: "04",              title: "Mountain Excursions",              description: "Scenic tours showcasing Colorado's stunning mountain landscape and outdoor destinations",              imageSrc: "https://img.b2bpic.net/free-photo/nature-view-usa-flora-vegetation_23-2149870968.jpg",              imageAlt: "mountain scenery natural beautiful landscape"
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          gridVariant="four-items-2x2-equal-grid"
        />
      </div>

      <div id="areas" data-section="areas">
        <ProductCardTwo
          title="Service Areas"
          description="We proudly serve the entire Aspen and Rocky Mountain region with convenient pickup and dropoff locations"
          tag="Coverage"
          products={[
            {
              id: "1",              brand: "Aspen, CO",              name: "Downtown & Residential",              price: "24/7 Available",              rating: 5,
              reviewCount: "450+",              imageSrc: "https://img.b2bpic.net/free-photo/nature-scene-usa-vegetation-flora_23-2149870988.jpg",              imageAlt: "aspen downtown street architecture upscale"
            },
            {
              id: "2",              brand: "Denver, CO",              name: "Metro Access",              price: "24/7 Available",              rating: 5,
              reviewCount: "320+",              imageSrc: "https://img.b2bpic.net/free-photo/nature-view-usa-flora-vegetation_23-2149870968.jpg",              imageAlt: "mountain scenery natural beautiful landscape"
            },
            {
              id: "3",              brand: "Vail & Summit",              name: "Mountain Towns",              price: "24/7 Available",              rating: 5,
              reviewCount: "380+",              imageSrc: "https://img.b2bpic.net/free-photo/ski-track-astonishing-view-alps-switzerland_181624-42296.jpg",              imageAlt: "aspen snow winter mountains skiing"
            },
            {
              id: "4",              brand: "Eagle, Grand Junction",              name: "Regional Coverage",              price: "24/7 Available",              rating: 5,
              reviewCount: "290+",              imageSrc: "https://img.b2bpic.net/free-photo/safeguard-crew-monitoring-area_23-2148404044.jpg",              imageAlt: "luxury suv car transportation ride"
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
          gridVariant="four-items-2x2-equal-grid"
        />
      </div>

      <div id="gallery" data-section="gallery">
        <MetricCardEleven
          title="Experience Aspen's Natural Beauty"
          description="Discover the stunning landscapes and luxury lifestyle that make Aspen Colorado's premier destination"
          tag="Gallery"
          metrics={[
            {
              id: "1",              value: "15+",              title: "Years of Service",              description: "Trusted luxury transportation in the Aspen region",              imageSrc: "https://img.b2bpic.net/free-photo/beautiful-vista-high-rocky-snowy-mountains-hills-with-forest_181624-1879.jpg",              imageAlt: "aspen colorado mountains scenic landscape"
            },
            {
              id: "2",              value: "100%",              title: "Professional Fleet",              description: "Licensed and insured premium vehicles for your comfort",              imageSrc: "https://img.b2bpic.net/free-photo/young-business-woman-sitting-car_1303-22820.jpg",              imageAlt: "luxury car interior premium comfortable"
            },
            {
              id: "3",              value: "24/7",              title: "Always Available",              description: "Round-the-clock service for your transportation needs",              imageSrc: "https://img.b2bpic.net/free-photo/nature-scene-usa-vegetation-flora_23-2149870967.jpg",              imageAlt: "sunset mountains colorado scenic beautiful"
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="benefits" data-section="benefits">
        <TextAbout
          title="Why Choose Aspen Mountain Transportation for Your Rides? Professional drivers, luxury vehicles, fixed rates, 24/7 availability, and a commitment to your safety and comfort. Call 904-480-1824 or book online instantly."
          buttons={[
            { text: "Call: 904-480-1824", href: "tel:904-480-1824" }
          ]}
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSix
          title="What Our Clients Say"
          description="Experience feedback from satisfied customers who trust us with their luxury transportation needs"
          tag="Testimonials"
          testimonials={[
            {
              id: "1",              name: "Jennifer Mitchell",              handle: "Aspen Resident",              testimonial: "Aspen Mountain Transportation has been my go-to service for years. Professional drivers, pristine vehicles, and always on time. Highly recommended!",              imageSrc: "https://img.b2bpic.net/free-photo/man-car-driving_23-2148889981.jpg",              imageAlt: "satisfied customer portrait professional happy"
            },
            {
              id: "2",              name: "David Chen",              handle: "@dchen_ventures",              testimonial: "The best luxury transport service in Colorado. Their attention to detail and commitment to excellence is outstanding. Perfect for business travel.",              imageSrc: "https://img.b2bpic.net/free-photo/preparing-read-some-documents-working-back-car-using-silver-colored-laptop-senior-businessman_146671-14496.jpg",              imageAlt: "customer testimonial portrait professional service"
            },
            {
              id: "3",              name: "Sarah Williams",              handle: "Ski Resort Owner",              testimonial: "We use Aspen Mountain Transportation for all our VIP guests. They consistently deliver exceptional service and make a great impression on our visitors.",              imageSrc: "https://img.b2bpic.net/free-photo/side-view-smiley-man-sitting-car_23-2149901423.jpg",              imageAlt: "business person portrait professional customer"
            },
            {
              id: "4",              name: "Michael Rodriguez",              handle: "Corporate Executive",              testimonial: "Reliable, professional, and discreet. Everything you need in a premium transportation service. I book with them every time I'm in Aspen.",              imageSrc: "https://img.b2bpic.net/free-photo/stopped-break-side-view-senior-businessman-official-clothes-inside-modern-car_146671-14432.jpg",              imageAlt: "happy person customer portrait satisfied"
            },
            {
              id: "5",              name: "Emily Thompson",              handle: "Travel Consultant",              testimonial: "Outstanding service from start to finish. The drivers are knowledgeable about the area and genuinely care about passenger comfort.",              imageSrc: "https://img.b2bpic.net/free-photo/man-car-driving_23-2148889981.jpg",              imageAlt: "satisfied customer portrait professional happy"
            },
            {
              id: "6",              name: "James Patterson",              handle: "Hospitality Manager",              testimonial: "We recommend Aspen Mountain Transportation to all our guests. They represent the luxury and professionalism that Aspen is known for.",              imageSrc: "https://img.b2bpic.net/free-photo/preparing-read-some-documents-working-back-car-using-silver-colored-laptop-senior-businessman_146671-14496.jpg",              imageAlt: "customer testimonial portrait professional service"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Get in Touch"
          description="Contact Mountain Transportation in Aspen, CO through phone, email, or our online form to inquire about our services, request a quote, or make a reservation."
          inputs={[
            { name: "name", type: "text", placeholder: "Your Name", required: true },
            { name: "email", type: "email", placeholder: "Your Email", required: true }
          ]}
          textarea={{
            name: "message",            placeholder: "Tell us about your transportation needs...",            rows: 5,
            required: true
          }}
          useInvertedBackground="invertDefault"
          imageSrc="https://img.b2bpic.net/free-photo/safeguard-crew-monitoring-area_23-2148404044.jpg"
          imageAlt="luxury suv car transportation ride"
          mediaPosition="right"
          buttonText="Request a Quote"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="Aspen Mountain Transportation"
          columns={[
            {
              items: [
                { label: "Book Now", href: "booking" },
                { label: "Services", href: "services" },
                { label: "Gallery", href: "gallery" },
                { label: "Contact Us", href: "contact" }
              ]
            },
            {
              items: [
                { label: "Phone: 904-480-1824", href: "tel:904-480-1824" },
                { label: "Email: aspenmountaintransportation@gmail.com", href: "mailto:aspenmountaintransportation@gmail.com" },
                { label: "518 Spruce Street, Aspen, CO 81611", href: "#" }
              ]
            },
            {
              items: [
                { label: "Licensed & Insured", href: "#" },
                { label: "Professional Drivers", href: "#" },
                { label: "24/7 Available", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}