"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroSplitDoubleCarousel from "@/components/sections/hero/HeroSplitDoubleCarousel";
import FeatureCardTwentySix from "@/components/sections/feature/FeatureCardTwentySix";
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
import ContactSplit from "@/components/sections/contact/ContactSplit";
import FooterCard from "@/components/sections/footer/FooterCard";
import { Zap, Sparkles, ArrowRight, Award, TrendingUp, Heart, DollarSign, CheckCircle, Star, Linkedin, Twitter, Github } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="mediumSizeLargeTitles"
      background="circleGradient"
      cardStyle="glass-depth"
      primaryButtonStyle="flat"
      secondaryButtonStyle="solid"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="DR Digital"
          navItems={[
            { name: "Services", id: "services" },
            { name: "Portfolio", id: "portfolio" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Get Started", href: "#contact" }}
          animateOnLoad={true}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitDoubleCarousel
          title="Built to Outperform"
          description="We craft high-performance digital experiences that drive results. From stunning websites to e-commerce platforms that convert, every project is engineered for excellence."
          tag="Web Design Agency"
          tagIcon={Zap}
          tagAnimation="slide-up"
          buttons={[
            { text: "See Our Work", href: "#portfolio" },
            { text: "Start Your Project", href: "#contact" }
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "glowing-orb" }}
          leftCarouselItems={[
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APuxHx2WtFxY9x92wphgd6sD4R/modern-saas-dashboard-interface-with-sle-1772509928573-9b2f00f2.png", imageAlt: "Dashboard Interface" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APuxHx2WtFxY9x92wphgd6sD4R/minimalist-dark-themed-web-design-showca-1772509928163-519054ad.png", imageAlt: "Web Design" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APuxHx2WtFxY9x92wphgd6sD4R/premium-digital-agency-workspace-visuali-1772509927443-aa031197.png", imageAlt: "Design Studio" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APuxHx2WtFxY9x92wphgd6sD4R/cutting-edge-web-development-environment-1772509929197-c97ebc5c.png", imageAlt: "Development Environment" }
          ]}
          rightCarouselItems={[
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APuxHx2WtFxY9x92wphgd6sD4R/e-commerce-website-design-mockup-with-da-1772509928307-434fe3d4.png", imageAlt: "E-Commerce Design" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APuxHx2WtFxY9x92wphgd6sD4R/seo-optimization-dashboard-showing-ranki-1772509928389-4b6ec03c.png", imageAlt: "SEO Dashboard" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APuxHx2WtFxY9x92wphgd6sD4R/responsive-web-design-mockup-displayed-a-1772509927501-bb8dc244.png", imageAlt: "Responsive Design" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APuxHx2WtFxY9x92wphgd6sD4R/performance-metrics-display-showing-page-1772509928720-944824fb.png", imageAlt: "Performance Metrics" }
          ]}
          carouselPosition="right"
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardTwentySix
          features={[
            {
              title: "Website Design",              description: "Beautiful, functional websites that showcase your brand and engage your audience with seamless user experiences.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APuxHx2WtFxY9x92wphgd6sD4R/minimalist-dark-themed-web-design-showca-1772509928163-519054ad.png",              imageAlt: "Website Design",              buttonIcon: ArrowRight,
              buttonHref: "#portfolio"
            },
            {
              title: "E-Commerce Development",              description: "Powerful online stores built for conversion. We optimize every touchpoint to maximize sales and customer satisfaction.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APuxHx2WtFxY9x92wphgd6sD4R/e-commerce-website-design-mockup-with-da-1772509928307-434fe3d4.png",              imageAlt: "E-Commerce Development",              buttonIcon: ArrowRight,
              buttonHref: "#portfolio"
            },
            {
              title: "SEO Optimization",              description: "Strategic optimization that ranks your site higher, drives organic traffic, and generates qualified leads for your business.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APuxHx2WtFxY9x92wphgd6sD4R/seo-optimization-dashboard-showing-ranki-1772509928389-4b6ec03c.png",              imageAlt: "SEO Optimization",              buttonIcon: ArrowRight,
              buttonHref: "#portfolio"
            }
          ]}
          title="Our Services"
          description="Comprehensive digital solutions designed to elevate your brand and drive measurable business growth."
          tag="What We Do"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="portfolio" data-section="portfolio">
        <ProductCardTwo
          products={[
            {
              id: "1",              brand: "DR Digital",              name: "Tech Startup Redesign",              price: "120K Revenue Increase",              rating: 5,
              reviewCount: "32",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APuxHx2WtFxY9x92wphgd6sD4R/completed-website-design-showcase-for-a--1772509929157-2a69ecfc.png",              imageAlt: "Tech Startup Website"
            },
            {
              id: "2",              brand: "DR Digital",              name: "E-Commerce Platform",              price: "285K Annual Sales",              rating: 5,
              reviewCount: "48",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APuxHx2WtFxY9x92wphgd6sD4R/professional-e-commerce-website-portfoli-1772509933689-95e46d05.png",              imageAlt: "E-Commerce Store"
            },
            {
              id: "3",              brand: "DR Digital",              name: "SaaS Product Website",              price: "450 New Users/Month",              rating: 5,
              reviewCount: "64",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APuxHx2WtFxY9x92wphgd6sD4R/high-performance-saas-product-website-de-1772509928405-3e0a226e.png",              imageAlt: "SaaS Product Site"
            }
          ]}
          title="Portfolio Highlights"
          description="Recent projects showcasing our expertise in web design, development, and digital optimization."
          tag="Featured Work"
          tagIcon={Award}
          tagAnimation="slide-up"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardOne
          metrics={[
            {
              id: "1",              value: "150+",              title: "Projects",              description: "Successfully delivered across diverse industries",              icon: CheckCircle
            },
            {
              id: "2",              value: "98%",              title: "Satisfaction",              description: "Client satisfaction rate and retention",              icon: Heart
            },
            {
              id: "3",              value: "$48M",              title: "Revenue",              description: "Generated for our clients combined",              icon: DollarSign
            },
            {
              id: "4",              value: "12",              title: "Years",              description: "Of digital excellence and innovation",              icon: Award
            }
          ]}
          title="Proven Results"
          description="Our track record speaks for itself. We deliver measurable impact for every client partnership."
          tag="Performance"
          tagIcon={TrendingUp}
          tagAnimation="slide-up"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APuxHx2WtFxY9x92wphgd6sD4R/professional-headshot-portrait-of-a-conf-1772509926617-bc52b948.png",              imageAlt: "Sarah Johnson"
            },
            {
              id: "2",              name: "Michael Chen",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APuxHx2WtFxY9x92wphgd6sD4R/professional-headshot-of-a-creative-dire-1772509927215-60849ac7.png",              imageAlt: "Michael Chen"
            },
            {
              id: "3",              name: "Emily Rodriguez",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APuxHx2WtFxY9x92wphgd6sD4R/professional-business-portrait-of-an-ent-1772509927582-4a656b8d.png",              imageAlt: "Emily Rodriguez"
            },
            {
              id: "4",              name: "David Kim",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APuxHx2WtFxY9x92wphgd6sD4R/professional-headshot-of-a-marketing-exe-1772509927666-2645b084.png",              imageAlt: "David Kim"
            },
            {
              id: "5",              name: "Jessica Wang",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APuxHx2WtFxY9x92wphgd6sD4R/professional-headshot-of-a-tech-leader-w-1772509928103-edef8f77.png",              imageAlt: "Jessica Wang"
            },
            {
              id: "6",              name: "Thomas Anderson",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APuxHx2WtFxY9x92wphgd6sD4R/professional-business-portrait-of-a-foun-1772509927471-9bf86a8b.png",              imageAlt: "Thomas Anderson"
            }
          ]}
          cardTitle="Trusted by industry leaders and innovative companies. Our partnership approach transforms visions into high-performing digital experiences."
          cardTag="Client Love"
          cardTagIcon={Star}
          cardAnimation="slide-up"
          useInvertedBackground={true}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Get In Touch"
          title="Ready to Build Something Amazing?"
          description="Let's discuss your project and create a digital experience that drives real business results. Join hundreds of successful brands partnering with DR Digital Studios."
          tagIcon={Zap}
          tagAnimation="slide-up"
          background={{ variant: "glowing-orb" }}
          useInvertedBackground={false}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APuxHx2WtFxY9x92wphgd6sD4R/team-collaboration-scene-showing-diverse-1772509929947-24b7b4c4.png"
          imageAlt="Team Collaboration"
          mediaAnimation="slide-up"
          mediaPosition="right"
          inputPlaceholder="your@email.com"
          buttonText="Subscribe"
          termsText="We respect your privacy. Unsubscribe anytime."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="DR Digital Studios"
          copyrightText="© 2025 DR Digital Studios. Engineered for Performance."
          socialLinks={[
            { icon: Linkedin, href: "https://linkedin.com", ariaLabel: "LinkedIn" },
            { icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" },
            { icon: Github, href: "https://github.com", ariaLabel: "GitHub" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
