"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
import FeatureCardMedia from "@/components/sections/feature/FeatureCardMedia";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import ProductCardFour from "@/components/sections/product/ProductCardFour";
import MetricCardTen from "@/components/sections/metrics/MetricCardTen";
import TeamCardFive from "@/components/sections/team/TeamCardFive";
import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCardFive";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import Link from "next/link";
import { Sparkles, CheckCircle, Trophy, TrendingUp, Users, MessageCircle } from "lucide-react";

export default function HomePage() {
  const navItems = [
    { name: "Home", id: "home" },
    { name: "Services", id: "services" },
    { name: "Work", id: "work" },
    { name: "Team", id: "team" },
    { name: "Pricing", id: "pricing" },
    { name: "Contact", id: "contact" },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="small"
      sizing="mediumLargeSizeLargeTitles"
      background="grid"
      cardStyle="layered-gradient"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      {/* Navbar */}
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={navItems}
          brandName="SocialVibe Agency"
          bottomLeftText="Premium Social Strategy"
          bottomRightText="hello@socialvibe.com"
        />
      </div>

      {/* Hero Section */}
      <div id="hero" data-section="hero" className="mx-auto px-4 md:px-6">
        <HeroBillboardGallery
          title="Social Media Excellence at Scale"
          description="We craft compelling digital narratives that transform brands into industry leaders. Strategic content, authentic engagement, measurable growth."
          tag="Premium Social Strategy"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          buttons={[
            {
              text: "Start Your Journey",
              href: "/contact",
            },
            {
              text: "View Our Work",
              href: "/work",
            },
          ]}
          buttonAnimation="slide-up"
          background={{
            variant: "radial-gradient",
          }}
          mediaItems={[
            {
              imageSrc: "http://img.b2bpic.net/free-photo/company-analyst-studying-business-activity-progress-achieving-strategic-goals_482257-91239.jpg",
              imageAlt: "Social media strategy dashboard",
            },
            {
              imageSrc: "http://img.b2bpic.net/free-vector/gradient-marketing-agency-template-design_23-2150583463.jpg",
              imageAlt: "Instagram feed grid beautiful aesthetic",
            },
            {
              imageSrc: "http://img.b2bpic.net/free-photo/young-blogger-man-is-posing-his-mini-camera-by-winking-blue-background_176474-118018.jpg",
              imageAlt: "TikTok viral video trending content creator",
            },
            {
              imageSrc: "http://img.b2bpic.net/free-photo/nexus-bring-communicate-cloud-your-google_1421-371.jpg",
              imageAlt: "LinkedIn professional content networking platform",
            },
            {
              imageSrc: "http://img.b2bpic.net/free-photo/young-vlogger-presenting-special-giveaway-his-followers-famous-influencer-creative-content-creator_482257-24907.jpg",
              imageAlt: "YouTube channel optimization video marketing",
            },
            {
              imageSrc: "http://img.b2bpic.net/free-photo/attractive-woman-short-black-dress-chair-holding-phone-glass-cappuccino_197531-1115.jpg",
              imageAlt: "Twitter X social network communication",
            },
          ]}
          mediaAnimation="slide-up"
          ariaLabel="Hero section showcasing social media expertise"
        />
      </div>

      {/* Services Overview Section */}
      <div id="services" data-section="services" className="mx-auto px-4 md:px-6">
        <FeatureCardMedia
          title="Our Services"
          description="Comprehensive social media solutions designed for brands that refuse to blend in"
          tag="What We Offer"
          tagIcon={CheckCircle}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          features={[
            {
              id: "strategy",
              title: "Social Strategy",
              description: "Data-driven content strategies that align with your brand voice and business objectives. We analyze trends, audience behavior, and competitive landscape.",
              tag: "Strategic Planning",
              imageSrc: "http://img.b2bpic.net/free-photo/business-work-area_1388-82.jpg",
              imageAlt: "Strategic planning dashboard",
              buttons: [
                {
                  text: "Learn More",
                  href: "/services",
                },
              ],
            },
            {
              id: "content",
              title: "Content Creation",
              description: "High-quality, engaging content that resonates with your audience. From reels to stories to long-form content, we create across all platforms.",
              tag: "Creative Excellence",
              imageSrc: "http://img.b2bpic.net/free-photo/couple-taking-photos-light-movie-projector_23-2149377351.jpg",
              imageAlt: "Creative content production",
              buttons: [
                {
                  text: "Learn More",
                  href: "/services",
                },
              ],
            },
            {
              id: "community",
              title: "Community Management",
              description: "Real-time engagement and relationship building. We manage your community, respond to comments, and foster genuine connections with your audience.",
              tag: "Engagement",
              imageSrc: "http://img.b2bpic.net/free-photo/multiracial-group-four-friends-having-coffee-together_1139-1021.jpg",
              imageAlt: "Community interaction management",
              buttons: [
                {
                  text: "Learn More",
                  href: "/services",
                },
              ],
            },
            {
              id: "analytics",
              title: "Analytics & Reporting",
              description: "Comprehensive performance tracking and insights. We measure what matters and optimize continuously for better results.",
              tag: "Data-Driven",
              imageSrc: "http://img.b2bpic.net/free-photo/data-analysis-marketing-business-report-concept_53876-124759.jpg",
              imageAlt: "Analytics dashboard with performance metrics",
              buttons: [
                {
                  text: "Learn More",
                  href: "/services",
                },
              ],
            },
          ]}
        />
      </div>

      {/* Social Proof Section */}
      <div id="social-proof" data-section="social-proof" className="mx-auto px-4 md:px-6">
        <SocialProofOne
          title="Trusted by Industry Leaders"
          description="The world's most innovative brands choose SocialVibe for social media excellence"
          names={[
            "TechCorp",
            "FashionBrand",
            "EcommerceHub",
            "HealthWellness",
            "FinanceGlobal",
            "EdTechLeader",
            "MediaNetwork",
            "SustainableLiving",
          ]}
          logos={[
            "http://img.b2bpic.net/free-vector/coloured-logo-template_1156-109.jpg",
            "http://img.b2bpic.net/free-vector/gradient-luxury-logo-template_23-2150854966.jpg",
            "http://img.b2bpic.net/free-vector/gradient-e-commerce-logo-collection_23-2148965879.jpg",
            "http://img.b2bpic.net/free-vector/gradient-holistic-logo-collection_23-2148827917.jpg",
            "http://img.b2bpic.net/free-vector/modern-money-logo-concept_23-2147882627.jpg",
            "http://img.b2bpic.net/free-vector/hand-drawn-back-school-labels-collection_23-2149047577.jpg",
            "http://img.b2bpic.net/free-vector/colorful-latest-news-banners_23-2148151153.jpg",
            "http://img.b2bpic.net/free-vector/squared-eco-logo_1025-316.jpg",
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
          showCard={true}
        />
      </div>

      {/* Case Studies Section */}
      <div id="case-studies" data-section="case-studies" className="mx-auto px-4 md:px-6">
        <ProductCardFour
          title="Case Studies"
          description="Real results from real brands. See how we've transformed social presence into measurable business impact."
          tag="Success Stories"
          tagIcon={Trophy}
          tagAnimation="slide-up"
          textboxLayout="split"
          useInvertedBackground={false}
          animationType="scale-rotate"
          gridVariant="bento-grid"
          products={[
            {
              id: "case-1",
              name: "Fashion Brand Growth",
              price: "340% Engagement",
              variant: "Instagram Takeover",
              imageSrc: "http://img.b2bpic.net/free-photo/cute-young-woman-talking-about-clothing-accessories-her-fashion-video-blog_662251-2238.jpg",
              imageAlt: "Fashion brand case study results",
            },
            {
              id: "case-2",
              name: "SaaS Market Expansion",
              price: "2.5M Impressions",
              variant: "LinkedIn Strategy",
              imageSrc: "http://img.b2bpic.net/free-photo/focused-workaholic-entrepreneur-man-working-overtime-presenting-company-statistics_482257-6363.jpg",
              imageAlt: "SaaS platform expansion results",
            },
            {
              id: "case-3",
              name: "E-commerce Boom",
              price: "520% ROI",
              variant: "TikTok Campaign",
              imageSrc: "http://img.b2bpic.net/free-photo/woman-holding-smartphone-with-inscription-screen_23-2147652183.jpg",
              imageAlt: "E-commerce sales growth",
            },
            {
              id: "case-4",
              name: "Brand Awareness",
              price: "1.2M New Followers",
              variant: "Multi-Platform",
              imageSrc: "http://img.b2bpic.net/free-photo/laptop-computer-with-marketing-graphs-screen-standing-table-startup-office-while-diverse-team-sharing-papers-with-company-turnover-it-multiethnic-businesspeople-analyzing-strategy_482257-40096.jpg",
              imageAlt: "Brand awareness campaign",
            },
          ]}
        />
      </div>

      {/* Metrics Section */}
      <div id="metrics" data-section="metrics" className="mx-auto px-4 md:px-6">
        <MetricCardTen
          title="Our Impact"
          description="Numbers that speak to our commitment to excellence and client success"
          tag="Performance Metrics"
          tagIcon={TrendingUp}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="scale-rotate"
          metrics={[
            {
              id: "clients",
              title: "Active Clients",
              subtitle: "Brands we partner with",
              category: "Portfolio",
              value: "150+",
            },
            {
              id: "followers",
              title: "Followers Generated",
              subtitle: "Total audience growth",
              category: "Growth",
              value: "45M+",
            },
            {
              id: "engagement",
              title: "Avg Engagement Rate",
              subtitle: "Industry-leading",
              category: "Quality",
              value: "12.4%",
            },
            {
              id: "campaigns",
              title: "Campaigns Launched",
              subtitle: "Year-over-year",
              category: "Experience",
              value: "2,847",
            },
          ]}
        />
      </div>

      {/* Team Section */}
      <div id="team" data-section="team" className="mx-auto px-4 md:px-6">
        <TeamCardFive
          title="Meet Our Team"
          description="Passionate creatives and strategists dedicated to your social success"
          tag="Our Experts"
          tagIcon={Users}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          team={[
            {
              id: "member-1",
              name: "Sarah Chen",
              role: "Creative Director",
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-middle-aged-hispanic-cheerful-female-with-curly-hair_181624-53321.jpg",
              imageAlt: "Sarah Chen, Creative Director",
            },
            {
              id: "member-2",
              name: "Marcus Johnson",
              role: "Strategy Lead",
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-pensive-office-worker_329181-16086.jpg",
              imageAlt: "Marcus Johnson, Strategy Lead",
            },
            {
              id: "member-3",
              name: "Emma Rodriguez",
              role: "Content Specialist",
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-middle-aged-hispanic-cheerful-female-with-curly-hair_181624-53321.jpg",
              imageAlt: "Emma Rodriguez, Content Specialist",
            },
            {
              id: "member-4",
              name: "Alex Thompson",
              role: "Analytics Expert",
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-serious-manager-with-digital-tablet_1262-1058.jpg",
              imageAlt: "Alex Thompson, Analytics Expert",
            },
            {
              id: "member-5",
              name: "Jasmine Patel",
              role: "Community Manager",
              imageSrc: "http://img.b2bpic.net/free-photo/smiley-women-working-together-outdoors_23-2148416453.jpg",
              imageAlt: "Jasmine Patel, Community Manager",
            },
          ]}
        />
      </div>

      {/* Testimonials Section */}
      <div id="testimonials" data-section="testimonials" className="mx-auto px-4 md:px-6">
        <TestimonialCardFive
          title="What Our Clients Say"
          description="Real feedback from brands we've transformed"
          tag="Client Testimonials"
          tagIcon={MessageCircle}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          testimonials={[
            {
              id: "testimonial-1",
              name: "Jessica Liu",
              date: "March 2024",
              title: "CEO, TechVenture",
              quote: "SocialVibe transformed our brand presence. Within 6 months, our follower count tripled and engagement became genuine. They truly understand strategy.",
              tag: "Tech Industry",
              avatarSrc: "http://img.b2bpic.net/free-photo/carefree-african-american-businesswoman-showing-tongue-having-fun_176420-26990.jpg",
              avatarAlt: "Jessica Liu",
            },
            {
              id: "testimonial-2",
              name: "David Park",
              date: "February 2024",
              title: "Marketing Manager, FashionLux",
              quote: "The content quality and consistency exceeded our expectations. Our audience feels more connected to our brand than ever before.",
              tag: "Fashion & Beauty",
              avatarSrc: "http://img.b2bpic.net/free-photo/pretty-smiling-business-woman-standing-window_1262-1069.jpg",
              avatarAlt: "David Park",
            },
            {
              id: "testimonial-3",
              name: "Maria Santos",
              date: "January 2024",
              title: "Founder, EcomPro",
              quote: "They delivered a 520% ROI on our social campaigns. Professional, creative, and deeply committed to results.",
              tag: "E-commerce",
              avatarSrc: "http://img.b2bpic.net/free-vector/women-avatar-collection_24908-60281.jpg",
              avatarAlt: "Maria Santos",
            },
            {
              id: "testimonial-4",
              name: "Robert Chen",
              date: "December 2023",
              title: "Director, WellnessHub",
              quote: "Outstanding team. They balanced creativity with data-driven decisions. Our brand story is now resonating with our target audience perfectly.",
              tag: "Health & Wellness",
              avatarSrc: "http://img.b2bpic.net/free-photo/proud-businessman-with-his-company_1098-2864.jpg",
              avatarAlt: "Robert Chen",
            },
            {
              id: "testimonial-5",
              name: "Sophia Anderson",
              date: "November 2023",
              title: "VP Marketing, EdTechGlobal",
              quote: "Their strategic approach and execution are flawless. We've seen consistent growth across all platforms and meaningful community engagement.",
              tag: "Education",
              avatarSrc: "http://img.b2bpic.net/free-photo/portrait-african-businesswoman-manage-meeting_329181-20101.jpg",
              avatarAlt: "Sophia Anderson",
            },
            {
              id: "testimonial-6",
              name: "Thomas Morgan",
              date: "October 2023",
              title: "CEO, SustainableBrand",
              quote: "They understood our mission and crafted content that attracted our ideal customers. Partner with them without hesitation.",
              tag: "Sustainability",
              avatarSrc: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1602.jpg",
              avatarAlt: "Thomas Morgan",
            },
          ]}
        />
      </div>

      {/* Footer */}
      <div id="footer" data-section="footer" className="mx-auto px-4 md:px-6">
        <FooterLogoReveal
          logoText="SocialVibe"
          leftLink={{
            text: "Privacy Policy",
            href: "#",
          }}
          rightLink={{
            text: "© 2024 SocialVibe Agency",
            href: "/",
          }}
        />
      </div>
    </ThemeProvider>
  );
}