"use client";

import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import MediaAbout from '@/components/sections/about/MediaAbout';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterBase from '@/components/sections/footer/FooterBase';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Briefcase, Award, Phone, Lock, Bell, BarChart3, Users, MessageSquare, Calendar, FileText, Settings, Download, Zap } from "lucide-react";
import Link from "next/link";

export default function ServicesPage() {
  const navItems = [
    { name: "Home", id: "/" },
    { name: "About", id: "/about" },
    { name: "Services", id: "/services" },
    { name: "Reviews", id: "/reviews" },
    { name: "Contact", id: "/contact" },
  ];

  const footerColumns = [
    {
      title: "Company",
      items: [
        { label: "Home", href: "/" },
        { label: "About", href: "/about" },
        { label: "Services", href: "/services" },
        { label: "Reviews", href: "/reviews" },
      ],
    },
    {
      title: "Services",
      items: [
        { label: "Business Strategy", href: "/services" },
        { label: "Marketing Plans", href: "/services" },
        { label: "Website Design", href: "/services" },
        { label: "Growth Advisory", href: "/services" },
      ],
    },
    {
      title: "Contact",
      items: [
        { label: "Schedule Call", href: "/contact" },
        { label: "Email: john@mooseconsulting.com", href: "mailto:john@mooseconsulting.com" },
        { label: "Phone: (555) 123-4567", href: "tel:+15551234567" },
        { label: "Red Bank, NJ 07701", href: "#" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="compact"
      sizing="largeSmallSizeMediumTitles"
      background="noise"
      cardStyle="gradient-mesh"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="The Moose Consulting"
          navItems={navItems}
          button={{
            text: "Schedule Consultation",
            href: "/contact",
          }}
        />
      </div>

      <div id="services-features" data-section="services-features">
        <FeatureBento
          title="Comprehensive Consulting Services"
          description="We offer end-to-end consulting solutions tailored to your business needs. From strategic planning to digital transformation, our services are designed to drive real, measurable results."
          tag="Our Services"
          tagIcon={Briefcase}
          tagAnimation="slide-up"
          features={[
            {
              title: "Business Strategy Consulting",
              description: "We work with you to develop clear, actionable business strategies. Our process includes market analysis, competitive positioning, opportunity identification, and a comprehensive roadmap for achieving your growth goals.",
              bentoComponent: "globe",
            },
            {
              title: "Marketing Plan Development",
              description: "From content strategy to lead generation systems, we build comprehensive marketing plans that attract your ideal clients. We focus on ROI and sustainable growth for your business.",
              bentoComponent: "animated-bar-chart",
            },
            {
              title: "Website Design & Development",
              description: "Modern, high-converting websites that showcase your expertise and turn visitors into leads. Our web solutions are mobile-optimized, fast, and designed for measurable business results.",
              bentoComponent: "phone",
              statusIcon: Lock,
              alertIcon: Bell,
              alertTitle: "New Lead Inquiry",
              alertMessage: "You have a new consultation request",
              apps: [
                { name: "Analytics", icon: BarChart3 },
                { name: "Contacts", icon: Users },
                { name: "Messages", icon: MessageSquare },
                { name: "Calendar", icon: Calendar },
                { name: "Reports", icon: FileText },
                { name: "Settings", icon: Settings },
                { name: "Export", icon: Download },
                { name: "Integrations", icon: Zap },
              ],
            },
            {
              title: "Growth Advisory & Optimization",
              description: "Ongoing strategic guidance to scale your business. We monitor performance, identify optimization opportunities, and help you stay ahead of market changes.",
              bentoComponent: "line-chart",
            },
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={true}
          carouselMode="buttons"
        />
      </div>

      <div id="services-approach" data-section="services-approach">
        <MediaAbout
          title="Our Service Approach & Guarantee"
          description="We believe in partnership, not one-off consulting. Our process is collaborative, transparent, and results-focused. We start with a thorough understanding of your business, develop strategic recommendations, and support your implementation. You'll receive regular progress reports and strategic adjustments to ensure we achieve your goals."
          tag="How We Work"
          tagIcon={Award}
          tagAnimation="slide-up"
          buttons={[
            { text: "Schedule Free Consultation", href: "/contact" },
            { text: "Learn About John", href: "/about" },
          ]}
          buttonAnimation="blur-reveal"
          imageSrc="http://img.b2bpic.net/free-photo/business-scene-top-view_23-2147626514.jpg"
          imageAlt="Strategic consulting and business planning"
          useInvertedBackground={false}
        />
      </div>

      <div id="services-cta" data-section="services-cta">
        <ContactCTA
          tag="Ready to Get Started?"
          tagIcon={Phone}
          tagAnimation="slide-up"
          title="Let's Discuss Your Business Challenges"
          description="Schedule a free 30-minute strategy session with John. We'll discuss your business goals, identify key opportunities, and outline a plan to achieve measurable growth. No obligation, just honest, expert advice."
          buttons={[
            { text: "Schedule Your Session", href: "mailto:john@mooseconsulting.com?subject=Services%20Inquiry" },
            { text: "Call (555) 123-4567", href: "tel:+15551234567" },
          ]}
          buttonAnimation="blur-reveal"
          background={{ variant: "noise" }}
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="The Moose Consulting"
          copyrightText="© 2025 The Moose Consulting. All rights reserved."
          columns={footerColumns}
        />
      </div>
    </ThemeProvider>
  );
}