---
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 AboutSchema from '../../components/AboutSchema.astro';
import TeamsList from '../../components/TeamsList.jsx';
import Mission from '../../components/MissionStatement.astro';
import Vision from '../../components/VisionStatement.astro';

import { getCollection } from 'astro:content';

// Fetch all team members
let teamMembers = await getCollection('team');

// Sort alphabetically by title
teamMembers.sort((a, b) => (a.data.title || '').localeCompare(b.data.title || ''));
---

<Layout title="About Us | Green Orbit Digital">
  <Header />
  <AboutSchema />

  <main class="py-8">

    <!-- Hero -->
    <HeroSection 
      title="About Us"
      highlightText="About"
      description="Green Orbit Digital drives sustainable innovation through digital marketing, strategy, and technology in the space and climate sectors."
    />

<!-- About Intro -->
<section class="py-16 bg-white dark:bg-primary-500">
  <div class="container-custom max-w-6xl mx-auto space-y-16">

    <!-- Intro Text -->
    <div class="space-y-6 text-center md:text-left">
      <span class="inline-block px-4 py-1 rounded-full bg-secondary-100 dark:bg-accent-500 text-secondary-600 dark:text-white font-medium text-sm">
        Who We Are
      </span>

      <h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white">
        Green Orbit Digital
      </h2>

      <p class="text-gray-700 dark:text-white leading-relaxed">
        Green Orbit Digital is a Leicester-based agency specialising in sustainable marketing for the space and advanced technology sectors. We help organisations translate complex, high-tech innovations into clear, compelling strategies that drive measurable impact. By integrating data-driven digital marketing with sustainability principles, we enable clients to reach the right audiences, amplify their innovations, and create a positive environmental and social footprint.
      </p>

      <p class="text-gray-700 dark:text-white leading-relaxed">
        Founded with a mission to bridge the gap between cutting-edge technology and meaningful market outcomes, Green Orbit Digital works across digital channels, content strategy, and partnership development to deliver transformative results. We champion inclusivity, transparency, and long-term value, helping clients not only succeed commercially but also contribute to a more sustainable and equitable future.
      </p>
    </div>

    <!-- Mission & Vision -->
    <div class="grid md:grid-cols-2 gap-12 text-center">
      <!-- Mission -->
      <div class="space-y-4">
        <h3 class="text-3xl font-bold text-accent-500">Mission Statement</h3>
        <Mission class="mx-auto max-w-lg text-gray-700 dark:text-white leading-relaxed" />
        <a href="/about/our-mission" class="btn-primary mt-4 inline-block">Learn More</a>
      </div>

      <!-- Vision -->
      <div class="space-y-4">
        <h3 class="text-3xl font-bold text-accent-500">Vision Statement</h3>
        <Vision class="mx-auto max-w-lg text-gray-700 dark:text-white leading-relaxed" />
        <a href="/about/our-vision" class="btn-primary mt-4 inline-block">Learn More</a>
      </div>
    </div>

  </div>
</section>
<!-- Our Story -->
<section class="py-16 bg-white dark:bg-primary-500">
  <div class="container-custom max-w-6xl mx-auto grid md:grid-cols-2 gap-12 items-center">

    <!-- Text Content (Left) -->
    <div class="space-y-6 order-2 md:order-1">
      <span class="inline-block px-4 py-1 rounded-full bg-secondary-100 dark:bg-accent-500 text-secondary-600 dark:text-white font-medium text-sm">
        Our Story
      </span>

      <h2 class="text-3xl font-bold text-gray-900 dark:text-white">
        From Startup to Sustainability Champion
      </h2>

      <p class="text-gray-600 dark:text-white">
        Founded on the belief that space technology can tackle global challenges, Green Orbit Digital helps organisations translate complex, space-enabled capabilities into clear, actionable strategies that deliver measurable results.
      </p>

      <p class="text-gray-600 dark:text-white">
        We bridge the gap between industry, government, investors, and academia to create pathways for startups and established organisations to scale responsibly and sustainably.
      </p>

      <p class="text-gray-600 dark:text-white">
        Our mission is to equip forward-thinking businesses with the insights, tools, and strategies they need to thrive—without compromising the future of our planet.
      </p>

            <a href="/about/our-story" class="btn-primary">Learn more about our story</a>
    </div>

    <!-- Image (Right) -->
    <div class="rounded-lg overflow-hidden shadow-xl order-1 md:order-2 mt-8 md:mt-0">
      <img src="/images/earth-observation.png" alt="Team collaborating" class="w-full h-auto" loading="lazy" decoding="async"/>
    </div>

  </div>
</section>

<!-- Where We Are -->
<section class="py-16 bg-gray-50 dark:bg-primary-500">
  <div class="container-custom max-w-6xl mx-auto grid md:grid-cols-2 gap-12 items-center">

    <!-- Image (Left) -->
    <div class="rounded-lg overflow-hidden shadow-xl order-1 md:order-1 mt-8 md:mt-0">
      <iframe
        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2420.4009800499057!2d-1.136293223239753!3d52.6527345720962!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48776100f7baaaab%3A0x39f5a0d59d38632b!2sDock%2075%20Exploration%20Dr%2C%20Leicester%20LE4%205NU!5e0!3m2!1sen!2suk!4v1763463316184!5m2!1sen!2suk"
        width="100%"
        height="400"
        style="border:0;"
        allowfullscreen=""
        loading="lazy"
        referrerpolicy="no-referrer-when-downgrade"
      ></iframe>
    </div>

    <!-- Text Content (Right) -->
    <div class="space-y-6 order-2 md:order-2">
      <span class="inline-block px-4 py-1 rounded-full bg-secondary-100 dark:bg-accent-500 text-secondary-600 dark:text-white font-medium text-sm">
        Headquarters
      </span>

      <h2 class="text-3xl font-bold text-gray-900 dark:text-white">
        Where We Are Based
      </h2>

      <p class="text-gray-600 dark:text-white">
        Green Orbit Digital is proudly headquartered in <strong>Leicester, UK</strong>. From here, we coordinate our sustainable marketing initiatives, support space and climate-focused organisations, and collaborate with clients across the UK and internationally.
      </p>

      <p class="text-gray-600 dark:text-white">
        Leicester offers a thriving tech and innovation ecosystem, allowing us to connect with local businesses, universities, and research institutions while driving national and international projects.
      </p>

      <p class="text-gray-600 dark:text-white">
        Our team uses this central location to bridge the gap between industry, government, investors, and academia, helping organisations scale responsibly and deliver impactful solutions.
      </p>
    </div>

  </div>
</section>

    <!-- Leadership Spotlight -->
    <section class="py-16 bg-white dark:bg-primary-500">
      <div class="text-center max-w-5xl mx-auto">
        <span class="inline-block px-4 py-1 rounded-full bg-secondary-100 dark:bg-accent-500 text-secondary-600 dark:text-white font-medium text-sm mb-4">
          Leadership Spotlight
        </span>
        <h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-4">Meet Our Team</h2>
        <p class="text-gray-600 dark:text-white max-w-3xl mx-auto mb-8">
          Driving sustainable innovation in the space and tech sectors through leadership, expertise, and advocacy.
        </p>
      <TeamsList teamMembers={teamMembers} showLinks={true} />
      </div>
    </section>

<!-- Discover More About Us & Key Sections -->
<section class="py-16 bg-gray-50 dark:bg-secondary-500 text-center space-y-16">

  <!-- Heading -->
  <h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-12">Discover More About Us</h2>

  <!-- Three-column boxes -->
  <div class="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
    <div class="p-8 bg-white dark:bg-secondary-500 rounded-xl shadow hover:shadow-lg transition flex flex-col items-center">
      <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Services</h3>
      <p class="text-gray-600 dark:text-white mb-4">Explore our strategic, sustainable marketing services for the space and advanced tech sectors.</p>
      <a href="/services" class="btn-primary">Learn More</a>
    </div>

    <div class="p-8 bg-white dark:bg-secondary-500 rounded-xl shadow hover:shadow-lg transition flex flex-col items-center">
      <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Our Team</h3>
      <p class="text-gray-600 dark:text-white mb-4">Meet the experts driving innovation and sustainability across our projects and initiatives.</p>
      <a href="/team" class="btn-primary">Learn More</a>
    </div>

    <div class="p-8 bg-white dark:bg-secondary-500 rounded-xl shadow hover:shadow-lg transition flex flex-col items-center">
      <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Careers</h3>
      <p class="text-gray-600 dark:text-white mb-4">Discover open roles and opportunities to join our mission for responsible growth.</p>
      <a href="/careers" class="btn-primary">View Open Positions</a>
    </div>
  </div>
</section>

<section class="py-16 bg-gray-50 dark:bg-secondary-500 text-center space-y-16">
  <!-- Two-column boxes -->
  <div class="grid md:grid-cols-2 gap-8 max-w-6xl mx-auto">
    <div class="p-8 bg-white dark:bg-secondary-500 rounded-xl shadow hover:shadow-lg transition flex flex-col items-center">
      <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Our Inclusive Workplace</h3>
      <p class="text-gray-600 dark:text-white mb-4">
        We recognise the value of diverse perspectives and backgrounds. Building an inclusive culture accelerates innovation, enhances collaboration, and strengthens business resilience.
      </p>
      <a href="/about/edi" class="btn-primary">Learn More</a>
    </div>

    <div class="p-8 bg-white dark:bg-secondary-500 rounded-xl shadow hover:shadow-lg transition flex flex-col items-center">
      <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Our Values</h3>
      <p class="text-gray-600 dark:text-white mb-4">
        Green Orbit Digital is guided by core principles that shape how we work with clients, partners, and our communities. Our values inform our strategies, decisions, and culture.
      </p>
      <a href="/about/our-values" class="btn-primary">Learn More</a>
    </div>
  </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-white">
          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>