"use client";

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

export default function StarWarsPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="small"
      sizing="largeSmallSizeLargeTitles"
      background="circleGradient"
      cardStyle="gradient-bordered"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <div className="flex items-center justify-between p-4">
          <div className="text-xl font-semibold">Star Wars Fans</div>
          <nav className="flex space-x-6">
            <a href="#home" className="hover:text-primary transition-colors">Home</a>
            <a href="#about" className="hover:text-primary transition-colors">Community</a>
            <a href="#blog" className="hover:text-primary transition-colors">News</a>
            <a href="#team" className="hover:text-primary transition-colors">Members</a>
            <a href="#contact" className="hover:text-primary transition-colors">Contact</a>
          </nav>
          <a href="#contact" className="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/80 transition-colors">Join Us</a>
        </div>
      </div>

      <div id="hero" data-section="hero">
        <section className="py-20 px-6">
          <div className="max-w-6xl mx-auto text-center">
            <h1 className="text-5xl font-bold mb-6">STAR WARS</h1>
            <p className="text-xl mb-8 max-w-3xl mx-auto">Join the ultimate community for Star Wars fans. Connect with fellow enthusiasts, share your passion, and explore the galaxy together.</p>
            <div className="space-x-4">
              <a href="#about" className="inline-block px-6 py-3 bg-primary text-white rounded-lg hover:bg-primary/80 transition-colors">Explore Community</a>
              <a href="#blog" className="inline-block px-6 py-3 border border-primary text-primary rounded-lg hover:bg-primary hover:text-white transition-colors">Latest News</a>
            </div>
            <div className="mt-12">
              <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502903034-h9gvp12t.png" alt="Star Wars galaxy backdrop" className="w-full h-96 object-cover rounded-lg" />
            </div>
          </div>
        </section>
      </div>

      <div id="about" data-section="about">
        <section className="py-20 px-6">
          <div className="max-w-6xl mx-auto">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
              <div>
                <span className="text-sm font-medium text-primary mb-2 block">About Us</span>
                <h2 className="text-4xl font-bold mb-6">Welcome to the Galaxy</h2>
                <p className="text-lg mb-8">We are a thriving community dedicated to celebrating everything Star Wars. From the original trilogy to the latest series, we bring fans together to discuss, celebrate, and share their love for this iconic universe.</p>
                <a href="#contact" className="inline-block px-6 py-3 bg-primary text-white rounded-lg hover:bg-primary/80 transition-colors">Learn More</a>
              </div>
              <div>
                <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502904271-z2pntgqf.jpg" alt="Star Wars universe" className="w-full h-96 object-cover rounded-lg" />
              </div>
            </div>
          </div>
        </section>
      </div>

      <div id="features" data-section="features">
        <section className="py-20 px-6">
          <div className="max-w-6xl mx-auto">
            <div className="text-center mb-12">
              <h2 className="text-4xl font-bold mb-6">What We Offer</h2>
              <p className="text-lg max-w-3xl mx-auto mb-8">Connect with the community through various activities and resources designed for Star Wars enthusiasts of all levels.</p>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
              <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502906375-82uc6wjl.jpg" alt="Feature 1" className="w-full h-48 object-cover rounded-lg" />
              <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502907661-wjlq2nxn.jpg" alt="Feature 2" className="w-full h-48 object-cover rounded-lg" />
              <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502910619-wwr2g7a8.jpg" alt="Feature 3" className="w-full h-48 object-cover rounded-lg" />
              <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502903034-h9gvp12t.png" alt="Feature 4" className="w-full h-48 object-cover rounded-lg" />
            </div>
            <div className="text-center">
              <a href="#contact" className="inline-block px-6 py-3 bg-primary text-white rounded-lg hover:bg-primary/80 transition-colors">Join Now</a>
            </div>
          </div>
        </section>
      </div>

      <div id="team" data-section="team">
        <section className="py-20 px-6">
          <div className="max-w-6xl mx-auto">
            <div className="text-center mb-12">
              <h2 className="text-4xl font-bold mb-6">Community Leaders</h2>
              <p className="text-lg max-w-3xl mx-auto">Meet the passionate individuals leading our Star Wars fan community.</p>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              <div className="text-center">
                <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766414401529-6db20epg.jpg" alt="Luke S." className="w-32 h-32 rounded-full mx-auto mb-4 object-cover" />
                <h3 className="text-xl font-semibold mb-2">Luke S.</h3>
                <p className="text-gray-600">Community Manager</p>
              </div>
              <div className="text-center">
                <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766492697041-9adqfrju.jpg" alt="Leia M." className="w-32 h-32 rounded-full mx-auto mb-4 object-cover" />
                <h3 className="text-xl font-semibold mb-2">Leia M.</h3>
                <p className="text-gray-600">Content Director</p>
              </div>
              <div className="text-center">
                <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502911819-f5rnce5q.jpg" alt="Han C." className="w-32 h-32 rounded-full mx-auto mb-4 object-cover" />
                <h3 className="text-xl font-semibold mb-2">Han C.</h3>
                <p className="text-gray-600">Events Coordinator</p>
              </div>
            </div>
          </div>
        </section>
      </div>

      <div id="testimonials" data-section="testimonials">
        <section className="py-20 px-6">
          <div className="max-w-6xl mx-auto">
            <div className="text-center mb-12">
              <span className="text-sm font-medium text-primary mb-2 block">Community Stories</span>
              <h2 className="text-4xl font-bold mb-6">Join thousands of Star Wars fans connecting and sharing their passion every day</h2>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
              <div className="text-center">
                <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502912600-84fr3x4z.jpg" alt="Alex J." className="w-20 h-20 rounded-full mx-auto mb-4 object-cover" />
                <h4 className="font-semibold">Alex J.</h4>
              </div>
              <div className="text-center">
                <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502913367-8j5yog7q.jpg" alt="Sarah K." className="w-20 h-20 rounded-full mx-auto mb-4 object-cover" />
                <h4 className="font-semibold">Sarah K.</h4>
              </div>
              <div className="text-center">
                <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502914201-sdgv9pae.jpg" alt="Michael T." className="w-20 h-20 rounded-full mx-auto mb-4 object-cover" />
                <h4 className="font-semibold">Michael T.</h4>
              </div>
              <div className="text-center">
                <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502914968-w4h9h050.jpg" alt="Emma R." className="w-20 h-20 rounded-full mx-auto mb-4 object-cover" />
                <h4 className="font-semibold">Emma R.</h4>
              </div>
            </div>
          </div>
        </section>
      </div>

      <div id="faq" data-section="faq">
        <section className="py-20 px-6">
          <div className="max-w-6xl mx-auto">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
              <div>
                <h2 className="text-4xl font-bold mb-6">Frequently Asked Questions</h2>
                <p className="text-lg mb-8">Find answers to common questions about our community and membership.</p>
                <div className="space-y-6">
                  <div className="border-b pb-4">
                    <h3 className="text-xl font-semibold mb-2">How do I join the community?</h3>
                    <p>Joining is simple! Complete our registration form on the contact page and you will receive confirmation within 24 hours. Membership is free and open to all Star Wars enthusiasts.</p>
                  </div>
                  <div className="border-b pb-4">
                    <h3 className="text-xl font-semibold mb-2">What events do you organize?</h3>
                    <p>We organize monthly movie screenings, discussion forums, fan meetups, and exclusive viewing events for new releases. Check our news section for upcoming events.</p>
                  </div>
                  <div className="border-b pb-4">
                    <h3 className="text-xl font-semibold mb-2">Is there a membership fee?</h3>
                    <p>No, our community is completely free to join. We rely on volunteer members and donations to keep our community running smoothly.</p>
                  </div>
                  <div className="border-b pb-4">
                    <h3 className="text-xl font-semibold mb-2">Can I share fan content?</h3>
                    <p>Absolutely! We encourage members to share fan art, theories, reviews, and creative content. Please respect copyright and community guidelines when sharing.</p>
                  </div>
                </div>
              </div>
              <div>
                <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502905270-5whkj6nu.jpg" alt="Star Wars galaxy" className="w-full h-full object-cover rounded-lg" />
              </div>
            </div>
          </div>
        </section>
      </div>

      <div id="blog" data-section="blog">
        <section className="py-20 px-6">
          <div className="max-w-6xl mx-auto">
            <div className="text-center mb-12">
              <h2 className="text-4xl font-bold mb-6">Latest Updates</h2>
              <p className="text-lg max-w-3xl mx-auto">Stay informed with the latest news, reviews, and discussions from the Star Wars universe.</p>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
              <div className="bg-white rounded-lg shadow-lg overflow-hidden">
                <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502908501-qegkac9j.jpg" alt="A New Hope" className="w-full h-48 object-cover" />
                <div className="p-6">
                  <div className="flex items-center space-x-2 text-sm text-gray-500 mb-2">
                    <span>News</span>
                    <span>•</span>
                    <span>Jan 15, 2025</span>
                    <span>•</span>
                    <span>5 min read</span>
                  </div>
                  <h3 className="text-xl font-semibold mb-2">A New Hope: The Latest Series Announcement</h3>
                </div>
              </div>
              <div className="bg-white rounded-lg shadow-lg overflow-hidden">
                <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502909492-uldg0gxd.jpg" alt="Fan Theories" className="w-full h-48 object-cover" />
                <div className="p-6">
                  <div className="flex items-center space-x-2 text-sm text-gray-500 mb-2">
                    <span>Analysis</span>
                    <span>•</span>
                    <span>Jan 12, 2025</span>
                    <span>•</span>
                    <span>8 min read</span>
                  </div>
                  <h3 className="text-xl font-semibold mb-2">Fan Theories: Exploring Character Connections Across the Saga</h3>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>

      <div id="contact" data-section="contact">
        <section className="py-20 px-6">
          <div className="max-w-6xl mx-auto">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
              <div>
                <h2 className="text-4xl font-bold mb-6">Join the Community</h2>
                <p className="text-lg mb-8">Ready to connect with fellow Star Wars fans? Sign up for our newsletter and become part of our growing community today.</p>
                <form className="space-y-6">
                  <input type="text" name="name" placeholder="Your Name" required className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent" />
                  <input type="email" name="email" placeholder="Your Email" required className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent" />
                  <textarea name="message" placeholder="Tell us about your favorite Star Wars moment..." rows={4} className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent resize-none"></textarea>
                  <button type="submit" className="w-full px-6 py-3 bg-primary text-white rounded-lg hover:bg-primary/80 transition-colors">Join Community</button>
                </form>
              </div>
              <div>
                <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502916033-zltpd7vx.jpg" alt="Star Wars community connection" className="w-full h-full object-cover rounded-lg" />
              </div>
            </div>
          </div>
        </section>
      </div>

      <div id="footer" data-section="footer">
        <footer className="py-20 px-6 bg-gray-900 text-white">
          <div className="max-w-6xl mx-auto">
            <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
              <div>
                <h3 className="text-xl font-bold mb-4">Star Wars Fans</h3>
              </div>
              <div>
                <h4 className="font-semibold mb-4">Community</h4>
                <ul className="space-y-2">
                  <li><a href="#about" className="hover:text-primary transition-colors">About Us</a></li>
                  <li><a href="#team" className="hover:text-primary transition-colors">Members</a></li>
                  <li><a href="#blog" className="hover:text-primary transition-colors">Events</a></li>
                </ul>
              </div>
              <div>
                <h4 className="font-semibold mb-4">Resources</h4>
                <ul className="space-y-2">
                  <li><a href="#blog" className="hover:text-primary transition-colors">News</a></li>
                  <li><a href="#faq" className="hover:text-primary transition-colors">FAQ</a></li>
                  <li><a href="#contact" className="hover:text-primary transition-colors">Contact</a></li>
                </ul>
              </div>
              <div>
                <h4 className="font-semibold mb-4">Legal</h4>
                <ul className="space-y-2">
                  <li><a href="#privacy" className="hover:text-primary transition-colors">Privacy Policy</a></li>
                  <li><a href="#terms" className="hover:text-primary transition-colors">Terms of Service</a></li>
                </ul>
              </div>
            </div>
            <div className="border-t border-gray-700 mt-12 pt-8 text-center">
              <p>© 2025 Star Wars Fan Community. All rights reserved.</p>
            </div>
          </div>
        </footer>
      </div>
    </ThemeProvider>
  );
}