"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";

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"
    >
      <div className="min-h-screen bg-gradient-to-br from-slate-50 to-white">
        {/* Hero Section */}
        <div id="hero" data-section="hero" className="relative min-h-screen flex items-center justify-center px-6">
          <div className="max-w-4xl mx-auto text-center">
            <div className="mb-6">
              <span className="inline-block px-4 py-2 bg-gradient-to-r from-purple-100 to-blue-100 text-purple-800 rounded-full text-sm font-medium mb-6">
                ✨ Professional Artist
              </span>
            </div>
            
            <h1 className="text-5xl md:text-7xl font-bold bg-gradient-to-r from-purple-600 via-blue-600 to-teal-600 bg-clip-text text-transparent mb-6">
              Create. Inspire. Transform.
            </h1>
            
            <p className="text-xl md:text-2xl text-gray-600 mb-8 leading-relaxed">
              Welcome to my artistic universe where creativity meets passion. Explore a collection of unique artworks that tell stories and evoke emotions.
            </p>
            
            <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
              <button className="px-8 py-4 bg-gradient-to-r from-purple-600 to-blue-600 text-white rounded-lg font-semibold hover:shadow-lg transform hover:scale-105 transition-all duration-200">
                View Portfolio
              </button>
              <button className="px-8 py-4 border-2 border-gray-300 text-gray-700 rounded-lg font-semibold hover:border-purple-500 hover:text-purple-600 transition-all duration-200">
                Contact Me
              </button>
            </div>
          </div>
          
          {/* Decorative Elements */}
          <div className="absolute top-20 left-10 w-20 h-20 bg-gradient-to-r from-purple-400 to-pink-400 rounded-full opacity-20 animate-pulse"></div>
          <div className="absolute bottom-20 right-10 w-16 h-16 bg-gradient-to-r from-blue-400 to-teal-400 rounded-full opacity-20 animate-pulse delay-1000"></div>
          <div className="absolute top-1/2 left-5 w-12 h-12 bg-gradient-to-r from-yellow-400 to-orange-400 rounded-full opacity-20 animate-pulse delay-500"></div>
        </div>

        {/* About Section */}
        <div id="about" data-section="about" className="py-20 px-6">
          <div className="max-w-6xl mx-auto">
            <div className="grid md:grid-cols-2 gap-12 items-center">
              <div>
                <h2 className="text-4xl md:text-5xl font-bold text-gray-800 mb-6">
                  About My Art
                </h2>
                <p className="text-lg text-gray-600 mb-6 leading-relaxed">
                  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.
                </p>
                <p className="text-lg text-gray-600 mb-8 leading-relaxed">
                  My work has been featured in galleries across the country and has found homes in private collections worldwide. Each piece tells a story and invites the viewer into a world of imagination and emotion.
                </p>
                <div className="flex flex-wrap gap-4">
                  <span className="px-4 py-2 bg-purple-100 text-purple-800 rounded-full text-sm font-medium">Oil Painting</span>
                  <span className="px-4 py-2 bg-blue-100 text-blue-800 rounded-full text-sm font-medium">Digital Art</span>
                  <span className="px-4 py-2 bg-teal-100 text-teal-800 rounded-full text-sm font-medium">Mixed Media</span>
                  <span className="px-4 py-2 bg-pink-100 text-pink-800 rounded-full text-sm font-medium">Photography</span>
                </div>
              </div>
              <div className="relative">
                <div className="w-full h-96 bg-gradient-to-br from-purple-200 via-blue-200 to-teal-200 rounded-2xl flex items-center justify-center">
                  <img 
                    src="/placeholders/placeholder1.webp" 
                    alt="Artist at work"
                    className="w-full h-full object-cover rounded-2xl shadow-lg"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Portfolio Gallery Section */}
        <div id="portfolio" data-section="portfolio" className="py-20 px-6 bg-gray-50">
          <div className="max-w-7xl mx-auto">
            <div className="text-center mb-16">
              <h2 className="text-4xl md:text-5xl font-bold text-gray-800 mb-6">
                Featured Works
              </h2>
              <p className="text-xl text-gray-600 max-w-3xl mx-auto">
                A curated selection of my most impactful pieces, each representing a unique journey of artistic exploration.
              </p>
            </div>
            
            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
              {[
                {
                  title: "Ethereal Dreams",
                  medium: "Oil on Canvas",
                  year: "2024",
                  description: "A surreal landscape exploring the boundaries between reality and imagination."
                },
                {
                  title: "Urban Symphony",
                  medium: "Mixed Media",
                  year: "2023",
                  description: "A vibrant piece capturing the energy and rhythm of city life."
                },
                {
                  title: "Silent Reflections",
                  medium: "Photography",
                  year: "2024",
                  description: "A contemplative series exploring solitude and inner peace."
                },
                {
                  title: "Digital Horizons",
                  medium: "Digital Art",
                  year: "2023",
                  description: "An exploration of futuristic landscapes through digital media."
                },
                {
                  title: "Nature's Whispers",
                  medium: "Watercolor",
                  year: "2024",
                  description: "Delicate botanical studies celebrating the beauty of natural forms."
                },
                {
                  title: "Abstract Emotions",
                  medium: "Acrylic",
                  year: "2023",
                  description: "An emotional journey expressed through bold colors and dynamic forms."
                }
              ].map((artwork, index) => (
                <div key={index} className="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300">
                  <div className="aspect-square bg-gradient-to-br from-gray-100 to-gray-200 flex items-center justify-center">
                    <img 
                      src="/placeholders/placeholder1.webp" 
                      alt={artwork.title}
                      className="w-full h-full object-cover"
                    />
                  </div>
                  <div className="p-6">
                    <h3 className="text-xl font-bold text-gray-800 mb-2">{artwork.title}</h3>
                    <p className="text-purple-600 font-medium mb-2">{artwork.medium} • {artwork.year}</p>
                    <p className="text-gray-600 text-sm">{artwork.description}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </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-gray-800 mb-6">
                Services & Commissions
              </h2>
              <p className="text-xl text-gray-600 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-white 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-gray-800 mb-4">{service.title}</h3>
                  <p className="text-gray-600 mb-6 leading-relaxed">{service.description}</p>
                  <p className="text-purple-600 font-bold text-lg mb-6">{service.price}</p>
                  <button className="w-full px-6 py-3 bg-gradient-to-r from-purple-600 to-blue-600 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" className="py-20 px-6 bg-gradient-to-br from-purple-50 to-blue-50">
          <div className="max-w-4xl mx-auto">
            <div className="text-center mb-16">
              <h2 className="text-4xl md:text-5xl font-bold text-gray-800 mb-6">
                Let's Create Together
              </h2>
              <p className="text-xl text-gray-600">
                Ready to commission a piece or discuss a project? I'd love to hear from you.
              </p>
            </div>
            
            <div className="grid md:grid-cols-2 gap-12">
              <div>
                <h3 className="text-2xl font-bold text-gray-800 mb-6">Get in Touch</h3>
                <div className="space-y-4">
                  <div className="flex items-center space-x-4">
                    <div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
                      <span className="text-purple-600 text-xl">📧</span>
                    </div>
                    <div>
                      <p className="font-semibold text-gray-800">Email</p>
                      <p className="text-gray-600">hello@artistportfolio.com</p>
                    </div>
                  </div>
                  <div className="flex items-center space-x-4">
                    <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                      <span className="text-blue-600 text-xl">📱</span>
                    </div>
                    <div>
                      <p className="font-semibold text-gray-800">Phone</p>
                      <p className="text-gray-600">+1 (555) 123-4567</p>
                    </div>
                  </div>
                  <div className="flex items-center space-x-4">
                    <div className="w-12 h-12 bg-teal-100 rounded-lg flex items-center justify-center">
                      <span className="text-teal-600 text-xl">📍</span>
                    </div>
                    <div>
                      <p className="font-semibold text-gray-800">Studio</p>
                      <p className="text-gray-600">Downtown Arts District</p>
                    </div>
                  </div>
                </div>
              </div>
              
              <div className="bg-white rounded-xl p-8 shadow-lg">
                <form className="space-y-6">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">Name</label>
                    <input type="text" className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="Your name" />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">Email</label>
                    <input type="email" className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="your@email.com" />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">Project Type</label>
                    <select className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                      <option>Custom Portrait</option>
                      <option>Corporate Commission</option>
                      <option>Art Consultation</option>
                      <option>Other</option>
                    </select>
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">Message</label>
                    <textarea rows={4} className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="Tell me about your project..."></textarea>
                  </div>
                  <button type="submit" className="w-full px-6 py-3 bg-gradient-to-r from-purple-600 to-blue-600 text-white rounded-lg font-semibold hover:shadow-lg transform hover:scale-105 transition-all duration-200">
                    Send Message
                  </button>
                </form>
              </div>
            </div>
          </div>
        </div>

        {/* Footer */}
        <div id="footer" data-section="footer" className="py-12 px-6 bg-gray-900 text-white">
          <div className="max-w-6xl mx-auto">
            <div className="grid md:grid-cols-4 gap-8">
              <div className="col-span-2">
                <h3 className="text-2xl font-bold mb-4">Artist Portfolio</h3>
                <p className="text-gray-400 mb-6 leading-relaxed">
                  Creating meaningful art that connects with people and transforms spaces. Every piece tells a story.
                </p>
                <div className="flex space-x-4">
                  <button className="w-10 h-10 bg-purple-600 rounded-lg flex items-center justify-center hover:bg-purple-700 transition-colors">
                    <span className="text-white">📘</span>
                  </button>
                  <button className="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center hover:bg-blue-700 transition-colors">
                    <span className="text-white">📷</span>
                  </button>
                  <button className="w-10 h-10 bg-teal-600 rounded-lg flex items-center justify-center hover:bg-teal-700 transition-colors">
                    <span className="text-white">🐦</span>
                  </button>
                </div>
              </div>
              <div>
                <h4 className="text-lg font-semibold mb-4">Quick Links</h4>
                <ul className="space-y-2">
                  <li><a href="#portfolio" className="text-gray-400 hover:text-white transition-colors">Portfolio</a></li>
                  <li><a href="#about" className="text-gray-400 hover:text-white transition-colors">About</a></li>
                  <li><a href="#services" className="text-gray-400 hover:text-white transition-colors">Services</a></li>
                  <li><a href="#contact" className="text-gray-400 hover:text-white transition-colors">Contact</a></li>
                </ul>
              </div>
              <div>
                <h4 className="text-lg font-semibold mb-4">Services</h4>
                <ul className="space-y-2">
                  <li><span className="text-gray-400">Custom Portraits</span></li>
                  <li><span className="text-gray-400">Corporate Art</span></li>
                  <li><span className="text-gray-400">Consultations</span></li>
                  <li><span className="text-gray-400">Exhibitions</span></li>
                </ul>
              </div>
            </div>
            <div className="border-t border-gray-800 mt-8 pt-8 text-center">
              <p className="text-gray-400">
                © 2024 Artist Portfolio. All rights reserved. Created with passion and dedication.
              </p>
            </div>
          </div>
        </div>
      </div>
    </ThemeProvider>
  );
}