"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import MediaSplitTabsAbout from '@/components/sections/about/MediaSplitTabsAbout';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Award, MessageSquare, Sparkles, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="mediumSmall"
      sizing="large"
      background="aurora"
      cardStyle="outline"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="layered"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Portfolio"
          navItems={[
            { name: "Work", id: "gallery" },
            { name: "About", id: "about" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Get in Touch",            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardGallery
          title="Crafting Digital Experiences"
          description="Explore a curated collection of innovative design projects that blend creativity with functionality"
          tag="Portfolio Showcase"
          tagIcon={Sparkles}
          background={{ variant: "radial-gradient" }}
          mediaItems={[
            {
              imageSrc: "https://img.b2bpic.net/free-psd/emotional-wellbeing-landing-page_23-2149170499.jpg",              imageAlt: "Portfolio project showcase"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-psd/minimal-magazine-cover-landing-page-template_23-2149660314.jpg",              imageAlt: "Creative digital design"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-psd/landing-page-template-professional-business_23-2150623079.jpg",              imageAlt: "Design project gallery"
            }
          ]}
          buttons={[
            { text: "View All Work", href: "gallery" },
            { text: "Start a Project", href: "contact" }
          ]}
        />
      </div>

      <div id="gallery" data-section="gallery">
        <ProductCardOne
          title="Featured Projects"
          description="Discover the latest design work showcasing creativity, technical excellence, and innovative solutions"
          tag="Recent Work"
          tagIcon={Zap}
          products={[
            {
              id: "1",              name: "E-Commerce Platform Redesign",              price: "2024",              imageSrc: "https://img.b2bpic.net/free-vector/gradient-business-template-design_23-2149752068.jpg",              imageAlt: "E-commerce platform"
            },
            {
              id: "2",              name: "Brand Identity System",              price: "2024",              imageSrc: "https://img.b2bpic.net/free-psd/creative-template-design_23-2150217599.jpg",              imageAlt: "Brand identity project"
            },
            {
              id: "3",              name: "Mobile App Interface",              price: "2024",              imageSrc: "https://img.b2bpic.net/free-psd/portfolio-showcase-social-media-template-with-photo-frame_47987-32070.jpg",              imageAlt: "Mobile app design"
            },
            {
              id: "4",              name: "Visual Campaign",              price: "2024",              imageSrc: "https://img.b2bpic.net/free-psd/plant-care-template-design_23-2150262440.jpg",              imageAlt: "Visual campaign project"
            },
            {
              id: "5",              name: "Digital Branding Suite",              price: "2024",              imageSrc: "https://img.b2bpic.net/free-vector/gradient-business-template-design_23-2149752076.jpg",              imageAlt: "Branding suite project"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="about" data-section="about">
        <MediaSplitTabsAbout
          title="About My Practice"
          description="Dedicated to creating meaningful design solutions that drive results"
          tabs={[
            {
              id: "approach",              label: "My Approach",              description: "I believe in combining strategic thinking with creative problem-solving. Every project starts with understanding your goals, audience, and unique challenges. Through collaborative research and iterative design, I craft solutions that are both beautiful and functional, delivering measurable impact for your business."
            },
            {
              id: "expertise",              label: "Expertise",              description: "With over 8 years of experience in digital design, I specialize in UX/UI design, branding, and web design. My toolkit includes Figma, Adobe Creative Suite, and modern development practices. I stay current with design trends while maintaining timeless principles that ensure longevity and relevance."
            },
            {
              id: "philosophy",              label: "Philosophy",              description: "Design is more than aesthetics—it's about solving problems and creating experiences. I'm passionate about accessibility, user-centered design, and sustainable practices. Every project is an opportunity to push boundaries while respecting the user's needs and the client's vision."
            }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/workplace-with-laptop_23-2147651756.jpg"
          imageAlt="Creative professional at work"
          imagePosition="right"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardThirteen
          title="What Clients Say"
          description="Testimonials from satisfied clients and collaborators"
          tag="Testimonials"
          tagIcon={Award}
          testimonials={[
            {
              id: "1",              name: "Jessica Chen",              handle: "@jessicachen",              testimonial: "Working with this designer transformed our brand completely. The attention to detail and creative vision exceeded all expectations. Highly recommended!",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "Jessica Chen"
            },
            {
              id: "2",              name: "Marcus Rodriguez",              handle: "@mrodriguez",              testimonial: "Exceptional work on our e-commerce redesign. The conversion rates increased by 40% in the first month. True professional.",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg",              imageAlt: "Marcus Rodriguez"
            },
            {
              id: "3",              name: "Sarah Thompson",              handle: "@sthompson",              testimonial: "A pleasure to collaborate with. Communicative, creative, and always delivers on time. Looking forward to our next project together.",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg",              imageAlt: "Sarah Thompson"
            },
            {
              id: "4",              name: "David Kim",              handle: "@dkim",              testimonial: "Outstanding design work combined with strategic thinking. This designer truly understands the business side of design.",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/positive-confident-businessman-posing-outside_74855-1183.jpg",              imageAlt: "David Kim"
            }
          ]}
          showRating={true}
          carouselMode="buttons"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get Started"
          tagIcon={MessageSquare}
          title="Ready to Start Your Project?"
          description="Let's collaborate and bring your vision to life. Whether you have a specific project in mind or want to explore possibilities, I'd love to hear from you."
          background={{ variant: "rotated-rays-animated" }}
          useInvertedBackground="noInvert"
          inputPlaceholder="Enter your email"
          buttonText="Contact Me"
          termsText="We respect your privacy. I'll get back to you within 48 hours."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="Portfolio"
          columns={[
            {
              items: [
                { label: "Work", href: "gallery" },
                { label: "About", href: "about" },
                { label: "Contact", href: "contact" }
              ]
            },
            {
              items: [
                { label: "LinkedIn", href: "https://linkedin.com" },
                { label: "Twitter", href: "https://twitter.com" },
                { label: "GitHub", href: "https://github.com" }
              ]
            },
            {
              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}