"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import MediaSplitTabsAbout from '@/components/sections/about/MediaSplitTabsAbout';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="slide-background"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="mediumSmall"
      sizing="largeSmall"
      background="circleGradient"
      cardStyle="soft-shadow"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          navItems={[
            { name: "Home", id: "hero" },
            { name: "About", id: "about" },
            { name: "Projects", id: "projects" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Let's Talk", href: "contact" }}
          brandName="Portfolio"
        />
      </div>
      
      <div id="hero" data-section="hero">
        <HeroOverlay
          title="Creative Portfolio"
          description="Showcasing design excellence and innovative digital solutions"
          imageSrc="https://img.b2bpic.net/free-photo/elegant-cozy-office-lifestyle_23-2149636247.jpg"
          imageAlt="Modern portfolio workspace"
          textPosition="bottom-left"
          showBlur={true}
          showDimOverlay={true}
          buttons={[
            { text: "Explore Work", href: "projects" },
            { text: "Get In Touch", href: "contact" }
          ]}
        />
      </div>
      
      <div id="about" data-section="about">
        <MediaSplitTabsAbout
          title="About Me"
          description="Passionate designer and developer creating digital experiences"
          tabs={[
            {
              id: "expertise",              label: "Expertise",              description: "I specialize in UI/UX design, web development, and digital branding. With years of experience in creating beautiful, functional interfaces, I deliver solutions that combine aesthetics with usability."
            },
            {
              id: "approach",              label: "My Approach",              description: "I believe in thoughtful design that solves real problems. Every project starts with understanding your goals, understanding your users, and creating solutions that exceed expectations through collaboration and innovation."
            },
            {
              id: "mission",              label: "Mission",              description: "My mission is to create digital products that inspire and delight. I'm committed to pushing boundaries, staying current with design trends, and delivering work that makes a meaningful impact in the digital landscape."
            }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/portrait-young-pretty-woman-sitting-table-trench-coat-working-laptop-co-working-office-wearing-glasses-smiling-happy-positive-workplace_285396-65.jpg"
          imageAlt="Professional portfolio designer"
          imagePosition="right"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="projects" data-section="projects">
        <ProductCardOne
          title="Featured Projects"
          description="A curated selection of my best work across design and development"
          products={[
            {
              id: "1",              name: "Brand Identity System",              price: "2023",              imageSrc: "https://img.b2bpic.net/free-vector/social-page-application-ui-design-concept_1284-45234.jpg",              imageAlt: "Brand identity design project"
            },
            {
              id: "2",              name: "E-Commerce Platform",              price: "2023",              imageSrc: "https://img.b2bpic.net/free-vector/making-new-memories-travel-mobile-app_23-2148497898.jpg",              imageAlt: "E-commerce platform redesign"
            },
            {
              id: "3",              name: "Mobile App Design",              price: "2024",              imageSrc: "https://img.b2bpic.net/free-vector/flat-design-brutalism-template_52683-97146.jpg",              imageAlt: "Mobile application ui design"
            },
            {
              id: "4",              name: "Web Experience",              price: "2024",              imageSrc: "https://img.b2bpic.net/free-psd/movement-web-template-template_23-2149184570.jpg",              imageAlt: "Website redesign and development"
            }
          ]}
          gridVariant="two-columns-alternating-heights"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Get In Touch"
          title="Ready to collaborate?"
          description="Have a project in mind or want to discuss opportunities? I'd love to hear from you. Reach out and let's create something amazing together."
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground="noInvert"
          imageSrc="https://img.b2bpic.net/free-photo/happy-young-businesswoman-talking-mobile-phone-cafe_1262-20247.jpg"
          imageAlt="Team collaboration"
          mediaPosition="right"
          inputPlaceholder="Enter your email"
          buttonText="Send"
          termsText="I respect your privacy. Unsubscribe at any time."
        />
      </div>
      
      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="Portfolio"
          leftLink={{ text: "Privacy Policy", href: "#" }}
          rightLink={{ text: "Terms of Service", href: "#" }}
        />
      </div>
    </ThemeProvider>
  );
}