"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import HeroBillboard from "@/components/sections/hero/HeroBillboard";
import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
import FeatureCardTwentySix from "@/components/sections/feature/FeatureCardTwentySix";
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCardFive";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import { ArrowRight, Award, CheckCircle, Globe, Mail, Palette, Sparkles, Star, Target, TrendingUp, Users, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="mediumSmall"
      sizing="mediumLargeSizeLargeTitles"
      background="circleGradient"
      cardStyle="soft-shadow"
      primaryButtonStyle="flat"
      secondaryButtonStyle="glass"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Wizzual"
          navItems={[
            { name: "Services", id: "services" },
            { name: "About", id: "about" },
            { name: "Portfolio", id: "features" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboard
          title="Transform Your Vision Into Digital Reality"
          description="Wizzual partners with ambitious brands to create stunning digital experiences through innovative design, strategic thinking, and cutting-edge development."
          tag="Creative Excellence"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          background={{ variant: "sparkles-gradient" }}
          buttons={[
            { text: "Start Your Project", href: "#contact" },
            { text: "View Our Work", href: "#features" }
          ]}
          buttonAnimation="slide-up"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQpUaHtcxvL4x9m5cKUKd8IP41/a-modern-creative-agency-dashboard-showi-1772534817423-4d1f95aa.png"
          imageAlt="Creative agency dashboard"
          mediaAnimation="blur-reveal"
          avatars={[
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQpUaHtcxvL4x9m5cKUKd8IP41/professional-headshot-of-a-confident-bus-1772534816474-97480984.png", alt: "Team member 1" },
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQpUaHtcxvL4x9m5cKUKd8IP41/professional-headshot-of-a-creative-prof-1772534816492-6e333c54.png", alt: "Team member 2" },
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQpUaHtcxvL4x9m5cKUKd8IP41/confident-female-entrepreneur-in-profess-1772534816842-a5b74a2a.png", alt: "Team member 3" }
          ]}
          avatarText="Trusted by 500+ brands worldwide"
          marqueeItems={[
            { type: "text", text: "Web Design" },
            { type: "text", text: "Brand Strategy" },
            { type: "text", text: "Digital Marketing" },
            { type: "text", text: "UI/UX Design" }
          ]}
          marqueeSpeed={30}
          showMarqueeCard={true}
          ariaLabel="Hero section showcasing Wizzual's creative services"
        />
      </div>

      <div id="about" data-section="about">
        <MetricSplitMediaAbout
          tag="About Wizzual"
          tagIcon={Zap}
          tagAnimation="slide-up"
          title="We Create Digital Experiences That Matter"
          description="Founded in 2018, Wizzual has been at the forefront of digital transformation. Our multidisciplinary team combines creative excellence with strategic thinking to deliver projects that not only look beautiful but drive measurable business results. We believe great design is the intersection of art and science."
          metrics={[
            { value: "500+", title: "Projects Completed" },
            { value: "98%", title: "Client Satisfaction Rate" }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQpUaHtcxvL4x9m5cKUKd8IP41/a-diverse-creative-team-collaborating-in-1772534816979-8353988c.png"
          imageAlt="Wizzual team collaborating"
          useInvertedBackground={false}
          mediaAnimation="slide-up"
          metricsAnimation="slide-up"
          ariaLabel="About section with team metrics"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTwentySix
          title="Our Creative Services"
          description="From concept to execution, we deliver comprehensive digital solutions tailored to your brand."
          tag="What We Do"
          tagIcon={Palette}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          features={[
            {
              title: "Brand Design",              description: "Comprehensive brand identity design including logos, color systems, and visual guidelines.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQpUaHtcxvL4x9m5cKUKd8IP41/brand-identity-design-showcase-featuring-1772534817067-0639119e.png",              imageAlt: "Brand design showcase",              buttonIcon: ArrowRight
            },
            {
              title: "Digital Marketing",              description: "Strategic digital campaigns that drive engagement, conversions, and measurable growth.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQpUaHtcxvL4x9m5cKUKd8IP41/digital-marketing-campaign-interface-sho-1772534817174-c77ea098.png",              imageAlt: "Digital marketing interface",              buttonIcon: ArrowRight
            },
            {
              title: "UX/UI Design",              description: "User-centered design that creates intuitive, beautiful, and functional digital products.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQpUaHtcxvL4x9m5cKUKd8IP41/ux-ui-designer-working-on-wireframes-and-1772534816821-3db52938.png",              imageAlt: "UX UI design workspace",              buttonIcon: ArrowRight
            },
            {
              title: "Web Development",              description: "High-performance websites and web applications built with modern technologies.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQpUaHtcxvL4x9m5cKUKd8IP41/a-developer-coding-on-multiple-monitors--1772534817376-51e24e59.png",              imageAlt: "Web development setup",              buttonIcon: ArrowRight
            },
            {
              title: "Strategic Planning",              description: "Data-driven strategy development to align design with business objectives.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQpUaHtcxvL4x9m5cKUKd8IP41/strategic-planning-session-with-digital--1772534817359-695584c0.png",              imageAlt: "Strategic planning session",              buttonIcon: ArrowRight
            },
            {
              title: "Creative Direction",              description: "Visionary creative leadership that transforms ideas into compelling digital experiences.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQpUaHtcxvL4x9m5cKUKd8IP41/a-designer-working-on-a-beautiful-digita-1772534817020-2c6c3603.png",              imageAlt: "Creative design work",              buttonIcon: ArrowRight
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardThree
          title="Our Impact By The Numbers"
          description="Real results that demonstrate our commitment to delivering excellence."
          tag="Performance"
          tagIcon={TrendingUp}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          metrics={[
            { id: "1", icon: Users, title: "Happy Clients", value: "500+" },
            { id: "2", icon: Award, title: "Awards Won", value: "45+" },
            { id: "3", icon: Target, title: "Projects Delivered", value: "800+" },
            { id: "4", icon: Globe, title: "Countries Served", value: "35+" }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFive
          title="What Our Clients Say"
          description="Success stories from brands we've partnered with to transform their digital presence."
          tag="Testimonials"
          tagIcon={Star}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          testimonials={[
            {
              id: "1",              name: "Sarah Mitchell, CEO of TechVenture",              date: "Date: 15 November 2024",              title: "Transformed Our Brand Completely",              quote: "Wizzual took our vision and created something extraordinary. The team's strategic approach and creative execution resulted in a 300% increase in website traffic within the first month.",              tag: "Web Design",              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQpUaHtcxvL4x9m5cKUKd8IP41/professional-headshot-of-a-confident-bus-1772534816474-97480984.png",              avatarAlt: "Sarah Mitchell",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQpUaHtcxvL4x9m5cKUKd8IP41/a-designer-working-on-a-beautiful-digita-1772534817020-2c6c3603.png",              imageAlt: "Brand transformation showcase"
            },
            {
              id: "2",              name: "James Chen, Founder of GrowthCorp",              date: "Date: 12 October 2024",              title: "Exceptional Creativity and Execution",              quote: "Working with Wizzual was a game-changer for our startup. Their combination of strategic thinking and creative excellence helped us stand out in a competitive market.",              tag: "Branding",              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQpUaHtcxvL4x9m5cKUKd8IP41/professional-headshot-of-a-creative-prof-1772534816492-6e333c54.png",              avatarAlt: "James Chen",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQpUaHtcxvL4x9m5cKUKd8IP41/brand-identity-design-showcase-featuring-1772534817067-0639119e.png",              imageAlt: "Branding project showcase"
            },
            {
              id: "3",              name: "Emma Rodriguez, Marketing Director at StyleBrand",              date: "Date: 8 September 2024",              title: "Outstanding Digital Marketing Results",              quote: "The digital marketing campaigns Wizzual created drove record-breaking engagement for our brand. Their data-driven approach combined with creative excellence is unmatched.",              tag: "Digital Marketing",              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQpUaHtcxvL4x9m5cKUKd8IP41/confident-female-entrepreneur-in-profess-1772534816842-a5b74a2a.png",              avatarAlt: "Emma Rodriguez",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQpUaHtcxvL4x9m5cKUKd8IP41/digital-marketing-campaign-interface-sho-1772534817174-c77ea098.png",              imageAlt: "Marketing campaign results"
            },
            {
              id: "4",              name: "Michael Torres, CTO of InnovateTech",              date: "Date: 20 August 2024",              title: "Technical Excellence Meets Design",              quote: "Wizzual delivered a complex web application that exceeded our expectations. The attention to detail in both design and development was truly impressive.",              tag: "Web Development",              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQpUaHtcxvL4x9m5cKUKd8IP41/professional-man-in-business-casual-atti-1772534816214-2d2ec141.png",              avatarAlt: "Michael Torres",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQpUaHtcxvL4x9m5cKUKd8IP41/a-developer-coding-on-multiple-monitors--1772534817376-51e24e59.png",              imageAlt: "Web development project"
            },
            {
              id: "5",              name: "Lisa Wang, Brand Manager at LuxuryGoods Co.",              date: "Date: 5 July 2024",              title: "Elevated Our Brand Experience",              quote: "The UX/UI design work Wizzual created transformed our customer experience. Our conversion rates increased by 250% and customer satisfaction is at an all-time high.",              tag: "UX/UI Design",              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQpUaHtcxvL4x9m5cKUKd8IP41/creative-professional-with-warm-personal-1772534816691-e144e221.png",              avatarAlt: "Lisa Wang",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQpUaHtcxvL4x9m5cKUKd8IP41/ux-ui-designer-working-on-wireframes-and-1772534816821-3db52938.png",              imageAlt: "UX design showcase"
            },
            {
              id: "6",              name: "David Kumar, CEO of StartupXYZ",              date: "Date: 12 June 2024",              title: "Strategic Guidance That Matters",              quote: "Beyond the beautiful work, Wizzual provided strategic guidance that shaped our entire digital direction. Their partnership approach is what sets them apart.",              tag: "Strategy",              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQpUaHtcxvL4x9m5cKUKd8IP41/business-leader-in-professional-attire-w-1772534816027-c6938d30.png",              avatarAlt: "David Kumar",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQpUaHtcxvL4x9m5cKUKd8IP41/strategic-planning-session-with-digital--1772534817359-695584c0.png",              imageAlt: "Strategic planning work"
            }
          ]}
        />
      </div>

      <div id="social-proof" data-section="social-proof">
        <SocialProofOne
          title="Trusted by Leading Brands"
          description="Join 500+ companies that have partnered with Wizzual to transform their digital presence."
          tag="Our Clients"
          tagIcon={CheckCircle}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          names={["Google", "Amazon", "Microsoft", "Apple", "Tesla", "Netflix", "Spotify", "Facebook", "Adobe", "Slack"]}
          speed={40}
          showCard={true}
          ariaLabel="Trusted brands and clients"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get Started"
          tagIcon={Mail}
          tagAnimation="slide-up"
          title="Ready to Transform Your Digital Presence?"
          description="Let's collaborate to create something extraordinary. Join hundreds of brands that have transformed with Wizzual."
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground={false}
          inputPlaceholder="your@email.com"
          buttonText="Start Conversation"
          termsText="We respect your privacy. Unsubscribe at any time. By subscribing, you agree to receive our newsletter."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={[
            {
              title: "Services",              items: [
                { label: "Brand Design", href: "#features" },
                { label: "Web Development", href: "#features" },
                { label: "Digital Marketing", href: "#features" },
                { label: "UX/UI Design", href: "#features" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About", href: "#about" },
                { label: "Our Work", href: "#features" },
                { label: "Testimonials", href: "#testimonials" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Blog", href: "#" },
                { label: "Case Studies", href: "#" },
                { label: "Design Guide", href: "#" },
                { label: "FAQ", href: "#" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Cookie Policy", href: "#" }
              ]
            }
          ]}
          bottomLeftText="© 2025 Wizzual. All rights reserved."
          bottomRightText="Crafted with creativity and code."
        />
      </div>
    </ThemeProvider>
  );
}