components/hero.js

class CustomHero extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .hero-image {
          background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('http://static.photos/nature/1200x630/42');
          background-size: cover;
          background-position: center;
        }
      </style>
      <section class="hero-image pt-32 pb-24 text-white">
        <div class="container mx-auto px-4">
          <div class="max-w-2xl mx-auto text-center">
            <h1 class="text-4xl md:text-5xl font-bold mb-6">Navigating Age Barriers to Naval Intelligence</h1>
            <p class="text-xl mb-8">Discover how to pursue your dream of becoming a Canadian Naval Intelligence Officer, even beyond the standard age cutoff.</p>
            <div class="flex flex-col sm:flex-row justify-center gap-4">
              <a href="#path" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-md font-medium transition-colors">
                Explore Your Path
              </a>
              <a href="#calculator" class="bg-white hover:bg-gray-100 text-blue-600 px-6 py-3 rounded-md font-medium transition-colors">
                Age Calculator
              </a>
            </div>
          </div>
        </div>
      </section>
      
      <!-- Age Calculator Section -->
      <section id="calculator" class="bg-gray-50 py-16">
        <div class="container mx-auto px-4">
          <div class="max-w-md mx-auto bg-white p-8 rounded-lg shadow-md">
            <h2 class="text-2xl font-bold text-gray-800 mb-6 text-center">Age Eligibility Check</h2>
            <form id="age-calculator">
              <div class="mb-4">
                <label for="birth-year" class="block text-gray-700 mb-2">Your Birth Year</label>
                <input type="number" id="birth-year" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
              </div>
              <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md transition-colors">
                Calculate Age in 2025
              </button>
            </form>
            <div id="age-result" class="mt-4"></div>
          </div>
        </div>
      </section>
    `;
  }
}

customElements.define('custom-hero', CustomHero);