"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
import SplitAbout from '@/components/sections/about/SplitAbout';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Award, Compass, Globe, Palette, Sparkles, TrendingUp, Trophy, Users, Zap } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="mediumLarge"
      sizing="largeSizeMediumTitles"
      background="fluid"
      cardStyle="gradient-bordered"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="Portfolio"
          navItems={[
            { name: "Work", id: "work" },
            { name: "About", id: "about" },
            { name: "Services", id: "services" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Let's Talk", href: "contact" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogo
          logoText="Portfolio"
          description="Stunning visuals crafted with precision. Experience design that transforms vision into reality."
          buttons={[
            { text: "View My Work", href: "work" },
            { text: "Get In Touch", href: "contact" }
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/vivid-blurred-colorful-wallpaper-background_58702-2687.jpg"
          imageAlt="Cinematic portfolio hero background"
          showDimOverlay={true}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="work" data-section="work">
        <ProductCardOne
          title="Selected Work"
          description="A curated collection of projects that showcase creativity, technical excellence, and transformative design thinking."
          textboxLayout="default"
          useInvertedBackground={true}
          animationType="depth-3d"
          gridVariant="bento-grid"
          products={[
            {
              id: "1",              name: "Eclipse Motion Pro",              price: "Design Excellence",              imageSrc: "http://img.b2bpic.net/free-vector/gradient-interior-landing-page-design-template_23-2149263407.jpg",              imageAlt: "Portfolio project showcase"
            },
            {
              id: "2",              name: "Digital Vision Suite",              price: "Strategic Design",              imageSrc: "http://img.b2bpic.net/free-vector/social-page-application-ui-design-concept_1284-45234.jpg",              imageAlt: "Digital design project"
            },
            {
              id: "3",              name: "Brand Transformation",              price: "Identity Design",              imageSrc: "http://img.b2bpic.net/free-vector/colorful-minimal-business-card-template_23-2148373393.jpg",              imageAlt: "Branding project showcase"
            }
          ]}
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardTwentyFive
          title="Services & Expertise"
          description="Comprehensive creative solutions that deliver impact across every dimension of design and digital presence."
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="depth-3d"
          features={[
            {
              title: "Visual Design",              description: "Crafting compelling visual identities that resonate with audiences and stand the test of time.",              icon: Palette,
              mediaItems: [
                {
                  imageSrc: "http://img.b2bpic.net/free-vector/design-background-design_1223-94.jpg?_wi=1",                  imageAlt: "Design service showcase"
                },
                {
                  imageSrc: "http://img.b2bpic.net/free-photo/close-up-it-professional-using-tablet-building-ai-algorithms_482257-92639.jpg?_wi=1",                  imageAlt: "Design implementation"
                }
              ]
            },
            {
              title: "Strategic Direction",              description: "Developing cohesive brand strategies that align with business objectives and market opportunities.",              icon: Compass,
              mediaItems: [
                {
                  imageSrc: "http://img.b2bpic.net/free-vector/design-background-design_1223-94.jpg?_wi=2",                  imageAlt: "Strategy planning"
                },
                {
                  imageSrc: "http://img.b2bpic.net/free-photo/close-up-it-professional-using-tablet-building-ai-algorithms_482257-92639.jpg?_wi=2",                  imageAlt: "Strategic execution"
                }
              ]
            }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <SplitAbout
          title="Crafting Experiences Through Design"
          description="With a passion for innovation and an eye for detail, I transform complex ideas into elegant solutions. Every project is an opportunity to push creative boundaries and deliver work that matters."
          tag="About Me"
          tagIcon={Sparkles}
          textboxLayout="default"
          useInvertedBackground={true}
          bulletPoints={[
            {
              title: "10+ Years Experience",              description: "Deep expertise in visual design, brand strategy, and digital innovation across diverse industries.",              icon: Award
            },
            {
              title: "Award-Winning Work",              description: "Recognized for creative excellence and delivering measurable results that exceed expectations.",              icon: Trophy
            },
            {
              title: "Client-Centric Approach",              description: "Dedicated to understanding your vision and translating it into compelling visual narratives that drive growth.",              icon: Users
            }
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/young-pretty-lady-with-short-curly-hair-wireless-earphones_574295-1285.jpg"
          imageAlt="Creative professional at work"
          imagePosition="right"
          mediaAnimation="blur-reveal"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardThree
          title="Impact & Achievement"
          description="Measurable results that demonstrate the power of strategic creative design."
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="depth-3d"
          metrics={[
            { id: "1", icon: TrendingUp, title: "Projects Delivered", value: "150+" },
            { id: "2", icon: Users, title: "Happy Clients", value: "85+" },
            { id: "3", icon: Zap, title: "Awards Won", value: "28" },
            { id: "4", icon: Globe, title: "Global Reach", value: "42 Countries" }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFive
          title="Client Stories"
          description="Hear from collaborators who have experienced transformative design partnerships."
          textboxLayout="default"
          useInvertedBackground={true}
          testimonials={[
            {
              id: "1",              name: "Sarah Chen, CEO of TechFlow",              date: "Date: 15 November 2024",              title: "Exceeded every expectation",              quote: "The design work completely transformed our brand presence. The attention to detail and strategic thinking brought our vision to life in ways we couldn't have imagined. An absolute game-changer.",              tag: "Brand Design",              avatarSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=1",              imageAlt: "Client testimonial image"
            },
            {
              id: "2",              name: "Marcus Johnson, Founder of InnovateLab",              date: "Date: 08 December 2024",              title: "World-class creative partner",              quote: "Working with this designer was a breath of fresh air. Professional, collaborative, and incredibly talented. They didn't just deliver designs; they delivered strategic solutions.",              tag: "Strategic Design",              avatarSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=2",              imageAlt: "Client testimonial image"
            },
            {
              id: "3",              name: "Emma Rodriguez, Marketing Director at GrowthCo",              date: "Date: 22 January 2025",              title: "Transformed our digital presence",              quote: "The creative vision brought consistency and cohesion to our entire brand ecosystem. Our engagement metrics have skyrocketed since launching the new design direction.",              tag: "Digital Strategy",              avatarSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=3",              imageAlt: "Client testimonial image"
            },
            {
              id: "4",              name: "David Kim, Product Manager at StartupXYZ",              date: "Date: 10 February 2025",              title: "Exceptional design execution",              quote: "From concept to delivery, every interaction was seamless. The final product exceeded our vision and resonated powerfully with our target audience.",              tag: "Product Design",              avatarSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=4",              imageAlt: "Client testimonial image"
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Let's Create Something Amazing"
          description="Ready to bring your vision to life? Reach out and let's start a conversation about your next project. Whether you have a clear direction or just an idea, I'm here to help transform it into reality."
          textboxLayout="default"
          useInvertedBackground={false}
          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: 6,
            required: true
          }}
          imageSrc="http://img.b2bpic.net/free-photo/messy-office-desk-with-old-computer-still-life_23-2150155639.jpg"
          imageAlt="Contact collaboration image"
          mediaPosition="right"
          mediaAnimation="blur-reveal"
          buttonText="Send Message"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="Portfolio"
          columns={[
            {
              title: "Navigation",              items: [
                { label: "Home", href: "#" },
                { label: "Work", href: "#work" },
                { label: "About", href: "#about" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              title: "Services",              items: [
                { label: "Visual Design", href: "#services" },
                { label: "Brand Strategy", href: "#services" },
                { label: "Digital Solutions", href: "#services" },
                { label: "Consulting", href: "#services" }
              ]
            },
            {
              title: "Connect",              items: [
                { label: "Twitter", href: "https://twitter.com" },
                { label: "LinkedIn", href: "https://linkedin.com" },
                { label: "Instagram", href: "https://instagram.com" },
                { label: "Email", href: "mailto:hello@portfolio.com" }
              ]
            }
          ]}
          copyrightText="© 2025 Portfolio. All rights reserved. Crafted with precision and passion."
        />
      </div>
    </ThemeProvider>
  );
}
