"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import SplitAbout from '@/components/sections/about/SplitAbout';
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TeamCardFive from '@/components/sections/team/TeamCardFive';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';

export default function LandingPage() {
  const navItems = [
    { name: "About", id: "about" },
    { name: "Process", id: "process" },
    { name: "Portfolio", id: "portfolio" },
    { name: "Team", id: "team" },
    { name: "Contact", id: "contact" }
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="smallMedium"
      sizing="mediumLargeSizeMediumTitles"
      background="fluid"
      cardStyle="outline"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple brandName="Webild" navItems={navItems} />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardCarousel
          title="Stunning Websites That Drive Growth"
          description="We craft beautiful, high-converting websites that help your business stand out. From concept to launch, we bring your vision to life with cutting-edge design and seamless functionality."
          tag="Web Design Agency"
          background={{ variant: "sparkles-gradient" }}
          mediaItems={[
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ6VJ9qZ64B4zaqYPoTkDegVCl/a-sleek-modern-website-interface-design--1772512523657-9b8efe2d.png?_wi=1",              imageAlt: "Modern e-commerce website design"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ6VJ9qZ64B4zaqYPoTkDegVCl/a-vibrant-web-application-dashboard-with-1772512522757-c90e1e08.png?_wi=1",              imageAlt: "Interactive dashboard interface"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ6VJ9qZ64B4zaqYPoTkDegVCl/a-beautiful-corporate-website-homepage-w-1772512523946-3fabbe13.png?_wi=1",              imageAlt: "Corporate website homepage"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ6VJ9qZ64B4zaqYPoTkDegVCl/a-responsive-mobile-and-desktop-website--1772512523671-702433ba.png",              imageAlt: "Startup website design"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ6VJ9qZ64B4zaqYPoTkDegVCl/a-creative-agency-website-design-with-an-1772512528220-35a7b192.png",              imageAlt: "Creative agency website"
            }
          ]}
          buttons={[
            { text: "View Our Work", href: "portfolio" },
            { text: "Start Your Project", href: "contact" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <SplitAbout
          title="About Webild"
          description="We're a team of passionate designers and developers dedicated to creating exceptional digital experiences. With years of industry expertise, we combine creativity, strategy, and technology to deliver websites that exceed expectations."
          tag="Our Story"
          textboxLayout="default"
          useInvertedBackground={false}
          imageSrc="/placeholders/placeholder1.webp"
          imageAlt="Webild design team collaborating"
          bulletPoints={[
            {
              title: "Award-Winning Design",              description: "Our work has been recognized for innovation, creativity, and user-centered excellence."
            },
            {
              title: "Results-Driven Approach",              description: "Every project is built with your business goals in mind, focused on measurable results and growth."
            },
            {
              title: "End-to-End Solutions",              description: "From strategy and design to development and optimization, we handle every aspect of your web presence."
            }
          ]}
          buttons={[{ text: "Learn More", href: "#" }]}
        />
      </div>

      <div id="process" data-section="process">
        <FeatureCardEight
          title="Our Design Process"
          description="A proven methodology that transforms your vision into digital reality through strategic planning, creative excellence, and technical precision."
          tag="How We Work"
          textboxLayout="default"
          useInvertedBackground={true}
          features={[
            {
              id: 1,
              title: "Research & Strategy",              description: "We begin by understanding your business, target audience, and competition. Through comprehensive research, we develop a strategic foundation for your website.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ6VJ9qZ64B4zaqYPoTkDegVCl/a-professional-designer-analyzing-user-r-1772512522960-a45b2db0.png",              imageAlt: "Research and strategy phase"
            },
            {
              id: 2,
              title: "Design & Wireframing",              description: "Our designers create detailed wireframes and mockups, focusing on user experience and visual hierarchy. Every element is crafted with purpose.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ6VJ9qZ64B4zaqYPoTkDegVCl/a-graphic-designer-creating-wireframes-a-1772512523062-7006b731.png",              imageAlt: "Design and wireframing process"
            },
            {
              id: 3,
              title: "Development & Build",              description: "Our developers bring designs to life with clean, optimized code. We build responsive websites that perform flawlessly across all devices.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ6VJ9qZ64B4zaqYPoTkDegVCl/web-developers-collaborating-on-code-and-1772512522637-c5eacf08.png",              imageAlt: "Development and coding phase"
            },
            {
              id: 4,
              title: "Testing & Launch",              description: "Rigorous testing ensures everything works perfectly. We then launch your site with ongoing support and monitoring for optimal performance.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ6VJ9qZ64B4zaqYPoTkDegVCl/a-successful-website-launch-celebration--1772512523710-b55628f3.png",              imageAlt: "Testing and launch celebration"
            }
          ]}
        />
      </div>

      <div id="portfolio" data-section="portfolio">
        <ProductCardOne
          title="Recent Projects"
          description="Explore our portfolio of successful web design and development projects that have transformed businesses and delighted users."
          tag="Portfolio Showcase"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          gridVariant="three-columns-all-equal-width"
          products={[
            {
              id: "1",              name: "E-Commerce Platform",              price: "Premium Design",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ6VJ9qZ64B4zaqYPoTkDegVCl/a-sleek-modern-website-interface-design--1772512523657-9b8efe2d.png?_wi=2",              imageAlt: "E-commerce platform website"
            },
            {
              id: "2",              name: "SaaS Dashboard",              price: "Enterprise Solution",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ6VJ9qZ64B4zaqYPoTkDegVCl/a-vibrant-web-application-dashboard-with-1772512522757-c90e1e08.png?_wi=2",              imageAlt: "SaaS application dashboard"
            },
            {
              id: "3",              name: "Corporate Website",              price: "Brand Identity",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ6VJ9qZ64B4zaqYPoTkDegVCl/a-beautiful-corporate-website-homepage-w-1772512523946-3fabbe13.png?_wi=2",              imageAlt: "Corporate website homepage"
            }
          ]}
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardFive
          title="Meet Our Team"
          description="Talented professionals dedicated to creating exceptional digital experiences."
          tag="Our Experts"
          textboxLayout="default"
          useInvertedBackground={true}
          animationType="slide-up"
          team={[
            {
              id: "1",              name: "Sarah Anderson",              role: "Creative Director",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ6VJ9qZ64B4zaqYPoTkDegVCl/a-professional-headshot-of-a-creative-di-1772512523008-ff853a5a.png",              imageAlt: "Sarah Anderson, Creative Director"
            },
            {
              id: "2",              name: "Marcus Chen",              role: "Lead Designer",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ6VJ9qZ64B4zaqYPoTkDegVCl/a-professional-headshot-of-a-lead-design-1772512522338-48d998e6.png",              imageAlt: "Marcus Chen, Lead Designer"
            },
            {
              id: "3",              name: "Jessica Patel",              role: "Senior Developer",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ6VJ9qZ64B4zaqYPoTkDegVCl/a-professional-headshot-of-a-senior-deve-1772512522379-dcf3a1bc.png",              imageAlt: "Jessica Patel, Senior Developer"
            },
            {
              id: "4",              name: "David Martinez",              role: "Project Manager",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ6VJ9qZ64B4zaqYPoTkDegVCl/a-professional-headshot-of-a-project-man-1772512522402-3073fb73.png",              imageAlt: "David Martinez, Project Manager"
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFifteen
          testimonial="Webild completely transformed our online presence. Their team's professionalism, creativity, and attention to detail resulted in a website that not only looks stunning but also drives real business results. We couldn't be happier with the partnership."
          rating={5}
          author="Emily Rodriguez, CEO of GrowthCo"
          ratingAnimation="slide-up"
          avatarsAnimation="slide-up"
          useInvertedBackground={false}
          avatars={[
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ6VJ9qZ64B4zaqYPoTkDegVCl/professional-circular-portrait-photo-of--1772512522315-aa09c286.png", alt: "Client testimonial avatar 1" },
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ6VJ9qZ64B4zaqYPoTkDegVCl/professional-circular-portrait-photo-of--1772512522625-96c3e840.png", alt: "Client testimonial avatar 2" },
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ6VJ9qZ64B4zaqYPoTkDegVCl/professional-circular-portrait-photo-of--1772512522454-67237bb2.png", alt: "Client testimonial avatar 3" },
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ6VJ9qZ64B4zaqYPoTkDegVCl/professional-circular-portrait-photo-of--1772512522424-59b2a332.png", alt: "Client testimonial avatar 4" },
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ6VJ9qZ64B4zaqYPoTkDegVCl/professional-circular-portrait-photo-of--1772512522057-2837d317.png", alt: "Client testimonial avatar 5" },
            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ6VJ9qZ64B4zaqYPoTkDegVCl/professional-circular-portrait-photo-of--1772512522917-f0152cab.png", alt: "Client testimonial avatar 6" }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Let's Work Together"
          title="Ready to Transform Your Digital Presence?"
          description="Whether you're launching a new website or redesigning an existing one, we're here to help you create something extraordinary. Let's discuss how we can bring your vision to life."
          background={{ variant: "plain" }}
          useInvertedBackground={true}
          buttons={[
            { text: "Start Your Project", href: "contact" },
            { text: "Schedule a Consultation", href: "#" }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={[
            {
              title: "Services",              items: [
                { label: "Web Design", href: "#" },
                { label: "Web Development", href: "#" },
                { label: "UX/UI Design", href: "#" },
                { label: "Brand Identity", href: "#" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "about" },
                { label: "Our Process", href: "process" },
                { label: "Portfolio", href: "portfolio" },
                { label: "Team", href: "team" }
              ]
            },
            {
              title: "Connect",              items: [
                { label: "Contact Us", href: "contact" },
                { label: "Twitter", href: "https://twitter.com" },
                { label: "LinkedIn", href: "https://linkedin.com" },
                { label: "Instagram", href: "https://instagram.com" }
              ]
            }
          ]}
          copyrightText="© 2025 Webild. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}
