"use client";

export default function LandingPage() {
  return (
    <div className="min-h-screen bg-gray-50">
      <div id="nav" data-section="nav">
        <nav className="bg-white shadow-sm border-b">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="flex justify-between items-center h-16">
              <div className="flex-shrink-0">
                <h1 className="text-xl font-bold text-gray-900">Coach Elite</h1>
              </div>
              <div className="hidden md:block">
                <button className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium">
                  Book Consultation
                </button>
              </div>
            </div>
          </div>
        </nav>
      </div>

      <div id="hero" data-section="hero">
        <div className="bg-gradient-to-r from-blue-600 to-blue-800 text-white">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
            <div className="text-center">
              <div className="inline-block px-3 py-1 text-sm bg-blue-500 rounded-full mb-4">
                Elite Training
              </div>
              <h1 className="text-4xl md:text-6xl font-extrabold mb-6">
                Transform Your Game
              </h1>
              <p className="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">
                Expert football coaching for athletes who want to dominate on the field. Build strength, strategy, and championship mentality.
              </p>
              <div className="space-x-4">
                <button className="bg-white text-blue-600 px-8 py-3 rounded-md text-lg font-semibold hover:bg-gray-100">
                  Start Your Journey
                </button>
                <button className="border-2 border-white text-white px-8 py-3 rounded-md text-lg font-semibold hover:bg-white hover:text-blue-600">
                  Learn More
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div id="about" data-section="about">
        <div className="py-24 bg-white">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="grid md:grid-cols-2 gap-12 items-center">
              <div>
                <h2 className="text-3xl md:text-4xl font-extrabold text-gray-900 mb-6">
                  Proven Coaching Excellence
                </h2>
                <p className="text-lg text-gray-600 mb-8">
                  With 15+ years of experience developing elite athletes and championship teams, I bring strategic insight, technical expertise, and a commitment to unlocking your full potential. My coaching philosophy combines cutting-edge training methods with personalized mentorship to help you achieve results that matter.
                </p>
                <button className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-md font-semibold">
                  View Credentials
                </button>
              </div>
              <div className="bg-gray-200 aspect-square rounded-lg flex items-center justify-center">
                <span className="text-gray-500">Professional football coach</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div id="services" data-section="services">
        <div className="py-24 bg-gray-50">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="text-center mb-16">
              <div className="inline-block px-3 py-1 text-sm bg-blue-100 text-blue-600 rounded-full mb-4">
                What We Offer
              </div>
              <h2 className="text-3xl md:text-4xl font-extrabold text-gray-900 mb-6">
                Coaching Services
              </h2>
              <p className="text-lg text-gray-600 max-w-2xl mx-auto">
                Specialized training programs designed for serious athletes ready to elevate their game.
              </p>
            </div>
            <div className="grid md:grid-cols-2 gap-8">
              <div className="space-y-4">
                <div className="bg-white p-6 rounded-lg shadow-sm">
                  <h3 className="text-xl font-bold text-gray-900 mb-2">One-on-One Training</h3>
                  <p className="text-gray-600">Personalized coaching sessions focused on your specific strengths and areas for improvement.</p>
                </div>
                <div className="bg-white p-6 rounded-lg shadow-sm">
                  <h3 className="text-xl font-bold text-gray-900 mb-2">Team Development Programs</h3>
                  <p className="text-gray-600">Comprehensive team coaching including strategy sessions and leadership development.</p>
                </div>
              </div>
              <div className="space-y-4">
                <div className="bg-white p-6 rounded-lg shadow-sm">
                  <h3 className="text-xl font-bold text-gray-900 mb-2">Performance Analysis</h3>
                  <p className="text-gray-600">Advanced video analysis and performance metrics tracking to optimize your approach.</p>
                </div>
                <div className="bg-white p-6 rounded-lg shadow-sm">
                  <h3 className="text-xl font-bold text-gray-900 mb-2">Mental Coaching</h3>
                  <p className="text-gray-600">Build championship mentality through sports psychology and confidence training.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div id="metrics" data-section="metrics">
        <div className="py-24 bg-blue-600">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="text-center mb-16">
              <h2 className="text-3xl md:text-4xl font-extrabold text-white mb-6">
                Track Record of Success
              </h2>
              <p className="text-xl text-blue-100">
                Proven results speak louder than words
              </p>
            </div>
            <div className="grid md:grid-cols-4 gap-8">
              <div className="text-center">
                <div className="text-4xl font-extrabold text-white mb-2">150+</div>
                <div className="text-blue-200 font-semibold mb-1">Athletes Trained</div>
                <div className="text-blue-100 text-sm">Dedicated players developed into elite competitors</div>
              </div>
              <div className="text-center">
                <div className="text-4xl font-extrabold text-white mb-2">12</div>
                <div className="text-blue-200 font-semibold mb-1">Championships</div>
                <div className="text-blue-100 text-sm">Team titles and victories under my coaching</div>
              </div>
              <div className="text-center">
                <div className="text-4xl font-extrabold text-white mb-2">95%</div>
                <div className="text-blue-200 font-semibold mb-1">Success Rate</div>
                <div className="text-blue-100 text-sm">Athletes achieving their performance goals</div>
              </div>
              <div className="text-center">
                <div className="text-4xl font-extrabold text-white mb-2">15+</div>
                <div className="text-blue-200 font-semibold mb-1">Years Experience</div>
                <div className="text-blue-100 text-sm">Dedicated to coaching excellence</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div id="testimonials" data-section="testimonials">
        <div className="py-24 bg-gray-50">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="text-center mb-16">
              <h2 className="text-3xl md:text-4xl font-extrabold text-gray-900 mb-6">
                What Athletes Say
              </h2>
              <p className="text-lg text-gray-600">
                Real results from dedicated players who transformed their game
              </p>
            </div>
            <div className="grid md:grid-cols-2 gap-8">
              <div className="bg-white p-8 rounded-lg shadow-sm">
                <p className="text-gray-600 mb-6 italic">
                  "Coach transformed not just my technique but my mindset. His strategic approach helped me earn a scholarship and become team captain."
                </p>
                <div className="font-semibold text-gray-900">Marcus Johnson, College Linebacker</div>
              </div>
              <div className="bg-white p-8 rounded-lg shadow-sm">
                <p className="text-gray-600 mb-6 italic">
                  "As a female quarterback breaking barriers, having a coach who believes in you is everything. Coach's expertise helped me throw 40 TDs this season."
                </p>
                <div className="font-semibold text-gray-900">Sarah Williams, High School QB</div>
              </div>
              <div className="bg-white p-8 rounded-lg shadow-sm">
                <p className="text-gray-600 mb-6 italic">
                  "The film analysis sessions alone were worth every penny. My interception rate doubled in one season."
                </p>
                <div className="font-semibold text-gray-900">David Martinez, Defensive Back</div>
              </div>
              <div className="bg-white p-8 rounded-lg shadow-sm">
                <p className="text-gray-600 mb-6 italic">
                  "The improvement was remarkable. His technical knowledge combined with his ability to push players past their limits is truly special."
                </p>
                <div className="font-semibold text-gray-900">Alex Thompson, Offensive Line Coach</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div id="contact" data-section="contact">
        <div className="py-24 bg-blue-600">
          <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <h2 className="text-3xl md:text-4xl font-extrabold text-white mb-8">
              Ready to elevate your game?
            </h2>
            <div className="flex max-w-md mx-auto">
              <input
                type="email"
                placeholder="your@email.com"
                className="flex-1 px-4 py-3 rounded-l-md border-0 focus:ring-2 focus:ring-blue-500"
              />
              <button className="bg-white text-blue-600 px-6 py-3 rounded-r-md font-semibold hover:bg-gray-100">
                Get Started
              </button>
            </div>
          </div>
        </div>
      </div>

      <div id="footer" data-section="footer">
        <div className="bg-gray-900 text-white py-16">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="grid md:grid-cols-4 gap-8">
              <div>
                <h3 className="text-xl font-bold mb-4">Coach Elite</h3>
              </div>
              <div>
                <h4 className="font-semibold mb-4">Services</h4>
                <ul className="space-y-2 text-gray-300">
                  <li><a href="#services" className="hover:text-white">Services</a></li>
                  <li><a href="#about" className="hover:text-white">About</a></li>
                  <li><a href="#testimonials" className="hover:text-white">Testimonials</a></li>
                </ul>
              </div>
              <div>
                <h4 className="font-semibold mb-4">Contact</h4>
                <ul className="space-y-2 text-gray-300">
                  <li><a href="#contact" className="hover:text-white">Contact</a></li>
                  <li><a href="#contact" className="hover:text-white">Book Session</a></li>
                </ul>
              </div>
              <div>
                <h4 className="font-semibold mb-4">Legal</h4>
                <ul className="space-y-2 text-gray-300">
                  <li><a href="#" className="hover:text-white">Privacy Policy</a></li>
                  <li><a href="#" className="hover:text-white">Terms of Service</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}