"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import HeroLogoCarousel from "@/components/sections/hero/HeroLogoCarousel";
import AboutMetric from "@/components/sections/about/AboutMetric";
import FeatureCardFourteen from "@/components/sections/feature/FeatureCardFourteen";
import ContactText from "@/components/sections/contact/ContactText";
import FooterSplit from "@/components/sections/footer/FooterSplit";
import { Palette, Users, Zap, Mail, MapPin } from "lucide-react";

export default function ArtPortfolio() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="medium"
      background="circleGradient"
      cardStyle="glass-elevated"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="normal"
    >
      {/* Hero Section */}
      <div id="hero" data-section="hero">
        <HeroLogoCarousel
          logoText="Artist Portfolio"
          description="Welcome to my artistic universe where creativity meets passion. Explore a collection of unique artworks that tell stories and evoke emotions."
          mediaItems={[
            { imageSrc: "/images/noise.webp", imageAlt: "Artwork 1" },
            { imageSrc: "/images/noise.webp", imageAlt: "Artwork 2" },
            { imageSrc: "/images/noise.webp", imageAlt: "Artwork 3" },
            { imageSrc: "/images/noise.webp", imageAlt: "Artwork 4" },
            { imageSrc: "/images/noise.webp", imageAlt: "Artwork 5" }
          ]}
        />
      </div>

      {/* About Section */}
      <div id="about" data-section="about">
        <AboutMetric
          title="With over a decade of experience in various artistic mediums, I specialize in creating pieces that bridge the gap between traditional techniques and contemporary vision."
          useInvertedBackground="noInvert"
          metrics={[
            { icon: Palette, label: "Artistic Mediums", value: "10+" },
            { icon: Users, label: "Collectors Worldwide", value: "500+" },
            { icon: Zap, label: "Years Experience", value: "12" },
            { icon: Palette, label: "Gallery Featured", value: "30+" }
          ]}
        />
      </div>

      {/* Portfolio Section */}
      <div id="portfolio" data-section="portfolio">
        <FeatureCardFourteen
          title="Featured Works"
          description="A curated selection of my most impactful pieces, each representing a unique journey of artistic exploration."
          textboxLayout="default"
          useInvertedBackground="noInvert"
          features={[
            {
              id: "1",
              title: "Ethereal Dreams",
              description: "Oil on Canvas • 2024 - A surreal landscape exploring the boundaries between reality and imagination.",
              imageSrc: "/images/noise.webp",
              imageAlt: "Ethereal Dreams artwork"
            },
            {
              id: "2",
              title: "Urban Symphony",
              description: "Mixed Media • 2023 - A vibrant piece capturing the energy and rhythm of city life.",
              imageSrc: "/images/noise.webp",
              imageAlt: "Urban Symphony artwork"
            },
            {
              id: "3",
              title: "Silent Reflections",
              description: "Photography • 2024 - A contemplative series exploring solitude and inner peace.",
              imageSrc: "/images/noise.webp",
              imageAlt: "Silent Reflections artwork"
            },
            {
              id: "4",
              title: "Digital Horizons",
              description: "Digital Art • 2023 - An exploration of futuristic landscapes through digital media.",
              imageSrc: "/images/noise.webp",
              imageAlt: "Digital Horizons artwork"
            },
            {
              id: "5",
              title: "Nature's Whispers",
              description: "Watercolor • 2024 - Delicate botanical studies celebrating the beauty of natural forms.",
              imageSrc: "/images/noise.webp",
              imageAlt: "Nature's Whispers artwork"
            },
            {
              id: "6",
              title: "Abstract Emotions",
              description: "Acrylic • 2023 - An emotional journey expressed through bold colors and dynamic forms.",
              imageSrc: "/images/noise.webp",
              imageAlt: "Abstract Emotions artwork"
            }
          ]}
        />
      </div>

      {/* Services Section */}
      <div id="services" data-section="services" className="py-20 px-6">
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-4xl md:text-5xl font-bold text-foreground mb-6">
              Services & Commissions
            </h2>
            <p className="text-xl text-foreground/70 max-w-3xl mx-auto">
              Bring your artistic vision to life through custom commissions and professional art services.
            </p>
          </div>
          
          <div className="grid md:grid-cols-3 gap-8">
            {[
              {
                title: "Custom Portraits",
                description: "Personalized portraits that capture the essence and personality of your subjects.",
                price: "Starting at $500",
                icon: "🎨"
              },
              {
                title: "Corporate Art",
                description: "Large-scale pieces designed to enhance commercial and office spaces.",
                price: "Starting at $1,200",
                icon: "🏢"
              },
              {
                title: "Art Consultations",
                description: "Expert guidance on art collection, curation, and investment opportunities.",
                price: "$150/hour",
                icon: "💼"
              }
            ].map((service, index) => (
              <div key={index} className="bg-card rounded-xl p-8 shadow-lg hover:shadow-xl transition-shadow duration-300 text-center">
                <div className="text-4xl mb-4">{service.icon}</div>
                <h3 className="text-2xl font-bold text-foreground mb-4">{service.title}</h3>
                <p className="text-foreground/70 mb-6 leading-relaxed">{service.description}</p>
                <p className="text-primary-cta font-bold text-lg mb-6">{service.price}</p>
                <button className="w-full px-6 py-3 bg-primary-cta text-white rounded-lg font-semibold hover:shadow-lg transform hover:scale-105 transition-all duration-200">
                  Learn More
                </button>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Contact Section */}
      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to start your next project? Let's create something amazing together."
          animationType="entrance-slide"
          buttons={[
            { text: "Get in Touch", href: "mailto:hello@artistportfolio.com" },
            { text: "View Portfolio", href: "#portfolio" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      {/* Footer Section */}
      <div id="footer" data-section="footer">
        <FooterSplit
          logoText="Artist Portfolio"
          title="Creating meaningful art that connects with people and transforms spaces. Every piece tells a story."
          columns={[
            {
              title: "Navigation",
              items: [
                { label: "Portfolio", href: "#portfolio" },
                { label: "About", href: "#about" },
                { label: "Services", href: "#services" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              title: "Services",
              items: [
                { label: "Custom Portraits", href: "#services" },
                { label: "Corporate Art", href: "#services" },
                { label: "Consultations", href: "#services" },
                { label: "Exhibitions", href: "#services" }
              ]
            }
          ]}
          contactItems={[
            { icon: Mail, text: "hello@artistportfolio.com" },
            { icon: MapPin, text: "Downtown Arts District" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
