"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroCentered from '@/components/sections/hero/HeroCentered';
import MediaAbout from '@/components/sections/about/MediaAbout';
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import FaqBase from '@/components/sections/faq/FaqBase';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { Sparkles, CheckCircle, Star, HelpCircle, 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" },
  ];

  const footerColumns = [
    {
      title: "Company",
      items: [
        { label: "About", href: "/about" },
        { label: "Services", href: "/services" },
        { label: "Work", href: "/work" },
        { label: "Team", href: "/about" },
      ],
    },
    {
      title: "Resources",
      items: [
        { label: "Pricing", href: "/pricing" },
        { label: "FAQ", href: "#faq" },
        { label: "Blog", href: "/blog" },
        { label: "Case Studies", href: "/work" },
      ],
    },
    {
      title: "Social",
      items: [
        { label: "Instagram", href: "https://instagram.com" },
        { label: "LinkedIn", href: "https://linkedin.com" },
        { label: "Twitter", href: "https://twitter.com" },
        { label: "TikTok", href: "https://tiktok.com" },
      ],
    },
    {
      title: "Legal",
      items: [
        { label: "Privacy Policy", href: "#privacy" },
        { label: "Terms of Service", href: "#terms" },
        { label: "Cookie Policy", href: "#cookies" },
        { label: "Contact", href: "/contact" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="compact"
      sizing="mediumLarge"
      background="aurora"
      cardStyle="subtle-shadow"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={navItems}
          brandName="Elevate"
          bottomLeftText="Digital Excellence"
          bottomRightText="hello@elevate.agency"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroCentered
          title="Transform Your Brand's Social Presence"
          description="Elite social media strategies crafted for luxury brands and ambitious startups. We amplify your voice, engage your audience, and drive measurable results."
          background={{ variant: "aurora" }}
          avatars={[
            {
              src: "http://img.b2bpic.net/free-photo/portrait-grey-haired-businessman-standing_74855-10324.jpg",
              alt: "Team member 1",
            },
            {
              src: "http://img.b2bpic.net/free-photo/portrait-fashionable-well-dressed-man-with-beard-posing-outdoors_1328-3268.jpg",
              alt: "Team member 2",
            },
            {
              src: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg",
              alt: "Team member 3",
            },
            {
              src: "http://img.b2bpic.net/free-photo/medium-shot-man-posing-studio_23-2150275677.jpg",
              alt: "Team member 4",
            },
            {
              src: "http://img.b2bpic.net/free-photo/business-woman-by-skyscraper_1303-11015.jpg",
              alt: "Team member 5",
            },
          ]}
          avatarText="Join 50+ brands trusting Elevate"
          buttons={[
            { text: "Start Your Journey", href: "/contact" },
            { text: "View Case Studies", href: "/work" },
          ]}
          buttonAnimation="slide-up"
          ariaLabel="Hero section - Social media agency"
        />
      </div>

      <div id="about" data-section="about">
        <MediaAbout
          title="Why Leading Brands Choose Elevate"
          description="We combine strategic expertise, creative excellence, and data-driven insights to transform your social media into a powerful business asset. Our holistic approach ensures every campaign drives authentic engagement and meaningful results."
          tag="Our Approach"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          buttons={[{ text: "Learn More", href: "/about" }]}
          buttonAnimation="slide-up"
          imageSrc="http://img.b2bpic.net/free-photo/business-people-meeting-design-ideas-concept-business-planning_1421-390.jpg"
          imageAlt="Elevate team collaboration"
          useInvertedBackground={false}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTwentyThree
          title="Our Premium Services"
          description="Comprehensive social media solutions designed for maximum impact and sustainable growth."
          tag="What We Offer"
          tagIcon={CheckCircle}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          animationType="slide-up"
          features={[
            {
              id: "strategy",
              title: "Strategic Planning",
              tags: ["Brand Positioning", "Audience Research", "Campaign Framework"],
              imageSrc: "http://img.b2bpic.net/free-photo/woman-wheelchair-giving-presentation-work_23-2148496217.jpg",
              imageAlt: "Strategic planning session",
            },
            {
              id: "content",
              title: "Content Creation",
              tags: ["Video Production", "Copywriting", "Visual Design"],
              imageSrc: "http://img.b2bpic.net/free-photo/lifestyle-blogger-records-video-her-room-has-camera-coffee-table-shows-eyeshadow-palette_1258-281853.jpg",
              imageAlt: "Content creation team",
            },
            {
              id: "analytics",
              title: "Performance Analytics",
              tags: ["Real-time Tracking", "ROI Measurement", "Optimization"],
              imageSrc: "http://img.b2bpic.net/free-photo/ceo-management-team-gathering-boardroom-project-briefing_482257-122918.jpg",
              imageAlt: "Analytics dashboard",
            },
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          testimonials={[
            {
              id: "1",
              name: "Sarah Mitchell",
              imageSrc: "http://img.b2bpic.net/free-photo/smiley-businesswoman-using-sign-language-outdoors-work_23-2148740320.jpg",
              imageAlt: "Sarah Mitchell CEO",
            },
            {
              id: "2",
              name: "James Chen",
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-young-man-black-jacket_23-2147955449.jpg",
              imageAlt: "James Chen Founder",
            },
            {
              id: "3",
              name: "Victoria Rodriguez",
              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-stylish-pretty-young-woman-look-professional-cross-hands-chest-smiling-confident-camera-wear-glasses-standing-near-reception-office-hall-discuss-business_197531-22165.jpg",
              imageAlt: "Victoria Rodriguez CMO",
            },
            {
              id: "4",
              name: "Michael Thompson",
              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",
              imageAlt: "Michael Thompson CEO",
            },
            {
              id: "5",
              name: "Emma Watson",
              imageSrc: "http://img.b2bpic.net/free-photo/closeup-content-pretty-businesswoman-glasses_1262-1740.jpg",
              imageAlt: "Emma Watson Brand Director",
            },
            {
              id: "6",
              name: "David Kumar",
              imageSrc: "http://img.b2bpic.net/free-photo/cheerful-boss-sitting-with-newspaper-table_1098-3037.jpg",
              imageAlt: "David Kumar Entrepreneur",
            },
          ]}
          cardTitle="Exceptional Results Speak Louder"
          cardTag="Client Success Stories"
          cardTagIcon={Star}
          cardAnimation="blur-reveal"
          useInvertedBackground={false}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardFourteen
          title="Proven Impact"
          tag="By The Numbers"
          tagAnimation="slide-up"
          metrics={[
            { id: "1", value: "250%", description: "Average engagement growth" },
            { id: "2", value: "50+", description: "Brands transformed" },
            { id: "3", value: "8.2M", description: "Total followers managed" },
            { id: "4", value: "10x", description: "ROI improvement on average" },
          ]}
          metricsAnimation="blur-reveal"
          useInvertedBackground={true}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqBase
          title="Frequently Asked Questions"
          description="Everything you need to know about working with Elevate."
          tag="FAQ"
          tagIcon={HelpCircle}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          faqsAnimation="blur-reveal"
          faqs={[
            {
              id: "1",
              title: "What platforms do you specialize in?",
              content: "We manage all major platforms including Instagram, TikTok, LinkedIn, YouTube, and Facebook. We also develop strategies for emerging platforms to keep your brand ahead of the curve.",
            },
            {
              id: "2",
              title: "How do you measure campaign success?",
              content: "We track comprehensive KPIs including engagement rate, follower growth, reach, impressions, conversion rate, and ROI. Monthly reports provide full transparency into campaign performance and strategic adjustments.",
            },
            {
              id: "3",
              title: "What's your onboarding process?",
              content: "We start with a discovery session to understand your brand, goals, and audience. Then we develop a customized strategy, create content calendars, and integrate with your systems. Launch typically takes 2-3 weeks.",
            },
            {
              id: "4",
              title: "Can you work with established brands?",
              content: "Absolutely. We specialize in scaling established brands and high-growth companies. Our enterprise plans are specifically designed for brands looking to maximize their social impact.",
            },
            {
              id: "5",
              title: "Do you offer crisis management?",
              content: "Yes. Our Professional and Enterprise plans include dedicated crisis management support. We have 24/7 monitoring and rapid response protocols to protect your brand reputation.",
            },
            {
              id: "6",
              title: "What's included in your content creation?",
              content: "Depending on your plan, we provide everything from daily posts to video production, copywriting, graphic design, and multimedia content optimized for each platform's unique requirements.",
            },
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get In Touch"
          title="Ready to Elevate Your Brand?"
          description="Let's discuss how we can transform your social media presence. Book a consultation with our team today."
          tagIcon={MessageCircle}
          tagAnimation="slide-up"
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={false}
          inputPlaceholder="Your email address"
          buttonText="Schedule Consultation"
          termsText="We respect your privacy. Your information is secure with us."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={footerColumns}
          copyrightText="© 2024 Elevate. All rights reserved. Premium Social Media Excellence."
        />
      </div>
    </ThemeProvider>
  );
}