"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Sparkles, Star, Rocket, Twitter, Linkedin, Instagram, Mail } from 'lucide-react';

export default function HomePage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="small"
      sizing="mediumSizeLargeTitles"
      background="plain"
      cardStyle="glass-elevated"
      primaryButtonStyle="flat"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="NEXUS Miami"
          navItems={[
            { name: "Home", id: "/" },
            { name: "About", id: "/about" },
            { name: "Services", id: "/services" },
            { name: "Team", id: "/team" },
            { name: "Contact", id: "/contact" }
          ]}
          button={{ text: "Get Started", href: "/contact" }}
          className="backdrop-blur-sm bg-background/50 border border-accent/20"
        />
      </div>

      <div id="hero" data-section="hero" className="min-h-screen flex items-center justify-center py-20">
        <div className="mx-auto px-4 md:px-6">
          <HeroSplitKpi
            title="Transform Your Brand Into a Digital Powerhouse"
            description="Elite marketing strategies crafted for ambitious brands. We blend data-driven insights with cutting-edge creativity to deliver exponential growth and measurable ROI."
            tag="Miami-based Agency"
            tagIcon={Sparkles}
            kpis={[
              { value: "300%", label: "Average Client Growth" },
              { value: "150+", label: "Brands Transformed" },
              { value: "24/7", label: "Campaign Optimization" }
            ]}
            enableKpiAnimation={true}
            imageSrc="https://img.b2bpic.net/free-photo/modern-office-space-with-futuristic-decor-furniture_23-2151797682.jpg"
            imageAlt="Futuristic Miami marketing agency office"
            imagePosition="right"
            buttons={[
              { text: "Schedule Consultation", href: "/contact" },
              { text: "View Portfolio", href: "/services" }
            ]}
            className="relative overflow-hidden"
            titleClassName="text-6xl md:text-7xl font-bold tracking-tight"
            descriptionClassName="text-lg md:text-xl text-accent/90 max-w-2xl"
          />
        </div>
      </div>

      <div id="testimonials" data-section="testimonials" className="py-24 bg-gradient-to-b from-transparent to-background-accent/5">
        <div className="mx-auto px-4 md:px-6">
          <TestimonialCardTwelve
            cardTitle="Trusted by leading brands and entrepreneurs worldwide"
            cardTag="Client Success Stories"
            cardTagIcon={Star}
            testimonials={[
              {
                id: "1",                name: "Sarah Johnson",                imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",                imageAlt: "Sarah Johnson"
              },
              {
                id: "2",                name: "Michael Rodriguez",                imageSrc: "https://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg",                imageAlt: "Michael Rodriguez"
              },
              {
                id: "3",                name: "Priya Patel",                imageSrc: "https://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg",                imageAlt: "Priya Patel"
              },
              {
                id: "4",                name: "David Chen",                imageSrc: "https://img.b2bpic.net/free-photo/closeup-handsome-middle-aged-business-leader_1262-4822.jpg",                imageAlt: "David Chen"
              }
            ]}
            useInvertedBackground="noInvert"
          />
        </div>
      </div>

      <div id="contact" data-section="contact" className="py-24">
        <div className="mx-auto px-4 md:px-6">
          <ContactCenter
            tag="Let's Connect"
            title="Ready to Transform Your Brand?"
            description="Get a personalized consultation with our strategy team. Let's discuss how we can drive your growth."
            tagIcon={Rocket}
            inputPlaceholder="Enter your email"
            buttonText="Get Consultation"
            termsText="We respect your privacy. Unsubscribe anytime."
            useInvertedBackground="noInvert"
            className="py-24"
          />
        </div>
      </div>

      <div id="footer" data-section="footer" className="border-t border-accent/20">
        <FooterCard
          logoText="NEXUS"
          copyrightText="© 2025 NEXUS Miami Marketing Agency. All rights reserved."
          socialLinks={[
            { icon: Twitter, href: "https://twitter.com/nexusmiami", ariaLabel: "Twitter" },
            { icon: Linkedin, href: "https://linkedin.com/company/nexusmiami", ariaLabel: "LinkedIn" },
            { icon: Instagram, href: "https://instagram.com/nexusmiami", ariaLabel: "Instagram" },
            { icon: Mail, href: "mailto:hello@nexusmiami.com", ariaLabel: "Email" }
          ]}
          className="border-t border-accent/20"
        />
      </div>
    </ThemeProvider>
  );
}