"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import TagAbout from '@/components/sections/about/TagAbout';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import FeatureCardEleven from '@/components/sections/feature/FeatureCardEleven';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterSocial from '@/components/sections/footer/FooterSocial';
import { Github, Linkedin, Twitter, Sparkles, Mail } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="smallMedium"
      sizing="largeSmall"
      background="noiseGradient"
      cardStyle="spotlight"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleMinimal
          brandName="Dev Portfolio"
          button={{
            text: "Get in touch",
            href: "#contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardRotatedCarousel
          title="Frontend Developer & UI Engineer"
          description="Crafting beautiful, performant web experiences with React, TypeScript, and modern web technologies. Let's build something amazing together."
          tag="Available for hire"
          tagIcon={Sparkles}
          buttons={[
            {
              text: "View my work",
              href: "#featured-projects"
            },
            {
              text: "Download resume",
              href: "#contact"
            }
          ]}
          carouselItems={[
            {
              id: "1",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766320177542-9om9tyxf.jpg",
              imageAlt: "Featured project interface"
            },
            {
              id: "2",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766906259746-fj9rua5c.jpg",
              imageAlt: "React component showcase"
            },
            {
              id: "3",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766399062140-rc60mgt0.png",
              imageAlt: "Responsive web design"
            },
            {
              id: "4",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766890620807-l4c3d1a4.jpg",
              imageAlt: "Dashboard interface"
            },
            {
              id: "5",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766890620033-sckgfvwd.jpg",
              imageAlt: "Design system components"
            },
            {
              id: "6",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140099604-32oyqj9b.jpg",
              imageAlt: "Portfolio projects"
            }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <TagAbout
          tag="About me"
          description="I'm a frontend developer with 5+ years of experience building responsive, accessible web applications. I specialize in React and modern JavaScript, with a passion for clean code, performance optimization, and creating intuitive user interfaces that solve real problems."
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="featured-projects" data-section="featured-projects">
        <ProductCardOne
          title="Featured Projects"
          description="A selection of my recent work showcasing my skills in frontend development, UI design, and performance optimization."
          tag="Portfolio"
          products={[
            {
              id: "1",
              name: "E-Commerce Platform",
              price: "React • Next.js",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766906259746-fj9rua5c.jpg",
              imageAlt: "E-commerce platform with product filtering and checkout"
            },
            {
              id: "2",
              name: "Analytics Dashboard",
              price: "TypeScript • Tailwind",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766906259746-fj9rua5c.jpg",
              imageAlt: "Real-time analytics dashboard with charts"
            },
            {
              id: "3",
              name: "Design System",
              price: "Component Library",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766890620033-sckgfvwd.jpg",
              imageAlt: "Reusable UI component library"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="expertise" data-section="expertise">
        <FeatureCardEleven
          title="Skills & Expertise"
          description="My journey building high-quality frontend applications"
          features={[
            {
              id: 1,
              title: "Frontend Development",
              description: "Expert in React, TypeScript, and modern JavaScript. Building scalable component architectures and performant applications using best practices.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766906259746-fj9rua5c.jpg"
            },
            {
              id: 2,
              title: "UI/UX Implementation",
              description: "Translating design into pixel-perfect, responsive interfaces. Proficient with Tailwind CSS, CSS-in-JS, and accessibility standards (WCAG).",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766890620033-sckgfvwd.jpg"
            },
            {
              id: 3,
              title: "Performance Optimization",
              description: "Optimizing bundle sizes, implementing code splitting, and improving Core Web Vitals. Experience with Next.js, lazy loading, and caching strategies.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766906259746-fj9rua5c.jpg"
            }
          ]}
          animationType="opacity"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          usePrimaryButtonImage={false}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTen
          title="What clients say"
          description="Feedback from colleagues and clients I've worked with"
          testimonials={[
            {
              id: "1",
              title: "Exceptional frontend expertise",
              quote: "Working with this developer was a game-changer. They delivered a responsive, high-performance interface that exceeded our expectations. Their attention to detail and code quality is outstanding.",
              name: "Sarah Chen",
              role: "Product Manager",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140101670-ttp7xdlv.jpg"
            },
            {
              id: "2",
              title: "Great communication and delivery",
              quote: "Professional, reliable, and always willing to go the extra mile. They took our design mockups and brought them to life beautifully. Highly recommend for any frontend projects.",
              name: "Michael Rodriguez",
              role: "Design Director",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140152452-p4x3ah4p.jpg"
            },
            {
              id: "3",
              title: "Improved our entire codebase",
              quote: "Brought in fresh perspectives and best practices that significantly improved our application's performance and maintainability. A pleasure to collaborate with.",
              name: "Emma Thompson",
              role: "Tech Lead",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766163677896-h7vfowg5.jpg"
            },
            {
              id: "4",
              title: "Problem-solving mindset",
              quote: "Not just a developer, but a problem-solver. They understood our business needs and delivered solutions that were both elegant and practical. Exceeded our timeline expectations.",
              name: "James Wilson",
              role: "CEO",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766163678723-295psgl3.jpg"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get in touch"
          title="Ready to collaborate?"
          description="Have a project in mind or want to discuss frontend development? I'd love to hear about your ideas and how we can work together."
          tagIcon={Mail}
          useInvertedBackground="noInvert"
          inputPlaceholder="your.email@example.com"
          buttonText="Let's connect"
          termsText="I'll get back to you within 24 hours. I respect your privacy."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSocial
          logoText="Dev Portfolio"
          columns={[
            {
              title: "Work",
              items: [
                {
                  label: "Projects",
                  href: "#featured-projects"
                },
                {
                  label: "Skills",
                  href: "#expertise"
                }
              ]
            },
            {
              title: "About",
              items: [
                {
                  label: "Bio",
                  href: "#about"
                },
                {
                  label: "Testimonials",
                  href: "#testimonials"
                }
              ]
            },
            {
              title: "Connect",
              items: [
                {
                  label: "Email",
                  href: "#contact"
                },
                {
                  label: "Resume",
                  href: "#contact"
                }
              ]
            }
          ]}
          socialLinks={[
            {
              icon: Github,
              href: "https://github.com",
              ariaLabel: "GitHub profile"
            },
            {
              icon: Linkedin,
              href: "https://linkedin.com",
              ariaLabel: "LinkedIn profile"
            },
            {
              icon: Twitter,
              href: "https://twitter.com",
              ariaLabel: "Twitter profile"
            }
          ]}
          copyrightText="© 2025 Frontend Developer. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}