"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import ContactText from '@/components/sections/contact/ContactText';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Dribbble, Instagram, Linkedin, Mail, Palette } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="smallMedium"
      sizing="largeSmall"
      background="fluid"
      cardStyle="solid"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Alex Design"
          navItems={[
            { name: "Work", id: "portfolio" },
            { name: "About", id: "about" },
            { name: "Services", id: "services" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Let's Talk",            href: "#contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroOverlay
          title="Visual Design That Moves People"
          description="Crafting bold, meaningful designs that elevate brands and create lasting impressions"
          tag="Creative Studio"
          imageSrc="http://img.b2bpic.net/free-photo/workplace-with-laptop_23-2147651756.jpg"
          imageAlt="Creative workspace with design tools"
          textPosition="bottom-left"
          showBlur={true}
          showDimOverlay={true}
          buttons={[
            { text: "View Portfolio", href: "#portfolio" },
            { text: "Get in Touch", href: "#contact" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <TestimonialAboutCard
          tag="About Me"
          title="With 8+ years of experience, I transform ideas into visually compelling solutions that drive business results."
          description="Alex Rivera"
          subdescription="Creative Director & Brand Designer"
          icon={Palette}
          imageSrc="http://img.b2bpic.net/free-photo/portrait-handsome-bearded-man-suit_23-2149705918.jpg"
          imageAlt="Portrait of Alex Rivera, creative director"
          mediaAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardThree
          title="Design Services"
          description="Comprehensive design solutions tailored to your brand's unique story"
          tag="What I Do"
          features={[
            {
              id: "01",              title: "Brand Identity",              description: "Logo design, color palettes, and complete brand guidelines that define your visual presence",              imageSrc: "http://img.b2bpic.net/free-vector/branding-restaurant-stationery_23-2147564031.jpg",              imageAlt: "Brand identity design samples"
            },
            {
              id: "02",              title: "Web Design",              description: "Beautiful, functional websites and digital interfaces that engage and convert",              imageSrc: "http://img.b2bpic.net/free-psd/go-cashless-website-template_23-2149111230.jpg",              imageAlt: "Web design mockup"
            },
            {
              id: "03",              title: "Packaging Design",              description: "Product packaging that captures attention on shelves and tells your brand story",              imageSrc: "http://img.b2bpic.net/free-vector/box-with-cosmetics-hair-with-place-text-botanical-therapy-place-brand_1268-15046.jpg",              imageAlt: "Packaging design mockup"
            },
            {
              id: "04",              title: "Marketing Collateral",              description: "Business cards, brochures, and promotional materials that make a lasting impression",              imageSrc: "http://img.b2bpic.net/free-vector/watercolor-leaflets-with-geometric-shapes-vintage-style_23-2147589461.jpg",              imageAlt: "Marketing collateral design"
            }
          ]}
          textboxLayout="default"
          gridVariant="four-items-2x2-equal-grid"
          animationType="slide-up"
          useInvertedBackground={true}
        />
      </div>

      <div id="portfolio" data-section="portfolio">
        <ProductCardTwo
          title="Featured Projects"
          description="A selection of recent work showcasing diverse design approaches and successful outcomes"
          tag="Portfolio"
          products={[
            {
              id: "1",              brand: "Sustainable Fashion",              name: "Eco Brand Identity",              price: "Featured Project",              rating: 5,
              reviewCount: "Award Winner",              imageSrc: "http://img.b2bpic.net/free-psd/botanical-garden-facebook-template_23-2150258224.jpg",              imageAlt: "Eco brand identity design"
            },
            {
              id: "2",              brand: "Tech Startup",              name: "SaaS Platform Redesign",              price: "Featured Project",              rating: 5,
              reviewCount: "Industry Recognition",              imageSrc: "http://img.b2bpic.net/free-photo/determined-ceo-works-office-analyzing-infographics-setting-business-goals_482257-123120.jpg",              imageAlt: "SaaS platform design"
            },
            {
              id: "3",              brand: "Luxury Hospitality",              name: "Hotel Brand Design",              price: "Featured Project",              rating: 5,
              reviewCount: "Client Favorite",              imageSrc: "http://img.b2bpic.net/free-vector/creative-hotel-landing-page-with-photo_23-2148892578.jpg",              imageAlt: "Luxury hotel brand design"
            },
            {
              id: "4",              brand: "Food & Beverage",              name: "Restaurant Visual Identity",              price: "Featured Project",              rating: 5,
              reviewCount: "10K+ Views",              imageSrc: "http://img.b2bpic.net/free-vector/restaurant-menu-template-business-card_23-2148442834.jpg",              imageAlt: "Restaurant branding design"
            }
          ]}
          textboxLayout="default"
          gridVariant="four-items-2x2-equal-grid"
          animationType="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          testimonials={[
            {
              id: "1",              name: "Sarah Mitchell",              imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg?_wi=1"
            },
            {
              id: "2",              name: "James Chen",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=1"
            },
            {
              id: "3",              name: "Emma Rodriguez",              imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg?_wi=2"
            },
            {
              id: "4",              name: "Michael Thompson",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=2"
            },
            {
              id: "5",              name: "Lisa Anderson",              imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg?_wi=3"
            },
            {
              id: "6",              name: "David Park",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=3"
            }
          ]}
          cardTitle="Trusted by leading brands and innovative startups worldwide"
          cardTag="Client Success Stories"
          cardAnimation="slide-up"
          useInvertedBackground={true}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to transform your brand vision into stunning visual reality? Let's collaborate and create something extraordinary together."
          animationType="background-highlight"
          buttons={[
            { text: "Start Your Project", href: "mailto:hello@alexdesign.com" },
            { text: "Schedule Consultation", href: "#" }
          ]}
          background={{ variant: "plain" }}
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="Alex Design"
          copyrightText="© 2025 Alex Design. All rights reserved."
          socialLinks={[
            { icon: Instagram, href: "https://instagram.com", ariaLabel: "Instagram" },
            { icon: Dribbble, href: "https://dribbble.com", ariaLabel: "Dribbble" },
            { icon: Linkedin, href: "https://linkedin.com", ariaLabel: "LinkedIn" },
            { icon: Mail, href: "mailto:hello@alexdesign.com", ariaLabel: "Email" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
