"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import MediaSplitAbout from '@/components/sections/about/MediaSplitAbout';
import FeatureCardTwenty from '@/components/sections/feature/FeatureCardTwenty';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Sparkles, CheckCircle, Award, TrendingUp, Users, Target, Zap, Linkedin, Twitter, Globe, Github, Mail } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="small"
      sizing="largeSizeMediumTitles"
      background="radialGradient"
      cardStyle="inset"
      primaryButtonStyle="layered-depth"
      secondaryButtonStyle="layered"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Apex Marketing"
          navItems={[
            { name: "Services", id: "services" },
            { name: "Work", id: "work" },
            { name: "About", id: "about" },
            { name: "Team", id: "team" },
            { name: "Contact", id: "contact" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardCarousel
          title="Bold Marketing Ideas That Drive Results"
          description="We craft campaigns that capture attention, engage audiences, and deliver measurable growth for your brand."
          tag="Creative Agency"
          tagIcon={Sparkles}
          mediaItems={[
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766787039960-cdlv432a.jpg", imageAlt: "Portfolio work showcase 1" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766787040886-0ogjgmx4.jpg", imageAlt: "Portfolio work showcase 2" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766787041844-tzssa0wc.jpg", imageAlt: "Portfolio work showcase 3" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766735973071-k7swxkeq.jpg", imageAlt: "Portfolio work showcase 4" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766787042710-od9z7ohf.jpg", imageAlt: "Portfolio work showcase 5" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766787043581-j2dexdh5.jpg", imageAlt: "Portfolio work showcase 6" }
          ]}
          buttons={[
            { text: "View Our Work", href: "work" },
            { text: "Start a Project", href: "contact" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <MediaSplitAbout
          title="Strategy Meets Creativity"
          description="We blend data-driven insights with creative excellence to build marketing solutions that resonate. With over a decade of experience, we've helped brands transform their market presence and achieve their boldest goals."
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766320179601-o8gildtx.jpg"
          imageAlt="Our talented marketing team collaborating"
          imagePosition="right"
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Learn More About Us", href: "https://example.com" }
          ]}
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardTwenty
          title="Our Core Services"
          description="Comprehensive marketing solutions tailored to your business needs"
          tag="What We Do"
          tagIcon={CheckCircle}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          images={[
            { id: 1, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140103339-f3be0gdh.jpg", imageAlt: "Strategic marketing planning" },
            { id: 2, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766735973071-k7swxkeq.jpg", imageAlt: "Creative campaign development" },
            { id: 3, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766890620033-sckgfvwd.jpg", imageAlt: "Digital marketing solutions" },
            { id: 4, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766320179601-o8gildtx.jpg", imageAlt: "Analytics and performance tracking" }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardThree
          title="Our Impact"
          description="Proven results across every metric that matters to your business"
          tag="Success Stories"
          tagIcon={Award}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          metrics={[
            { id: "1", icon: TrendingUp, title: "Average ROI Increase", value: "247%" },
            { id: "2", icon: Users, title: "Brands Transformed", value: "150+" },
            { id: "3", icon: Target, title: "Campaigns Delivered", value: "500+" },
            { id: "4", icon: Zap, title: "Client Retention", value: "92%" }
          ]}
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardTwo
          title="Meet Our Team"
          description="Creative minds and strategic thinkers dedicated to your success"
          tag="Leadership"
          tagIcon={Users}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          members={[
            {
              id: "1",
              name: "Sarah Chen",
              role: "Creative Director",
              description: "Award-winning creative strategist with 12 years in brand development and campaign innovation.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766163680798-oj3ju2na.jpg",
              imageAlt: "Sarah Chen",
              socialLinks: [
                { icon: Linkedin, url: "https://linkedin.com" },
                { icon: Twitter, url: "https://twitter.com" }
              ]
            },
            {
              id: "2",
              name: "Marcus Rodriguez",
              role: "Strategy Lead",
              description: "Data-driven strategist specializing in market analysis and growth optimization for tech and consumer brands.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766320176222-gp5rxgv7.jpg",
              imageAlt: "Marcus Rodriguez",
              socialLinks: [
                { icon: Linkedin, url: "https://linkedin.com" },
                { icon: Globe, url: "https://example.com" }
              ]
            },
            {
              id: "3",
              name: "Emma Watson",
              role: "Digital Designer",
              description: "Creative designer pushing boundaries in digital storytelling and visual brand experiences.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766318235322-2valyx4m.jpg",
              imageAlt: "Emma Watson",
              socialLinks: [
                { icon: Linkedin, url: "https://linkedin.com" },
                { icon: Github, url: "https://github.com" }
              ]
            },
            {
              id: "4",
              name: "James Park",
              role: "Account Director",
              description: "Client-focused account leader ensuring seamless collaboration and exceptional project delivery.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140150563-flh68m16.png",
              imageAlt: "James Park",
              socialLinks: [
                { icon: Linkedin, url: "https://linkedin.com" },
                { icon: Mail, url: "mailto:james@example.com" }
              ]
            }
          ]}
        />
      </div>

      <div id="testimonial" data-section="testimonial">
        <TestimonialCardFifteen
          testimonial="Apex transformed our entire marketing approach. Their strategic insight combined with creative execution took our brand awareness from zero to market leader in just 18 months. The results speak for themselves."
          rating={5}
          author="Victoria Summers, CEO of TechFlow"
          avatars={[
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140101670-ttp7xdlv.jpg", alt: "Client testimonial" },
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184707769-zzdny5qa.jpg", alt: "Client testimonial" },
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766399071735-aq7lptqc.jpg", alt: "Client testimonial" },
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766399072529-1z8sle2r.jpg", alt: "Client testimonial" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get In Touch"
          tagIcon={Mail}
          title="Ready to Transform Your Marketing?"
          description="Let's discuss how our proven strategies can elevate your brand and drive meaningful results for your business."
          useInvertedBackground="noInvert"
          inputPlaceholder="your@email.com"
          buttonText="Start Conversation"
          termsText="We respect your privacy. Unsubscribe anytime."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="Apex"
        />
      </div>
    </ThemeProvider>
  );
}