---
// About Us Page for WorkRoot IT Solutions LLP
// Features: Company story, team member cards, mission/vision statements, company timeline

import BaseLayout from '../layouts/BaseLayout.astro';
import SEO from '../components/SEO.astro';

// Team member data
const teamMembers = [
  {
    name: 'Ajay Ghanwat',
    role: 'Director',
    bio: 'A visionary technology leader with deep expertise in enterprise software architecture and government IT systems. Ajay founded WorkRoot in 2022 with a mission to deliver world-class software solutions from India. He has led the delivery of 20+ projects including large-scale government deployments across multiple districts in Bihar and enterprise platforms for IIT Patna.',
    avatar: 'AG',
    social: {
      twitter: 'https://x.com/GhanwatAjay',
    },
  },
  {
    name: 'Ashok Jamdade',
    role: 'Director',
    bio: 'An experienced business strategist and operations leader who brings strong client relationship management and project governance expertise to WorkRoot. Ashok ensures every project meets the highest standards of quality and is delivered on time, driving the company\'s growth and operational excellence.',
    avatar: 'AJ',
    social: {},
  },
  {
    name: 'Swapnali Vachkal',
    role: 'Full Stack Developer',
    bio: 'A skilled full-stack developer proficient in Angular, React, Spring Boot, and modern web technologies. Swapnali plays a key role in building and maintaining WorkRoot\'s client projects, from government management systems to e-commerce platforms, delivering clean, performant, and maintainable code.',
    avatar: 'SV',
    social: {},
  },
];

// Company stats
const stats = [
  { value: '3+', label: 'Years of Experience' },
  { value: '20+', label: 'Projects Delivered' },
  { value: '3', label: 'Team Members' },
  { value: '100%', label: 'Client Satisfaction' },
];

// Company timeline
const timeline = [
  {
    year: '2022',
    title: 'The Beginning',
    description: 'Founded WorkRoot IT Solutions LLP in Maharashtra, India. Started with the PLNR Financing platform (Angular + Spring Boot + MySQL).',
  },
  {
    year: '2022',
    title: 'First Government Contract',
    description: 'Secured first government contract — Police Management System for Bihar Government, deployed across 11 districts.',
  },
  {
    year: '2023',
    title: 'University & LLP Registration',
    description: 'Delivered University Management System for IIT Patna (Next.js + Spring Boot + MySQL). Registered as LLP.',
  },
  {
    year: '2024',
    title: 'Smart Governance',
    description: 'Expanded into smart governance — delivered SCMS (Smart Crematorium Management System) for PSCL Bihar Government.',
  },
  {
    year: '2025',
    title: 'Product Expansion',
    description: 'Launched FPC Cart e-commerce platform (Astro + Golang). Built Pophealth mobile health app with Expo. Team grown to 3 members.',
  },
  {
    year: '2026',
    title: 'Continuing Innovation',
    description: 'Continuing to deliver innovative solutions. 20+ projects completed. 100% client satisfaction maintained.',
  },
];

// Core values
const values = [
  {
    title: 'Innovation',
    description: 'We embrace cutting-edge technologies to deliver future-proof solutions.',
    icon: 'lightbulb',
  },
  {
    title: 'Integrity',
    description: 'Transparency and honesty are the foundation of every client relationship.',
    icon: 'shield',
  },
  {
    title: 'Excellence',
    description: 'We pursue quality in every line of code and every interaction.',
    icon: 'star',
  },
  {
    title: 'Collaboration',
    description: 'Great solutions emerge from diverse perspectives working together.',
    icon: 'users',
  },
];
---

<BaseLayout
  title="About Us — Our Story & Team"
  description="WorkRoot IT Solutions LLP: founded 2022, 3 team members, 20+ projects delivered. Meet the technologists behind your digital transformation. Innovation, integrity, excellence."
>
  <SEO
    slot="head"
    type="AboutPage"
    breadcrumbs={[
      { name: 'Home', url: '/' },
      { name: 'About Us', url: '/about' }
    ]}
  />
  <!-- Hero Section -->
  <section class="relative min-h-[70vh] flex items-center overflow-hidden bg-gradient-to-br from-secondary-900 via-secondary-800 to-primary-900">
    <!-- Background decorative elements -->
    <div class="absolute inset-0 overflow-hidden pointer-events-none" aria-hidden="true">
      <div class="absolute -top-40 -right-40 w-96 h-96 bg-primary/20 rounded-full blur-3xl"></div>
      <div class="absolute -bottom-40 -left-40 w-96 h-96 bg-accent/10 rounded-full blur-3xl"></div>
      <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-primary/5 rounded-full blur-3xl"></div>
      <!-- Grid pattern overlay -->
      <div class="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.03)_1px,transparent_1px)] bg-[size:64px_64px]"></div>
    </div>

    <div class="container-wrapper relative z-10 py-20">
      <div class="max-w-4xl">
        <span class="inline-block px-4 py-1.5 mb-6 text-sm font-medium text-primary-300 bg-primary-500/10 rounded-full border border-primary-500/20">
          About WorkRoot IT Solutions LLP
        </span>
        <h1 class="text-4xl sm:text-5xl lg:text-6xl xl:text-7xl font-bold text-white leading-tight mb-6">
          Building the Future of
          <span class="block text-transparent bg-clip-text bg-gradient-to-r from-primary-300 to-accent-400 mt-2">
            Digital Innovation
          </span>
        </h1>
        <p class="text-lg sm:text-xl text-secondary-200 max-w-2xl mb-8">
          We're a team of passionate technologists dedicated to transforming businesses through innovative IT solutions.
        </p>

        <!-- Quick stats in hero -->
        <div class="grid grid-cols-2 sm:grid-cols-4 gap-6 mt-10 max-w-3xl">
          {stats.map((stat) => (
            <div class="text-center sm:text-left">
              <p class="text-3xl sm:text-4xl font-bold text-primary-300 mb-1">{stat.value}</p>
              <p class="text-secondary-300 text-sm font-medium">{stat.label}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>

  <!-- Company Story Section -->
  <section class="py-16 lg:py-24 bg-white dark:bg-secondary-900">
    <div class="container-wrapper">
      <div class="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
        <div class="order-2 lg:order-1" data-animate="fade-right">
          <span class="text-primary-500 dark:text-primary-400 font-semibold text-sm uppercase tracking-wider">Our Story</span>
          <h2 class="text-3xl sm:text-4xl font-bold text-secondary-900 dark:text-secondary-100 mt-2 mb-6">
            From Startup to Trusted Partner
          </h2>
          <div class="space-y-4 text-secondary-600 dark:text-secondary-400 leading-relaxed">
            <p>
              Founded in 2022, WorkRoot IT Solutions LLP began with a clear mission: to empower businesses and government organizations with innovative, reliable, and scalable software solutions. What started as a focused team in Maharashtra, India has grown into a trusted technology partner delivering 20+ projects across enterprise and government domains.
            </p>
            <p>
              From building the Police Management System deployed across 11 districts in Bihar to delivering the University Management System for IIT Patna, we've consistently proven our ability to handle complex, large-scale projects. Our portfolio spans government systems, enterprise platforms, e-commerce solutions, and mobile health applications.
            </p>
            <p>
              What sets us apart isn't just our technical skills—it's our commitment to understanding your business. We don't believe in one-size-fits-all solutions. Every project we undertake is tailored to your unique needs, goals, and constraints, with a 100% client satisfaction track record.
            </p>
          </div>
        </div>
        <div class="order-1 lg:order-2 relative" data-animate="fade-left" data-delay="150">
          <div class="aspect-[4/3] rounded-2xl overflow-hidden shadow-2xl bg-secondary-200">
            <img
              src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=800&h=600&fit=crop&auto=format&q=75"
              alt="WorkRoot team collaborating in office"
              width="800"
              height="600"
              class="w-full h-full object-cover"
              loading="eager"
              decoding="async"
              fetchpriority="high"
            />
          </div>
          <div class="absolute -bottom-6 -left-6 bg-primary-500 text-white p-6 rounded-xl shadow-xl hidden sm:block">
            <p class="text-4xl font-bold">3+</p>
            <p class="text-primary-100">Years of Excellence</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Company Timeline Section -->
  <section class="py-16 lg:py-24 bg-white dark:bg-secondary-900">
    <div class="container-wrapper">
      <div class="text-center max-w-2xl mx-auto mb-12 lg:mb-16" data-animate="fade-up">
        <span class="text-primary-500 dark:text-primary-400 font-semibold text-sm uppercase tracking-wider">Our Journey</span>
        <h2 class="text-3xl sm:text-4xl font-bold text-secondary-900 dark:text-secondary-100 mt-2 mb-4">Company Timeline</h2>
        <p class="text-secondary-600 dark:text-secondary-400">
          Our journey of innovation, growth, and excellence in technology solutions since 2022.
        </p>
      </div>

      <div class="max-w-5xl mx-auto">
        <!-- Timeline container -->
        <div class="relative">
          <!-- Vertical line (hidden on mobile, visible on md+) -->
          <div class="hidden md:block absolute left-1/2 top-0 bottom-0 w-0.5 bg-gradient-to-b from-primary-500 via-primary-300 to-primary-500 transform -translate-x-1/2" aria-hidden="true"></div>

          <div class="space-y-8 md:space-y-12">
            {timeline.map((item, index) => (
              <div class={`relative ${index % 2 === 0 ? 'md:mr-auto md:pr-12' : 'md:ml-auto md:pl-12'} md:w-1/2`} data-animate={index % 2 === 0 ? 'fade-right' : 'fade-left'} data-delay={String(index * 100)}>
                <!-- Timeline dot -->
                <div class="hidden md:flex absolute top-0 w-4 h-4 bg-primary-500 rounded-full border-4 border-white shadow-lg z-10"
                     style={index % 2 === 0 ? 'right: -2.25rem;' : 'left: -2.25rem;'}
                     aria-hidden="true">
                </div>

                <!-- Content card -->
                <div class={`relative bg-white dark:bg-secondary-800 border-2 border-secondary-100 dark:border-secondary-700 rounded-2xl p-6 shadow-sm hover:shadow-lg transition-all duration-300 group hover:border-primary-200 ${index % 2 === 0 ? 'md:text-right' : 'md:text-left'}`}>
                  <div class="absolute -top-3 left-6 md:left-auto md:right-6 px-4 py-1 bg-gradient-to-r from-primary-500 to-primary-600 text-white text-sm font-bold rounded-full shadow-md">
                    {item.year}
                  </div>
                  <h3 class="text-xl font-bold text-secondary-900 dark:text-secondary-100 mt-4 mb-2 group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">
                    {item.title}
                  </h3>
                  <p class="text-secondary-600 dark:text-secondary-400 leading-relaxed">
                    {item.description}
                  </p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Mission & Vision Section -->
  <section class="py-16 lg:py-24 bg-gradient-to-b from-secondary-50 to-white dark:from-secondary-900 dark:to-secondary-900">
    <div class="container-wrapper">
      <div class="text-center mb-12 lg:mb-16" data-animate="fade-up">
        <span class="text-primary-500 dark:text-primary-400 font-semibold text-sm uppercase tracking-wider">Our Purpose</span>
        <h2 class="text-3xl sm:text-4xl font-bold text-secondary-900 dark:text-secondary-100 mt-2">Mission & Vision</h2>
      </div>

      <div class="grid lg:grid-cols-2 gap-8 lg:gap-12">
        <!-- Mission -->
        <div class="relative group" data-animate="fade-right" data-delay="100">
          <div class="absolute inset-0 bg-gradient-to-br from-primary-500 to-primary-700 rounded-3xl transform transition-transform group-hover:scale-105"></div>
          <div class="relative p-8 lg:p-12 bg-gradient-to-br from-primary-500 to-primary-700 rounded-3xl text-white overflow-hidden">
            <div class="absolute top-0 right-0 w-64 h-64 bg-white/10 rounded-full -translate-y-1/2 translate-x-1/2 blur-2xl"></div>
            <div class="relative">
              <div class="w-16 h-16 bg-white/20 backdrop-blur-sm rounded-2xl flex items-center justify-center mb-6 shadow-lg">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
                </svg>
              </div>
              <h3 class="text-2xl lg:text-3xl font-bold mb-4">Our Mission</h3>
              <p class="text-primary-50 leading-relaxed text-lg">
                To empower businesses and government organizations with innovative, reliable, and scalable software solutions. We combine deep technical expertise with a client-first approach to deliver systems that drive operational efficiency and digital transformation.
              </p>
            </div>
          </div>
        </div>

        <!-- Vision -->
        <div class="relative group" data-animate="fade-left" data-delay="250">
          <div class="absolute inset-0 bg-gradient-to-br from-secondary-800 to-secondary-900 rounded-3xl transform transition-transform group-hover:scale-105"></div>
          <div class="relative p-8 lg:p-12 bg-gradient-to-br from-secondary-800 to-secondary-900 rounded-3xl text-white overflow-hidden">
            <div class="absolute top-0 right-0 w-64 h-64 bg-primary-500/10 rounded-full -translate-y-1/2 translate-x-1/2 blur-2xl"></div>
            <div class="relative">
              <div class="w-16 h-16 bg-white/10 backdrop-blur-sm rounded-2xl flex items-center justify-center mb-6 shadow-lg">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                  <path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                </svg>
              </div>
              <h3 class="text-2xl lg:text-3xl font-bold mb-4">Our Vision</h3>
              <p class="text-secondary-200 leading-relaxed text-lg">
                To be India's most trusted technology partner for enterprises and government bodies, recognized for delivering world-class software solutions that set new standards in quality, performance, and innovation.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Core Values Section -->
  <section class="py-16 lg:py-24 bg-white dark:bg-secondary-900 relative overflow-hidden">
    <!-- Background decoration -->
    <div class="absolute inset-0 overflow-hidden pointer-events-none" aria-hidden="true">
      <div class="absolute top-0 right-0 w-96 h-96 bg-primary-500/5 rounded-full blur-3xl"></div>
      <div class="absolute bottom-0 left-0 w-96 h-96 bg-accent-500/5 rounded-full blur-3xl"></div>
    </div>

    <div class="container-wrapper relative">
      <div class="text-center max-w-2xl mx-auto mb-12 lg:mb-16" data-animate="fade-up">
        <span class="text-primary-500 dark:text-primary-400 font-semibold text-sm uppercase tracking-wider">What Drives Us</span>
        <h2 class="text-3xl sm:text-4xl font-bold text-secondary-900 dark:text-secondary-100 mt-2 mb-4">Our Core Values</h2>
        <p class="text-secondary-600 dark:text-secondary-400">
          These principles guide every decision we make and every solution we deliver.
        </p>
      </div>

      <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8">
        {values.map((value, index) => (
          <div class="group relative" data-animate="fade-up" data-delay={String(index * 100)}>
            <!-- Gradient background on hover -->
            <div class="absolute inset-0 bg-gradient-to-br from-primary-500 to-primary-700 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>

            <!-- Card content -->
            <div class="relative bg-white dark:bg-secondary-800 p-6 lg:p-8 rounded-2xl shadow-sm group-hover:shadow-xl transition-all duration-300 border-2 border-secondary-100 dark:border-secondary-700 group-hover:border-primary-200 group-hover:translate-y-[-4px]">
              <div class="w-14 h-14 bg-gradient-to-br from-primary-50 to-primary-100 dark:from-primary-900/30 dark:to-primary-900/50 text-primary-600 dark:text-primary-400 rounded-xl flex items-center justify-center mb-6 group-hover:bg-white group-hover:text-white transition-all duration-300 shadow-md">
                {value.icon === 'lightbulb' && (
                  <svg xmlns="http://www.w3.org/2000/svg" class="w-7 h-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
                  </svg>
                )}
                {value.icon === 'shield' && (
                  <svg xmlns="http://www.w3.org/2000/svg" class="w-7 h-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                  </svg>
                )}
                {value.icon === 'star' && (
                  <svg xmlns="http://www.w3.org/2000/svg" class="w-7 h-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
                  </svg>
                )}
                {value.icon === 'users' && (
                  <svg xmlns="http://www.w3.org/2000/svg" class="w-7 h-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
                  </svg>
                )}
              </div>
              <h3 class="text-xl font-bold text-secondary-900 dark:text-secondary-100 mb-3 group-hover:text-white transition-colors duration-300">{value.title}</h3>
              <p class="text-secondary-600 dark:text-secondary-400 leading-relaxed group-hover:text-primary-50 transition-colors duration-300">{value.description}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>

  <!-- Team Section -->
  <section class="py-16 lg:py-24 bg-secondary-50 dark:bg-secondary-800/50">
    <div class="container-wrapper">
      <div class="text-center max-w-2xl mx-auto mb-12 lg:mb-16" data-animate="fade-up">
        <span class="text-primary-500 dark:text-primary-400 font-semibold text-sm uppercase tracking-wider">The Team</span>
        <h2 class="text-3xl sm:text-4xl font-bold text-secondary-900 dark:text-secondary-100 mt-2 mb-4">Meet Our Leadership</h2>
        <p class="text-secondary-600 dark:text-secondary-400">
          Talented professionals who bring diverse expertise and shared passion for technology excellence.
        </p>
      </div>

      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-10">
        {teamMembers.map((member, index) => (
          <article class="group relative" data-animate="fade-up" data-delay={String((index % 3) * 100)}>
            <!-- Card wrapper with gradient border effect -->
            <div class="absolute inset-0 bg-gradient-to-br from-primary-400 to-accent-400 rounded-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 blur-sm"></div>

            <div class="relative bg-white dark:bg-secondary-800 rounded-3xl overflow-hidden shadow-md hover:shadow-2xl transition-all duration-300 transform group-hover:-translate-y-2">
              <!-- Avatar container -->
              <div class="relative aspect-[4/3] overflow-hidden bg-gradient-to-br from-primary-500 to-primary-700 flex items-center justify-center">
                <span class="text-6xl font-bold text-white/90">{member.avatar}</span>

                <!-- Gradient overlay -->
                <div class="absolute inset-0 bg-gradient-to-t from-secondary-900/40 via-transparent to-transparent"></div>

                <!-- Social links overlay -->
                {Object.keys(member.social).length > 0 && (
                  <div class="absolute inset-x-0 bottom-0 p-6 transform translate-y-full group-hover:translate-y-0 transition-transform duration-300">
                    <div class="flex justify-center gap-3">
                      {member.social.twitter && (
                        <a
                          href={member.social.twitter}
                          class="w-11 h-11 bg-white/95 hover:bg-white rounded-xl flex items-center justify-center text-secondary-700 hover:text-primary-500 transition-all shadow-lg hover:scale-110"
                          aria-label={`${member.name}'s Twitter/X profile`}
                        >
                          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
                          </svg>
                        </a>
                      )}
                    </div>
                  </div>
                )}
              </div>

              <!-- Content -->
              <div class="p-6 lg:p-7">
                <h3 class="text-xl font-bold text-secondary-900 dark:text-secondary-100 mb-1 group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">{member.name}</h3>
                <p class="text-primary-500 dark:text-primary-400 font-semibold text-sm mb-3 uppercase tracking-wide">{member.role}</p>
                <p class="text-secondary-600 dark:text-secondary-400 leading-relaxed text-sm">{member.bio}</p>
              </div>
            </div>
          </article>
        ))}
      </div>
    </div>
  </section>

  <!-- CTA Section -->
  <section class="relative py-20 lg:py-28 overflow-hidden">
    <!-- Gradient background -->
    <div class="absolute inset-0 bg-gradient-to-br from-primary-600 via-primary-700 to-secondary-800"></div>

    <!-- Decorative elements -->
    <div class="absolute inset-0 overflow-hidden pointer-events-none" aria-hidden="true">
      <div class="absolute -top-40 -right-40 w-96 h-96 bg-accent-500/20 rounded-full blur-3xl"></div>
      <div class="absolute -bottom-40 -left-40 w-96 h-96 bg-primary-400/20 rounded-full blur-3xl"></div>
      <div class="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.05)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.05)_1px,transparent_1px)] bg-[size:64px_64px]"></div>
    </div>

    <div class="container-wrapper relative z-10">
      <div class="max-w-4xl mx-auto text-center">
        <div class="inline-block px-4 py-1.5 mb-6 text-sm font-medium text-primary-200 bg-white/10 rounded-full border border-white/20 backdrop-blur-sm">
          Let's Build Together
        </div>
        <h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-white mb-6">
          Ready to Work With Us?
        </h2>
        <p class="text-primary-50 text-lg sm:text-xl max-w-2xl mx-auto mb-10">
          Let's discuss how we can help transform your business with innovative technology solutions.
        </p>

        <div class="flex flex-col sm:flex-row gap-4 justify-center">
          <a
            href="/contact"
            class="group inline-flex items-center justify-center px-8 py-4 bg-white text-primary-600 font-semibold rounded-xl hover:bg-primary-50 transition-all shadow-xl hover:shadow-2xl hover:scale-105 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-primary-600"
          >
            Get in Touch
            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" />
            </svg>
          </a>
          <a
            href="/services"
            class="inline-flex items-center justify-center px-8 py-4 border-2 border-white/40 text-white font-semibold rounded-xl hover:bg-white/10 hover:border-white/60 transition-all backdrop-blur-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-primary-600"
          >
            View Our Services
          </a>
        </div>
      </div>
    </div>
  </section>
</BaseLayout>
