{{ define "main" }}
{{ partial "nav.html" . }}
<main id="main-content" class="services-page bg-gradient-to-b from-slate-900 to-slate-800 text-white min-h-screen pt-20">
  <!-- Services Hero Section -->
  <section aria-labelledby="services-title" class="relative py-20 md:py-28">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <h1 id="services-title" class="text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-bold text-center mb-8 animate-breath">
        My Services
      </h1>
      <p class="text-2xl md:text-3xl text-center text-gray-300 max-w-4xl mx-auto">
        Professional photography and visual content creation services tailored to your needs
      </p>
    </div>
  </section>

  <!-- Services Grid -->
  <section aria-label="Photography Services" class="py-12 md:py-16">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        <!-- Photography Service Card -->
        <article class="service-card bg-slate-800/50 rounded-lg p-8 backdrop-blur-sm transition-transform hover:transform hover:scale-105">
          <h2 class="text-3xl lg:text-4xl font-semibold mb-6">Photography Sessions</h2>
          <ul class="space-y-4 text-gray-300 mb-8 text-xl">
            <li class="flex items-start">
              <svg class="w-7 h-7 text-blue-400 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
              </svg>
              <span>Professional portrait sessions</span>
            </li>
            <li class="flex items-start">
              <svg class="w-7 h-7 text-blue-400 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
              </svg>
              <span>Event photography</span>
            </li>
            <li class="flex items-start">
              <svg class="w-7 h-7 text-blue-400 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
              </svg>
              <span>Brand & product shoots</span>
            </li>
          </ul>
          <a href="/bookings" class="inline-block bg-blue-600 text-white px-8 py-4 rounded-lg hover:bg-blue-700 transition-colors focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-slate-800 focus:outline-none text-xl font-semibold" aria-label="Book a photography session">
            BOOK NOW
          </a>
        </article>

        <!-- Content Creation Card -->
        <article class="service-card bg-slate-800/50 rounded-lg p-8 backdrop-blur-sm transition-transform hover:transform hover:scale-105">
          <h2 class="text-3xl lg:text-4xl font-semibold mb-6">Content Creation</h2>
          <ul class="space-y-4 text-gray-300 mb-8 text-xl">
            <li class="flex items-start">
              <svg class="w-7 h-7 text-blue-400 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
              </svg>
              <span>Social media content</span>
            </li>
            <li class="flex items-start">
              <svg class="w-7 h-7 text-blue-400 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
              </svg>
              <span>Video production</span>
            </li>
            <li class="flex items-start">
              <svg class="w-7 h-7 text-blue-400 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
              </svg>
              <span>Digital marketing assets</span>
            </li>
          </ul>
        </article>

        <!-- Custom Projects Card -->
        <article class="service-card bg-slate-800/50 rounded-lg p-8 backdrop-blur-sm transition-transform hover:transform hover:scale-105">
          <h2 class="text-3xl lg:text-4xl font-semibold mb-6">Custom Projects</h2>
          <ul class="space-y-4 text-gray-300 mb-8 text-xl">
            <li class="flex items-start">
              <svg class="w-7 h-7 text-blue-400 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
              </svg>
              <span>Collaborative projects</span>
            </li>
            <li class="flex items-start">
              <svg class="w-7 h-7 text-blue-400 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
              </svg>
              <span>Creative consulting</span>
            </li>
            <li class="flex items-start">
              <svg class="w-7 h-7 text-blue-400 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
              </svg>
              <span>Custom solutions</span>
            </li>
          </ul>
          <a href="/contact" class="inline-block bg-blue-600 text-white px-8 py-4 rounded-lg hover:bg-blue-700 transition-colors focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-slate-800 focus:outline-none text-xl font-semibold" aria-label="Contact for custom projects">
            Contact Me
          </a>
        </article>
      </div>
    </div>
  </section>

  <!-- Contact CTA Section -->
  <section aria-labelledby="cta-title" class="py-20 md:py-28">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8 text-center">
      <h2 id="cta-title" class="text-4xl md:text-5xl lg:text-6xl font-bold mb-8">Ready to Create Something Amazing?</h2>
      <p class="text-2xl md:text-3xl text-gray-300 mb-10 max-w-3xl mx-auto">
        Let's work together to bring your vision to life. Contact me to discuss your project or book a session.
      </p>
      <div class="flex flex-col sm:flex-row justify-center gap-6">
        <a href="/bookings" class="inline-block bg-blue-600 text-white px-10 py-5 rounded-lg hover:bg-blue-700 transition-colors focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-slate-800 focus:outline-none text-2xl font-semibold">
          BOOK NOW
        </a>
        <a href="/contact" class="inline-block bg-transparent border-2 border-white text-white px-10 py-5 rounded-lg hover:bg-white/10 transition-colors focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-slate-800 focus:outline-none text-2xl font-semibold">
          Contact Me
        </a>
      </div>
    </div>
  </section>
</main>

<style>
  .service-card {
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  }

  @media (prefers-reduced-motion: reduce) {
    .service-card {
      transition: none;
    }
  }

  .service-card:hover {
    border-color: rgba(255, 255, 255, 0.2);
  }

  /* Ensure proper focus visibility */
  a:focus-visible {
    outline: 2px solid #60A5FA;
    outline-offset: 2px;
  }

  /* Add keyboard focus styles */
  .service-card:focus-within {
    border-color: #60A5FA;
    box-shadow: 0 0 0 2px #60A5FA;
  }
</style>
{{ end }}