---
// Services Page for WorkRoot IT Solutions LLP
// Enhanced: Service cards with tech stack, pricing tiers, case study highlights, scroll animations

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

// Service data with extended details
// Order is intentional: Government IT and ERP/Enterprise lead (highest-value
// outcomes), followed by Web, Mobile, Design, and Consulting.
const services = [
  {
    id: 'government-systems',
    title: 'Government IT Solutions',
    shortDescription: 'Digitize public services across districts with secure, audit-ready systems citizens actually trust. Built on Spring Boot + Astro + PostgreSQL.',
    fullDescription: 'Serve more citizens with fewer queues. We build secure, compliant systems that are already live across 11+ districts handling critical public services — digital records, real-time reporting, and 99.9% uptime under strict security standards. Built on Spring Boot, Astro, Golang, PostgreSQL, and MySQL.',
    icon: 'government',
    features: [
      'Smart city solutions (SCMS)',
      'Multi-district deployment',
      'Secure & compliant architecture',
      'Digital record keeping',
      'Real-time reporting dashboards',
      'High availability infrastructure',
    ],
    techStack: ['Spring Boot', 'Astro', 'Golang', 'PostgreSQL', 'MySQL'],
    stats: { projects: '3+', districts: '11+', uptime: '99.9%' },
    gradient: 'from-red-500 to-orange-700',
    bgLight: 'bg-red-50',
    iconColor: 'text-red-500',
    accentBorder: 'border-red-500',
    tagBg: 'bg-red-100 text-red-700',
  },
  {
    id: 'erp-solutions',
    title: 'ERP & Enterprise Systems',
    shortDescription: 'Replace 5 spreadsheets with one system your team actually uses. Built on Spring Boot + Angular.',
    fullDescription: 'Replace scattered spreadsheets and manual handoffs with one system your team actually uses. From university management to personnel administration, we ship ERP platforms that handle complex workflows, role-based access, and 20,000+ users without breaking a sweat. Built on Spring Boot, Angular, Next.js, MySQL, and PostgreSQL.',
    icon: 'enterprise',
    features: [
      'Custom ERP development',
      'University management systems',
      'Personnel management platforms',
      'Role-based access control',
      'Dashboard & reporting',
      'Multi-tenant architecture',
    ],
    techStack: ['Spring Boot', 'Angular', 'Next.js', 'MySQL', 'PostgreSQL'],
    stats: { deployments: '5+', users: '20,000+', districts: '11' },
    gradient: 'from-purple-500 to-indigo-700',
    bgLight: 'bg-purple-50',
    iconColor: 'text-purple-500',
    accentBorder: 'border-purple-500',
    tagBg: 'bg-purple-100 text-purple-700',
  },
  {
    id: 'web-development',
    title: 'Web Development',
    shortDescription: 'Turn visitors into customers with fast, SEO-ready web apps that load in under 2 seconds. Built on Angular, React, Next.js + Spring Boot.',
    fullDescription: 'Turn visitors into customers with web apps that load in under 2 seconds and rank on day one. From responsive sites to complex SPAs, we deliver high-performance, secure, SEO-ready solutions tuned for conversion. Built on Angular, React, Next.js, and Astro with Spring Boot and Golang backends.',
    icon: 'web',
    features: [
      'Custom web application development',
      'Angular & React SPA development',
      'Next.js SSR/SSG applications',
      'Astro static site generation',
      'Spring Boot REST API development',
      'SEO-friendly architecture',
    ],
    techStack: ['Angular', 'React', 'Next.js', 'Astro', 'Spring Boot', 'Golang'],
    stats: { projects: '10+', clients: '8+', uptime: '99.9%' },
    gradient: 'from-primary-500 to-primary-700',
    bgLight: 'bg-primary-50',
    iconColor: 'text-primary-500',
    accentBorder: 'border-primary-500',
    tagBg: 'bg-primary-100 text-primary-700',
  },
  {
    id: 'mobile-development',
    title: 'Mobile App Development',
    shortDescription: 'Put your business in every customer\'s pocket with one app for iOS and Android. Built on Expo + React Native.',
    fullDescription: 'Put your business in every customer\'s pocket with one codebase for iOS and Android. We ship cross-platform apps with native-like performance, offline-first architecture, push notifications, and seamless backend integration — published to both stores. Built on Expo, React Native, Spring Boot, and PostgreSQL.',
    icon: 'mobile',
    features: [
      'Expo / React Native development',
      'iOS & Android deployment',
      'Offline-first architecture',
      'Push notifications',
      'Backend API integration',
      'App Store & Play Store publishing',
    ],
    techStack: ['Expo', 'React Native', 'Spring Boot', 'PostgreSQL'],
    stats: { apps: '3+', downloads: '5,000+', rating: '4.8★' },
    gradient: 'from-green-500 to-emerald-700',
    bgLight: 'bg-green-50',
    iconColor: 'text-green-500',
    accentBorder: 'border-green-500',
    tagBg: 'bg-green-100 text-green-700',
  },
  {
    id: 'ui-ux-design',
    title: 'UI/UX Design',
    shortDescription: 'Win trust in the first 5 seconds with interfaces that convert and meet WCAG. Built on TailwindCSS + Figma.',
    fullDescription: 'Win trust in the first 5 seconds with interfaces that are intuitive, accessible, and on-brand. Our process — wireframing, prototyping, and usability testing — turns into pixel-perfect, WCAG-compliant builds with dark mode out of the box. Built on TailwindCSS, Figma, CSS3, and HTML5.',
    icon: 'design',
    features: [
      'Responsive web design',
      'TailwindCSS implementation',
      'Design system creation',
      'Accessibility (WCAG) compliance',
      'Wireframing & prototyping',
      'Dark mode support',
    ],
    techStack: ['TailwindCSS', 'Figma', 'CSS3', 'HTML5'],
    stats: { designs: '20+', satisfaction: '100%', responsive: '100%' },
    gradient: 'from-pink-500 to-rose-700',
    bgLight: 'bg-pink-50',
    iconColor: 'text-pink-500',
    accentBorder: 'border-pink-500',
    tagBg: 'bg-pink-100 text-pink-700',
  },
  {
    id: 'it-consulting',
    title: 'IT Consulting & DevOps',
    shortDescription: 'Ship faster and sleep better with automated deploys and 99.9% uptime. Built on Docker, Nginx + GitHub Actions.',
    fullDescription: 'Ship faster and sleep better. We optimize your infrastructure with expert consulting, cloud migration, CI/CD automation, and DevOps best practices — taking you from architecture review to a production deployment that just runs. Built on Docker, Nginx, Linux, Git, and GitHub Actions.',
    icon: 'consulting',
    features: [
      'Architecture review & consulting',
      'Cloud deployment (AWS/VPS)',
      'CI/CD pipeline setup',
      'Performance optimization',
      'Database design & optimization',
      'Security audits',
    ],
    techStack: ['Docker', 'Nginx', 'Linux', 'Git', 'GitHub Actions'],
    stats: { consultations: '15+', optimizations: '10+', uptime: '99.9%' },
    gradient: 'from-cyan-500 to-teal-700',
    bgLight: 'bg-cyan-50',
    iconColor: 'text-cyan-500',
    accentBorder: 'border-cyan-500',
    tagBg: 'bg-cyan-100 text-cyan-700',
  },
];

// Pricing tiers
const pricingTiers = [
  {
    name: 'Starter',
    price: '₹1,00,000',
    period: 'starting from',
    description: 'Ideal for small businesses and startups needing a professional web presence.',
    features: [
      'Responsive website (up to 10 pages)',
      'Mobile-friendly design',
      'Basic SEO optimization',
      'Contact form integration',
      'SSL certificate setup',
      '1 month post-launch support',
      'Basic analytics setup',
    ],
    cta: 'Get my free proposal',
    highlighted: false,
  },
  {
    name: 'Professional',
    price: '₹5,00,000',
    period: 'starting from',
    description: 'For growing businesses that need custom web applications and advanced features.',
    features: [
      'Custom web application',
      'Admin dashboard & CMS',
      'API development & integration',
      'Database design & setup',
      'User authentication & roles',
      'Payment gateway integration',
      '3 months post-launch support',
      'Performance optimization',
      'Automated testing',
    ],
    cta: 'Get my free proposal',
    highlighted: true,
  },
  {
    name: 'Enterprise',
    price: 'Custom',
    period: 'contact us',
    description: 'For large organizations needing complex enterprise systems, ERP, or government solutions.',
    features: [
      'Full-stack enterprise application',
      'Multi-district/multi-tenant deployment',
      'Custom ERP/management system',
      'Mobile app (iOS & Android)',
      'Advanced security & compliance',
      'Load balancing & high availability',
      '12 months dedicated support',
      'On-site training & documentation',
      'Priority SLA & escalation',
      'Source code ownership',
    ],
    cta: 'Get my free proposal',
    highlighted: false,
  },
];

// Case study highlights
const caseStudies = [
  {
    service: 'Web Development',
    client: 'FinTech Platform',
    result: '3x faster load times, 45% increase in conversion rate',
    description: 'Rebuilt a legacy banking dashboard with Next.js and real-time WebSocket updates, cutting page load from 8s to under 2s.',
    metric: '+45%',
    metricLabel: 'Conversion Rate',
    tag: 'Web',
    tagColor: 'bg-primary-100 text-primary-700',
    icon: 'web',
    gradient: 'from-primary-500/10 to-primary-600/5',
    borderColor: 'border-primary-200',
  },
  {
    service: 'Mobile Development',
    client: 'Retail App',
    result: '200K+ downloads in first month, 4.9★ App Store rating',
    description: 'Built a cross-platform shopping app with AR try-on features using React Native, launching simultaneously on iOS and Android.',
    metric: '200K+',
    metricLabel: 'Downloads',
    tag: 'Mobile',
    tagColor: 'bg-accent-100 text-accent-700',
    icon: 'mobile',
    gradient: 'from-accent-500/10 to-accent-600/5',
    borderColor: 'border-accent-200',
  },
  {
    service: 'AI & ML',
    client: 'Healthcare Provider',
    result: '60% reduction in manual processing, 94% diagnostic accuracy',
    description: 'Deployed a computer vision model for medical imaging analysis, reducing radiologist review time and improving early detection rates.',
    metric: '60%',
    metricLabel: 'Time Saved',
    tag: 'AI/ML',
    tagColor: 'bg-emerald-100 text-emerald-700',
    icon: 'ai',
    gradient: 'from-emerald-500/10 to-emerald-600/5',
    borderColor: 'border-emerald-200',
  },
];

// Process steps
const processSteps = [
  {
    number: '01',
    title: 'Discovery',
    description: 'We analyze your requirements, goals, and challenges to define the project scope.',
    icon: 'search',
  },
  {
    number: '02',
    title: 'Strategy',
    description: 'Our team develops a comprehensive roadmap tailored to your business objectives.',
    icon: 'map',
  },
  {
    number: '03',
    title: 'Development',
    description: 'We build your solution using agile methodologies with regular progress updates.',
    icon: 'code',
  },
  {
    number: '04',
    title: 'Launch & Support',
    description: 'We deploy, monitor, and continuously improve your solution post-launch.',
    icon: 'rocket',
  },
];
---

<BaseLayout
  title="IT Services & Solutions"
  description="Expert web development, mobile apps, ERP systems, government IT solutions & UI/UX design from WorkRoot IT Solutions LLP. 10+ projects delivered, 8+ happy clients. From ₹1,00,000 — get a free quote today."
>
  <SEO
    slot="head"
    type="Service"
    breadcrumbs={[
      { name: 'Home', url: '/' },
      { name: 'Services', url: '/services' }
    ]}
    service={{
      name: 'IT Solutions & Software Development',
      description: 'Full-stack software development services including web development, mobile apps, ERP systems, government IT solutions, UI/UX design, and IT consulting. Serving startups, enterprises, and government bodies.'
    }}
    faq={[
      {
        question: 'What IT services does WorkRoot offer?',
        answer: 'WorkRoot offers six core services: Web Development (Angular, React, Next.js, Astro, Spring Boot), Mobile App Development (Expo, React Native), ERP & Enterprise Systems, Government IT Solutions, UI/UX Design (TailwindCSS, Figma), and IT Consulting & DevOps.'
      },
      {
        question: 'How much does a web development project cost?',
        answer: 'Our pricing starts at ₹1,00,000 for Starter projects (up to 10 pages), ₹5,00,000 for Professional projects with custom features and integrations, and custom quotes for Enterprise solutions. Contact us for a free estimate tailored to your requirements.'
      },
      {
        question: 'How long does software development take?',
        answer: 'Project timelines depend on scope. A simple website takes 4–6 weeks, a complex web app 3–6 months, and an enterprise solution can take 6–12 months. We provide detailed timelines during the discovery phase.'
      },
      {
        question: 'Do you offer post-launch support and maintenance?',
        answer: 'Yes. All packages include post-launch support: 1 month for Starter, 3 months for Professional, and 12 months for Enterprise. We also offer ongoing SLA-backed maintenance retainers for continued peace of mind.'
      },
      {
        question: 'Can WorkRoot build ERP and government systems?',
        answer: 'Absolutely. We have built and deployed custom ERP solutions, university management systems, police administration platforms, and smart city solutions across 11+ districts with 20,000+ users.'
      }
    ]}
  />

  <!-- Hero Section -->
  <section class="relative bg-gradient-to-br from-secondary-900 via-secondary-800 to-secondary-900 py-24 lg:py-32 overflow-hidden">
    <div class="absolute inset-0 overflow-hidden pointer-events-none" aria-hidden="true">
      <div class="absolute top-1/4 left-0 w-80 h-80 bg-primary-500/10 rounded-full blur-3xl animate-pulse-slower"></div>
      <div class="absolute bottom-0 right-1/4 w-96 h-96 bg-accent-500/8 rounded-full blur-3xl animate-pulse-slow"></div>
      <div class="absolute top-0 right-0 w-64 h-64 bg-emerald-500/8 rounded-full blur-3xl"></div>
      <!-- Grid pattern overlay -->
      <div class="absolute inset-0 opacity-5" style="background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 60px 60px;"></div>
    </div>

    <div class="container-wrapper relative">
      <div class="max-w-3xl mx-auto text-center reveal-on-scroll">
        <span class="inline-flex items-center gap-2 px-4 py-1.5 mb-6 text-sm font-semibold text-primary-300 bg-primary-500/10 rounded-full border border-primary-500/20">
          <span class="w-1.5 h-1.5 rounded-full bg-primary-400 animate-pulse"></span>
          Our Services
        </span>
        <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-white mb-6 leading-tight">
          Custom software for enterprises and governments —
          <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary-400 via-primary-300 to-accent-400">
            shipped in weeks, not quarters.
          </span>
        </h1>
        <p class="text-lg sm:text-xl text-secondary-300 max-w-2xl mx-auto mb-10 leading-relaxed">
          From concept to deployment, we deliver end-to-end technology solutions that transform businesses and drive measurable results.
        </p>
        <!-- Quick service nav pills -->
        <div class="flex flex-wrap gap-2 justify-center">
          {services.map((service) => (
            <a
              href={`#${service.id}`}
              class="px-4 py-1.5 text-sm font-medium text-white/70 hover:text-white bg-white/5 hover:bg-white/10 rounded-full border border-white/10 hover:border-white/20 transition-all duration-200"
            >
              {service.title}
            </a>
          ))}
        </div>
      </div>

      <!-- Floating stats bar -->
      <div class="mt-16 grid grid-cols-2 sm:grid-cols-4 gap-4 lg:gap-6 reveal-on-scroll reveal-delay-2">
        {[
          { value: '20+', label: 'Projects Delivered' },
          { value: '100%', label: 'Client Satisfaction' },
          { value: '6', label: 'Core Services' },
          { value: '5★', label: 'Average Rating' },
        ].map((stat) => (
          <div class="bg-white/5 backdrop-blur-sm rounded-xl p-4 lg:p-5 text-center border border-white/10">
            <p class="text-2xl lg:text-3xl font-bold text-white">{stat.value}</p>
            <p class="text-secondary-400 text-sm mt-1">{stat.label}</p>
          </div>
        ))}
      </div>
    </div>
  </section>

  <!-- Services Cards 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 reveal-on-scroll">
        <span class="text-primary-500 dark:text-primary-400 font-semibold text-sm uppercase tracking-wider">What We Offer</span>
        <h2 class="text-3xl sm:text-4xl font-bold text-secondary-900 dark:text-secondary-100 mt-2 mb-4">Our Core Services</h2>
        <p class="text-secondary-600 dark:text-secondary-400 text-lg">
          Comprehensive technology solutions designed to accelerate your digital transformation journey.
        </p>
      </div>

      <div class="grid sm:grid-cols-2 gap-6 lg:gap-8">
        {services.map((service, idx) => (
          <a
            href={`#${service.id}`}
            class={`service-card group relative bg-white dark:bg-secondary-800 rounded-2xl p-8 shadow-sm border border-secondary-100 dark:border-secondary-700 hover:shadow-2xl hover:border-transparent hover:-translate-y-2 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-primary-400 focus:ring-offset-2 reveal-on-scroll reveal-delay-${idx + 1}`}
            aria-label={`Learn more about ${service.title}`}
          >
            <!-- Hover gradient overlay -->
            <div class={`absolute inset-0 bg-gradient-to-br ${service.gradient} rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300`} aria-hidden="true"></div>

            <!-- Top border accent -->
            <div class={`absolute top-0 left-8 right-8 h-0.5 bg-gradient-to-r ${service.gradient} rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300`} aria-hidden="true"></div>

            <div class="relative">
              <!-- Icon + stats row -->
              <div class="flex items-start justify-between mb-6">
                <div class={`w-14 h-14 ${service.bgLight} ${service.iconColor} rounded-xl flex items-center justify-center group-hover:bg-white/20 group-hover:text-white transition-all duration-300 flex-shrink-0`}>
                  {service.icon === 'web' && (
                    <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" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
                    </svg>
                  )}
                  {service.icon === 'mobile' && (
                    <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" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
                    </svg>
                  )}
                  {service.icon === 'ai' && (
                    <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" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                    </svg>
                  )}
                  {service.icon === 'cloud' && (
                    <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" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
                    </svg>
                  )}
                </div>

                <!-- Mini stats -->
                <div class="text-right">
                  {Object.entries(service.stats).slice(0, 1).map(([key, val]) => (
                    <div>
                      <p class="text-xl font-bold text-secondary-900 dark:text-secondary-100 group-hover:text-white transition-colors duration-300">{val}</p>
                      <p class="text-xs text-secondary-500 dark:text-secondary-400 group-hover:text-white/70 transition-colors duration-300 capitalize">{key.replace(/([A-Z])/g, ' $1').trim()}</p>
                    </div>
                  ))}
                </div>
              </div>

              <!-- Content -->
              <h3 class="text-xl font-bold text-secondary-900 dark:text-secondary-100 group-hover:text-white mb-2 transition-colors duration-300">
                {service.title}
              </h3>
              <p class="text-secondary-600 dark:text-secondary-400 group-hover:text-white/80 mb-5 transition-colors duration-300 text-sm leading-relaxed">
                {service.shortDescription}
              </p>

              <!-- Tech stack tags -->
              <div class="flex flex-wrap gap-1.5 mb-5">
                {service.techStack.map((tech) => (
                  <span class={`px-2.5 py-1 text-xs font-medium ${service.tagBg} group-hover:bg-white/20 group-hover:text-white rounded-md transition-colors duration-300`}>
                    {tech}
                  </span>
                ))}
              </div>

              <!-- Learn more link -->
              <span class="inline-flex items-center text-primary-500 group-hover:text-white font-semibold text-sm transition-colors duration-300">
                Explore Service
                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 ml-1.5 group-hover:translate-x-1.5 transition-transform duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" />
                </svg>
              </span>
            </div>
          </a>
        ))}
      </div>
    </div>
  </section>

  <!-- Service Details Sections -->
  {services.map((service, index) => (
    <section
      id={service.id}
      class={`py-16 lg:py-24 ${index % 2 === 0 ? 'bg-secondary-50 dark:bg-secondary-800/50' : 'bg-white dark:bg-secondary-900'}`}
    >
      <div class="container-wrapper">
        <div class="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
          <!-- Content column -->
          <div class={`reveal-on-scroll ${index % 2 === 1 ? 'lg:order-2' : ''}`}>
            <div class={`inline-flex items-center gap-2 px-4 py-2 ${service.bgLight} ${service.iconColor} rounded-full text-sm font-semibold mb-4`}>
              {service.icon === 'web' && (
                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
                </svg>
              )}
              {service.icon === 'mobile' && (
                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
                </svg>
              )}
              {service.icon === 'ai' && (
                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                </svg>
              )}
              {service.icon === 'cloud' && (
                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
                </svg>
              )}
              {service.title}
            </div>

            <h2 class="text-3xl sm:text-4xl font-bold text-secondary-900 dark:text-secondary-100 mb-4">
              {service.title}
            </h2>
            <p class="text-secondary-600 dark:text-secondary-400 text-lg leading-relaxed mb-6">
              {service.fullDescription}
            </p>

            <!-- Service stats row -->
            <div class="flex flex-wrap gap-4 mb-8">
              {Object.entries(service.stats).map(([key, val]) => (
                <div class={`flex flex-col px-4 py-3 ${service.bgLight} rounded-lg`}>
                  <span class={`text-xl font-bold ${service.iconColor}`}>{val}</span>
                  <span class="text-secondary-500 dark:text-secondary-400 text-xs capitalize">{key.replace(/([A-Z])/g, ' $1').trim()}</span>
                </div>
              ))}
            </div>

            <!-- Features list -->
            <ul class="space-y-2.5 mb-8">
              {service.features.map((feature) => (
                <li class="flex items-start gap-3">
                  <span class={`w-5 h-5 ${service.iconColor} mt-0.5 flex-shrink-0`} aria-hidden="true">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                    </svg>
                  </span>
                  <span class="text-secondary-700 dark:text-secondary-300">{feature}</span>
                </li>
              ))}
            </ul>

            <!-- Tech stack -->
            <div class="mb-8">
              <p class="text-xs font-semibold text-secondary-400 dark:text-secondary-500 uppercase tracking-wider mb-2">Technologies</p>
              <div class="flex flex-wrap gap-2">
                {service.techStack.map((tech) => (
                  <span class={`px-3 py-1 text-sm font-medium ${service.tagBg} rounded-md`}>{tech}</span>
                ))}
              </div>
            </div>

            <a
              href="/contact"
              class={`inline-flex items-center justify-center px-7 py-3.5 bg-gradient-to-r ${service.gradient} text-white font-semibold rounded-lg hover:shadow-lg hover:opacity-95 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-primary-400 focus:ring-offset-2`}
            >
              Get my free proposal
              <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" />
              </svg>
            </a>
          </div>

          <!-- Visual element -->
          <div class={`relative reveal-on-scroll reveal-delay-2 ${index % 2 === 1 ? 'lg:order-1' : ''}`}>
            <div class={`aspect-square rounded-2xl bg-gradient-to-br ${service.gradient} p-8 lg:p-12 flex items-center justify-center`}>
              <div class="relative w-full h-full bg-white/10 rounded-xl backdrop-blur-sm p-6 lg:p-8">
                <!-- Window chrome decoration -->
                <div class="absolute top-4 left-4 flex gap-1.5" aria-hidden="true">
                  <div class="w-3 h-3 rounded-full bg-red-400/60"></div>
                  <div class="w-3 h-3 rounded-full bg-yellow-400/60"></div>
                  <div class="w-3 h-3 rounded-full bg-green-400/60"></div>
                </div>

                <!-- Service-specific visual illustration -->
                <div class="h-full flex flex-col justify-center items-center text-white pt-6">
                  {service.icon === 'web' && (
                    <div class="w-full space-y-3">
                      <div class="h-3 bg-white/30 rounded-full w-3/4 mx-auto"></div>
                      <div class="h-3 bg-white/20 rounded-full w-full"></div>
                      <div class="h-3 bg-white/20 rounded-full w-5/6 mx-auto"></div>
                      <div class="mt-4 grid grid-cols-3 gap-2">
                        <div class="h-16 bg-white/20 rounded-lg"></div>
                        <div class="h-16 bg-white/20 rounded-lg"></div>
                        <div class="h-16 bg-white/20 rounded-lg"></div>
                      </div>
                      <div class="h-2 bg-white/15 rounded-full w-1/2 mx-auto mt-2"></div>
                    </div>
                  )}
                  {service.icon === 'mobile' && (
                    <div class="flex gap-4 items-end justify-center w-full">
                      <div class="w-20 h-36 bg-white/20 rounded-2xl border-2 border-white/30 flex flex-col items-center pt-3 gap-2">
                        <div class="w-6 h-1 bg-white/40 rounded-full"></div>
                        <div class="w-12 h-2 bg-white/25 rounded-full"></div>
                        <div class="w-10 h-2 bg-white/20 rounded-full"></div>
                        <div class="w-12 h-8 bg-white/15 rounded-lg mt-1"></div>
                      </div>
                      <div class="w-24 h-44 bg-white/25 rounded-2xl border-2 border-white/40 flex flex-col items-center pt-3 gap-2">
                        <div class="w-8 h-1 bg-white/50 rounded-full"></div>
                        <div class="w-16 h-2 bg-white/30 rounded-full"></div>
                        <div class="w-14 h-2 bg-white/25 rounded-full"></div>
                        <div class="w-16 h-10 bg-white/20 rounded-lg mt-1"></div>
                        <div class="w-12 h-2 bg-white/20 rounded-full"></div>
                      </div>
                      <div class="w-20 h-36 bg-white/20 rounded-2xl border-2 border-white/30 flex flex-col items-center pt-3 gap-2">
                        <div class="w-6 h-1 bg-white/40 rounded-full"></div>
                        <div class="w-12 h-2 bg-white/25 rounded-full"></div>
                        <div class="w-10 h-2 bg-white/20 rounded-full"></div>
                        <div class="w-12 h-8 bg-white/15 rounded-lg mt-1"></div>
                      </div>
                    </div>
                  )}
                  {service.icon === 'ai' && (
                    <div class="w-full space-y-3 px-2">
                      <div class="flex items-center gap-2">
                        <div class="w-8 h-8 rounded-full bg-white/30 flex-shrink-0"></div>
                        <div class="flex-1 h-8 bg-white/20 rounded-lg"></div>
                      </div>
                      <div class="flex items-center gap-2 flex-row-reverse">
                        <div class="w-8 h-8 rounded-full bg-white/20 flex-shrink-0"></div>
                        <div class="flex-1 h-10 bg-white/15 rounded-lg"></div>
                      </div>
                      <div class="flex items-center gap-2">
                        <div class="w-8 h-8 rounded-full bg-white/30 flex-shrink-0"></div>
                        <div class="flex-1 h-8 bg-white/20 rounded-lg"></div>
                      </div>
                      <div class="flex items-center gap-2 flex-row-reverse">
                        <div class="w-8 h-8 rounded-full bg-white/20 flex-shrink-0"></div>
                        <div class="w-2/3 h-8 bg-white/15 rounded-lg"></div>
                      </div>
                    </div>
                  )}
                  {service.icon === 'cloud' && (
                    <div class="w-full space-y-3">
                      <div class="flex justify-center">
                        <div class="w-24 h-12 bg-white/30 rounded-2xl flex items-center justify-center">
                          <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 text-white/70" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
                          </svg>
                        </div>
                      </div>
                      <div class="flex justify-center gap-1">
                        <div class="w-0.5 h-6 bg-white/30"></div>
                        <div class="w-0.5 h-6 bg-white/30 mx-6"></div>
                        <div class="w-0.5 h-6 bg-white/30 mx-6"></div>
                      </div>
                      <div class="grid grid-cols-3 gap-2">
                        {['AWS', 'K8s', 'GCP'].map((label) => (
                          <div class="h-10 bg-white/20 rounded-lg flex items-center justify-center">
                            <span class="text-white/70 text-xs font-medium">{label}</span>
                          </div>
                        ))}
                      </div>
                    </div>
                  )}
                </div>
              </div>
            </div>

            <!-- Floating stats badge -->
            <div class="absolute -bottom-4 -right-4 sm:-bottom-6 sm:-right-6 bg-white dark:bg-secondary-800 rounded-xl shadow-xl p-4 sm:p-5 hidden sm:block border border-secondary-100 dark:border-secondary-700">
              <div class="flex items-center gap-3">
                <div class={`w-10 h-10 ${service.bgLight} ${service.iconColor} rounded-lg flex items-center justify-center flex-shrink-0`} aria-hidden="true">
                  <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
                  </svg>
                </div>
                <div>
                  <p class="text-lg font-bold text-secondary-900 dark:text-secondary-100">{Object.values(service.stats)[0]}</p>
                  <p class="text-secondary-500 dark:text-secondary-400 text-xs">{Object.keys(service.stats)[0].replace(/([A-Z])/g, ' $1').trim()}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  ))}

  <!-- Case Studies 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 reveal-on-scroll">
        <span class="text-accent-500 dark:text-accent-400 font-semibold text-sm uppercase tracking-wider">Real Results</span>
        <h2 class="text-3xl sm:text-4xl font-bold text-secondary-900 dark:text-secondary-100 mt-2 mb-4">Client Success Stories</h2>
        <p class="text-secondary-600 dark:text-secondary-400 text-lg">
          Don't take our word for it — see the measurable impact we've delivered for our clients.
        </p>
      </div>

      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
        {caseStudies.map((study, idx) => (
          <div class={`case-study-card group relative bg-white dark:bg-secondary-800 rounded-2xl p-6 lg:p-8 border ${study.borderColor} dark:border-secondary-700 hover:shadow-xl hover:-translate-y-1 transition-all duration-300 overflow-hidden reveal-on-scroll reveal-delay-${idx + 1}`}>
            <!-- Background gradient -->
            <div class={`absolute inset-0 bg-gradient-to-br ${study.gradient} opacity-50 group-hover:opacity-70 transition-opacity duration-300`} aria-hidden="true"></div>

            <div class="relative">
              <!-- Tag + icon -->
              <div class="flex items-center justify-between mb-4">
                <span class={`px-2.5 py-1 text-xs font-semibold ${study.tagColor} rounded-md`}>{study.tag}</span>
                <div class="text-secondary-300" aria-hidden="true">
                  {study.icon === 'web' && (
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
                    </svg>
                  )}
                  {study.icon === 'mobile' && (
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
                    </svg>
                  )}
                  {study.icon === 'ai' && (
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                    </svg>
                  )}
                </div>
              </div>

              <!-- Big metric -->
              <p class="text-4xl font-bold text-secondary-900 dark:text-secondary-100 mb-1">{study.metric}</p>
              <p class="text-sm font-medium text-secondary-500 dark:text-secondary-400 mb-4">{study.metricLabel}</p>

              <!-- Client & description -->
              <p class="font-semibold text-secondary-800 dark:text-secondary-200 mb-2">{study.client}</p>
              <p class="text-secondary-600 dark:text-secondary-400 text-sm leading-relaxed mb-4">{study.description}</p>

              <!-- Result pill -->
              <div class="inline-flex items-center gap-1.5 px-3 py-1 bg-secondary-100 dark:bg-secondary-700 rounded-full text-xs text-secondary-600 dark:text-secondary-300 font-medium">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                </svg>
                {study.result}
              </div>
            </div>
          </div>
        ))}
      </div>

      <div class="mt-10 text-center">
        <a
          href="/portfolio"
          class="inline-flex items-center gap-2 text-primary-600 hover:text-primary-700 font-semibold text-sm transition-colors duration-200 group"
        >
          See our work
          <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 group-hover:translate-x-1 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" />
          </svg>
        </a>
      </div>
    </div>
  </section>

  <!-- Pricing 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 reveal-on-scroll">
        <span class="text-primary-500 dark:text-primary-400 font-semibold text-sm uppercase tracking-wider">Transparent Pricing</span>
        <h2 class="text-3xl sm:text-4xl font-bold text-secondary-900 dark:text-secondary-100 mt-2 mb-4">Investment Tiers</h2>
        <p class="text-secondary-600 dark:text-secondary-400 text-lg">
          Straightforward pricing to fit businesses at every stage. All plans include dedicated project management.
        </p>
      </div>

      <div class="grid md:grid-cols-3 gap-6 lg:gap-8 items-stretch">
        {pricingTiers.map((tier, idx) => (
          <div
            class={`relative flex flex-col rounded-2xl p-7 lg:p-8 reveal-on-scroll reveal-delay-${idx + 1} transition-all duration-300 ${
              tier.highlighted
                ? 'bg-secondary-900 shadow-2xl ring-2 ring-primary-500 md:scale-105'
                : 'bg-white dark:bg-secondary-800 border border-secondary-200 dark:border-secondary-700 hover:shadow-xl hover:-translate-y-1'
            }`}
          >
            {tier.highlighted && (
              <div class="absolute -top-3.5 left-1/2 -translate-x-1/2">
                <span class="px-4 py-1 bg-primary-500 text-white text-xs font-bold rounded-full uppercase tracking-wide shadow-lg">
                  Most Popular
                </span>
              </div>
            )}

            <div class="mb-6">
              <h3 class={`text-xl font-bold mb-1 ${tier.highlighted ? 'text-white' : 'text-secondary-900 dark:text-secondary-100'}`}>
                {tier.name}
              </h3>
              <p class={`text-sm mb-4 ${tier.highlighted ? 'text-secondary-400' : 'text-secondary-500 dark:text-secondary-400'}`}>
                {tier.description}
              </p>
              <div class="flex items-baseline gap-2">
                <span class={`text-4xl font-bold ${tier.highlighted ? 'text-white' : 'text-secondary-900 dark:text-secondary-100'}`}>
                  {tier.price}
                </span>
                <span class={`text-sm ${tier.highlighted ? 'text-secondary-400' : 'text-secondary-500 dark:text-secondary-400'}`}>
                  {tier.period}
                </span>
              </div>
            </div>

            <p class={`text-xs font-semibold uppercase tracking-wider mb-3 ${tier.highlighted ? 'text-secondary-400' : 'text-secondary-400 dark:text-secondary-500'}`}>
              What's included
            </p>
            <ul class="space-y-3 mb-8 flex-1">
              {tier.features.map((feature) => (
                <li class="flex items-start gap-3">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class={`w-5 h-5 flex-shrink-0 mt-0.5 ${tier.highlighted ? 'text-primary-400' : 'text-primary-500'}`}
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                    stroke-width="2.5"
                    aria-hidden="true"
                  >
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                  </svg>
                  <span class={`text-sm ${tier.highlighted ? 'text-secondary-300' : 'text-secondary-700 dark:text-secondary-300'}`}>
                    {feature}
                  </span>
                </li>
              ))}
            </ul>

            <a
              href="/contact"
              class={`w-full inline-flex items-center justify-center px-6 py-3.5 rounded-lg font-semibold transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 ${
                tier.highlighted
                  ? 'bg-primary-500 text-white hover:bg-primary-400 focus:ring-primary-400 focus:ring-offset-secondary-900'
                  : 'bg-secondary-900 dark:bg-secondary-700 text-white hover:bg-secondary-800 dark:hover:bg-secondary-600 focus:ring-secondary-400'
              }`}
            >
              {tier.cta}
              <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" />
              </svg>
            </a>
          </div>
        ))}
      </div>

      <p class="text-center text-secondary-500 dark:text-secondary-400 text-sm mt-8">
        All prices are estimates. Final scope and pricing determined after discovery call.
        <a href="/contact" class="text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 font-medium ml-1">Get my free proposal →</a>
      </p>
    </div>
  </section>

  <!-- Process Section -->
  <section class="py-16 lg:py-24 bg-gradient-to-br from-secondary-900 via-secondary-800 to-secondary-900">
    <div class="container-wrapper">
      <div class="text-center max-w-2xl mx-auto mb-12 lg:mb-16 reveal-on-scroll">
        <span class="text-primary-400 font-semibold text-sm uppercase tracking-wider">How We Work</span>
        <h2 class="text-3xl sm:text-4xl font-bold text-white mt-2 mb-4">Our Proven Process</h2>
        <p class="text-secondary-300 text-lg">
          A battle-tested methodology that delivers consistent, high-quality results — on time, every time.
        </p>
      </div>

      <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-4">
        {processSteps.map((step, index) => (
          <div class={`relative reveal-on-scroll reveal-delay-${index + 1}`}>
            <div class="group bg-white/5 backdrop-blur-sm rounded-2xl p-6 lg:p-7 border border-white/10 hover:bg-white/10 hover:border-white/20 hover:-translate-y-1 transition-all duration-300 h-full">
              <!-- Step number with glow -->
              <div class="relative mb-4">
                <span class="text-6xl font-bold text-primary-500/20 leading-none">{step.number}</span>
                <div class="absolute -top-1 -left-1 w-8 h-8 bg-primary-500/10 rounded-full blur-md"></div>
              </div>
              <h3 class="text-lg font-bold text-white mb-2">{step.title}</h3>
              <p class="text-secondary-400 text-sm leading-relaxed">{step.description}</p>
            </div>

            {/* Connector arrow between steps */}
            {index < processSteps.length - 1 && (
              <div class="hidden lg:flex absolute top-1/2 -right-5 transform -translate-y-1/2 z-10 items-center justify-center w-10">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-primary-500/40" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
                </svg>
              </div>
            )}
          </div>
        ))}
      </div>
    </div>
  </section>

  <!-- CTA Section -->
  <section class="py-16 lg:py-24 bg-gradient-to-r from-primary-600 via-primary-500 to-primary-600 relative overflow-hidden">
    <div class="absolute inset-0 pointer-events-none" aria-hidden="true">
      <div class="absolute top-0 left-1/4 w-64 h-64 bg-white/5 rounded-full blur-3xl"></div>
      <div class="absolute bottom-0 right-1/4 w-80 h-80 bg-white/5 rounded-full blur-3xl"></div>
    </div>
    <div class="container-wrapper text-center relative reveal-on-scroll">
      <span class="inline-block px-4 py-1.5 mb-4 text-sm font-medium text-white/80 bg-white/10 rounded-full border border-white/20">
        Ready to get started?
      </span>
      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-white mb-4">
        Let's Build Something
        <span class="italic font-normal"> Great </span>
        Together
      </h2>
      <p class="text-primary-100 text-lg max-w-2xl mx-auto mb-10 leading-relaxed">
        Schedule a free 30-minute discovery call and let's discuss how our services can accelerate your business goals.
      </p>
      <div class="flex flex-col sm:flex-row gap-4 justify-center">
        <a
          href="/contact"
          class="inline-flex items-center justify-center px-8 py-4 bg-white text-primary-600 font-bold rounded-xl hover:bg-primary-50 hover:shadow-xl transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-primary-600"
        >
          Get my free proposal
          <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
          </svg>
        </a>
        <a
          href="/portfolio"
          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 duration-200 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-primary-600"
        >
          See our work
        </a>
      </div>

      <!-- Trust signals -->
      <div class="mt-10 flex flex-wrap items-center justify-center gap-6 text-white/60 text-sm">
        <span class="flex items-center gap-1.5">
          <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
          </svg>
          No commitment required
        </span>
        <span class="flex items-center gap-1.5">
          <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
          </svg>
          Free project estimate
        </span>
        <span class="flex items-center gap-1.5">
          <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
          </svg>
          Response within 24 hours
        </span>
      </div>
    </div>
  </section>
</BaseLayout>

<style>
  /* Scroll-reveal base state */
  .reveal-on-scroll {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .reveal-on-scroll.revealed {
    opacity: 1;
    transform: translateY(0);
  }

  /* Staggered delays */
  .reveal-delay-1 { transition-delay: 0.1s; }
  .reveal-delay-2 { transition-delay: 0.2s; }
  .reveal-delay-3 { transition-delay: 0.3s; }
  .reveal-delay-4 { transition-delay: 0.4s; }

  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .reveal-on-scroll {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }

  /* Service card inner border accent animation */
  .service-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 1rem;
    padding: 1.5px;
    background: linear-gradient(135deg, transparent 0%, transparent 50%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    transition: background 0.3s ease;
  }

  /* Case study card hover */
  .case-study-card {
    contain: layout style;
  }
</style>

<script>
  // Intersection Observer for scroll-reveal animations
  (function() {
    const elements = document.querySelectorAll('.reveal-on-scroll');
    if (!elements.length) return;

    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add('revealed');
            observer.unobserve(entry.target);
          }
        });
      },
      {
        threshold: 0.12,
        rootMargin: '0px 0px -40px 0px',
      }
    );

    elements.forEach((el) => observer.observe(el));
  })();
</script>