---
// About Us Page for WorkRoot IT Solutions
// 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: 'Sarah Chen',
    role: 'CEO & Founder',
    bio: 'Visionary leader with 15+ years in enterprise technology. Former VP at Fortune 500 tech company.',
    image: 'https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=400&h=400&fit=crop&crop=face&auto=format&q=75',
    linkedin: '#',
    twitter: '#',
  },
  {
    name: 'Michael Rodriguez',
    role: 'CTO',
    bio: 'Cloud architecture expert and open-source contributor. Passionate about scalable solutions.',
    image: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=face&auto=format&q=75',
    linkedin: '#',
    twitter: '#',
  },
  {
    name: 'Emily Watson',
    role: 'Head of Design',
    bio: 'Award-winning UX designer focused on creating intuitive, accessible digital experiences.',
    image: 'https://images.unsplash.com/photo-1580489944761-15a19d654956?w=400&h=400&fit=crop&crop=face&auto=format&q=75',
    linkedin: '#',
    twitter: '#',
  },
  {
    name: 'David Park',
    role: 'Lead Developer',
    bio: 'Full-stack engineer specializing in React and Node.js. Mentors junior developers.',
    image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop&crop=face&auto=format&q=75',
    linkedin: '#',
    twitter: '#',
  },
  {
    name: 'Lisa Thompson',
    role: 'Project Manager',
    bio: 'PMP-certified professional delivering projects on time and within budget for 10+ years.',
    image: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=face&auto=format&q=75',
    linkedin: '#',
    twitter: '#',
  },
  {
    name: 'James Wilson',
    role: 'DevOps Engineer',
    bio: 'Infrastructure automation specialist. Kubernetes and AWS certified solutions architect.',
    image: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=400&fit=crop&crop=face&auto=format&q=75',
    linkedin: '#',
    twitter: '#',
  },
];

// Company stats
const stats = [
  { value: '10+', label: 'Years of Experience' },
  { value: '200+', label: 'Projects Delivered' },
  { value: '50+', label: 'Team Members' },
  { value: '98%', label: 'Client Satisfaction' },
];

// Company timeline
const timeline = [
  {
    year: '2014',
    title: 'The Beginning',
    description: 'WorkRoot founded by three passionate developers in a small garage office.',
  },
  {
    year: '2016',
    title: 'First Major Client',
    description: 'Secured our first enterprise contract, launching our growth trajectory.',
  },
  {
    year: '2018',
    title: 'Team Expansion',
    description: 'Grew to 20+ team members and opened our first dedicated office space.',
  },
  {
    year: '2020',
    title: 'Global Reach',
    description: 'Expanded operations internationally, serving clients across 15 countries.',
  },
  {
    year: '2022',
    title: 'AI Innovation',
    description: 'Launched AI/ML division, pioneering intelligent automation solutions.',
  },
  {
    year: '2024',
    title: 'Industry Leader',
    description: 'Recognized as top IT solutions provider with 200+ successful projects.',
  },
];

// 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: founded 2014, 50+ team members, 200+ projects, 15 countries served. 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
        </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">
    <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 font-semibold text-sm uppercase tracking-wider">Our Story</span>
          <h2 class="text-3xl sm:text-4xl font-bold text-secondary-900 mt-2 mb-6">
            From Startup to Industry Leader
          </h2>
          <div class="space-y-4 text-secondary-600 leading-relaxed">
            <p>
              Founded in 2014, WorkRoot IT Solutions began with a simple mission: to make enterprise-grade technology accessible to businesses of all sizes. What started as a small team of three passionate developers has grown into a full-service IT consultancy trusted by companies worldwide.
            </p>
            <p>
              Our journey hasn't always been easy. We've navigated economic downturns, technological shifts, and global challenges. But each obstacle has strengthened our resolve and sharpened our expertise. Today, we're proud to serve over 200 clients across diverse industries.
            </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.
            </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">10+</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">
    <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 font-semibold text-sm uppercase tracking-wider">Our Journey</span>
        <h2 class="text-3xl sm:text-4xl font-bold text-secondary-900 mt-2 mb-4">Company Timeline</h2>
        <p class="text-secondary-600">
          A decade of innovation, growth, and excellence in technology solutions.
        </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 border-2 border-secondary-100 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 mt-4 mb-2 group-hover:text-primary-600 transition-colors">
                    {item.title}
                  </h3>
                  <p class="text-secondary-600 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">
    <div class="container-wrapper">
      <div class="text-center mb-12 lg:mb-16" data-animate="fade-up">
        <span class="text-primary-500 font-semibold text-sm uppercase tracking-wider">Our Purpose</span>
        <h2 class="text-3xl sm:text-4xl font-bold text-secondary-900 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 through innovative technology solutions that drive growth, enhance efficiency, and create lasting value. We bridge the gap between complex technology and practical business outcomes.
              </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 the most trusted technology partner for businesses worldwide, known for our integrity, innovation, and unwavering commitment to client success. We envision a future where every business can harness the full potential of technology.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Core Values Section -->
  <section class="py-16 lg:py-24 bg-white 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 font-semibold text-sm uppercase tracking-wider">What Drives Us</span>
        <h2 class="text-3xl sm:text-4xl font-bold text-secondary-900 mt-2 mb-4">Our Core Values</h2>
        <p class="text-secondary-600">
          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 p-6 lg:p-8 rounded-2xl shadow-sm group-hover:shadow-xl transition-all duration-300 border-2 border-secondary-100 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 text-primary-600 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 mb-3 group-hover:text-white transition-colors duration-300">{value.title}</h3>
              <p class="text-secondary-600 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">
    <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 font-semibold text-sm uppercase tracking-wider">The Team</span>
        <h2 class="text-3xl sm:text-4xl font-bold text-secondary-900 mt-2 mb-4">Meet Our Leadership</h2>
        <p class="text-secondary-600">
          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 rounded-3xl overflow-hidden shadow-md hover:shadow-2xl transition-all duration-300 transform group-hover:-translate-y-2">
              <!-- Image container -->
              <div class="relative aspect-[4/5] overflow-hidden bg-secondary-200">
                <img
                  src={member.image}
                  alt={`${member.name} - ${member.role}`}
                  width="400"
                  height="500"
                  class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
                  loading={index === 0 ? 'eager' : 'lazy'}
                  fetchpriority={index === 0 ? 'high' : 'auto'}
                  decoding="async"
                />

                <!-- Gradient overlay -->
                <div class="absolute inset-0 bg-gradient-to-t from-secondary-900/90 via-secondary-900/30 to-transparent opacity-60 group-hover:opacity-80 transition-opacity duration-300"></div>

                <!-- Social links overlay -->
                <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">
                    <a
                      href={member.linkedin}
                      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 LinkedIn profile`}
                    >
                      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
                      </svg>
                    </a>
                    <a
                      href={member.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 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 mb-1 group-hover:text-primary-600 transition-colors">{member.name}</h3>
                <p class="text-primary-500 font-semibold text-sm mb-3 uppercase tracking-wide">{member.role}</p>
                <p class="text-secondary-600 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>