"use client";

import Link from "next/link";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";

export default function ServicesPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="mediumLarge"
      sizing="largeSizeMediumTitles"
      background="circleGradient"
      cardStyle="solid"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen 
          navItems={[
            { name: "Home", id: "/" },
            { name: "Services", id: "/services" },
            { name: "About", id: "/about" },
            { name: "Reviews", id: "/reviews" },
            { name: "Contact", id: "/contact" }
          ]}
          brandName="Trucking & Construction"
          bottomLeftText="Family Owned | Texas Based"
          bottomRightText="Ready to Move Texas Forward"
        />
      </div>

      <div id="services-detailed" data-section="services-detailed">
        <FeatureCardMedia
          title="Complete Transportation & Construction Solutions"
          description="From heavy equipment transport to full construction project logistics, we deliver professional services across all of Texas with unmatched reliability and safety standards."
          features={[
            {
              id: "1",
              title: "Heavy Equipment Hauling",
              description: "Specialized transport for bulldozers, excavators, cranes, and industrial machinery. Our expert drivers and custom trailers ensure safe delivery of your most valuable assets.",
              tag: "Specialized",
              imageSrc: "https://img.b2bpic.net/free-photo/crawler-bulldozer_1388-577.jpg"
            },
            {
              id: "2", 
              title: "Long-Distance Freight",
              description: "Regional and interstate freight services with GPS tracking, scheduled deliveries, and complete cargo protection. Serving Texas and beyond with professional reliability.",
              tag: "Regional",
              imageSrc: "https://img.b2bpic.net/free-photo/truck-speeding-through-urban-highway-supplychain-delivery_169016-71317.jpg"
            },
            {
              id: "3",
              title: "Construction Logistics", 
              description: "Complete project support including material delivery, equipment positioning, site preparation, and debris removal. We keep your projects moving forward on schedule.",
              tag: "Complete",
              imageSrc: "https://img.b2bpic.net/free-photo/crawler-bulldozer_1388-578.jpg"
            },
            {
              id: "4",
              title: "Emergency Transport",
              description: "24/7 emergency hauling services for urgent project needs, equipment breakdowns, or time-critical deliveries. Professional response when minutes matter.",
              tag: "24/7",
              imageSrc: "https://img.b2bpic.net/free-photo/blue-truck-rural-highway-with-green-line-logistics-motion_169016-69998.jpg"
            },
            {
              id: "5",
              title: "Fleet Management",
              description: "Comprehensive fleet solutions for businesses needing regular transport services. Custom contracts, dedicated routes, and priority scheduling available.",
              tag: "Custom",
              imageSrc: "https://img.b2bpic.net/free-photo/truck-speeding-through-urban-highway-supplychain-delivery_169016-71317.jpg"
            },
            {
              id: "6",
              title: "Project Coordination",
              description: "End-to-end logistics management for large construction projects. From initial planning through project completion, we handle all transportation needs.",
              tag: "Full-Service",
              imageSrc: "https://img.b2bpic.net/free-photo/crawler-bulldozer_1388-578.jpg"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="service-metrics" data-section="service-metrics">
        <MetricCardTwo
          title="Service Excellence Metrics"
          description="Our commitment to quality service delivery backed by real performance data."
          metrics={[
            { id: "1", value: "99.8%", description: "On-Time Delivery Success Rate" },
            { id: "2", value: "24/7", description: "Emergency Response Available" },
            { id: "3", value: "50+", description: "Counties Served Across Texas" }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="services-cta" data-section="services-cta">
        <ContactSplit
          tag="Need Service?"
          title="Ready to Get Your Project Moving?"
          description="Contact our team for a custom quote tailored to your specific transportation and construction needs. Fast response guaranteed."
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground={false}
          imageSrc="https://img.b2bpic.net/free-photo/financial-charts-kpi-metrics-displays-office_482257-126638.jpg"
          mediaPosition="right"
          inputPlaceholder="Enter your email"
          buttonText="Get Service Quote"
          termsText="Response within 2 hours during business hours. Emergency services available 24/7."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://img.b2bpic.net/free-photo/blue-truck-rural-highway-with-green-line-logistics-motion_169016-69998.jpg"
          imageAlt="Trucking and construction services across Texas"
          logoText="Trucking & Construction Company of Texas"
          columns={[
            {
              title: "Services",
              items: [
                { label: "Heavy Hauling", href: "/services" },
                { label: "Freight Transport", href: "/services" },
                { label: "Equipment Transport", href: "/services" },
                { label: "Construction Services", href: "/services" }
              ]
            },
            {
              title: "Company",
              items: [
                { label: "About Us", href: "/about" },
                { label: "Our Team", href: "/about" },
                { label: "Reviews", href: "/reviews" },
                { label: "Contact", href: "/contact" }
              ]
            },
            {
              title: "Contact",
              items: [
                { label: "Call: (512) 555-0000", href: "tel:+1-512-555-0000" },
                { label: "Email: info@truckingco.tx", href: "mailto:info@truckingco.tx" },
                { label: "Service Area: All of Texas", href: "#" },
                { label: "24/7 Dispatch", href: "#" }
              ]
            }
          ]}
          copyrightText="© 2025 Trucking & Construction Company of Texas. All rights reserved. Family Owned & Operated."
        />
      </div>
    </ThemeProvider>
  );
}