"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Sparkles, User, Lightbulb, MessageSquare } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="slide-background"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="medium"
      sizing="largeSmallSizeMediumTitles"
      background="none"
      cardStyle="layered-gradient"
      primaryButtonStyle="inset-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Portfolio"
          navItems={[
            { name: "Work", id: "projects" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Get in Touch", href: "#contact" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboard
          logoText="Creative Designer"
          description="Crafting digital experiences through thoughtful design and innovative solutions. Explore my latest projects and let's build something amazing together."
          buttons={[
            { text: "View My Work", href: "#projects" },
            { text: "Get in Touch", href: "#contact" }
          ]}
          background={{ variant: "sparkles-gradient" }}
          imageSrc="https://img.b2bpic.net/free-photo/view-office-desk-with-messy-workspace-laptop_23-2150282085.jpg"
          imageAlt="Designer at workspace creating digital experiences"
          frameStyle="card"
        />
      </div>

      <div id="projects" data-section="projects">
        <ProductCardTwo
          title="Featured Projects"
          description="A selection of my recent design work across web, branding, and digital experiences"
          tag="Portfolio"
          tagIcon={Sparkles}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          gridVariant="asymmetric-60-wide-40-narrow"
          products={[
            {
              id: "1",              brand: "Digital Experience",              name: "E-Commerce Platform Redesign",              price: "2023",              rating: 5,
              reviewCount: "Award Winner",              imageSrc: "https://img.b2bpic.net/free-vector/neon-landing-page-with-smartphone_52683-28231.jpg",              imageAlt: "E-commerce platform interface design with modern layout"
            },
            {
              id: "2",              brand: "Brand Identity",              name: "Corporate Branding Suite",              price: "2023",              rating: 5,
              reviewCount: "Featured",              imageSrc: "https://img.b2bpic.net/free-vector/gradient-ui-ux-background_52683-68958.jpg",              imageAlt: "Complete branding package with logo and visual guidelines"
            },
            {
              id: "3",              brand: "Mobile App",              name: "Fitness Tracking Application",              price: "2024",              rating: 5,
              reviewCount: "Launched",              imageSrc: "https://img.b2bpic.net/free-vector/gradient-abstract-technology-landing-page-template_23-2149164222.jpg",              imageAlt: "Mobile app interface for health and fitness tracking"
            },
            {
              id: "4",              brand: "Print Design",              name: "Marketing Campaign Materials",              price: "2024",              rating: 5,
              reviewCount: "Success",              imageSrc: "https://img.b2bpic.net/free-vector/gradient-ui-ux-landing-page_52683-69728.jpg",              imageAlt: "Comprehensive marketing campaign collateral and materials"
            }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <TestimonialAboutCard
          tag="About Me"
          tagIcon={User}
          title="Passionate designer with a focus on creating meaningful digital experiences that solve real problems and delight users."
          description="Sarah Mitchell"
          subdescription="Digital Designer & UX Strategist"
          icon={Lightbulb}
          imageSrc="https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg"
          imageAlt="Professional portrait of Sarah Mitchell, digital designer"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardSeven
          title="Experience & Expertise"
          description="Key achievements and skills developed through years of design work"
          tag="Skills"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          metrics={[
            {
              id: "1",              value: "8+",              title: "Years of Design Experience",              items: [
                "Web Design & Development",                "UI/UX Strategy",                "Brand Identity Development"
              ]
            },
            {
              id: "2",              value: "50+",              title: "Projects Completed Successfully",              items: [
                "E-commerce Platforms",                "Corporate Branding",                "Mobile Applications"
              ]
            },
            {
              id: "3",              value: "40+",              title: "Satisfied Clients Worldwide",              items: [
                "Startups to Fortune 500",                "Diverse Industries",                "Global Collaborations"
              ]
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactFaq
          ctaTitle="Start Your Project"
          ctaDescription="Ready to bring your ideas to life? Let's collaborate and create something extraordinary together."
          ctaButton={{ text: "Schedule a Call", href: "mailto:hello@example.com" }}
          ctaIcon={MessageSquare}
          useInvertedBackground="noInvert"
          animationType="slide-up"
          faqs={[
            {
              id: "1",              title: "What is your typical project timeline?",              content: "Most projects take 4-12 weeks depending on complexity and scope. I'll provide a detailed timeline during our initial consultation to ensure alignment with your goals."
            },
            {
              id: "2",              title: "Do you offer revisions?",              content: "Absolutely! I include unlimited revisions until you're completely satisfied with the design. Your vision and feedback are central to creating the perfect outcome."
            },
            {
              id: "3",              title: "What's your design process?",              content: "I follow a collaborative approach: Discovery → Strategy → Concepts → Refinement → Delivery. You'll be involved every step of the way with regular feedback sessions."
            },
            {
              id: "4",              title: "Do you provide post-launch support?",              content: "Yes, I offer ongoing support and maintenance packages. Whether it's updates, optimizations, or new features, I'm here to help your design succeed long-term."
            }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="Portfolio"
          copyrightText="© 2025 Sarah Mitchell. All rights reserved."
          columns={[
            {
              title: "Work",              items: [
                { label: "Portfolio", href: "#projects" },
                { label: "Case Studies", href: "#projects" },
                { label: "Services", href: "#about" }
              ]
            },
            {
              title: "About",              items: [
                { label: "Bio", href: "#about" },
                { label: "Skills", href: "#metrics" },
                { label: "Blog", href: "#" }
              ]
            },
            {
              title: "Connect",              items: [
                { label: "Email", href: "mailto:hello@example.com" },
                { label: "LinkedIn", href: "https://linkedin.com" },
                { label: "Dribbble", href: "https://dribbble.com" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}