"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import SplitAbout from "@/components/sections/about/SplitAbout";
import MetricCardTwo from "@/components/sections/metrics/MetricCardTwo";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import Link from "next/link";
import { CheckCircle, BarChart3, Rocket, Phone, Mail, Clock } from "lucide-react";

export default function ContactPage() {
  const navItems = [
    { name: "Home", id: "home" },
    { name: "Services", id: "services" },
    { name: "About", id: "about" },
    { name: "Pricing", id: "pricing" },
    { name: "Contact", id: "contact" },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="small"
      sizing="mediumLargeSizeLargeTitles"
      background="circleGradient"
      cardStyle="glass-elevated"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple brandName="LogisticsPro" navItems={navItems} />
      </div>

      <div id="contact-info" data-section="contact-info">
        <SplitAbout
          title="Get in Touch with Our Team"
          description="Have questions about our logistics solutions? Our dedicated support team is ready to assist you. Reach out via phone, email, or fill out our contact form and we'll respond within 24 hours."
          tag="Contact Methods"
          tagIcon={CheckCircle}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          bulletPoints={[
            {
              title: "Phone Support",              description: "Call us at +1 (800) 123-4567 for immediate assistance from our logistics experts.",              icon: Phone,
            },
            {
              title: "Email Support",              description: "Send your inquiries to support@logisticspro.com and receive a detailed response within 4 hours.",              icon: Mail,
            },
            {
              title: "24/7 Availability",              description: "Our customer support team is available around the clock to address urgent logistics needs.",              icon: Clock,
            },
            {
              title: "Regional Offices",              description: "Visit our offices in North America, Europe, and Asia for in-person consultations and support.",              icon: CheckCircle,
            },
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/african-american-staff-printing-awb-tracking-numbers-tags-new-parcel-shipment-managing-airway_482257-136207.jpg"
          imageAlt="Customer support team"
          mediaAnimation="slide-up"
          imagePosition="right"
          buttons={[{ text: "Schedule Call", href: "#" }]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="contact-support" data-section="contact-support">
        <MetricCardTwo
          title="Support Response Metrics"
          description="We guarantee fast and professional service for all inquiries."
          tag="Service Levels"
          tagIcon={BarChart3}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          metrics={[
            {
              id: "1",              value: "<2hr",              description: "Avg Response Time"},
            {
              id: "2",              value: "96%",              description: "First-Contact Resolution"},
            {
              id: "3",              value: "4.9/5",              description: "Satisfaction Rating"},
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="scale-rotate"
          buttons={[{ text: "View Testimonials", href: "/" }]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="contact-form-cta" data-section="contact-form-cta">
        <ContactCTA
          tag="Send Us a Message"
          tagIcon={Rocket}
          tagAnimation="slide-up"
          title="Request More Information"
          description="Fill out the form below and our team will get back to you with detailed information about how LogisticsPro can transform your logistics operations."
          buttons={[
            { text: "Contact Form", href: "#" },
            { text: "Request Demo", onClick: () => {} },
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "gradient-bars" }}
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="LogisticsPro"
          leftLink={{ text: "Privacy Policy", href: "#" }}
          rightLink={{ text: "Terms of Service", href: "#" }}
        />
      </div>
    </ThemeProvider>
  );
}