---
// Home page - WorkRoot IT Solutions
import BaseLayout from '../layouts/BaseLayout.astro';
import SEO from '../components/SEO.astro';

// Benefits/Features data
const benefits = [
  {
    icon: 'rocket',
    title: 'Rapid Development',
    description: 'Launch your product 3x faster with our agile methodology and proven frameworks.',
  },
  {
    icon: 'shield',
    title: 'Enterprise Security',
    description: 'Bank-grade security protocols protecting your data and user privacy.',
  },
  {
    icon: 'scale',
    title: 'Built to Scale',
    description: 'Infrastructure that grows with your business, from startup to enterprise.',
  },
  {
    icon: 'support',
    title: '24/7 Support',
    description: 'Round-the-clock technical support ensuring your systems run smoothly.',
  },
];

// Services data
const services = [
  {
    icon: 'code',
    title: 'Web Development',
    description: 'Custom web applications built with Angular, React, Next.js, Astro, and Spring Boot.',
    features: ['Angular/React/Next.js', 'Spring Boot APIs', 'Astro Static Sites'],
  },
  {
    icon: 'smartphone',
    title: 'Mobile Apps',
    description: 'Cross-platform and native mobile applications for iOS and Android.',
    features: ['React Native / Expo', 'iOS & Android', 'Offline-First Apps'],
  },
  {
    icon: 'brain',
    title: 'ERP & Enterprise Systems',
    description: 'Custom ERP, CRM, and management systems for enterprises and government bodies.',
    features: ['University Management', 'Police Management', 'Crematorium SCMS'],
  },
  {
    icon: 'cloud',
    title: 'Government IT Solutions',
    description: 'Scalable technology solutions deployed across government departments and districts.',
    features: ['Multi-District Deployments', 'Secure & Compliant', 'High Availability'],
  },
];

// How it works steps
const steps = [
  {
    number: '01',
    title: 'Discovery',
    description: 'We understand your business goals, challenges, and technical requirements.',
  },
  {
    number: '02',
    title: 'Planning',
    description: 'Strategic roadmap with clear milestones, timelines, and deliverables.',
  },
  {
    number: '03',
    title: 'Development',
    description: 'Agile sprints with regular check-ins and iterative improvements.',
  },
  {
    number: '04',
    title: 'Launch & Support',
    description: 'Smooth deployment with ongoing maintenance and optimization.',
  },
];

// Testimonials data
const testimonials = [
  {
    quote: 'WorkRoot IT Solutions is very professional and responsive. They built PLNR Financing platform with great attention to detail. The Angular + Spring Boot stack works flawlessly and their ongoing support is excellent.',
    author: 'Ajay Pruthi',
    role: 'Founder, PLNR',
    avatar: 'AP',
    rating: 5,
  },
  {
    quote: 'The FPC Cart e-commerce platform delivered by WorkRoot exceeded our expectations. Built with Astro and Golang, it loads incredibly fast and handles our product catalog seamlessly. Their team understood our business needs perfectly.',
    author: 'Dhirendra Singh',
    role: 'Director, RENTEC',
    avatar: 'DS',
    rating: 5,
  },
  {
    quote: 'WorkRoot delivered our University Management System for IIT Patna on time and within budget. The Next.js + Spring Boot architecture is robust and scalable. They are a reliable technology partner for complex enterprise projects.',
    author: 'Dilip Raj',
    role: 'Director, MOC Soft Technologies Pvt Ltd',
    avatar: 'DR',
    rating: 5,
  },
];

// Stats data
const stats = [
  { value: 20, suffix: '+', label: 'Projects Delivered', icon: 'briefcase' },
  { value: 100, suffix: '%', label: 'Client Satisfaction', icon: 'heart' },
  { value: 3, suffix: '+', label: 'Years in Business', icon: 'building' },
  { value: 3, suffix: '', label: 'Team Members', icon: 'clock' },
];

// FAQ data
const faqs = [
  {
    question: 'What technologies do you specialize in?',
    answer: 'We specialize in modern web and mobile technologies including Angular, React, Next.js, Astro, Spring Boot, Golang, and databases like MySQL and PostgreSQL. We also work with Expo for mobile development.',
  },
  {
    question: 'How long does a typical project take?',
    answer: 'Project timelines vary based on complexity. A static website might take 2-4 weeks, while a complex government management system could take 6-24 months. We provide detailed timelines during the planning phase.',
  },
  {
    question: 'Do you offer ongoing support after launch?',
    answer: 'Yes! We offer comprehensive support packages including bug fixes, security updates, performance monitoring, and feature enhancements. Our 24/7 support ensures your systems run smoothly.',
  },
  {
    question: 'What is your development process?',
    answer: 'We follow an agile methodology with 2-week sprints, regular check-ins, and iterative development. You\'ll have full visibility into progress with access to staging environments and regular demos.',
  },
  {
    question: 'Can you work with our existing team?',
    answer: 'Absolutely! We excel at collaborating with in-house teams. Whether you need to augment your team or prefer a fully managed solution, we adapt to your workflow and tools.',
  },
  {
    question: 'How do you ensure project security?',
    answer: 'Security is built into every phase. We follow OWASP guidelines, conduct regular security audits, implement encryption, and ensure compliance with industry standards like GDPR and SOC 2.',
  },
];
---

<BaseLayout
  title="Home"
  description="WorkRoot IT Solutions LLP — Expert software development, web & mobile apps, ERP systems, and government IT solutions. 20+ projects delivered, 100% client satisfaction. Founded 2022."
>
  <SEO
    slot="head"
    type="WebPage"
    faq={faqs}
  />

  <!-- Hero Section - Enhanced -->
  <section class="relative min-h-screen 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-[600px] h-[600px] bg-primary/20 rounded-full blur-3xl animate-pulse-slow"></div>
      <div class="absolute -bottom-40 -left-40 w-[500px] h-[500px] bg-accent/10 rounded-full blur-3xl animate-pulse-slower"></div>
      <div class="absolute top-1/3 right-1/4 w-[400px] h-[400px] bg-primary/10 rounded-full blur-3xl"></div>
      <!-- Grid pattern overlay -->
      <div class="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[size:80px_80px]"></div>
      <!-- Spotlight effect -->
      <div class="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-secondary-900/50"></div>
    </div>

    <div class="container-wrapper relative z-10 py-24">
      <div class="max-w-5xl mx-auto text-center">
        <!-- Trust badge -->
        <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 backdrop-blur-sm border border-white/20 mb-8 opacity-0 animate-slide-up">
          <svg class="w-5 h-5 text-accent-400" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
            <path fill-rule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
          </svg>
          <span class="text-sm font-medium text-white">Trusted Software Partner Since 2022</span>
        </div>

        <!-- Main heading with gradient -->
        <h1 class="text-5xl sm:text-6xl lg:text-7xl xl:text-8xl font-bold text-white leading-[1.1] tracking-tight">
          <span class="block opacity-0 animate-slide-up" style="animation-delay: 0.2s;">Build Software</span>
          <span class="block opacity-0 animate-slide-up" style="animation-delay: 0.4s;">That <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary-400 via-primary-300 to-accent-400">Scales</span></span>
        </h1>

        <p class="mt-8 text-xl sm:text-2xl text-secondary-200 max-w-3xl mx-auto opacity-0 animate-slide-up leading-relaxed" style="animation-delay: 0.6s;">
          Expert software development for web, mobile, ERP, and government systems. We transform your ideas into production-ready solutions that deliver real business value.
        </p>

        <!-- Dual CTA Buttons -->
        <div class="mt-12 flex flex-wrap justify-center gap-4 opacity-0 animate-slide-up" style="animation-delay: 0.8s;">
          <a
            href="/contact"
            class="group inline-flex items-center justify-center rounded-xl bg-gradient-to-r from-primary-500 to-primary-600 px-10 py-5 text-lg font-bold text-white transition-all hover:shadow-2xl hover:shadow-primary/50 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-primary-400 focus:ring-offset-2 focus:ring-offset-secondary-900"
          >
            Start Your Project
            <svg class="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
            </svg>
          </a>
          <a
            href="/portfolio"
            class="group inline-flex items-center justify-center rounded-xl border-2 border-white/30 bg-white/5 backdrop-blur-sm px-10 py-5 text-lg font-bold text-white transition-all hover:bg-white/10 hover:border-white/50 focus:outline-none focus:ring-2 focus:ring-white/50 focus:ring-offset-2 focus:ring-offset-secondary-900"
          >
            <svg class="mr-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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"></path>
            </svg>
            View Our Work
          </a>
        </div>

        <!-- Social Proof Logos/Stats -->
        <div class="mt-20 opacity-0 animate-slide-up" style="animation-delay: 1s;">
          <p class="text-sm text-secondary-400 uppercase tracking-wider mb-8">Powered By Industry Leaders</p>
          <div class="flex flex-wrap justify-center items-center gap-12 opacity-60" role="list" aria-label="Technologies we use">
            <div class="text-2xl font-bold text-white" role="listitem">Angular</div>
            <div class="text-2xl font-bold text-white" role="listitem">Spring Boot</div>
            <div class="text-2xl font-bold text-white" role="listitem">Next.js</div>
            <div class="text-2xl font-bold text-white" role="listitem">Astro</div>
            <div class="text-2xl font-bold text-white" role="listitem">Golang</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Scroll indicator -->
    <div class="absolute bottom-8 left-1/2 -translate-x-1/2 opacity-0 animate-fade-in" style="animation-delay: 1.2s;">
      <a href="#benefits" class="flex flex-col items-center text-white/60 hover:text-white transition-colors group" aria-label="Scroll to benefits">
        <span class="text-sm mb-2">Discover More</span>
        <svg class="w-6 h-6 animate-bounce" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
        </svg>
      </a>
    </div>
  </section>

  <!-- Benefits Section - NEW -->
  <section id="benefits" class="py-24 bg-white dark:bg-secondary-900">
    <div class="container-wrapper">
      <div class="text-center max-w-3xl mx-auto mb-20" data-animate="fade-up">
        <span class="inline-block px-4 py-2 rounded-full bg-primary-50 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 text-sm font-bold uppercase tracking-wider mb-4">Why Choose Us</span>
        <h2 class="text-4xl sm:text-5xl font-bold text-secondary-900 dark:text-secondary-100 mb-6">Built for Your Success</h2>
        <p class="text-xl text-secondary-600 dark:text-secondary-400">
          We don't just write code. We build solutions that drive measurable business results.
        </p>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
        {benefits.map((benefit, index) => (
          <div class="group relative bg-gradient-to-br from-secondary-50 to-white dark:from-secondary-800 dark:to-secondary-800/80 rounded-2xl p-8 border border-secondary-100 dark:border-secondary-700 hover:border-primary/30 hover:shadow-2xl transition-all duration-500 hover:-translate-y-2 card-interactive" data-animate="fade-up" data-delay={String(index * 100)}>
            <!-- Icon -->
            <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-primary-500 to-primary-600 flex items-center justify-center mb-6 group-hover:scale-110 group-hover:rotate-6 transition-all duration-500 shadow-lg">
              {benefit.icon === 'rocket' && (
                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                </svg>
              )}
              {benefit.icon === 'shield' && (
                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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"></path>
                </svg>
              )}
              {benefit.icon === 'scale' && (
                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"></path>
                </svg>
              )}
              {benefit.icon === 'support' && (
                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"></path>
                </svg>
              )}
            </div>

            <h3 class="text-2xl font-bold text-secondary-900 dark:text-secondary-100 mb-3">{benefit.title}</h3>
            <p class="text-secondary-600 dark:text-secondary-400 leading-relaxed">{benefit.description}</p>

            <!-- Decorative corner -->
            <div class="absolute top-4 right-4 w-2 h-2 bg-primary-400 rounded-full opacity-0 group-hover:opacity-100 transition-opacity"></div>
          </div>
        ))}
      </div>
    </div>
  </section>

  <!-- Services Section - Enhanced -->
  <section id="services" class="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 max-w-3xl mx-auto mb-20" data-animate="fade-up">
        <span class="inline-block px-4 py-2 rounded-full bg-primary-50 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 text-sm font-bold uppercase tracking-wider mb-4">Our Services</span>
        <h2 class="text-4xl sm:text-5xl font-bold text-secondary-900 dark:text-secondary-100 mb-6">Comprehensive Technology Solutions</h2>
        <p class="text-xl text-secondary-600 dark:text-secondary-400">
          From concept to deployment, we deliver end-to-end solutions tailored to your unique business needs.
        </p>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-6xl mx-auto">
        {services.map((service, index) => (
          <div class="group relative bg-white dark:bg-secondary-800 rounded-3xl p-10 shadow-lg border-2 border-secondary-100 dark:border-secondary-700 hover:border-primary-400 hover:shadow-2xl transition-all duration-500 overflow-hidden card-interactive" data-animate="fade-up" data-delay={String(index % 2 === 0 ? 0 : 150)}>
            <!-- Background gradient on hover -->
            <div class="absolute inset-0 bg-gradient-to-br from-primary-50/0 to-primary-50/0 group-hover:from-primary-50/50 dark:group-hover:from-primary-900/20 group-hover:to-transparent transition-all duration-500"></div>

            <div class="relative z-10">
              <!-- Icon -->
              <div class="w-20 h-20 rounded-2xl bg-gradient-to-br from-primary-500 to-primary-600 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-500 shadow-xl">
                {service.icon === 'code' && (
                  <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
                  </svg>
                )}
                {service.icon === 'smartphone' && (
                  <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
                  </svg>
                )}
                {service.icon === 'brain' && (
                  <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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"></path>
                  </svg>
                )}
                {service.icon === 'cloud' && (
                  <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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"></path>
                  </svg>
                )}
              </div>

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

              <!-- Features list -->
              <ul class="space-y-3">
                {service.features?.map((feature) => (
                  <li class="flex items-center text-secondary-700 dark:text-secondary-300">
                    <svg class="w-5 h-5 text-primary-500 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                      <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                    </svg>
                    <span class="font-medium">{feature}</span>
                  </li>
                ))}
              </ul>

              <!-- Learn more arrow -->
              <div class="mt-6 flex items-center text-primary-600 dark:text-primary-400 font-semibold group-hover:text-primary-700 dark:group-hover:text-primary-300 transition-colors">
                <span>Learn More</span>
                <svg class="w-5 h-5 ml-2 group-hover:translate-x-2 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                </svg>
              </div>
            </div>

            <!-- Number badge -->
            <div class="absolute top-6 right-6 w-12 h-12 rounded-full bg-primary-100 dark:bg-primary-900/40 flex items-center justify-center text-primary-700 dark:text-primary-300 font-bold text-lg opacity-50 group-hover:opacity-100 transition-opacity">
              {(index + 1).toString().padStart(2, '0')}
            </div>
          </div>
        ))}
      </div>

      <div class="text-center mt-16">
        <a href="/services" class="inline-flex items-center justify-center rounded-xl bg-primary px-10 py-5 text-lg font-bold text-white transition-all hover:bg-primary-600 hover:shadow-2xl hover:shadow-primary/30 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-primary-400 focus:ring-offset-2">
          Explore All Services
          <svg class="ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
          </svg>
        </a>
      </div>
    </div>
  </section>

  <!-- How It Works Section - NEW -->
  <section class="py-24 bg-gradient-to-br from-secondary-900 via-secondary-800 to-primary-900 relative overflow-hidden">
    <!-- Background pattern -->
    <div class="absolute inset-0 opacity-5">
      <div class="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.1)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.1)_1px,transparent_1px)] bg-[size:64px_64px]"></div>
    </div>

    <div class="container-wrapper relative z-10">
      <div class="text-center max-w-3xl mx-auto mb-20">
        <span class="inline-block px-4 py-2 rounded-full bg-primary-400/20 text-primary-300 text-sm font-bold uppercase tracking-wider mb-4">Our Process</span>
        <h2 class="text-4xl sm:text-5xl font-bold text-white mb-6">How We Work</h2>
        <p class="text-xl text-secondary-300">
          A proven methodology that delivers results, on time and on budget.
        </p>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-7xl mx-auto">
        {steps.map((step, index) => (
          <div class="relative" data-animate="fade-up" data-delay={String(index * 150)}>
            {/* Connecting line */}
            {index < steps.length - 1 && (
              <div class="hidden lg:block absolute top-20 left-[60%] w-full h-0.5 bg-gradient-to-r from-primary-500/50 to-transparent"></div>
            )}

            <div class="group relative bg-white/5 backdrop-blur-sm rounded-2xl p-8 border border-white/10 hover:bg-white/10 hover:border-primary-400/50 transition-all duration-500">
              {/* Number badge */}
              <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-primary-500 to-primary-600 flex items-center justify-center mb-6 shadow-lg group-hover:scale-110 transition-transform duration-500">
                <span class="text-2xl font-bold text-white">{step.number}</span>
              </div>

              <h3 class="text-2xl font-bold text-white mb-4">{step.title}</h3>
              <p class="text-secondary-300 leading-relaxed">{step.description}</p>

              {/* Decorative dot */}
              <div class="absolute bottom-6 right-6 w-2 h-2 bg-primary-400 rounded-full opacity-0 group-hover:opacity-100 transition-opacity"></div>
            </div>
          </div>
        ))}
      </div>

      <div class="text-center mt-16">
        <a href="/contact" class="inline-flex items-center justify-center rounded-xl bg-white px-10 py-5 text-lg font-bold text-secondary-900 transition-all hover:shadow-2xl hover:scale-105 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-secondary-900">
          Start Your Journey
          <svg class="ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
          </svg>
        </a>
      </div>
    </div>
  </section>

  <!-- Stats/Metrics Section - Enhanced -->
  <section class="py-24 bg-white dark:bg-secondary-900">
    <div class="container-wrapper">
      <div class="text-center max-w-3xl mx-auto mb-16" data-animate="fade-up">
        <span class="inline-block px-4 py-2 rounded-full bg-accent-50 dark:bg-accent-900/20 text-accent-700 dark:text-accent-300 text-sm font-bold uppercase tracking-wider mb-4">Track Record</span>
        <h2 class="text-4xl sm:text-5xl font-bold text-secondary-900 dark:text-secondary-100 mb-6">Numbers That Matter</h2>
        <p class="text-xl text-secondary-600 dark:text-secondary-400">
          Our success is measured by the impact we create for our clients.
        </p>
      </div>

      <div class="grid grid-cols-2 lg:grid-cols-4 gap-8">
        {stats.map((stat, index) => (
          <div class="group text-center bg-gradient-to-br from-secondary-50 to-white dark:from-secondary-800 dark:to-secondary-800/80 rounded-3xl p-10 border-2 border-secondary-100 dark:border-secondary-700 hover:border-primary-400 hover:shadow-2xl transition-all duration-500 hover:-translate-y-2" data-animate="scale-up" data-delay={String(index * 100)}>
            {/* Icon */}
            <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-primary-500 to-primary-600 flex items-center justify-center mx-auto mb-6 group-hover:scale-110 group-hover:rotate-12 transition-all duration-500 shadow-lg">
              {stat.icon === 'briefcase' && (
                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                </svg>
              )}
              {stat.icon === 'heart' && (
                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
                </svg>
              )}
              {stat.icon === 'building' && (
                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                </svg>
              )}
              {stat.icon === 'clock' && (
                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
              )}
            </div>

            <div class="stat-counter text-5xl font-bold text-secondary-900 dark:text-secondary-100 mb-2" data-target={stat.value} data-suffix={stat.suffix}>
              0{stat.suffix}
            </div>
            <div class="text-secondary-600 dark:text-secondary-400 font-semibold">{stat.label}</div>
          </div>
        ))}
      </div>
    </div>
  </section>

  <!-- Testimonials Section - Enhanced -->
  <section class="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 max-w-3xl mx-auto mb-20" data-animate="fade-up">
        <span class="inline-block px-4 py-2 rounded-full bg-accent-50 dark:bg-accent-900/20 text-accent-700 dark:text-accent-300 text-sm font-bold uppercase tracking-wider mb-4">Client Stories</span>
        <h2 class="text-4xl sm:text-5xl font-bold text-secondary-900 dark:text-secondary-100 mb-6">Loved by Teams Worldwide</h2>
        <p class="text-xl text-secondary-600 dark:text-secondary-400">
          Don't just take our word for it. Here's what our clients have to say about working with us.
        </p>
      </div>

      <!-- Testimonials Carousel -->
      <div class="relative max-w-5xl mx-auto" data-animate="fade-up" data-delay="200">
        <div class="testimonial-carousel overflow-hidden rounded-3xl" aria-roledescription="carousel" aria-label="Client testimonials">
          <div class="testimonial-track flex transition-transform duration-500 ease-in-out" aria-live="polite" aria-atomic="false">
            {testimonials.map((testimonial, index) => (
              <div class="testimonial-slide w-full flex-shrink-0 px-4" data-index={index} role="group" aria-roledescription="slide" aria-label={`Testimonial ${index + 1} of ${testimonials.length}`}>
                <div class="bg-gradient-to-br from-white to-secondary-50 dark:from-secondary-800 dark:to-secondary-800 rounded-3xl p-10 sm:p-14 border-2 border-secondary-100 dark:border-secondary-700 shadow-xl">
                  <!-- Star rating -->
                  <div class="flex gap-1 mb-6" aria-label={`${testimonial.rating || 5} out of 5 stars`}>
                    {[...Array(testimonial.rating || 5)].map(() => (
                      <svg class="w-6 h-6 text-accent-500" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
                      </svg>
                    ))}
                  </div>

                  <!-- Quote icon -->
                  <svg class="w-16 h-16 text-primary-500/20 mb-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                    <path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"></path>
                  </svg>

                  <blockquote class="text-2xl sm:text-3xl text-secondary-800 dark:text-secondary-200 font-medium leading-relaxed mb-10">
                    "{testimonial.quote}"
                  </blockquote>

                  <div class="flex items-center">
                    <div class="w-16 h-16 rounded-full bg-gradient-to-br from-primary-500 to-primary-600 flex items-center justify-center text-white font-bold text-xl shadow-lg" aria-hidden="true">
                      {testimonial.avatar}
                    </div>
                    <div class="ml-5">
                      <div class="font-bold text-secondary-900 dark:text-secondary-100 text-lg">{testimonial.author}</div>
                      <div class="text-secondary-600 dark:text-secondary-400">{testimonial.role}</div>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        <!-- Carousel Controls -->
        <div class="flex items-center justify-center mt-10 gap-6">
          <button
            class="carousel-prev w-14 h-14 rounded-full bg-white dark:bg-secondary-800 border-2 border-secondary-200 dark:border-secondary-700 flex items-center justify-center text-secondary-600 dark:text-secondary-400 hover:border-primary hover:text-primary hover:bg-primary-50 dark:hover:bg-primary-900/30 transition-all shadow-lg hover:shadow-xl"
            aria-label="Previous testimonial"
          >
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 19l-7-7 7-7"></path>
            </svg>
          </button>

          <!-- Dots indicator -->
          <div class="carousel-dots flex gap-3">
            {testimonials.map((_, index) => (
              <button
                class={`h-3 rounded-full transition-all ${index === 0 ? 'bg-primary w-10' : 'bg-secondary-300 hover:bg-secondary-400 w-3'}`}
                data-index={index}
                aria-label={`Go to testimonial ${index + 1}`}
              >
              </button>
            ))}
          </div>

          <button
            class="carousel-next w-14 h-14 rounded-full bg-white dark:bg-secondary-800 border-2 border-secondary-200 dark:border-secondary-700 flex items-center justify-center text-secondary-600 dark:text-secondary-400 hover:border-primary hover:text-primary hover:bg-primary-50 dark:hover:bg-primary-900/30 transition-all shadow-lg hover:shadow-xl"
            aria-label="Next testimonial"
          >
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 5l7 7-7 7"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </section>

  <!-- FAQ Section - NEW -->
  <section class="py-24 bg-white dark:bg-secondary-900">
    <div class="container-wrapper">
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-start max-w-7xl mx-auto">
        <!-- Left column - Header -->
        <div class="lg:sticky lg:top-8" data-animate="fade-right">
          <span class="inline-block px-4 py-2 rounded-full bg-primary-50 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 text-sm font-bold uppercase tracking-wider mb-4">FAQ</span>
          <h2 class="text-4xl sm:text-5xl font-bold text-secondary-900 dark:text-secondary-100 mb-6">Common Questions</h2>
          <p class="text-xl text-secondary-600 dark:text-secondary-400 mb-8">
            Everything you need to know about working with us. Can't find the answer you're looking for?
          </p>
          <a href="/contact" class="inline-flex items-center text-primary-600 dark:text-primary-400 font-semibold hover:text-primary-700 dark:hover:text-primary-300 transition-colors">
            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
            </svg>
            Chat with our team
          </a>
        </div>

        <!-- Right column - Accordion -->
        <div class="space-y-4" data-animate="fade-left" data-delay="150">
          {faqs.map((faq, index) => (
            <div class="group bg-secondary-50 dark:bg-secondary-800 rounded-2xl border-2 border-secondary-100 dark:border-secondary-700 hover:border-primary-300 transition-all duration-300 overflow-hidden">
              <button
                class="faq-question w-full text-left px-8 py-6 flex items-start justify-between gap-4"
                data-faq-index={index}
                aria-expanded="false"
                aria-controls={`faq-answer-${index}`}
                id={`faq-question-${index}`}
              >
                <span class="font-bold text-lg text-secondary-900 dark:text-secondary-100 pr-4">{faq.question}</span>
                <svg class="faq-icon w-6 h-6 text-primary-500 flex-shrink-0 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 9l-7 7-7-7"></path>
                </svg>
              </button>
              <div class="faq-answer max-h-0 overflow-hidden transition-all duration-300" id={`faq-answer-${index}`} role="region" aria-labelledby={`faq-question-${index}`}>
                <div class="px-8 pb-6 text-secondary-600 dark:text-secondary-400 leading-relaxed">
                  {faq.answer}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>

  <!-- Final CTA Section - Enhanced -->
  <section class="py-24 bg-gradient-to-br from-secondary-900 via-primary-900 to-primary-800 relative overflow-hidden">
    <!-- Background decorations -->
    <div class="absolute inset-0 overflow-hidden pointer-events-none">
      <div class="absolute -top-40 -right-40 w-[500px] h-[500px] bg-accent/20 rounded-full blur-3xl"></div>
      <div class="absolute -bottom-40 -left-40 w-[500px] h-[500px] bg-primary/20 rounded-full blur-3xl"></div>
      <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 text-center relative z-10">
      <div class="max-w-4xl mx-auto" data-animate="fade-up">
        <h2 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-white mb-8 leading-tight">
          Ready to Build Something <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary-300 to-accent-400">Amazing?</span>
        </h2>
        <p class="text-xl sm:text-2xl text-secondary-200 mb-12 max-w-2xl mx-auto leading-relaxed">
          Let's turn your vision into reality. Get in touch and we'll schedule a free consultation to discuss your project.
        </p>

        <div class="flex flex-wrap justify-center gap-6">
          <a
            href="/contact"
            class="group inline-flex items-center justify-center rounded-xl bg-white px-12 py-6 text-lg font-bold text-secondary-900 transition-all hover:shadow-2xl hover:shadow-white/30 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-primary-900"
          >
            Get Started Today
            <svg class="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
            </svg>
          </a>
          <a
            href="/portfolio"
            class="inline-flex items-center justify-center rounded-xl border-2 border-white/30 bg-white/5 backdrop-blur-sm px-12 py-6 text-lg font-bold text-white transition-all hover:bg-white/10 hover:border-white/50 focus:outline-none focus:ring-2 focus:ring-white/50 focus:ring-offset-2 focus:ring-offset-primary-900"
          >
            <svg class="mr-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
            </svg>
            View Case Studies
          </a>
        </div>

        <!-- Contact info -->
        <div class="mt-16 pt-12 border-t border-white/10">
          <p class="text-secondary-300 mb-6">Prefer to reach out directly?</p>
          <div class="flex flex-wrap justify-center gap-8 text-white">
            <a href="mailto:admin@workroot.in" class="flex items-center gap-2 hover:text-primary-300 transition-colors">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
              </svg>
              <span class="font-semibold">admin@workroot.in</span>
            </a>
            <a href="tel:+919561417403" class="flex items-center gap-2 hover:text-primary-300 transition-colors">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
              </svg>
              <span class="font-semibold">+91 9561417403</span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>
</BaseLayout>

<style>
  /* Animation keyframes */
  @keyframes slide-up {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes pulse-slow {
    0%, 100% {
      opacity: 0.4;
    }
    50% {
      opacity: 0.6;
    }
  }

  @keyframes pulse-slower {
    0%, 100% {
      opacity: 0.2;
    }
    50% {
      opacity: 0.4;
    }
  }

  .animate-slide-up {
    animation: slide-up 0.8s ease-out forwards;
  }

  .animate-fade-in {
    animation: fade-in 0.8s ease-out forwards;
  }

  .animate-pulse-slow {
    animation: pulse-slow 4s ease-in-out infinite;
  }

  .animate-pulse-slower {
    animation: pulse-slower 6s ease-in-out infinite;
  }

  /* Stat counter animation */
  .stat-counter {
    font-variant-numeric: tabular-nums;
  }

  /* FAQ accordion styles */
  .faq-answer {
    transition: max-height 0.3s ease-out;
  }

  .faq-question[aria-expanded="true"] + .faq-answer {
    max-height: 500px;
  }

  .faq-question[aria-expanded="true"] .faq-icon {
    transform: rotate(180deg);
  }
</style>

<script>
  // Stats counter animation
  function animateCounters() {
    const counters = document.querySelectorAll('.stat-counter');
    const duration = 2000;

    counters.forEach((counter) => {
      const target = parseInt(counter.getAttribute('data-target') || '0');
      const suffix = counter.getAttribute('data-suffix') || '';
      const startTime = performance.now();

      function updateCounter(currentTime: number) {
        const elapsed = currentTime - startTime;
        const progress = Math.min(elapsed / duration, 1);
        const easeOutQuart = 1 - Math.pow(1 - progress, 4);
        const current = Math.floor(easeOutQuart * target);

        counter.textContent = current + suffix;

        if (progress < 1) {
          requestAnimationFrame(updateCounter);
        }
      }

      requestAnimationFrame(updateCounter);
    });
  }

  // Testimonials carousel
  function initCarousel() {
    const track = document.querySelector('.testimonial-track') as HTMLElement;
    const slides = document.querySelectorAll('.testimonial-slide');
    const dots = document.querySelectorAll('.carousel-dots button');
    const prevBtn = document.querySelector('.carousel-prev');
    const nextBtn = document.querySelector('.carousel-next');

    if (!track || slides.length === 0) return;

    let currentIndex = 0;
    let autoplayInterval: ReturnType<typeof setInterval>;
    const totalSlides = slides.length;
    const autoplayDelay = 6000;

    function goToSlide(index: number) {
      currentIndex = (index + totalSlides) % totalSlides;
      track.style.transform = `translateX(-${currentIndex * 100}%)`;

      dots.forEach((dot, i) => {
        if (i === currentIndex) {
          dot.classList.remove('bg-secondary-300', 'hover:bg-secondary-400', 'w-3');
          dot.classList.add('bg-primary', 'w-10');
        } else {
          dot.classList.add('bg-secondary-300', 'hover:bg-secondary-400', 'w-3');
          dot.classList.remove('bg-primary', 'w-10');
        }
      });
    }

    function nextSlide() {
      goToSlide(currentIndex + 1);
    }

    function prevSlide() {
      goToSlide(currentIndex - 1);
    }

    function startAutoplay() {
      autoplayInterval = setInterval(nextSlide, autoplayDelay);
    }

    function stopAutoplay() {
      clearInterval(autoplayInterval);
    }

    function resetAutoplay() {
      stopAutoplay();
      startAutoplay();
    }

    // Event listeners
    prevBtn?.addEventListener('click', () => {
      prevSlide();
      resetAutoplay();
    });

    nextBtn?.addEventListener('click', () => {
      nextSlide();
      resetAutoplay();
    });

    dots.forEach((dot, index) => {
      dot.addEventListener('click', () => {
        goToSlide(index);
        resetAutoplay();
      });
    });

    // Pause on hover
    track.addEventListener('mouseenter', stopAutoplay);
    track.addEventListener('mouseleave', startAutoplay);

    // Start autoplay
    startAutoplay();
  }

  // FAQ Accordion
  function initFAQ() {
    const faqButtons = document.querySelectorAll('.faq-question');

    faqButtons.forEach((button) => {
      button.addEventListener('click', () => {
        const isExpanded = button.getAttribute('aria-expanded') === 'true';

        // Close all FAQs
        faqButtons.forEach((btn) => {
          btn.setAttribute('aria-expanded', 'false');
        });

        // Toggle current FAQ
        if (!isExpanded) {
          button.setAttribute('aria-expanded', 'true');
        }
      });
    });
  }

  // Intersection Observer for counter animation
  const statsSection = document.querySelector('.stat-counter')?.closest('section');
  if (statsSection) {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            animateCounters();
            observer.disconnect();
          }
        });
      },
      { threshold: 0.3 }
    );
    observer.observe(statsSection);
  }

  // Initialize components
  initCarousel();
  initFAQ();

  // Smooth scroll for anchor links
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
      const href = this.getAttribute('href');
      if (href && href !== '#') {
        e.preventDefault();
        const target = document.querySelector(href);
        if (target) {
          target.scrollIntoView({
            behavior: 'smooth',
            block: 'start'
          });
        }
      }
    });
  });
</script>