---
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 VisionStatement from '../../components/VisionStatement.astro';
import VisionDescription from '../../components/VisionDescription.astro';
---

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

  <main class="py-8">
    <!-- Hero Section -->
    <HeroSection 
      title="Vision" 
      description="Driving sustainable innovation through visionary digital marketing at the intersection of space, advanced technology, and global industries." 
    />

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

        <!-- Vision Description Component -->
        <VisionDescription />
      </div>
    </section>

  </main>
      <!-- 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>
  <Footer />
</Layout>