"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import TagMediaSplitAbout from '@/components/sections/about/TagMediaSplitAbout';
import FeatureCardThirteen from '@/components/sections/feature/FeatureCardThirteen';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import ContactText from '@/components/sections/contact/ContactText';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Award, Dribbble, Layers, Lightbulb, Linkedin, Quote, Sparkles, Twitter } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="sharp"
      contentWidth="small"
      sizing="largeSizeMediumTitles"
      background="aurora"
      cardStyle="elevated"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="outline"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="Portfolio"
          navItems={[
            { name: "Work", id: "work" },
            { name: "About", id: "about" },
            { name: "Process", id: "process" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Get In Touch", href: "contact" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardGallery
          title="Elevating brands through exceptional design"
          description="I create thoughtful visual solutions that engage audiences and drive meaningful results for forward-thinking brands"
          tag="Design Portfolio"
          tagIcon={Sparkles}
          mediaItems={[
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766970383487-k7n592it.jpg", imageAlt: "Portfolio project showcase" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766970384378-n5zqdrd8.jpg", imageAlt: "Branding and visual design" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766488005357-9beefs8k.jpg", imageAlt: "Digital interface design" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766139083006-v50xgv4n.jpg", imageAlt: "Design process and methodology" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766401281537-bd695c8y.jpg", imageAlt: "Creative typography work" }
          ]}
          buttons={[
            { text: "View My Work", href: "work" },
            { text: "Let's Collaborate", href: "contact" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <TagMediaSplitAbout
          title="About My Work"
          description="Bringing over a decade of design expertise to every project"
          tag="Designer"
          tagIcon={Award}
          textboxLayout="default"
          contentTag="DESIGN PHILOSOPHY"
          contentTagIcon={Lightbulb}
          contentTitle="Strategic design with emotional depth"
          contentDescription="I believe exceptional design solves real problems while creating memorable experiences. Every project starts with understanding your goals, audience, and brand values. Through research, iteration, and collaboration, I develop solutions that are not only beautiful but also effective."
          contentButtons={[{ text: "Learn More", href: "#process" }]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140151637-4n68pd8r.jpg"
          imageAlt="Designer at work"
          imagePosition="right"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="work" data-section="work">
        <FeatureCardThirteen
          title="My Design Process"
          description="A structured approach to creating impactful visual solutions"
          tag="Process"
          tagIcon={Layers}
          textboxLayout="default"
          features={[
            { id: "01", title: "Discovery", description: "Understanding your vision, brand values, and target audience through research and strategic conversations." },
            { id: "02", title: "Conceptualization", description: "Developing creative concepts and visual directions that align with your goals and market position." },
            { id: "03", title: "Refinement", description: "Iterating on designs through feedback, testing, and optimization to achieve visual excellence." },
            { id: "04", title: "Delivery", description: "Providing comprehensive deliverables and ongoing support to ensure seamless implementation." }
          ]}
          gridVariant="four-items-2x2-equal-grid"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwo
          title="What Clients Say"
          description="Feedback from brands and businesses I've had the pleasure of working with"
          tag="Reviews"
          tagIcon={Quote}
          textboxLayout="default"
          testimonials={[
            { id: "1", name: "Sarah Johnson", role: "Creative Director", testimonial: "Working with this designer transformed how our brand communicates. The attention to detail and strategic thinking behind every design decision was exceptional. Highly recommended.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766401281537-bd695c8y.jpg", imageAlt: "Sarah Johnson" },
            { id: "2", name: "Michael Chen", role: "Founder & CEO", testimonial: "Exceptional creative vision combined with excellent communication. This designer understood our brand identity and elevated it beyond what we imagined. Truly a pleasure to collaborate with.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766970385573-vcim214c.jpg", imageAlt: "Michael Chen" },
            { id: "3", name: "Emily Rodriguez", role: "Marketing Manager", testimonial: "The design work was outstanding. From concept to final delivery, every step was handled professionally. Our clients have noticed the improvement in our visual presence. Excellent value and service.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766735974338-mwt6qh8n.jpg", imageAlt: "Emily Rodriguez" },
            { id: "4", name: "David Park", role: "Brand Manager", testimonial: "This designer brings both artistic excellence and business acumen to every project. The results speak for themselves. We've already commissioned multiple follow-up projects based on the first experience.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766735977046-e7cx4iz7.jpg", imageAlt: "David Park" }
          ]}
          carouselMode="buttons"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to start your next design project? Let's create something exceptional together."
          animationType="reveal-blur"
          buttons={[
            { text: "Send Me an Email", href: "mailto:hello@portfolio.com" },
            { text: "Schedule a Call", href: "#" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="Portfolio"
          copyrightText="© 2025 | Design Portfolio. All rights reserved."
          socialLinks={[
            { icon: Dribbble, href: "https://dribbble.com", ariaLabel: "Dribbble" },
            { icon: Linkedin, href: "https://linkedin.com", ariaLabel: "LinkedIn" },
            { icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}