---
import Layout from '../../layouts/Layout.astro';
import Header from '../../components/Header.astro';
import Footer from '../../components/Footer.astro';
import HeroSection from '../../components/HeroSection.astro';
import MissionStatement from '../../components/MissionStatement.astro';
import MissionDescription from '../../components/MissionDescription.astro';
import MissionPillars from '../../components/MissionPillars.astro';
---

<Layout title="Mission">
  <Header />

  <main class="py-8">
    <!-- Hero Section -->
     <HeroSection 
        title="Mission" 
        description="Empowering businesses to pioneer sustainable innovation through strategic marketing and space-enabled solutions." 
      />

    <!-- Mission Statement -->
    <section class="bg-gray-50 dark:bg-primary-500 text-white py-8">
      <div class="max-w-4xl mx-auto text-center">
        <!-- Mission Statement Component -->
        <MissionStatement />

        <!-- Mission Description Component -->
        <MissionDescription />
      </div>
    </section>

    <!-- Mission Pillars -->
    <section class="bg-gray-50 dark:bg-primary-500">
        <h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-8 text-center">Our Mission Pillars</h2>
        <MissionPillars />
    </section>

    <!-- Optional Supporting Story -->
    <section class="bg-white dark:bg-accent-500 py-12">
      <div class="container-custom grid md:grid-cols-2 gap-12 items-center">
        <div>
          <h3 class="text-2xl font-semibold text-gray-900 dark:text-white mb-4">Why We Do This</h3>
          <p class="text-gray-600 dark:text-white mb-4">
            Our mission is rooted in sustainability, innovation, and measurable impact. We guide organisations to grow responsibly while embracing space-enabled solutions.
          </p>
          <p class="text-gray-600 dark:text-white">
            Through professional certifications, strategic partnerships, and a commitment to the UN Sustainable Development Goals, we ensure every initiative aligns with ethical and environmental standards.
          </p>
        </div>
        <div class="rounded-lg overflow-hidden shadow-xl">
          <img src="/images/mission-story.png" alt="Our Mission Story" class="w-full h-auto" />
        </div>
      </div>
    </section>

    <!-- Full-Width CTA -->
    <section class="w-full bg-secondary-500 py-16 text-white text-center">
      <div class="max-w-[1600px] mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="text-3xl sm:text-4xl font-bold mb-4">Ready to collaborate?</h2>
        <p class="mb-8 text-lg sm:text-xl text-gray-200">Let’s drive responsible growth for your organisation. Get in touch for a custom package or exploratory call.</p>
        <a href="/contact" class="inline-block w-full sm:w-auto px-8 py-4 bg-accent-500 hover:bg-accent-600 text-white font-semibold rounded-lg transition text-lg sm:text-xl">Contact Us</a>
      </div>
    </section>

  </main>

  <Footer />
</Layout>