"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import FeatureCardTen from "@/components/sections/feature/FeatureCardTen";
import FooterCard from "@/components/sections/footer/FooterCard";
import Link from "next/link";
import { MessageSquare, Phone, DollarSign, LayoutDashboard, MessageCircle, Repeat, Zap, Shield, Megaphone, Brain, AlertCircle, QrCode, Linkedin, Facebook, Mail, Check } from "lucide-react";

export default function ServicesPage() {
  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>

      {/* Services Feature Section */}
      <div id="services" data-section="services">
        <FeatureCardTen
          title="How We Grow Your Yard"
          description="Complete systems designed for equipment rental businesses. Simple to use. Powerful results."
          tag="Our Services"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={true}
          features={[
            {
              id: "1",              title: "Step 1: The Found Money Blitz",              description: "Free 7-day discovery that finds cash already in your business. We text your old leads and customers to get them renting again.",              media: {
                imageSrc: "http://img.b2bpic.net/free-vector/infographic-timeline-concept_23-2147848068.jpg?_wi=2",                imageAlt: "workflow process steps business growth"},
              items: [
                { icon: MessageSquare, text: "Text 100-500 old leads" },
                { icon: Phone, text: "We talk to them for you" },
                { icon: DollarSign, text: "Find lost revenue streams" },
              ],
              reverse: false,
            },
            {
              id: "2",              title: "Step 2: The Profit Recovery Engine",              description: "Fix your office and stop the daily money leaks. All-in-one app that tracks every customer and machine on your phone.",              media: {
                imageSrc: "http://img.b2bpic.net/free-photo/young-employees-sitting-office-table-using-laptop_146671-15649.jpg?_wi=2",                imageAlt: "office team work system management"},
              items: [
                { icon: LayoutDashboard, text: "Rental Command Center" },
                { icon: MessageCircle, text: "AI Foreman on WhatsApp" },
                { icon: Repeat, text: "Extension Bot for retention" },
              ],
              reverse: true,
            },
            {
              id: "3",              title: "Step 3: The Market Dominance Engine",              description: "Turn on the lead faucet so you are always busy. We make sure you are the first person contractors call.",              media: {
                imageSrc: "http://img.b2bpic.net/free-photo/factory-worker-writing-ai-code-workstation-photovoltaic-plant_482257-125747.jpg?_wi=2",                imageAlt: "automation ai technology smart system"},
              items: [
                { icon: Zap, text: "30-second strike sales calls" },
                { icon: Shield, text: "AI Gatekeeper filters customers" },
                { icon: Megaphone, text: "Local Google & Facebook ads" },
              ],
              reverse: false,
            },
          ]}
        />
      </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>
  );
}