"use client";

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

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="mediumLarge"
      sizing="mediumLargeSizeLargeTitles"
      background="floatingGradient"
      cardStyle="gradient-radial"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="layered"
      headingFontWeight="medium"
    >
      <div className="min-h-screen bg-gradient-to-br from-pink-50 via-purple-50 to-indigo-50">
        <div className="container mx-auto px-6 py-20">
          <div className="text-center">
            <h1 className="text-6xl font-bold bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent mb-6">
              Biba & Boba
            </h1>
            <p className="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
              Premier modeling agency dedicated to discovering and nurturing exceptional talent across fashion, editorial, and commercial sectors.
            </p>
            <div className="space-y-4">
              <button className="bg-gradient-to-r from-purple-600 to-pink-600 text-white px-8 py-3 rounded-full hover:shadow-lg transition-all duration-300 mr-4">
                Apply Now
              </button>
              <button className="border-2 border-purple-600 text-purple-600 px-8 py-3 rounded-full hover:bg-purple-600 hover:text-white transition-all duration-300">
                Explore Portfolio
              </button>
            </div>
          </div>
          
          <div className="mt-20 grid md:grid-cols-2 gap-12 items-center">
            <div>
              <h2 className="text-3xl font-bold text-gray-900 mb-6">About Biba & Boba Agency</h2>
              <p className="text-gray-600 mb-6">
                With over 15 years of industry expertise, Biba & Boba has established itself as a leading force in talent representation. We pride ourselves on developing comprehensive career strategies for our models while maintaining the highest professional standards.
              </p>
            </div>
            <div className="relative">
              <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766505308724-qtq9ph78.jpg" alt="Professional modeling agency team" className="rounded-lg shadow-xl" />
            </div>
          </div>

          <div className="mt-20">
            <div className="text-center mb-12">
              <h2 className="text-3xl font-bold text-gray-900 mb-4">Services & Representation</h2>
              <p className="text-gray-600">Comprehensive solutions for every stage of your modeling career</p>
            </div>
            
            <div className="grid md:grid-cols-3 gap-8">
              <div className="bg-white p-8 rounded-xl shadow-lg">
                <h3 className="text-xl font-semibold text-gray-900 mb-4">Talent Discovery & Development</h3>
                <ul className="space-y-2 text-gray-600">
                  <li>• Professional scouting and recruitment</li>
                  <li>• Comprehensive skill assessment</li>
                  <li>• Portfolio development support</li>
                  <li>• Career path planning</li>
                </ul>
              </div>
              
              <div className="bg-white p-8 rounded-xl shadow-lg">
                <h3 className="text-xl font-semibold text-gray-900 mb-4">Industry Connections & Opportunities</h3>
                <ul className="space-y-2 text-gray-600">
                  <li>• Access to top-tier clients</li>
                  <li>• Exclusive casting calls</li>
                  <li>• Contract negotiation</li>
                  <li>• Career advancement strategy</li>
                </ul>
              </div>
              
              <div className="bg-white p-8 rounded-xl shadow-lg">
                <h3 className="text-xl font-semibold text-gray-900 mb-4">Professional Growth & Guidance</h3>
                <ul className="space-y-2 text-gray-600">
                  <li>• Personal brand building</li>
                  <li>• Training and coaching</li>
                  <li>• Image consultation</li>
                  <li>• Industry mentorship</li>
                </ul>
              </div>
            </div>
          </div>

          <div className="mt-20">
            <div className="text-center mb-12">
              <h2 className="text-3xl font-bold text-gray-900 mb-4">Meet Our Team</h2>
              <p className="text-gray-600">Dedicated professionals committed to model success</p>
            </div>
            
            <div className="grid md:grid-cols-3 lg:grid-cols-6 gap-6">
              <div className="text-center">
                <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766505313596-ab7bpgcg.jpg" alt="Sophia Mendez" className="w-24 h-24 rounded-full mx-auto mb-3 object-cover" />
                <h3 className="font-semibold text-gray-900">Sophia Mendez</h3>
                <p className="text-sm text-gray-600">Founder & CEO</p>
              </div>
              
              <div className="text-center">
                <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766505314558-9girzuo5.jpg" alt="Marcus Rivera" className="w-24 h-24 rounded-full mx-auto mb-3 object-cover" />
                <h3 className="font-semibold text-gray-900">Marcus Rivera</h3>
                <p className="text-sm text-gray-600">Head of Scouting</p>
              </div>
              
              <div className="text-center">
                <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766505315472-0rqtyusi.jpg" alt="Elena Rossi" className="w-24 h-24 rounded-full mx-auto mb-3 object-cover" />
                <h3 className="font-semibold text-gray-900">Elena Rossi</h3>
                <p className="text-sm text-gray-600">Career Manager</p>
              </div>
              
              <div className="text-center">
                <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766505316351-p3tpql0l.jpg" alt="David Park" className="w-24 h-24 rounded-full mx-auto mb-3 object-cover" />
                <h3 className="font-semibold text-gray-900">David Park</h3>
                <p className="text-sm text-gray-600">Portfolio Director</p>
              </div>
              
              <div className="text-center">
                <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766505317374-cv1w8pmh.jpg" alt="Victoria Brooks" className="w-24 h-24 rounded-full mx-auto mb-3 object-cover" />
                <h3 className="font-semibold text-gray-900">Victoria Brooks</h3>
                <p className="text-sm text-gray-600">Styling Coach</p>
              </div>
              
              <div className="text-center">
                <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766505318279-jh4iqdth.jpg" alt="James Chen" className="w-24 h-24 rounded-full mx-auto mb-3 object-cover" />
                <h3 className="font-semibold text-gray-900">James Chen</h3>
                <p className="text-sm text-gray-600">Events Coordinator</p>
              </div>
            </div>
          </div>

          <div className="mt-20">
            <div className="text-center mb-12">
              <h2 className="text-3xl font-bold text-gray-900 mb-4">Success Stories</h2>
              <p className="text-gray-600">Hear from models who have transformed their careers with Biba & Boba</p>
            </div>
            
            <div className="grid md:grid-cols-2 gap-8">
              <div className="bg-white p-6 rounded-xl shadow-lg">
                <div className="flex items-center mb-4">
                  <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766505309816-u8qntja5.jpg" alt="Isabella Martinez" className="w-12 h-12 rounded-full mr-4 object-cover" />
                  <div>
                    <h3 className="font-semibold text-gray-900">Isabella Martinez</h3>
                    <p className="text-sm text-gray-600">Fashion Model</p>
                  </div>
                </div>
                <p className="text-gray-600">"Biba & Boba completely transformed my modeling career. Their team's dedication and industry connections opened doors I never thought possible. I've worked with incredible brands and traveled the world."</p>
              </div>
              
              <div className="bg-white p-6 rounded-xl shadow-lg">
                <div className="flex items-center mb-4">
                  <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766505310580-rfxty449.jpg" alt="Thomas Anderson" className="w-12 h-12 rounded-full mr-4 object-cover" />
                  <div>
                    <h3 className="font-semibold text-gray-900">Thomas Anderson</h3>
                    <p className="text-sm text-gray-600">Commercial Model</p>
                  </div>
                </div>
                <p className="text-gray-600">"The professionalism and support from the team is unmatched. They genuinely care about their models' success and provide guidance every step of the way. Highly recommended for anyone serious about modeling."</p>
              </div>
            </div>
          </div>

          <div className="mt-20 text-center bg-gradient-to-r from-purple-600 to-pink-600 rounded-2xl p-12">
            <h2 className="text-3xl font-bold text-white mb-4">Ready to launch your modeling career?</h2>
            <div className="flex max-w-md mx-auto">
              <input type="email" placeholder="Enter your email" className="flex-1 px-4 py-3 rounded-l-full border-0 focus:outline-none" />
              <button className="bg-white text-purple-600 px-6 py-3 rounded-r-full hover:bg-gray-100 transition-colors duration-300">
                Get Started
              </button>
            </div>
          </div>

          <div className="mt-20 pt-12 border-t border-gray-200">
            <div className="grid md:grid-cols-4 gap-8">
              <div>
                <h3 className="text-2xl font-bold bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent mb-4">
                  Biba & Boba
                </h3>
              </div>
              
              <div>
                <h4 className="font-semibold text-gray-900 mb-3">Company</h4>
                <ul className="space-y-2 text-gray-600">
                  <li><a href="#about" className="hover:text-purple-600">About Us</a></li>
                  <li><a href="#features" className="hover:text-purple-600">Our Services</a></li>
                  <li><a href="#team" className="hover:text-purple-600">Team</a></li>
                </ul>
              </div>
              
              <div>
                <h4 className="font-semibold text-gray-900 mb-3">For Models</h4>
                <ul className="space-y-2 text-gray-600">
                  <li><a href="#contact" className="hover:text-purple-600">Join Our Agency</a></li>
                  <li><a href="#" className="hover:text-purple-600">Portfolio Tips</a></li>
                  <li><a href="#" className="hover:text-purple-600">Career Resources</a></li>
                </ul>
              </div>
              
              <div>
                <h4 className="font-semibold text-gray-900 mb-3">Legal</h4>
                <ul className="space-y-2 text-gray-600">
                  <li><a href="#" className="hover:text-purple-600">Privacy Policy</a></li>
                  <li><a href="#" className="hover:text-purple-600">Terms of Service</a></li>
                  <li><a href="#contact" className="hover:text-purple-600">Contact</a></li>
                </ul>
              </div>
            </div>
            
            <div className="text-center mt-12 pt-8 border-t border-gray-200">
              <p className="text-gray-600">© 2025 Biba & Boba Modeling Agency. All rights reserved.</p>
            </div>
          </div>
        </div>
      </div>
    </ThemeProvider>
  );
}