"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import { Gauge, Timer, Users } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-bubble"
        defaultTextAnimation="entrance-slide"
        borderRadius="soft"
        contentWidth="medium"
        sizing="largeSmallSizeMediumTitles"
        background="fluid"
        cardStyle="subtle-shadow"
        primaryButtonStyle="flat"
        secondaryButtonStyle="layered"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        {
          name: "Home",
          id: "/",
        },
        {
          name: "Services",
          id: "/services",
        },
        {
          name: "About Us",
          id: "/about",
        },
        {
          name: "Reviews",
          id: "/reviews",
        },
        {
          name: "Areas",
          id: "/service-areas",
        },
        {
          name: "Contact",
          id: "/contact",
        },
      ]}
      logoSrc="http://img.b2bpic.net/free-vector/eagle-logo-icon-heraldic-style_126523-770.jpg"
      logoAlt="Eagle Towing Company Logo"
      brandName="Eagle Towing"
      button={{
        text: "Call Now: (314) 123-4567",
        href: "tel:+13141234567",
      }}
    />
  </div>

  <div id="service-area-coverage" data-section="service-area-coverage">
      <FeatureCardTwelve
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      features={[
        {
          id: "area-st-louis",
          label: "Primary Service Area",
          title: "St. Louis City & County",
          items: [
            "Comprehensive 24/7 towing and roadside assistance.",
            "Fastest response times within the city limits and county.",
            "Deep local knowledge for efficient service.",
          ],
        },
        {
          id: "area-st-charles",
          label: "Neighboring County",
          title: "St. Charles, MO",
          items: [
            "Extending our full range of services to St. Charles.",
            "Covering I-70, I-64, and all local routes.",
            "Reliable help for residents and commuters.",
          ],
        },
        {
          id: "area-chesterfield",
          label: "West County",
          title: "Chesterfield, MO",
          items: [
            "Specializing in luxury vehicle towing in Chesterfield.",
            "Prompt service to residential and business districts.",
            "Equipped for all breakdowns around Highway 40/61.",
          ],
        },
        {
          id: "area-ballwin",
          label: "West County",
          title: "Ballwin, MO",
          items: [
            "Dedicated roadside assistance for Ballwin residents.",
            "Quick response to breakdowns on Manchester Rd and local streets.",
            "Trusted service for light and medium-duty vehicles.",
          ],
        },
        {
          id: "area-clayton",
          label: "Central County",
          title: "Clayton, MO",
          items: [
            "Premium towing services for Clayton's busy urban core.",
            "Expert handling for all types of vehicles in tight spaces.",
            "Reliable transport to dealerships and repair shops.",
          ],
        },
        {
          id: "area-kirkwood",
          label: "Mid-County",
          title: "Kirkwood, MO",
          items: [
            "Serving Kirkwood with 24/7 emergency towing.",
            "Assistance for breakdowns on major roads and residential areas.",
            "Flatbed towing for classic cars and special vehicles.",
          ],
        },
        {
          id: "area-university-city",
          label: "North County",
          title: "University City, MO",
          items: [
            "Responsive service for students and residents of U-City.",
            "Quick help for battery boosts, lockouts, and flat tires.",
            "Accessible solutions near Delmar Loop and WashU.",
          ],
        },
        {
          id: "area-maryland-heights",
          label: "Northwest County",
          title: "Maryland Heights, MO",
          items: [
            "Covering Maryland Heights with comprehensive towing.",
            "Fast response near Westport Plaza and major highways.",
            "Reliable service for commercial and personal vehicles.",
          ],
        },
        {
          id: "area-creve-coeur",
          label: "Central County",
          title: "Creve Coeur, MO",
          items: [
            "Providing prompt towing to Creve Coeur's business parks and homes.",
            "Emergency roadside assistance along Olive Blvd and surrounding areas.",
            "Trusted service for all your vehicle needs.",
          ],
        },
        {
          id: "area-florissant",
          label: "North County",
          title: "Florissant, MO",
          items: [
            "Extending our trusted towing to the Florissant community.",
            "24/7 availability for all emergency roadside situations.",
            "Local expertise for quick and efficient service.",
          ],
        },
        {
          id: "area-o-fallon",
          label: "St. Charles County",
          title: "O'Fallon, MO",
          items: [
            "Comprehensive towing and roadside for O'Fallon residents.",
            "Rapid deployment to all parts of the city and surrounding routes.",
            "Your reliable partner for vehicle emergencies.",
          ],
        },
      ]}
      title="Extensive Towing Coverage Across St. Louis & Beyond"
      description="Eagle Towing proudly serves a wide range of communities in and around the St. Louis metropolitan area. No matter where you are, we're just a call away for prompt and reliable service."
    />
  </div>

  <div id="local-impact-metrics" data-section="local-impact-metrics">
      <MetricCardOne
      animationType="depth-3d"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",
          value: "10+",
          title: "Years Serving St. Louis",
          description: "A decade of trusted service, growth, and community support.",
          icon: Gauge,
        },
        {
          id: "m2",
          value: "25K+",
          title: "Happy Customers",
          description: "Thousands of satisfied drivers safely back on their way.",
          icon: Users,
        },
        {
          id: "m3",
          value: "98%",
          title: "On-Time Arrival",
          description: "Committed to prompt and reliable service, every time.",
          icon: Timer,
        },
      ]}
      title="Our Impact in the St. Louis Community"
      description="Eagle Towing is more than just a service; we're a vital part of the St. Louis community, ensuring safety and reliability on our roads every day."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoEmphasis
      logoSrc="http://img.b2bpic.net/free-vector/eagle-logo-icon-heraldic-style_126523-770.jpg"
      logoAlt="Eagle Towing Logo"
      columns={[
        {
          items: [
            {
              label: "Home",
              href: "/",
            },
            {
              label: "Services",
              href: "/services",
            },
            {
              label: "About Us",
              href: "/about",
            },
            {
              label: "Reviews",
              href: "/reviews",
            },
          ],
        },
        {
          items: [
            {
              label: "Service Areas",
              href: "/service-areas",
            },
            {
              label: "Contact Us",
              href: "/contact",
            },
            {
              label: "Get a Quote",
              href: "/contact#quote",
            },
            {
              label: "Privacy Policy",
              href: "#",
            },
          ],
        },
        {
          items: [
            {
              label: "Call 24/7",
              href: "tel:+13141234567",
            },
            {
              label: "Email: info@eagletowingstl.com",
              href: "mailto:info@eagletowingstl.com",
            },
            {
              label: "St. Louis, MO",
              href: "/service-areas#st-louis",
            },
            {
              label: "Facebook",
              href: "https://facebook.com/eagletowing",
            },
          ],
        },
      ]}
      logoText="Eagle Towing - St. Louis's most trusted 24/7 roadside partner."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
