"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroBillboardScroll from "@/components/sections/hero/HeroBillboardScroll";
import SplitAbout from "@/components/sections/about/SplitAbout";
import ProductCardOne from "@/components/sections/product/ProductCardOne";
import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCardTen";
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
import FooterBase from "@/components/sections/footer/FooterBase";
import { Sparkles, User, Brain, Eye, Users, Quote, Layout } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="compact"
      sizing="mediumLarge"
      background="circleGradient"
      cardStyle="soft-shadow"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Your Brand"
          navItems={[
            { name: "About", id: "about" },
            { name: "Work", id: "work" },
            { name: "Contact", id: "contact" },
          ]}
          button={{ text: "Let's Connect", href: "contact" }}
          animateOnLoad={true}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardScroll
          title="Creative Professional & Brand Builder"
          description="Crafting meaningful digital experiences through thoughtful design and strategic storytelling. Welcome to my creative space."
          tag="Portfolio"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          background={{ variant: "plain" }}
          imageSrc="http://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg"
          imageAlt="Professional portrait"
          buttons={[
            { text: "Explore My Work", href: "work" },
            { text: "Get in Touch", href: "contact" },
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="about" data-section="about">
        <SplitAbout
          title="About Me"
          description="I'm passionate about creating elegant solutions to complex problems. With a focus on minimalism and user experience, I bring clarity and purpose to every project."
          tag="My Story"
          tagIcon={User}
          tagAnimation="slide-up"
          bulletPoints={[
            {
              title: "Strategic Thinker",              description: "Combining creative vision with strategic insight to deliver impactful results.",              icon: Brain,
            },
            {
              title: "Detail Oriented",              description: "Every pixel matters. Precision and thoughtfulness guide my work.",              icon: Eye,
            },
            {
              title: "Collaborative Partner",              description: "Working closely with clients to understand vision and exceed expectations.",              icon: Users,
            },
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/woman-is-working-desk-with-laptop-front-her-office-setting_1258-296437.jpg"
          imageAlt="Creative workspace"
          mediaAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          imagePosition="right"
        />
      </div>

      <div id="work" data-section="work">
        <ProductCardOne
          title="Featured Work"
          description="A selection of recent projects showcasing strategic thinking and thoughtful execution."
          tag="Portfolio"
          tagIcon={Layout}
          tagAnimation="slide-up"
          products={[
            {
              id: "1",              name: "Brand Identity System",              price: "Strategic Design",              imageSrc: "http://img.b2bpic.net/free-photo/elegant-cozy-office-lifestyle_23-2149636247.jpg",              imageAlt: "Brand identity project"},
            {
              id: "2",              name: "Digital Platform Redesign",              price: "User Experience",              imageSrc: "http://img.b2bpic.net/free-photo/workspace-with-note-brick-wall_53876-31266.jpg",              imageAlt: "Platform redesign project"},
            {
              id: "3",              name: "Content Strategy Campaign",              price: "Creative Direction",              imageSrc: "http://img.b2bpic.net/free-vector/sales-proposal-template-design_742173-25277.jpg",              imageAlt: "Content campaign project"},
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTen
          title="What Others Say"
          description="Hear from collaborators and clients about the impact of working together."
          tag="Testimonials"
          tagIcon={Quote}
          tagAnimation="slide-up"
          testimonials={[
            {
              id: "1",              title: "Exceptional Creative Vision",              quote: "Working with this creative professional transformed our brand completely. The attention to detail and strategic approach set a new standard for our organization.",              name: "Sarah Mitchell",              role: "Marketing Director",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg?_wi=1",              imageAlt: "Sarah Mitchell"},
            {
              id: "2",              title: "True Partnership",              quote: "Beyond design skills, the collaborative approach made all the difference. Every decision was thoughtful and aligned with our vision.",              name: "Marcus Johnson",              role: "CEO, Innovation Labs",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg?_wi=2",              imageAlt: "Marcus Johnson"},
            {
              id: "3",              title: "Delivered Excellence",              quote: "Professional, efficient, and incredibly creative. The final output exceeded our expectations and drove measurable results.",              name: "Emily Rodriguez",              role: "Product Manager",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg?_wi=3",              imageAlt: "Emily Rodriguez"},
            {
              id: "4",              title: "A Game Changer",              quote: "The strategic insights combined with beautiful execution made our project stand out in the marketplace. Highly recommended.",              name: "David Chen",              role: "Founder, StartupXYZ",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-curly-handsome-european-male_176532-8133.jpg?_wi=4",              imageAlt: "David Chen"},
          ]}
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Let's Create Together"
          description="Have a project in mind? I'd love to hear about your vision and explore how we can collaborate to bring it to life."
          inputs={[
            { name: "name", type: "text", placeholder: "Your Name", required: true },
            { name: "email", type: "email", placeholder: "Your Email", required: true },
          ]}
          textarea={{ name: "message", placeholder: "Tell me about your project...", rows: 5, required: true }}
          useInvertedBackground={false}
          imageSrc="http://img.b2bpic.net/free-vector/hand-drawn-business-communication-concept_23-2149140766.jpg"
          imageAlt="Contact illustration"
          mediaAnimation="slide-up"
          mediaPosition="right"
          buttonText="Send Message"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="Your Brand"
          copyrightText="© 2025 Your Brand. All rights reserved."
          columns={[
            {
              title: "Navigation",              items: [
                { label: "About", href: "#about" },
                { label: "Work", href: "#work" },
                { label: "Testimonials", href: "#testimonials" },
              ],
            },
            {
              title: "Connect",              items: [
                { label: "LinkedIn", href: "https://linkedin.com" },
                { label: "Twitter", href: "https://twitter.com" },
                { label: "Email", href: "mailto:hello@example.com" },
              ],
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
              ],
            },
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
