"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import TagAbout from '@/components/sections/about/TagAbout';
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
import BlogCardThree from '@/components/sections/blog/BlogCardThree';
import TeamCardFour from '@/components/sections/team/TeamCardFour';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Sparkles, Target, Award, Palette, TrendingUp, BookOpen, Users, MessageSquare, Zap, Quote } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="mediumSmall"
      sizing="large"
      background="noiseDiagonalGradient"
      cardStyle="outline"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Agency"
          navItems={[
            { name: "Services", id: "services" },
            { name: "Work", id: "work" },
            { name: "Team", id: "team" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardRotatedCarousel
          title="Transform Your Brand Through Strategic Creative"
          description="We craft compelling marketing campaigns that drive engagement, build brand loyalty, and deliver measurable results for ambitious businesses."
          tag="Creative Agency"
          tagIcon={Sparkles}
          buttons={[
            { text: "Start Your Project", href: "contact" },
            { text: "View Our Work", href: "work" }
          ]}
          carouselItems={[
            {
              id: "1",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766787039960-cdlv432a.jpg",
              imageAlt: "Digital marketing strategy"
            },
            {
              id: "2",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766787040886-0ogjgmx4.jpg",
              imageAlt: "Brand identity design"
            },
            {
              id: "3",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766787041844-tzssa0wc.jpg",
              imageAlt: "Social media campaign"
            },
            {
              id: "4",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766735973071-k7swxkeq.jpg",
              imageAlt: "Website design"
            },
            {
              id: "5",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766787042710-od9z7ohf.jpg",
              imageAlt: "Advertising campaign"
            },
            {
              id: "6",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766787043581-j2dexdh5.jpg",
              imageAlt: "Video content production"
            }
          ]}
          autoPlay={true}
          autoPlayInterval={4000}
        />
      </div>

      <div id="about" data-section="about">
        <TagAbout
          tag="About Us"
          description="We believe every brand has a unique story. Our mission is to unlock that story through strategic thinking, creative excellence, and data-driven insights. We partner with forward-thinking companies to create marketing experiences that resonate, inspire, and convert."
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardSix
          title="Our Strategic Process"
          description="We follow a proven methodology to deliver exceptional results"
          tag="Services"
          tagIcon={Target}
          features={[
            {
              id: 1,
              title: "Strategy & Discovery",
              description: "We dive deep into your business, market, and audience to develop a comprehensive marketing strategy tailored to your goals.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766320185368-un006460.jpg",
              imageAlt: "Strategy and discovery meeting"
            },
            {
              id: 2,
              title: "Creative Development",
              description: "Our creative team crafts compelling content, designs, and messaging that capture attention and communicate your unique value.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766787047188-fs8qws1k.jpg",
              imageAlt: "Creative design process"
            },
            {
              id: 3,
              title: "Implementation & Optimization",
              description: "We execute campaigns across all channels with precision, constantly monitoring and optimizing performance for maximum impact.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766400729817-xua7356z.png",
              imageAlt: "Implementation and execution"
            },
            {
              id: 4,
              title: "Measurement & Growth",
              description: "We track, analyze, and report on every metric that matters, providing insights to fuel continuous improvement and growth.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766787048952-6sxyqnd2.jpg",
              imageAlt: "Results and metrics"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="work" data-section="work">
        <BlogCardThree
          title="Featured Work"
          description="Explore some of our recent campaigns and the results we've delivered"
          tag="Portfolio"
          tagIcon={Award}
          blogs={[
            {
              id: "1",
              category: "Brand Strategy",
              categoryIcon: Palette,
              title: "Tech Startup Brand Launch",
              description: "Developed comprehensive brand identity and launch campaign that resulted in 150% increase in brand awareness within 6 months.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766787044450-9f4y10ts.jpg",
              imageAlt: "Tech startup brand campaign"
            },
            {
              id: "2",
              category: "Digital Marketing",
              categoryIcon: TrendingUp,
              title: "E-commerce Growth Campaign",
              description: "Created integrated digital campaign driving 3x increase in online sales and 45% improvement in customer acquisition cost.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766401281537-bd695c8y.jpg",
              imageAlt: "E-commerce marketing results"
            },
            {
              id: "3",
              category: "Content Strategy",
              categoryIcon: BookOpen,
              title: "B2B Content Marketing",
              description: "Established thought leadership through strategic content, generating 500+ qualified leads and establishing industry authority.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766787045743-6gjau4zf.jpg",
              imageAlt: "B2B content strategy success"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardFour
          title="Meet Our Team"
          description="Talented creators and strategists passionate about driving your success"
          tag="Team"
          tagIcon={Users}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          team={[
            {
              id: "1",
              name: "Sarah Mitchell",
              role: "Creative Director",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140101670-ttp7xdlv.jpg",
              imageAlt: "Sarah Mitchell"
            },
            {
              id: "2",
              name: "James Chen",
              role: "Strategy Lead",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140152452-p4x3ah4p.jpg",
              imageAlt: "James Chen"
            },
            {
              id: "3",
              name: "Emma Rodriguez",
              role: "Content Strategist",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140103339-f3be0gdh.jpg",
              imageAlt: "Emma Rodriguez"
            },
            {
              id: "4",
              name: "Michael Zhang",
              role: "Digital Specialist",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140104217-wfflli6f.jpg",
              imageAlt: "Michael Zhang"
            },
            {
              id: "5",
              name: "Lisa Anderson",
              role: "Designer",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184200876-idjoemdc.jpg",
              imageAlt: "Lisa Anderson"
            },
            {
              id: "6",
              name: "David Johnson",
              role: "Account Manager",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766163678723-295psgl3.jpg",
              imageAlt: "David Johnson"
            },
            {
              id: "7",
              name: "Nicole Brown",
              role: "Social Media Manager",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766320184384-whnns6as.jpg",
              imageAlt: "Nicole Brown"
            },
            {
              id: "8",
              name: "Alex Martinez",
              role: "Analytics Expert",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766320185368-un006460.jpg",
              imageAlt: "Alex Martinez"
            }
          ]}
          animationType="slide-up"
          speed={35}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardThirteen
          title="What Our Clients Say"
          description="Trusted by industry leaders to drive growth and deliver results"
          tag="Testimonials"
          tagIcon={MessageSquare}
          showRating={true}
          testimonials={[
            {
              id: "1",
              name: "Rachel Johnson",
              handle: "@racheljohnson",
              testimonial: "The team transformed our brand presence. Their strategy was spot-on and execution flawless. We saw immediate results in engagement and conversions.",
              rating: 5,
              icon: Quote
            },
            {
              id: "2",
              name: "Marcus Thompson",
              handle: "@marcustech",
              testimonial: "Professional, creative, and results-driven. They understood our vision and exceeded every expectation. Highly recommended for any marketing challenge.",
              rating: 5,
              icon: Quote
            },
            {
              id: "3",
              name: "Catherine Lee",
              handle: "@catherinemkt",
              testimonial: "Outstanding collaboration and communication throughout. Their creative work was innovative and their insights were invaluable for our growth.",
              rating: 5,
              icon: Quote
            },
            {
              id: "4",
              name: "David Foster",
              handle: "@davidfoster",
              testimonial: "The difference in our brand visibility after working with them was remarkable. They're not just an agency, they're true partners in success.",
              rating: 5,
              icon: Quote
            },
            {
              id: "5",
              name: "Nina Patel",
              handle: "@ninapatel",
              testimonial: "Creative excellence meets strategic thinking. Every campaign they developed for us delivered measurable ROI. Best decision we made for our marketing.",
              rating: 5,
              icon: Quote
            },
            {
              id: "6",
              name: "Tom Sullivan",
              handle: "@tomsully",
              testimonial: "From concept to execution, everything was handled with professionalism and creativity. They truly care about their clients' success.",
              rating: 5,
              icon: Quote
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get Started"
          title="Ready to Transform Your Marketing?"
          description="Let's discuss your goals and create a strategy that drives real growth for your business."
          tagIcon={Zap}
          useInvertedBackground="noInvert"
          inputPlaceholder="your@company.com"
          buttonText="Schedule Consultation"
          termsText="We respect your privacy. Unsubscribe at any time. By submitting, you agree to our Privacy Policy."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="Agency"
          columns={[
            {
              items: [
                { label: "Services", href: "services" },
                { label: "Work", href: "work" },
                { label: "Team", href: "team" }
              ]
            },
            {
              items: [
                { label: "About", href: "about" },
                { label: "Contact", href: "contact" },
                { label: "Testimonials", href: "testimonials" }
              ]
            },
            {
              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Cookie Policy", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}