"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Rocket } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="mediumSmall"
      sizing="mediumLargeSizeMediumTitles"
      background="aurora"
      cardStyle="gradient-mesh"
      primaryButtonStyle="flat"
      secondaryButtonStyle="solid"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Portfolio"
          navItems={[
            { name: "About", id: "about" },
            { name: "Projects", id: "projects" },
            { name: "Skills", id: "skills" },
            { name: "Contact", id: "contact" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogo
          logoText="Creative Designer"
          description="Crafting exceptional digital experiences through innovative design and strategic thinking"
          buttons={[
            { text: "View My Work", href: "projects" },
            { text: "Get In Touch", href: "contact" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/top-view-workspace-with-glasses-notebook_23-2148430817.jpg"
          imageAlt="Portfolio hero background"
          showDimOverlay={true}
        />
      </div>

      <div id="about" data-section="about">
        <InlineImageSplitTextAbout
          heading={[
            { type: "text", content: "I'm a passionate " },
            { type: "text", content: "digital designer" },
            { type: "text", content: " with 8+ years of experience creating beautiful, functional experiences. I specialize in UI/UX design, branding, and digital strategy." }
          ]}
          buttons={[
            { text: "Download Resume", href: "https://example.com/resume" },
            { text: "Connect on LinkedIn", href: "https://linkedin.com" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="projects" data-section="projects">
        <FeatureCardThree
          title="Featured Projects"
          description="A selection of my recent work showcasing diverse design disciplines and successful outcomes"
          tag="Portfolio"
          features={[
            {
              id: "01",              title: "E-Commerce Platform Redesign",              description: "Complete UX overhaul increasing conversion rates by 45% through improved user flows and interface design",              imageSrc: "https://img.b2bpic.net/free-photo/business-accessories-objects-top-view_1150-7574.jpg",              imageAlt: "E-commerce platform redesign"
            },
            {
              id: "02",              title: "Brand Identity System",              description: "Comprehensive branding package including logo, color palette, typography system, and brand guidelines",              imageSrc: "https://img.b2bpic.net/free-photo/elevated-view-laptop-earphones-crumpled-papers-pencil-blank-spiral-notepad-frame-black-background_23-2148080331.jpg",              imageAlt: "Brand identity system"
            },
            {
              id: "03",              title: "Mobile App Concept",              description: "Full-featured iOS app design with focus on seamless user experience and modern interface patterns",              imageSrc: "https://img.b2bpic.net/free-photo/laptop-with-office-stationery-personal-accessories-with-cup-tea-black-background_23-2148080334.jpg",              imageAlt: "Mobile app concept"
            },
            {
              id: "04",              title: "Visual Content Campaign",              description: "Creative direction and visual design for multi-channel marketing campaign reaching 500K+ users",              imageSrc: "https://img.b2bpic.net/free-photo/flat-lay-work-space-with-notebook-keyboard_23-2148397830.jpg",              imageAlt: "Visual content campaign"
            }
          ]}
          gridVariant="two-columns-alternating-heights"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFive
          title="Client Testimonials"
          description="What clients and collaborators have to say about working together"
          tag="Testimonials"
          testimonials={[
            {
              id: "1",              name: "Sarah Mitchell, CEO of TechVision",              date: "Date: 15 November 2024",              title: "Exceptional design that transformed our brand",              quote: "Working with this designer was a game-changer for our company. The attention to detail, creativity, and strategic thinking resulted in a complete brand transformation that resonated with our target audience.",              tag: "Brand Strategy",              avatarSrc: "https://img.b2bpic.net/free-photo/portrait-redhead-bearded-male-eyeglasses-dressed-elegant-wool-suit-grey-background_613910-15599.jpg",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-redhead-bearded-male-eyeglasses-dressed-elegant-wool-suit-grey-background_613910-15599.jpg",              imageAlt: "Sarah Mitchell CEO"
            },
            {
              id: "2",              name: "Marcus Chen, Product Manager at InnovateLab",              date: "Date: 20 October 2024",              title: "Outstanding UX design and collaboration",              quote: "The designer's approach to user research and iterative design significantly improved our product's usability. Communication was excellent throughout the entire project and delivered ahead of schedule.",              tag: "Product Design",              avatarSrc: "https://img.b2bpic.net/free-photo/portrait-handsome-bearded-man-suit_23-2149705918.jpg",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-handsome-bearded-man-suit_23-2149705918.jpg",              imageAlt: "Marcus Chen Product Manager"
            },
            {
              id: "3",              name: "Emma Rodriguez, Marketing Director at GrowthCo",              date: "Date: 5 October 2024",              title: "Creative excellence and professional service",              quote: "From concept to final delivery, every aspect of the design work was professional and creative. The visual campaigns we developed together exceeded our expectations and drove measurable results.",              tag: "Marketing Design",              avatarSrc: "https://img.b2bpic.net/free-photo/attractive-blond-business-woman-white-shirt-grey-background_613910-3695.jpg",              imageSrc: "https://img.b2bpic.net/free-photo/attractive-blond-business-woman-white-shirt-grey-background_613910-3695.jpg",              imageAlt: "Emma Rodriguez Marketing Director"
            },
            {
              id: "4",              name: "David Kim, Founder of StartupXYZ",              date: "Date: 18 September 2024",              title: "The designer who understood our vision",              quote: "This designer didn't just execute designs; they understood our startup's mission and helped shape our visual identity accordingly. A true partner in our growth journey with exceptional results.",              tag: "Startup Branding",              avatarSrc: "https://img.b2bpic.net/free-photo/studio-portrait-serious-plump-male-eyeglasses-grey-background_613910-13831.jpg",              imageSrc: "https://img.b2bpic.net/free-photo/studio-portrait-serious-plump-male-eyeglasses-grey-background_613910-13831.jpg",              imageAlt: "David Kim Founder"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="skills" data-section="skills">
        <MetricCardSeven
          title="Experience & Expertise"
          description="Key metrics demonstrating my design capabilities and professional achievements"
          tag="Skills"
          metrics={[
            {
              id: "1",              value: "8+",              title: "Years of Design Experience",              items: [
                "UI/UX Design expertise",                "Brand identity development",                "Digital strategy consulting"
              ]
            },
            {
              id: "2",              value: "150+",              title: "Projects Completed",              items: [
                "Web design and development",                "Mobile app design",                "Branding and visual identity"
              ]
            },
            {
              id: "3",              value: "50+",              title: "Satisfied Clients",              items: [
                "Startups to enterprise clients",                "Global industry reach",                "Long-term partnerships"
              ]
            },
            {
              id: "4",              value: "15+",              title: "Design Awards",              items: [
                "International recognition",                "Industry certifications",                "Featured publications"
              ]
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactFaq
          ctaTitle="Let's Create Something Amazing"
          ctaDescription="Ready to start your next project? Get in touch and let's discuss how I can help bring your vision to life."
          ctaButton={{
            text: "Schedule a Call",            href: "https://calendly.com/example"
          }}
          ctaIcon={Rocket}
          faqs={[
            {
              id: "1",              title: "What's your design process?",              content: "I follow a structured approach: discovery & research, wireframing, design exploration, prototyping, testing, and refinement. Each phase involves client collaboration to ensure alignment with your vision and goals."
            },
            {
              id: "2",              title: "What are your typical project timelines?",              content: "Project duration depends on scope and complexity. Most branding projects take 4-6 weeks, UI/UX design 6-10 weeks, and larger strategic initiatives 3-6 months. We can discuss your timeline during the initial consultation."
            },
            {
              id: "3",              title: "Do you work with remote teams?",              content: "Yes, I have extensive experience working with distributed teams across different time zones. Regular communication through video calls, Slack, and collaborative tools ensures smooth project execution."
            },
            {
              id: "4",              title: "What's included in your deliverables?",              content: "Deliverables vary by project but typically include design files, design system documentation, prototypes, brand guidelines, and handoff documentation for developer implementation."
            }
          ]}
          animationType="slide-up"
          accordionAnimationType="smooth"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="Portfolio"
          copyrightText="© 2024 Creative Designer. All rights reserved."
          columns={[
            {
              title: "Navigation",              items: [
                { label: "Home", href: "/" },
                { label: "About", href: "about" },
                { label: "Projects", href: "projects" },
                { label: "Contact", href: "contact" }
              ]
            },
            {
              title: "Social",              items: [
                { label: "LinkedIn", href: "https://linkedin.com" },
                { label: "Twitter", href: "https://twitter.com" },
                { label: "Instagram", href: "https://instagram.com" },
                { label: "Dribbble", href: "https://dribbble.com" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "/privacy" },
                { label: "Terms of Service", href: "/terms" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}