---
// Home page - WorkRoot IT Solutions
import BaseLayout from '../layouts/BaseLayout.astro';
import SEO from '../components/SEO.astro';
import TrustStrip from '../components/TrustStrip.astro';
import InlineLeadForm from '../components/InlineLeadForm.astro';
import HomepageFaq from '../components/HomepageFaq.astro';
import ProofNumbers from '../components/ProofNumbers.astro';
import PricingTimelineBand from '../components/PricingTimelineBand.astro';
import GuaranteeBand from '../components/GuaranteeBand.astro';

// Services data — outcome-led headlines with anchor slugs that deep-link
// into the matching detail sections on /services.
const services = [
  {
    icon: 'code',
    slug: 'web-development',
    title: 'Web Development',
    outcome: 'Ship a fast, SEO-ready web product your customers actually convert on.',
    description: 'Angular, React, Next.js, Astro frontends backed by Spring Boot APIs — built for speed, scale, and search visibility.',
    features: ['Angular/React/Next.js', 'Spring Boot APIs', 'Astro Static Sites'],
    cta: 'Discuss your web project',
  },
  {
    icon: 'smartphone',
    slug: 'mobile-development',
    title: 'Mobile Apps',
    outcome: 'Launch on iOS and Android from a single codebase — without the native-team overhead.',
    description: 'Cross-platform React Native and Expo apps with offline-first sync, push notifications, and store-ready builds.',
    features: ['React Native / Expo', 'iOS & Android', 'Offline-First Apps'],
    cta: 'Discuss your mobile app',
  },
  {
    icon: 'brain',
    slug: 'erp-solutions',
    title: 'ERP & Enterprise Systems',
    outcome: 'Replace spreadsheets and ageing tools with one system your operations team trusts.',
    description: 'Custom ERP, CRM, and admin platforms designed around your real workflows — already running in universities and government bodies.',
    features: ['University Management', 'Police Management', 'Crematorium SCMS'],
    cta: 'Discuss your ERP project',
  },
  {
    icon: 'cloud',
    slug: 'government-systems',
    title: 'Government IT Solutions',
    outcome: 'Roll out secure, compliant platforms across districts without rewriting them for each one.',
    description: 'GeM-empanelled and already live across 11+ districts at 99.9% uptime — role-based access, audit trails, and the security public services demand.',
    features: ['Live in 11+ Districts', 'GeM-Empanelled & Compliant', '99.9% Uptime'],
    cta: 'Discuss your government project',
  },
];

// 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.
//
// `image` / `imageAlt`  — path to a static asset in /public/images/testimonials.
//   The current files are neutral SVG initial-avatars (see public/images/
//   testimonials/*.svg). They were generated as placeholders because we don't
//   yet have signed photo releases from these clients; swap in real headshots
//   (.jpg / .webp, ≥256×256) by replacing the file at the same path — no
//   template change needed.
// `initials`            — 2-letter fallback shown if the image fails to load
//                         (handled by an `onerror` swap in the template).
// `metric` / `metricLabel` — concrete, attributable outcome surfaced as a
//                         badge beside each quote. Numbers come from the
//                         delivered case studies referenced in the quote.
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',
    image: '/images/testimonials/ajay-pruthi.svg',
    imageAlt: 'Portrait of Ajay Pruthi, Founder of PLNR',
    initials: 'AP',
    metric: '3×',
    metricLabel: 'faster loan processing',
    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',
    image: '/images/testimonials/dhirendra-singh.svg',
    imageAlt: 'Portrait of Dhirendra Singh, Director of RENTEC',
    initials: 'DS',
    metric: '+42%',
    metricLabel: 'organic traffic in 90 days',
    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',
    image: '/images/testimonials/dilip-raj.svg',
    imageAlt: 'Portrait of Dilip Raj, Director of MOC Soft Technologies',
    initials: 'DR',
    metric: '12k+',
    metricLabel: 'students served at IIT Patna',
    rating: 5,
  },
];

// NOTE: The homepage stat band is rendered once by <ProofNumbers />, which
// holds the canonical site-wide proof set (20+ Projects · 11+ Districts ·
// 50,000+ Records · 8+ Years). The previously-duplicated "Numbers That
// Matter" stats section (and its local `stats` array + count-up script) was
// removed so a visitor never sees the same four numbers twice on one page.

// Technology stack data — relocated below the fold so social proof leads the
// hero. Each entry pairs the framework name with a short context line and a
// neutral monochrome SVG icon (uses currentColor so the grayscale →
// brand-color hover treatment is driven entirely by Tailwind utility classes).
const techStack = [
  {
    name: 'Angular',
    context: 'Enterprise front-ends',
    icon: '<svg viewBox="0 0 24 24" class="w-8 h-8" fill="currentColor" aria-hidden="true"><path d="M12 2.5 2.5 5.7l1.6 12 7.9 3.8 7.9-3.8 1.6-12L12 2.5Zm0 2.3 6.3 11.3h-1.9l-1.3-3.1H9l-1.3 3.1H5.7L12 4.8Zm-2.3 6.5h4.6L12 7.3l-2.3 4Z"/></svg>',
  },
  {
    name: 'Spring Boot',
    context: 'Backend APIs',
    icon: '<svg viewBox="0 0 24 24" class="w-8 h-8" fill="currentColor" aria-hidden="true"><path d="M21.6 4.2c-.4 1-1 1.9-1.5 2.7C18.4 4.5 15.4 3 12 3 6.5 3 2 7.5 2 13s4.5 10 10 10c5 0 9.1-3.7 9.9-8.5.5-2.4.1-5-1.3-7.4l1-2.9Zm-9.6 17c-4.6 0-8.4-3.8-8.4-8.4 0-3.4 2.1-6.4 5.1-7.7-1 1.6-1.7 3.4-2.1 5.3l-.1.6 1.1.4c2.4.8 4.8 1.8 7 3.6 1.4 1.1 2.4 2.6 2.8 4.3-1.4 1.2-3.3 1.9-5.4 1.9Zm6.3-2.5c-.8-2.5-3-4.8-6.5-6.5-1.2-.6-2.5-1.1-3.7-1.4.5-2.1 1.5-4 2.9-5.5 1.1-.1 2.2 0 3.3.4 1.8.6 3.4 1.8 4.6 3.4l-.2.3-.1.1c-.8 1.4-1.4 3-1.7 4.6-.5 1.7-.7 3.4-.5 4.6h1.9Z"/></svg>',
  },
  {
    name: 'Next.js',
    context: 'React SSR & ISR',
    icon: '<svg viewBox="0 0 24 24" class="w-8 h-8" fill="currentColor" aria-hidden="true"><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2Zm-.8 4.5h1.6v9.2H11.3l-3.5-5v5H6.2V6.5h1.5l3.5 5v-5Zm5.9 0h1.5v11h-1.5v-11Z"/></svg>',
  },
  {
    name: 'Astro',
    context: 'Marketing & docs sites',
    icon: '<svg viewBox="0 0 24 24" class="w-8 h-8" fill="currentColor" aria-hidden="true"><path d="M8.4 17.8c-.4-1.4-.5-2.7 0-3.4l.1-.1c.4 1.1 1.4 1.6 2.7 2 2 .6 2.6 1.4 1.8 3.1l-.1.2c-.6 1.1-1.8 2-2.6 2-.7 0-1.3-.5-1.6-1.4 0-.3-.1-.6-.1-1l-.2-1.4ZM14.8 2 18 13H6L9.2 2h5.6Zm-2.8 2.6L9.7 12h4.6L12 4.6Z"/></svg>',
  },
  {
    name: 'Golang',
    context: 'High-throughput services',
    icon: '<svg viewBox="0 0 24 24" class="w-8 h-8" fill="currentColor" aria-hidden="true"><path d="M2.4 11.6c-.1 0-.1 0 0 0-.1-.1-.1-.1 0-.2l.5-.6c.1-.1.2-.1.3-.1H7c.1 0 .1.1.1.2l-.4.5c-.1.1-.2.2-.3.2l-4 .1v-.1Zm-1.9 1.2c-.1 0-.1-.1 0-.2l.5-.6c.1-.1.2-.1.3-.1h5.4c.1 0 .2.1.1.2l-.2.5c-.1.1-.2.2-.3.2l-5.8 0Zm3.1 1.1c-.1 0-.1-.1 0-.2l.4-.5c.1-.1.2-.1.3-.1h2.4c.1 0 .2.1.2.2l-.1.5c0 .1-.1.2-.2.2l-3-.1Zm12.6-2.6c-.8.2-1.4.4-2.2.6-.2 0-.2 0-.4-.1-.2-.2-.3-.4-.6-.5-.8-.4-1.6-.3-2.4.2-.9.6-1.4 1.4-1.4 2.5 0 1 .7 1.9 1.7 2 .9.1 1.6-.2 2.2-.9.1-.2.2-.3.4-.5h-3.1c-.3 0-.4-.2-.3-.5l.4-.7c.1-.2.3-.3.5-.3h5.8c0 .1 0 .1 0 .2-.2 1.2-.7 2.2-1.5 3.1-1 1-2.3 1.7-3.7 1.8-2.5.3-4.7-.7-5.7-3-.8-1.9-.5-3.7.6-5.4 1.2-1.8 3-2.8 5.2-3.2 1.8-.3 3.5-.1 5 1 1.1.8 1.7 1.9 2 3.2 0 .2 0 .3-.3.3Zm3.5 5.4c-1.6 0-3-.5-4.2-1.7-1-1-1.6-2.2-1.7-3.6-.2-2.1.4-3.9 1.8-5.4 1.5-1.6 3.3-2.5 5.4-2.5 2 0 3.5.7 4.6 2.2.9 1.4 1.2 2.9 1 4.5-.4 3.7-3.2 6.2-6.9 6.5Zm3.9-6.6c0-.3-.1-.5-.1-.8-.2-1.4-1.4-2-2.7-1.7-1.3.3-2.1 1.1-2.4 2.4-.2 1.1.3 2.2 1.3 2.6.8.4 1.6.3 2.3-.2 1.1-.6 1.6-1.5 1.6-2.3Z"/></svg>',
  },
  {
    name: 'PostgreSQL',
    context: 'Production data layer',
    icon: '<svg viewBox="0 0 24 24" class="w-8 h-8" fill="currentColor" aria-hidden="true"><path d="M12 3c-3.3 0-6 1-6 2.3v13.5c0 1.3 2.7 2.3 6 2.3s6-1 6-2.3V5.3C18 4 15.3 3 12 3Zm0 1.5c2.9 0 5 .8 5 1.5s-2.1 1.5-5 1.5-5-.8-5-1.5 2.1-1.5 5-1.5Zm5 14.3c0 .7-2.1 1.5-5 1.5s-5-.8-5-1.5v-2.4c1.2.7 3 1.1 5 1.1s3.8-.4 5-1.1v2.4Zm0-4.6c0 .7-2.1 1.5-5 1.5s-5-.8-5-1.5v-2.4c1.2.7 3 1.1 5 1.1s3.8-.4 5-1.1v2.4Zm0-4.6c0 .7-2.1 1.5-5 1.5s-5-.8-5-1.5V7.7c1.2.7 3 1.1 5 1.1s3.8-.4 5-1.1v2.4Z"/></svg>',
  },
];

// FAQ content lives in <HomepageFaq />, which renders the only homepage FAQ
// section and emits the only FAQPage JSON-LD on this page. The duplicate
// "Common Questions" block that used to live above the tech-stack section
// was removed; its unique questions were merged into HomepageFaq's
// `moneyFaqs` array so no buyer-facing content was dropped.

// Quotable, self-contained company facts. Each sentence deliberately bundles
// the full company name + a concrete claim + a number so the line stays
// accurate and citable when lifted out of context (search snippets, press
// quotes, AI assistants). Every figure here is the canonical site-wide value
// and MUST stay identical to <ProofNumbers />, the hero trust badge, /about,
// and the /services pages. Do not change a number here without updating it
// everywhere it appears — mismatched stats reintroduce the credibility bug
// this canonical set was created to fix.
const companyFacts = [
  'WorkRoot IT Solutions was founded in 2022 and has delivered 20+ production software systems for startups, enterprises, and government bodies.',
  'WorkRoot IT Solutions runs government platforms across 11+ districts of Bihar, India, sustaining 99.9% uptime on mission-critical public services.',
  'WorkRoot IT Solutions manages 50,000+ live records across its government and enterprise deployments.',
  'WorkRoot IT Solutions built the University Management System for IIT Patna on a Next.js and Spring Boot stack.',
  'WorkRoot IT Solutions is empanelled on the Government e-Marketplace (GeM), making it eligible to bid on Indian government IT tenders.',
  'WorkRoot IT Solutions delivered a Police Management System that digitised FIRs and case tracking for 15,000+ officers across 11 districts of Bihar.',
  'WorkRoot IT Solutions is a senior in-house engineering team averaging 8+ years of experience per engineer.',
];

// Comparison table — custom software (WorkRoot) vs off-the-shelf ERP / SaaS.
// Mirrors the deeper table on /services/custom-erp-development, surfaced on the
// homepage so the core buying trade-off is framed before a late-stage visitor
// reaches the inline lead form. The final row carries the canonical
// "11+ districts · 99.9% uptime" proof point.
const comparison = [
  { dimension: 'Fit to your workflow', offShelf: 'You reshape your process to fit the software', custom: 'The software is built around your exact process' },
  { dimension: 'Source-code ownership', offShelf: 'Vendor-locked, closed source', custom: 'Full IP transfer on delivery — you own the code' },
  { dimension: 'Licensing cost', offShelf: 'Recurring per-seat fees that grow with headcount', custom: 'One-time build — no per-seat licence tax' },
  { dimension: 'Data residency', offShelf: 'The vendor’s cloud and region', custom: 'Your servers, your region, your control' },
  { dimension: 'Proven at scale', offShelf: 'Generic, one-size-fits-all', custom: 'Live across 11+ districts at 99.9% uptime' },
];
---

<BaseLayout
  title="Home"
  description="WorkRoot IT Solutions builds production-grade web, mobile, ERP, and government IT systems. 20+ projects delivered across 11+ districts with 99.9% uptime."
>
  <SEO
    slot="head"
    type="WebPage"
  />

  <!-- Hero Section - Enhanced -->
  <section class="relative lg:min-h-[85vh] 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>

    <!-- Full-bleed hero content: the <section> gradient already spans the full
         viewport; this wrapper stretches edge-to-edge (no max-width cap) with
         responsive horizontal padding so the copy + lead form stay padded and
         readable from 360px up to ultra-wide displays. -->
    <div class="w-full px-4 sm:px-6 lg:px-8 xl:px-12 relative z-10 py-14 sm:py-20 lg:py-32">
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">
        <!-- Left column — copy + CTAs -->
        <div class="text-center lg:text-left">
        <!-- 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 by 20+ teams · Deployed across 11+ districts</span>
        </div>

        <!-- Main heading — benefit-led: outcome + audience -->
        <h1 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold text-white leading-[1.1] tracking-tight">
          <span class="block opacity-0 animate-slide-up" style="animation-delay: 0.2s;">Custom Software That</span>
          <span class="block opacity-0 animate-slide-up" style="animation-delay: 0.4s;">Powers <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary-400 via-primary-300 to-accent-400">Enterprises &amp; Governments</span></span>
        </h1>

        <p class="mt-6 text-lg sm:text-xl text-secondary-200 max-w-xl mx-auto lg:mx-0 opacity-0 animate-slide-up leading-relaxed" style="animation-delay: 0.6s;">
          We design, build, and run production-grade web, mobile, and ERP systems for startups, enterprises, and government bodies.
        </p>

        <!-- Dual CTA Buttons — action verb + clear secondary -->
        <div class="mt-8 sm:mt-10 flex flex-col sm:flex-row sm:flex-wrap justify-center lg:justify-start gap-3 sm:gap-4 opacity-0 animate-slide-up" style="animation-delay: 0.8s;">
          <a
            href="/contact?source=hero"
            data-cta="hero-primary"
            class="group inline-flex w-full sm:w-auto items-center justify-center rounded-xl bg-gradient-to-r from-primary-500 to-primary-600 px-8 sm:px-10 py-4 sm:py-5 text-lg font-bold text-white transition-all hover:shadow-2xl hover:shadow-primary/50 sm:hover:scale-105 focus:outline-none focus:ring-2 focus:ring-primary-400 focus:ring-offset-2 focus:ring-offset-secondary-900"
          >
            Get my free proposal
            <svg class="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
            </svg>
          </a>
          <a
            href="/portfolio"
            data-cta="hero-secondary"
            class="group inline-flex w-full sm:w-auto items-center justify-center rounded-xl border-2 border-white/30 bg-white/5 backdrop-blur-sm px-8 sm:px-10 py-4 sm: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" aria-hidden="true">
              <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>
            See 20+ case studies
          </a>
        </div>

        <!-- Named-client credibility line — concrete, attributable social
             proof sitting directly under the primary CTAs so a visitor sees
             WHO we've delivered for above the fold, not just generic trust
             adjectives. Names mirror the client roster in the TrustStrip logo
             bar immediately below the hero (see TrustStrip.astro). -->
        <p
          class="mt-6 flex flex-wrap items-center justify-center lg:justify-start gap-x-2 gap-y-1 text-sm sm:text-base text-secondary-200 opacity-0 animate-slide-up"
          style="animation-delay: 0.85s;"
          aria-label="Selected clients"
        >
          <svg class="w-4 h-4 flex-shrink-0 text-accent-400" 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>
            Trusted by
            <span class="font-semibold text-white">IIT Patna</span>,
            <span class="font-semibold text-white">PLNR</span>,
            <span class="font-semibold text-white">RENTEC</span> &amp;
            <span class="font-semibold text-white">MOC Soft</span>
            <span class="text-secondary-300">— 20+ systems delivered across enterprise &amp; government teams.</span>
          </span>
        </p>

        <!-- Tertiary click-to-call — one-tap dial for visitors who'd rather
             talk now. Min 48px tap target per WCAG 2.5.5 / Apple HIG. -->
        <p class="mt-6 text-base sm:text-lg text-secondary-200 opacity-0 animate-slide-up flex flex-wrap items-center justify-center lg:justify-start gap-x-2 gap-y-1" style="animation-delay: 0.9s;">
          <span>Prefer to talk now?</span>
          <a
            href="tel:+919561417403"
            data-cta="hero-call"
            aria-label="Call WorkRoot at +91 95614 17403"
            class="inline-flex min-h-[48px] items-center gap-2 rounded-lg px-2 font-semibold text-white underline decoration-primary-400/60 underline-offset-4 transition-colors hover:text-primary-200 hover:decoration-primary-300 focus:outline-none focus:ring-2 focus:ring-primary-400 focus:ring-offset-2 focus:ring-offset-secondary-900"
          >
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <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" />
            </svg>
            +91 95614 17403
          </a>
        </p>

        <!-- Micro-trust line under CTAs -->
        <p class="mt-6 text-sm sm:text-base text-secondary-300 opacity-0 animate-slide-up flex flex-wrap items-center justify-center lg:justify-start gap-x-3 gap-y-2" style="animation-delay: 0.95s;" aria-label="Trust signals">
          <span class="inline-flex items-center gap-2">
            <svg class="w-4 h-4 text-accent-400" 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>
            Free 30-min discovery call
          </span>
          <span class="hidden sm:inline text-secondary-500" aria-hidden="true">·</span>
          <span>Reply within 1 business day</span>
          <span class="hidden sm:inline text-secondary-500" aria-hidden="true">·</span>
          <span>No commitment</span>
        </p>
        </div>
        <!-- /Left column -->

        <!-- Right column — framed dashboard mock so the hero leads with a
             concrete product visual, not text alone. The image is a polished
             placeholder UI (public/images/product-dashboard.svg); swap in a
             real product screenshot or screen-recording poster frame
             (≥1200×720, .webp/.png) at the same path — no template change
             needed. Explicit width/height keep CLS at zero while it loads. -->
        <figure class="mt-4 lg:mt-0 w-full max-w-xl mx-auto lg:mx-0 lg:ml-auto opacity-0 animate-slide-up" style="animation-delay: 1s;">
          <div class="relative rounded-2xl border border-white/15 bg-white/5 backdrop-blur-sm shadow-2xl shadow-primary/20 overflow-hidden">
            <!-- Glow behind the frame -->
            <div class="absolute -inset-px rounded-2xl bg-gradient-to-tr from-primary-500/10 via-transparent to-accent-400/10 pointer-events-none" aria-hidden="true"></div>
            <!-- Browser chrome -->
            <div class="flex items-center gap-2 px-4 py-3 border-b border-white/10 bg-white/5" aria-hidden="true">
              <span class="w-3 h-3 rounded-full bg-red-400/80"></span>
              <span class="w-3 h-3 rounded-full bg-accent-400/80"></span>
              <span class="w-3 h-3 rounded-full bg-green-400/80"></span>
              <span class="ml-4 inline-flex items-center h-6 px-3 rounded-md bg-white/10 text-xs text-secondary-300 font-medium">app.workroot.in/dashboard</span>
            </div>
            <img
              src="/images/product-dashboard.svg"
              alt="WorkRoot project dashboard preview — delivery metrics, activity timeline, and deployment overview"
              width="1200"
              height="720"
              loading="eager"
              decoding="async"
              class="block w-full h-auto"
            />
          </div>
        </figure>

      </div>
    </div>

    <!-- Scroll indicator — points at the TrustStrip social-proof strip just
         below the hero so the first interaction surface is trust, not stack. -->
    <div class="absolute bottom-8 left-1/2 -translate-x-1/2 opacity-0 animate-fade-in" style="animation-delay: 1s;">
      <a href="#trust-strip" class="flex flex-col items-center text-white/60 hover:text-white transition-colors group" aria-label="Scroll to client logos">
        <span class="text-sm mb-2">See who we work with</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>

  <!-- Trust Strip — single-row, grayscale-on-default / colour-on-hover
       row of client + partner logos. Replaces the older ClientLogos grid:
       see src/components/TrustStrip.astro for the rationale (sr-only
       "Trusted by" heading, explicit width/height on every <img> for CLS,
       3+3 mobile layout, dark-mode invert filter). The wrapper div
       preserves the legacy `#client-logos` anchor for any external
       deep-links / analytics callers that still target it. -->
  <div id="client-logos">
    <TrustStrip />
  </div>

  <!-- Proof Numbers Band — replaces the older "Why Choose Us" benefits grid.
       Leads with hard, scannable numbers instead of soft adjectives so the
       first below-the-fold surface is concrete proof, not generic copy. -->
  <ProofNumbers />

  <!-- 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-3">{service.title}</h3>
              <p class="text-lg font-semibold text-primary-700 dark:text-primary-300 mb-4 leading-snug">{service.outcome}</p>
              <p class="text-secondary-600 dark:text-secondary-400 text-base 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>

              <!-- Per-service CTAs — a primary conversion link that routes
                   straight to the contact/quote form (tagged per service so
                   the lead source is attributable), plus a secondary
                   "Learn more" link into the matching /services detail
                   section for visitors who want depth before they reach out. -->
              <div class="mt-7 flex flex-wrap items-center gap-x-6 gap-y-3">
                <a
                  href={`/contact?source=service-${service.slug}`}
                  data-cta={`service-${service.slug}`}
                  class="inline-flex items-center rounded-xl bg-primary-50 dark:bg-primary-900/30 px-5 py-3 text-base font-bold text-primary-700 dark:text-primary-300 transition-all hover:bg-primary-100 dark:hover:bg-primary-900/50 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-primary-400 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-secondary-800"
                  aria-label={`${service.cta} — get a free quote`}
                >
                  <span>{service.cta}</span>
                  <svg class="w-5 h-5 ml-2 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                  </svg>
                </a>
                <a
                  href={`/services#${service.slug}`}
                  class="inline-flex items-center text-secondary-500 dark:text-secondary-400 font-semibold hover:text-primary-600 dark:hover:text-primary-300 transition-colors focus:outline-none focus:underline"
                  aria-label={`Learn more about ${service.title}`}
                >
                  <span>Learn more</span>
                </a>
              </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>

  <!-- Mid-page Conversion CTA — sits directly after the Services section so
       mobile visitors hit the funnel early instead of having to scroll past
       How-It-Works, testimonials, the tech stack and the FAQ to reach the
       inline lead form. Primary action jumps straight to the on-page inline
       lead form (#inline-lead-form, smooth-scrolled by the anchor handler at
       the bottom of this page); secondary action is a one-tap phone call. -->
  <section
    aria-labelledby="midpage-cta-heading"
    class="bg-gradient-to-r from-primary-600 to-primary-700 dark:from-primary-700 dark:to-primary-800"
  >
    <div class="container-wrapper py-10 sm:py-12">
      <div class="flex flex-col items-center gap-5 text-center md:flex-row md:justify-between md:text-left md:gap-8 max-w-5xl mx-auto">
        <div class="md:flex-1">
          <h2 id="midpage-cta-heading" class="text-2xl sm:text-3xl font-bold text-white leading-tight">
            Have a project in mind? Get a free proposal in 24 hours.
          </h2>
          <p class="mt-2 text-primary-100 text-sm sm:text-base">
            No obligation · Free 30-min discovery call · NDA on request.
          </p>
        </div>
        <div class="flex w-full flex-col sm:flex-row md:w-auto md:flex-shrink-0 gap-3">
          <a
            href="#inline-lead-form"
            data-cta="midpage-primary"
            class="inline-flex items-center justify-center rounded-xl bg-white px-7 py-4 text-base font-bold text-primary-700 shadow-lg transition-all hover:bg-primary-50 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-primary-700"
          >
            Get my free proposal
            <svg class="ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
            </svg>
          </a>
          <a
            href="tel:+919561417403"
            data-cta="midpage-call"
            class="inline-flex items-center justify-center rounded-xl border-2 border-white/40 bg-white/5 px-7 py-4 text-base font-bold text-white transition-all hover:bg-white/15 hover:border-white/60 focus:outline-none focus:ring-2 focus:ring-white/60 focus:ring-offset-2 focus:ring-offset-primary-700"
          >
            <svg class="mr-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <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" />
            </svg>
            Call now
          </a>
        </div>
      </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?source=process" data-cta="process-cta" 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">
          Get my free proposal
          <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>

  <!-- 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-8 sm:p-12 lg:p-14 border-2 border-secondary-100 dark:border-secondary-700 shadow-xl">
                  <!-- Header row: stars on the left, metric badge on the right.
                       On mobile (<640px) the badge wraps under the stars so the
                       layout stays clean at 360px. -->
                  <div class="flex flex-wrap items-start justify-between gap-4 mb-6">
                    <!-- Star rating -->
                    <div class="flex gap-1" 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>

                    <!-- Metric badge — concrete outcome from this engagement.
                         Uses primary brand palette in light mode and a softer
                         tinted background in dark mode for readability. -->
                    {testimonial.metric && (
                      <div class="inline-flex items-center gap-3 rounded-2xl bg-primary-50 dark:bg-primary-900/30 border border-primary-200 dark:border-primary-700/50 px-4 py-2 shadow-sm">
                        <span class="text-2xl sm:text-3xl font-extrabold text-primary-700 dark:text-primary-300 leading-none tracking-tight">{testimonial.metric}</span>
                        <span class="text-xs sm:text-sm font-medium text-secondary-700 dark:text-secondary-300 leading-tight max-w-[10rem]">{testimonial.metricLabel}</span>
                      </div>
                    )}
                  </div>

                  <!-- Quote icon -->
                  <svg class="w-12 h-12 sm:w-16 sm: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-xl sm:text-2xl lg:text-3xl text-secondary-800 dark:text-secondary-200 font-medium leading-relaxed mb-10">
                    "{testimonial.quote}"
                  </blockquote>

                  <!-- Author block: stacks under-quote with avatar + name/role. -->
                  <div class="flex items-center gap-5">
                    <div class="relative w-14 h-14 sm:w-16 sm:h-16 rounded-full shadow-lg ring-2 ring-white dark:ring-secondary-700 overflow-hidden flex-shrink-0 bg-gradient-to-br from-primary-500 to-primary-600">
                      <!-- Initials fallback rendered behind the image. If the
                           img 404s or fails to decode, removing it via onerror
                           reveals these initials so the slot is never blank. -->
                      <span class="absolute inset-0 flex items-center justify-center text-white font-bold text-lg sm:text-xl select-none" aria-hidden="true">
                        {testimonial.initials}
                      </span>
                      <img
                        src={testimonial.image}
                        alt={testimonial.imageAlt}
                        width="64"
                        height="64"
                        loading="lazy"
                        decoding="async"
                        class="relative w-full h-full object-cover"
                        onerror="this.style.display='none'"
                      />
                    </div>
                    <div class="min-w-0">
                      <div class="font-bold text-secondary-900 dark:text-secondary-100 text-base sm:text-lg truncate">{testimonial.author}</div>
                      <div class="text-sm sm:text-base text-secondary-600 dark:text-secondary-400 truncate">{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>

  <!-- Company Facts + Comparison — extractable, self-contained statements
       that bundle the WorkRoot name with a concrete claim and a number so each
       line stays accurate when quoted out of context (search snippets, press,
       AI assistants). Followed by a custom-vs-off-the-shelf comparison table so
       the buying trade-off is framed in one glance. Every figure matches the
       canonical set in <ProofNumbers />. -->
  <section
    id="company-facts"
    class="py-24 bg-white dark:bg-secondary-900 border-t border-secondary-100 dark:border-secondary-800"
    aria-labelledby="company-facts-heading"
  >
    <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-primary-50 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 text-sm font-bold uppercase tracking-wider mb-4">The facts</span>
        <h2 id="company-facts-heading" class="text-4xl sm:text-5xl font-bold text-secondary-900 dark:text-secondary-100 mb-6">WorkRoot at a glance</h2>
        <p class="text-xl text-secondary-600 dark:text-secondary-400">
          The record behind the work, stated plainly — so you know exactly who you're hiring.
        </p>
      </div>

      <ul class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-5 max-w-5xl mx-auto mb-20" role="list">
        {companyFacts.map((fact, index) => (
          <li
            class="flex items-start gap-4 bg-secondary-50 dark:bg-secondary-800/60 rounded-2xl border border-secondary-100 dark:border-secondary-700 p-5 sm:p-6"
            data-animate="fade-up"
            data-delay={String((index % 2) * 100)}
          >
            <span class="flex-shrink-0 w-10 h-10 rounded-xl bg-primary-100 dark:bg-primary-900/40 flex items-center justify-center" aria-hidden="true">
              <svg class="w-6 h-6 text-primary-600 dark:text-primary-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
            </span>
            <p class="text-base sm:text-lg text-secondary-800 dark:text-secondary-200 leading-relaxed">{fact}</p>
          </li>
        ))}
      </ul>

      <!-- Comparison table: custom build vs off-the-shelf. Reuses the markup
           pattern from /services/custom-erp-development for visual consistency. -->
      <div class="max-w-4xl mx-auto" data-animate="fade-up">
        <div class="text-center mb-8">
          <h3 class="text-2xl sm:text-3xl font-bold text-secondary-900 dark:text-secondary-100 mb-3">Custom software vs off-the-shelf ERP</h3>
          <p class="text-secondary-600 dark:text-secondary-400 text-base sm:text-lg">Where a bespoke WorkRoot build pays you back over a packaged SaaS tool.</p>
        </div>
        <div class="overflow-x-auto rounded-2xl border border-secondary-200 dark:border-secondary-700 shadow-sm">
          <table class="w-full text-left border-collapse min-w-[640px]">
            <caption class="sr-only">Comparison of off-the-shelf ERP software versus custom software built by WorkRoot IT Solutions</caption>
            <thead>
              <tr class="bg-secondary-50 dark:bg-secondary-800">
                <th scope="col" class="px-5 py-4 text-sm font-bold text-secondary-700 dark:text-secondary-200">Dimension</th>
                <th scope="col" class="px-5 py-4 text-sm font-bold text-secondary-500 dark:text-secondary-400">Off-the-shelf ERP</th>
                <th scope="col" class="px-5 py-4 text-sm font-bold text-primary-700 dark:text-primary-300">Custom software (WorkRoot)</th>
              </tr>
            </thead>
            <tbody>
              {comparison.map((row, i) => (
                <tr class={i % 2 === 0 ? 'bg-white dark:bg-secondary-900' : 'bg-secondary-50/50 dark:bg-secondary-800/40'}>
                  <th scope="row" class="px-5 py-4 text-sm font-semibold text-secondary-900 dark:text-secondary-100 align-top">{row.dimension}</th>
                  <td class="px-5 py-4 text-sm text-secondary-600 dark:text-secondary-400 align-top">{row.offShelf}</td>
                  <td class="px-5 py-4 text-sm text-secondary-700 dark:text-secondary-200 align-top font-medium">
                    <span class="inline-flex items-start gap-2">
                      <svg class="w-4 h-4 mt-0.5 flex-shrink-0 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>
                      {row.custom}
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </section>

  <!-- Technologies We Work With — relocated from the hero so social proof
       leads above the fold. Kept intentionally subdued (border-only cards,
       neutral grayscale icons) so it reads as supporting context rather than
       competing with the client-logo trust strip up top. -->
  <section id="tech-stack" class="py-20 sm:py-24 bg-secondary-50 dark:bg-secondary-900/60 border-y border-secondary-100 dark:border-secondary-800">
    <div class="container-wrapper">
      <div class="text-center max-w-3xl mx-auto mb-12 sm:mb-16" data-animate="fade-up">
        <span class="inline-block px-4 py-2 rounded-full bg-secondary-100 dark:bg-secondary-800 text-secondary-700 dark:text-secondary-300 text-xs sm:text-sm font-bold uppercase tracking-wider mb-4">Tech Stack</span>
        <h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-secondary-900 dark:text-secondary-100 mb-4 sm:mb-6">Technologies we work with</h2>
        <p class="text-base sm:text-xl text-secondary-600 dark:text-secondary-400">
          Battle-tested frameworks and runtimes we ship to production across enterprise, university, and government deployments.
        </p>
      </div>

      <ul
        class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3 sm:gap-4 max-w-6xl mx-auto"
        role="list"
        aria-label="Technologies we work with"
      >
        {techStack.map((tech, index) => (
          <li
            class="group flex flex-col items-center justify-center text-center gap-2 sm:gap-3 rounded-2xl border border-secondary-200 dark:border-secondary-700 bg-white dark:bg-secondary-800/70 px-3 py-5 sm:px-4 sm:py-6 min-w-0 transition-all duration-300 hover:-translate-y-1 hover:border-primary-300 hover:shadow-lg dark:hover:border-primary-500/60 focus-within:ring-2 focus-within:ring-primary-400"
            data-animate="fade-up"
            data-delay={String(index * 60)}
          >
            <span
              class="text-secondary-400 dark:text-secondary-500 group-hover:text-primary-500 dark:group-hover:text-primary-400 transition-colors"
              aria-hidden="true"
              set:html={tech.icon}
            />
            <span class="text-sm sm:text-base font-semibold text-secondary-800 dark:text-secondary-100 leading-tight break-words">
              {tech.name}
            </span>
            <span class="text-[11px] sm:text-xs uppercase tracking-wider text-secondary-500 dark:text-secondary-400 leading-tight">
              {tech.context}
            </span>
          </li>
        ))}
      </ul>

      <p class="text-center text-sm text-secondary-500 dark:text-secondary-400 mt-10 sm:mt-12">
        Also working with <span class="font-semibold text-secondary-700 dark:text-secondary-200">React Native</span>, <span class="font-semibold text-secondary-700 dark:text-secondary-200">MySQL</span>, <span class="font-semibold text-secondary-700 dark:text-secondary-200">Docker</span>, and <span class="font-semibold text-secondary-700 dark:text-secondary-200">GitHub Actions</span> — <a href="/services" class="text-primary-600 dark:text-primary-400 font-semibold hover:underline">see the full stack &rarr;</a>
      </p>
    </div>
  </section>

  <!-- Pricing + Timeline Band — sits directly above the inline lead form
       so late-stage visitors get the two answers they need (rough price
       and rough duration) BEFORE filling in the form. Anchor
       `#pricing-timeline` is referenced by the mobile sticky CTA bar /
       nav for deep-linking. Placeholder values inside the component are
       flagged with `data-stakeholder-confirm` markers + HTML comments. -->
  <PricingTimelineBand />

  <!-- Risk-reversal Guarantee Band — three short promises (satisfaction
       guarantee, no long-term contracts, fixed-price quotes) wedged
       between the pricing/timeline values and the lead form. Removes
       last-mile objections at the exact moment the visitor is deciding
       whether to commit to the form below. Anchor `#guarantees`. -->
  <GuaranteeBand />

  <!-- Inline Lead Form — sits between the tech-stack social-proof block
       and the final CTA band so visitors who are ready to start a project can
       submit a compact enquiry (name, email, phone, project type, message)
       without leaving the homepage. Required fields are kept to name + email +
       project type for a low-friction mobile flow. Submits to the same
       /api/contact endpoint and is tagged `source: 'homepage-inline'` so the
       lead can be segmented downstream. -->
  <InlineLeadForm />

  <!-- Homepage FAQ — single canonical FAQ section for /. Covers the cost /
       timeline / NDA / IP / GeM / stack questions buyers ask right before
       converting, plus the process / support / team-augmentation / security
       questions that used to live in the now-removed "Common Questions"
       block. Sits between the inline lead form and the final CTA band so
       late-stage objections are resolved before the visitor hits the final
       call-to-action. Emits the only FAQPage JSON-LD on this page. -->
  <HomepageFaq />

  <!-- 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 ship in <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary-300 to-accent-400">8 weeks</span> instead of 8 months?
        </h2>
        <p class="text-xl sm:text-2xl text-secondary-200 mb-10 max-w-2xl mx-auto leading-relaxed">
          Tell us about your project and we'll send back a free, no-obligation scope and timeline within one business day.
        </p>

        <!-- What you'll get — reduces signup friction -->
        <ul class="flex flex-wrap justify-center gap-x-6 gap-y-3 mb-10 text-secondary-200 text-sm sm:text-base" aria-label="What you get when you reach out">
          <li class="inline-flex items-center gap-2">
            <svg class="w-5 h-5 text-accent-400" 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>
            Free 30-min discovery call
          </li>
          <li class="inline-flex items-center gap-2">
            <svg class="w-5 h-5 text-accent-400" 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>
            Fixed-price scope &amp; timeline
          </li>
          <li class="inline-flex items-center gap-2">
            <svg class="w-5 h-5 text-accent-400" 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>
            NDA on request
          </li>
        </ul>

        <div class="flex flex-wrap justify-center gap-6">
          <a
            href="/contact?source=final-cta"
            data-cta="final-primary"
            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 my free proposal
            <svg class="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <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"
            data-cta="final-secondary"
            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" aria-hidden="true">
              <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>
            See 20+ 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;
  }

  /* (FAQ accordion styles moved into <HomepageFaq />, which now renders the
     only homepage FAQ section.) */
</style>

<script>
  // 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 script moved into <HomepageFaq />, which now renders the
  // only homepage FAQ section and ships its own inline init.)

  function bootHomepageScripts() {
    initCarousel();
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', bootHomepageScripts);
  } else {
    bootHomepageScripts();
  }

  // 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>