"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import TextAbout from "@/components/sections/about/TextAbout";
import ContactText from "@/components/sections/contact/ContactText";
import FooterCard from "@/components/sections/footer/FooterCard";
import Link from "next/link";
import { Linkedin, Facebook, Mail } from "lucide-react";

export default function ContactPage() {
  const navItems = [
    { name: "Services", id: "/services" },
    { name: "How It Works", id: "/#roadmap" },
    { name: "Guarantee", id: "/#guarantee" },
    { name: "Apply", id: "/contact" },
  ];

  const navButton = {
    text: "Start Your Blitz",    href: "#contact"};

  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="medium"
      sizing="medium"
      background="circleGradient"
      cardStyle="layered-gradient"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="medium"
    >
      {/* Navbar */}
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="FleetFill AI"
          navItems={navItems}
          button={navButton}
          animateOnLoad={true}
        />
      </div>

      {/* Contact Introduction Section */}
      <div id="contact-intro" data-section="contact-intro">
        <TextAbout
          title="Ready to Transform Your Equipment Rental Business?"
          useInvertedBackground={false}
          buttons={[]}
        />
      </div>

      {/* Contact CTA Section */}
      <div id="contact" data-section="contact">
        <ContactText
          text="Are You Ready to Scale? We only take 3 new partners a month to make sure every yard gets our full attention. Apply below to see if your yard is ready for the Blitz. Fill out the form and our team will review your application within 24 hours."
          animationType="entrance-slide"
          background={{ variant: "plain" }}
          useInvertedBackground={false}
          buttons={[]}
        />
      </div>

      {/* Application Details Section */}
      <div id="contact-details" data-section="contact-details">
        <TextAbout
          title="What happens next? We review applications daily. If your yard is a fit, we schedule your free 7-day Blitz within 48 hours. If we are not a fit, we will tell you honestly. No pressure, no games. Just real partnerships for real growth."
          useInvertedBackground={true}
          buttons={[]}
        />
      </div>

      {/* Footer */}
      <div id="footer" data-section="footer">
        <FooterCard
          logoText="FleetFill AI"
          copyrightText="© 2025 FleetFill AI | Your Equipment Rental Growth Partner"
          socialLinks={[
            {
              icon: Linkedin,
              href: "https://linkedin.com/company/fleetfill-ai",              ariaLabel: "LinkedIn"},
            {
              icon: Facebook,
              href: "https://facebook.com/fleetfillai",              ariaLabel: "Facebook"},
            {
              icon: Mail,
              href: "mailto:partners@fleetfill.ai",              ariaLabel: "Email"},
          ]}
        />
      </div>
    </ThemeProvider>
  );
}