"use client";

import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import MediaAbout from '@/components/sections/about/MediaAbout';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import FooterBase from '@/components/sections/footer/FooterBase';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Award, Zap, Phone } from "lucide-react";
import Link from "next/link";

export default function AboutPage() {
  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="circleGradient"
      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="about-hero" data-section="about-hero">
        <MediaAbout
          title="About John & The Moose Consulting"
          description="With 15+ years of experience in business strategy, marketing, and digital transformation, John has helped hundreds of entrepreneurs and small business owners in Red Bank and Monmouth County achieve their growth goals. His approach combines strategic thinking with practical execution to deliver measurable results."
          tag="About Us"
          tagIcon={Award}
          tagAnimation="slide-up"
          buttons={[
            { text: "Schedule Strategy Session", href: "/contact" },
            { text: "View Our Services", href: "/services" },
          ]}
          buttonAnimation="blur-reveal"
          imageSrc="http://img.b2bpic.net/free-photo/portrait-successful-businessmen-office-two-serious-man-suits-working-with-computer-table-making-decisions-developing-strategy-business-growth-business-growth-finance-concept_74855-24621.jpg"
          imageAlt="John, Business Consultant at The Moose Consulting"
          useInvertedBackground={false}
        />
      </div>

      <div id="expertise" data-section="expertise">
        <MetricCardSeven
          title="Years of Proven Expertise"
          description="Our track record speaks for itself. Here's what John brings to every client engagement."
          tag="Expertise"
          tagIcon={Zap}
          tagAnimation="slide-up"
          metrics={[
            {
              id: "1",              value: "15+",              title: "Years of Consulting Experience",              items: ["Business strategy development", "Marketing strategy & execution", "Digital transformation leadership"],
            },
            {
              id: "2",              value: "300+",              title: "Business Growth Projects",              items: ["Local & regional focus", "Diverse industries served", "Measurable ROI for each client"],
            },
            {
              id: "3",              value: "4.9★",              title: "Average Client Rating",              items: ["Verified reviews & testimonials", "High referral rate", "Long-term partnerships"],
            },
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={true}
        />
      </div>

      <div id="client-testimonial" data-section="client-testimonial">
        <TestimonialCardFifteen
          testimonial="Working with John transformed how we approach our marketing and business strategy. His insights helped us increase our lead generation by over 200% in the first year. He's not just a consultant—he's a true partner in our growth."
          rating={5}
          author="Michael Chen, Business Owner"
          avatars={[
            { src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", alt: "Client 1" },
            { src: "http://img.b2bpic.net/free-photo/successful-businesswoman-ready-challenges_1163-4336.jpg", alt: "Client 2" },
            { src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", alt: "Client 3" },
            { src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", alt: "Client 4" },
            { src: "http://img.b2bpic.net/free-photo/confident-entrepreneur-satisfied-with-own-success_1163-5474.jpg", alt: "Client 5" },
            { src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", alt: "Client 6" },
          ]}
          ratingAnimation="slide-up"
          avatarsAnimation="slide-up"
          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>
  );
}