"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import HeroSplitDoubleCarousel from "@/components/sections/hero/HeroSplitDoubleCarousel";
import FeatureCardTwentySeven from "@/components/sections/feature/FeatureCardTwentySeven";
import ProductCardOne from "@/components/sections/product/ProductCardOne";
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
import TestimonialCardThirteen from "@/components/sections/testimonial/TestimonialCardThirteen";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import Link from "next/link";
import { Sparkles, Zap, Award, TrendingUp, Users, Target, Quote, Rocket, Mail } from "lucide-react";

export default function HomePage() {
  const navItems = [
    { name: "Home", id: "/" },
    { name: "Services", id: "/services" },
    { name: "Portfolio", id: "/portfolio" },
    { name: "About", id: "/about" },
    { name: "Contact", id: "/contact" },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="small"
      sizing="largeSizeMediumTitles"
      background="blurBottom"
      cardStyle="gradient-mesh"
      primaryButtonStyle="flat"
      secondaryButtonStyle="layered"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Home", id: "/" },
            { name: "Services", id: "/services" },
            { name: "Portfolio", id: "/portfolio" },
            { name: "About", id: "/about" },
            { name: "Contact", id: "/contact" },
          ]}
          brandName="Proof Digital"
          bottomLeftText="Global Reach"
          bottomRightText="hello@proofdigital.com"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitDoubleCarousel
          title="Transform Your Digital Vision Into Reality"
          description="We are a full-service digital agency specializing in web development, design, and digital transformation. Our expert team delivers innovative solutions that drive growth and engagement."
          tag="Digital Innovation"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          background={{ variant: "glowing-orb" }}
          leftCarouselItems={[
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxMVuiSZNzHQxzFQ2ISEISb2x/a-sleek-web-design-portfolio-showcase-fe-1772538617893-756e22f7.png",
              imageAlt: "Web Design Portfolio",
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxMVuiSZNzHQxzFQ2ISEISb2x/mobile-app-development-interface-showing-1772538617113-a09a983a.png",
              imageAlt: "Mobile App Development",
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxMVuiSZNzHQxzFQ2ISEISb2x/digital-strategy-workshop-scene-showing--1772538618185-67545066.png",
              imageAlt: "Digital Strategy",
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxMVuiSZNzHQxzFQ2ISEISb2x/brand-identity-design-showcase-displayin-1772538617400-9c0d70af.png",
              imageAlt: "Brand Identity Design",
            },
          ]}
          rightCarouselItems={[
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxMVuiSZNzHQxzFQ2ISEISb2x/user-interface-and-experience-design-moc-1772538617539-7eab0203.png?_wi=1",
              imageAlt: "UI/UX Design",
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxMVuiSZNzHQxzFQ2ISEISb2x/web-development-workspace-showing-code-e-1772538617739-8eb8579f.png",
              imageAlt: "Web Development",
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxMVuiSZNzHQxzFQ2ISEISb2x/e-commerce-platform-interface-displaying-1772538618458-64b0d370.png",
              imageAlt: "E-commerce Solutions",
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxMVuiSZNzHQxzFQ2ISEISb2x/seo-optimization-dashboard-showing-analy-1772538618150-93b5f784.png",
              imageAlt: "SEO Optimization",
            },
          ]}
          carouselPosition="right"
          buttons={[
            { text: "Start Your Project", href: "/contact" },
            { text: "Explore Our Work", href: "/portfolio" },
          ]}
          buttonAnimation="slide-up"
          ariaLabel="Hero section showcasing digital agency services"
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardTwentySeven
          title="Our Services"
          description="Comprehensive digital solutions tailored to your business needs"
          tag="What We Offer"
          tagIcon={Zap}
          tagAnimation="slide-up"
          features={[
            {
              id: "1",
              title: "Web Development",
              description: "Custom websites and web applications built with modern technologies and best practices for optimal performance and scalability.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxMVuiSZNzHQxzFQ2ISEISb2x/professional-web-development-concept-ima-1772538619187-01dd9557.png?_wi=1",
              imageAlt: "Web Development",
            },
            {
              id: "2",
              title: "UI/UX Design",
              description: "User-centered design solutions that combine aesthetics with functionality to create engaging digital experiences.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxMVuiSZNzHQxzFQ2ISEISb2x/user-interface-and-experience-design-con-1772538617879-adc7cf56.png?_wi=1",
              imageAlt: "UI/UX Design",
            },
            {
              id: "3",
              title: "Digital Strategy",
              description: "Strategic planning and consulting to align your digital initiatives with business goals and market opportunities.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxMVuiSZNzHQxzFQ2ISEISb2x/digital-strategy-consultation-scene-with-1772538618258-45f82cfc.png?_wi=1",
              imageAlt: "Digital Strategy",
            },
            {
              id: "4",
              title: "Brand Identity",
              description: "Complete branding solutions from logo design to visual guidelines that establish your unique market presence.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxMVuiSZNzHQxzFQ2ISEISb2x/brand-identity-design-workspace-showing--1772538617285-0010346f.png?_wi=1",
              imageAlt: "Brand Identity",
            },
          ]}
          gridVariant="uniform-4-items"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="portfolio" data-section="portfolio">
        <ProductCardOne
          title="Recent Projects"
          description="Explore our portfolio of successful projects across various industries and technologies"
          tag="Our Work"
          tagIcon={Award}
          tagAnimation="slide-up"
          products={[
            {
              id: "1",
              name: "E-Commerce Platform Redesign",
              price: "2023",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxMVuiSZNzHQxzFQ2ISEISb2x/modern-e-commerce-website-redesign-showc-1772538619892-4352eb78.png?_wi=1",
              imageAlt: "E-Commerce Platform",
            },
            {
              id: "2",
              name: "FinTech Mobile Application",
              price: "2023",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxMVuiSZNzHQxzFQ2ISEISb2x/financial-technology-mobile-application--1772538618009-341adae5.png?_wi=1",
              imageAlt: "FinTech Application",
            },
            {
              id: "3",
              name: "SaaS Dashboard Interface",
              price: "2024",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxMVuiSZNzHQxzFQ2ISEISb2x/software-as-a-service-dashboard-interfac-1772538617865-32ca3c81.png?_wi=1",
              imageAlt: "SaaS Dashboard",
            },
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardThree
          title="Our Impact"
          description="Proven results that demonstrate our commitment to excellence and client success"
          metrics={[
            {
              id: "1",
              icon: TrendingUp,
              title: "Projects Completed",
              value: "150+",
            },
            {
              id: "2",
              icon: Users,
              title: "Happy Clients",
              value: "120+",
            },
            {
              id: "3",
              icon: Target,
              title: "Success Rate",
              value: "98%",
            },
            {
              id: "4",
              icon: Zap,
              title: "Years Experience",
              value: "10+",
            },
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardThirteen
          title="What Our Clients Say"
          description="Real feedback from businesses we've helped transform their digital presence"
          tag="Client Reviews"
          tagIcon={Quote}
          tagAnimation="slide-up"
          testimonials={[
            {
              id: "1",
              name: "Sarah Johnson",
              handle: "@sarahjohnson",
              testimonial: "Proof Digital transformed our online presence completely. Their team was professional, responsive, and delivered exactly what we needed.",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxMVuiSZNzHQxzFQ2ISEISb2x/professional-headshot-portrait-of-a-conf-1772538616642-48480d7d.png?_wi=1",
              imageAlt: "Sarah Johnson",
            },
            {
              id: "2",
              name: "Michael Chen",
              handle: "@michaelchen",
              testimonial: "Working with Proof Digital was a game-changer for our business. The quality of their work exceeded our expectations.",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxMVuiSZNzHQxzFQ2ISEISb2x/professional-headshot-portrait-of-an-asi-1772538616428-b9b73312.png?_wi=1",
              imageAlt: "Michael Chen",
            },
            {
              id: "3",
              name: "Emily Rodriguez",
              handle: "@emilyrodriguez",
              testimonial: "Outstanding service and incredible attention to detail. Proof Digital is a true partner in our digital journey.",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxMVuiSZNzHQxzFQ2ISEISb2x/professional-headshot-of-a-confident-lat-1772538616215-cee81e6c.png?_wi=1",
              imageAlt: "Emily Rodriguez",
            },
            {
              id: "4",
              name: "David Kim",
              handle: "@davidkim",
              testimonial: "The best digital agency we've worked with. Their strategic insights and execution are unmatched in the industry.",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxMVuiSZNzHQxzFQ2ISEISb2x/professional-headshot-of-an-asian-male-i-1772538616949-bfc92c2b.png?_wi=1",
              imageAlt: "David Kim",
            },
            {
              id: "5",
              name: "Jessica Martinez",
              handle: "@jessicamartinez",
              testimonial: "From concept to launch, Proof Digital handled everything with professionalism and expertise. Highly recommended!",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxMVuiSZNzHQxzFQ2ISEISb2x/professional-headshot-of-a-confident-wom-1772538616544-05f319c0.png?_wi=1",
              imageAlt: "Jessica Martinez",
            },
            {
              id: "6",
              name: "Robert Thompson",
              handle: "@robertthompson",
              testimonial: "Proof Digital delivered a stunning website that has dramatically improved our online engagement and conversions.",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQxMVuiSZNzHQxzFQ2ISEISb2x/professional-headshot-of-a-male-executiv-1772538616322-7e5792f0.png",
              imageAlt: "Robert Thompson",
            },
          ]}
          showRating={true}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="cta" data-section="cta">
        <ContactCTA
          tag="Let's Collaborate"
          tagIcon={Rocket}
          tagAnimation="slide-up"
          title="Ready to Elevate Your Digital Presence?"
          description="Let's work together to create something extraordinary. Our team is ready to turn your vision into a powerful digital solution."
          buttons={[
            { text: "Get in Touch", href: "/contact" },
            { text: "Schedule Consultation", href: "/contact" },
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={true}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="Proof Digital"
          leftLink={{ text: "Privacy Policy", href: "#" }}
          rightLink={{ text: "Terms of Service", href: "#" }}
        />
      </div>
    </ThemeProvider>
  );
}