"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Award, Sparkles } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="mediumSmall"
      sizing="medium"
      background="aurora"
      cardStyle="layered-gradient"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Portfolio"
          navItems={[
            { name: "Home", id: "hero" },
            { name: "About", id: "about" },
            { name: "Projects", id: "projects" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Let's Connect", href: "contact" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardRotatedCarousel
          title="Crafting Digital Experiences"
          description="Showcase your creative portfolio with stunning project galleries, compelling storytelling, and meaningful client connections. Let your work speak for itself."
          tag="Welcome to My Portfolio"
          tagIcon={Sparkles}
          background={{ variant: "aurora" }}
          buttons={[
            { text: "View My Work", href: "projects" },
            { text: "Get in Touch", href: "contact" }
          ]}
          carouselItems={[
            {
              id: "1",              imageSrc: "https://img.b2bpic.net/free-vector/gradient-business-template-design_23-2149752076.jpg",              imageAlt: "portfolio design creative project showcase"
            },
            {
              id: "2",              imageSrc: "https://img.b2bpic.net/free-psd/creative-template-design_23-2150217599.jpg",              imageAlt: "portfolio mockup design digital work"
            },
            {
              id: "3",              imageSrc: "https://img.b2bpic.net/free-vector/minimal-painting-atelier-landing-page-template_23-2149415476.jpg",              imageAlt: "portfolio design interface creative project"
            },
            {
              id: "4",              imageSrc: "https://img.b2bpic.net/free-vector/gradient-interior-landing-page-design-template_23-2149263407.jpg",              imageAlt: "portfolio showcase design work creative"
            },
            {
              id: "5",              imageSrc: "https://img.b2bpic.net/free-vector/gradient-business-template-design_23-2149752068.jpg",              imageAlt: "portfolio design project creative showcase"
            },
            {
              id: "6",              imageSrc: "https://img.b2bpic.net/free-vector/photography-template-design_23-2149752056.jpg",              imageAlt: "portfolio work design creative digital"
            }
          ]}
          autoPlay={true}
          autoPlayInterval={5000}
        />
      </div>

      <div id="about" data-section="about">
        <TextSplitAbout
          title="About Me"
          description={[
            "I'm a creative professional passionate about designing and developing beautiful digital solutions that solve real problems. With expertise in user experience, visual design, and cutting-edge development practices, I bring ideas to life.",            "My approach combines strategic thinking with meticulous attention to detail. I believe in creating work that not only looks exceptional but also delivers measurable impact for businesses and their users. Let's collaborate and create something remarkable together."
          ]}
          buttons={[
            { text: "Download Resume", href: "#" },
            { text: "Learn More", href: "#" }
          ]}
          showBorder={true}
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="projects" data-section="projects">
        <FeatureCardOne
          title="Featured Projects"
          description="A curated selection of my best work showcasing diverse design solutions, technical expertise, and creative problem-solving across various industries and mediums."
          tag="Portfolio"
          tagIcon={Award}
          textboxLayout="default"
          features={[
            {
              title: "Digital Transformation Platform",              description: "A comprehensive SaaS platform redesign that increased user engagement by 45% through improved UX and modern interface design.",              imageSrc: "https://img.b2bpic.net/free-photo/determined-ceo-works-office-analyzing-infographics-setting-business-goals_482257-123120.jpg",              imageAlt: "saas dashboard digital transformation interface",              button: { text: "View Case Study", href: "#" }
            },
            {
              title: "E-Commerce Marketplace",              description: "Full-stack development of a scalable marketplace platform handling millions of transactions with seamless checkout and inventory management.",              imageSrc: "https://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg",              imageAlt: "ecommerce marketplace shopping digital platform"
            },
            {
              title: "Brand Identity System",              description: "Complete visual identity system and design guidelines for a fast-growing tech startup, including logo, typography, and component library.",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-modern-laptop-with-rate-charts-display-while-man-woman-working-business-project-design-computer-screen-with-data-chart-information-finance-analysis-desk_482257-40065.jpg",              imageAlt: "branding identity logo design system"
            },
            {
              title: "Mobile App Experience",              description: "iOS and Android native app development with intuitive UI/UX patterns, real-time synchronization, and offline capabilities.",              imageSrc: "https://img.b2bpic.net/free-photo/male-entrepreneur-conducting-financial-planning-goal-setting_482257-122658.jpg",              imageAlt: "mobile app ios interface ux"
            },
            {
              title: "Data Visualization Dashboard",              description: "Interactive analytics dashboard transforming complex datasets into actionable insights with dynamic visualizations and real-time updates.",              imageSrc: "https://img.b2bpic.net/free-photo/business-leader-trader-searching-new-investment-solution_482257-116895.jpg",              imageAlt: "dashboard analytics data visualization interface"
            },
            {
              title: "Content Management System",              description: "Custom headless CMS development enabling content creators to manage multi-channel publishing with flexible content modeling.",              imageSrc: "https://img.b2bpic.net/free-photo/business-analyst-meeting-with-coworker-review-financial-report_482257-123652.jpg",              imageAlt: "content management cms system interface"
            }
          ]}
          gridVariant="one-large-right-three-stacked-left"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="featured" data-section="featured">
        <ProductCardThree
          title="Latest Work"
          description="Explore recent projects that demonstrate innovation, technical excellence, and commitment to user-centered design principles."
          textboxLayout="default"
          gridVariant="uniform-all-items-equal"
          animationType="scale-rotate"
          useInvertedBackground="invertDefault"
          products={[
            {
              id: "1",              name: "Web Design System",              price: "2024",              imageSrc: "https://img.b2bpic.net/free-vector/flat-computer-engineering-concept_23-2148156680.jpg",              imageAlt: "design system components web interface"
            },
            {
              id: "2",              name: "Mobile Application",              price: "2024",              imageSrc: "https://img.b2bpic.net/free-vector/design-process-concept-landing-page_23-2148314296.jpg",              imageAlt: "mobile application app interface design"
            },
            {
              id: "3",              name: "Brand Campaign",              price: "2024",              imageSrc: "https://img.b2bpic.net/free-vector/design-background-design_1223-67.jpg",              imageAlt: "campaign branding marketing creative design"
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          cardTitle="Trusted by industry leaders and innovative startups. 500+ successful projects delivered."
          cardTag="Client Testimonials"
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson",              imageSrc: "https://img.b2bpic.net/free-photo/blonde-businesswoman-portrait-with-copy-space_1194-633470.jpg",              imageAlt: "portrait professional avatar woman headshot"
            },
            {
              id: "2",              name: "Michael Chen",              imageSrc: "https://img.b2bpic.net/free-photo/closeup-content-pretty-businesswoman-glasses_1262-1740.jpg",              imageAlt: "portrait professional avatar man headshot"
            },
            {
              id: "3",              name: "Emma Rodriguez",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-happy-woman-black-jacket-happy-short-haired-girl-dark-suit-widely-sincerely-smiles-isolated-background_197531-18508.jpg",              imageAlt: "portrait professional avatar woman headshot"
            },
            {
              id: "4",              name: "David Kim",              imageSrc: "https://img.b2bpic.net/free-photo/friendly-successful-business-lady-wearing-formal-suit-glasses-standing-with-arms-folded-smiling_74855-9932.jpg",              imageAlt: "portrait professional avatar man headshot"
            },
            {
              id: "5",              name: "Jessica Lee",              imageSrc: "https://img.b2bpic.net/free-photo/attractive-european-girl-with-charming-smile-keeps-arms-folded-wears-round-spectacles_273609-18493.jpg",              imageAlt: "portrait professional avatar woman headshot"
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Get In Touch"
          title="Let's Create Something Amazing"
          description="Have a project in mind? I'd love to hear about it. Send me a message and let's discuss how we can work together to bring your vision to life."
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground="invertDefault"
          imageSrc="https://img.b2bpic.net/free-photo/happy-young-colleagues-office-coworking_171337-17719.jpg"
          imageAlt="creative workspace collaboration team office"
          mediaPosition="right"
          inputPlaceholder="your@email.com"
          buttonText="Send Message"
          termsText="I'll respond to your message within 24 hours. We respect your privacy."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="Portfolio"
          columns={[
            {
              items: [
                { label: "Home", href: "hero" },
                { label: "About", href: "about" },
                { label: "Projects", href: "projects" }
              ]
            },
            {
              items: [
                { label: "Contact", href: "contact" },
                { label: "LinkedIn", href: "https://linkedin.com" },
                { label: "GitHub", href: "https://github.com" }
              ]
            },
            {
              items: [
                { label: "Twitter", href: "https://twitter.com" },
                { label: "Dribbble", href: "https://dribbble.com" },
                { label: "Behance", href: "https://behance.net" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}