CompanySite/src/components/HomepageFaq.astro

---
// HomepageFaq — single homepage FAQ section rendered just above the final
// CTA band. Covers both buyer-stage objections (cost, timeline, NDA, IP, GeM,
// stack) and the process/support/security questions that used to live in the
// older "Common Questions" block higher up the page. That earlier block was
// removed to avoid a duplicate FAQ rendering and a duplicate FAQPage JSON-LD
// emission — this component is now the canonical homepage FAQ.
//
// Emits a single FAQPage JSON-LD inline (below) for rich-result eligibility.
//
// Accessibility:
//   - Each question is a real <button> with aria-expanded toggled in JS.
//   - aria-controls links to the answer region; the region has role="region"
//     and aria-labelledby pointing back to the question.
//   - Max-height transition has no layout shift on load — answers are
//     collapsed (max-height:0) server-side and only the rotating chevron
//     animates.
//   - Keyboard: native <button> handles Enter & Space; Tab moves between
//     items. No custom key handling needed.

// Each answer is written as a definitive, self-contained paragraph: it can be
// read (or quoted) in isolation without the question for context, and the
// buyer-stage answers bundle the WorkRoot name with the canonical numbers
// (founded 2022 · 20+ projects · 11+ districts · 50,000+ records · 99.9%
// uptime · GeM · IIT Patna). Keep every figure identical to <ProofNumbers />
// and the homepage `companyFacts` set — the visible text below is also the
// source for the FAQPage JSON-LD emitted at the bottom of this component.
const moneyFaqs = [
  {
    question: 'How much does a project cost? Do you work with fixed budgets?',
    answer:
      'WorkRoot IT Solutions projects start from ₹1,00,000, and most web, mobile, and ERP builds land between ₹2,00,000 and ₹15,00,000 depending on scope. Yes — we work with fixed budgets: tell us the number you have in mind and we will scope exactly what we can deliver within it. Every quote is free, itemised, and carries no obligation.',
  },
  {
    question: 'How much does a custom ERP cost?',
    answer:
      'A custom ERP from WorkRoot IT Solutions typically runs ₹2,00,000–₹15,00,000, with a genuinely production-grade single-department system starting around ₹6,00,000. We offer fixed-price quotes for well-defined scopes and time-and-materials pricing for evolving ones, and every estimate is free and itemised.',
  },
  {
    question: 'What is your typical timeline?',
    answer:
      'Most WorkRoot IT Solutions engagements run 4–16 weeks from kickoff to launch, and a typical MVP ships in about 6 weeks. We work in 2-week sprints with a live staging environment from day one, so you see and steer working software early rather than waiting for a single big-bang release.',
  },
  {
    question: 'Do you sign NDAs?',
    answer:
      'Yes. WorkRoot IT Solutions signs a mutual NDA before any detailed discussion of your idea, data, or codebase — at no cost and with no conditions attached. Your concept and commercial details stay confidential from the very first call.',
  },
  {
    question: 'Who owns the source code?',
    answer:
      'You do. Every WorkRoot IT Solutions engagement includes full intellectual-property transfer on delivery: you receive the complete source repositories, deployment access, and documentation, with no per-seat licence fees and no vendor lock-in. You are free to host, extend, or hand the system to another team at any time.',
  },
  {
    question: 'Do you work with government tenders / GeM?',
    answer:
      'Yes. WorkRoot IT Solutions is empanelled on the Government e-Marketplace (GeM) for relevant IT service categories and can respond to government tenders. We have delivered public-service platforms live across 11+ districts of Bihar at 99.9% uptime, including a Police Management System and a Smart Crematorium Management System for the Bihar Government.',
  },
  {
    question: 'What technologies do you work with?',
    answer:
      'WorkRoot IT Solutions builds on Astro, Next.js, Angular, and React Native on the front end; Spring Boot, Go, and Node.js on the back end; and PostgreSQL or MySQL for data — the same stack behind the IIT Patna University Management System and our multi-district government deployments, all deployed and operated on the AWS and GCP cloud.',
  },
  {
    question: 'Do you offer ongoing support after launch?',
    answer:
      'Yes. WorkRoot IT Solutions offers maintenance packages covering bug fixes, security patches, performance monitoring, and feature enhancements, each with a response SLA matched to your uptime needs — the same operational discipline that keeps our government systems running at 99.9% uptime.',
  },
  {
    question: 'What is your development process?',
    answer:
      'WorkRoot IT Solutions works in Agile 2-week sprints with weekly check-ins and a live staging environment from day one. You see working software early and steer the roadmap as it ships, rather than waiting for a single final handover at the end of the project.',
  },
  {
    question: 'Can you work with our existing team?',
    answer:
      'Absolutely. WorkRoot IT Solutions augments in-house teams as readily as it delivers fully managed builds, adapting to your repository, branch strategy, ticketing system, and code-review process so we slot into the way your team already works.',
  },
  {
    question: 'How do you ensure project security?',
    answer:
      'Security is built into every phase at WorkRoot IT Solutions: OWASP-aligned code reviews, encrypted data at rest and in transit, role-based access control, regular dependency audits, and GDPR- and SOC 2-style controls where a project demands them. The same architecture secures a Bihar government police platform deployed across 11 districts.',
  },
];

// FAQPage JSON-LD — emitted inline so the schema travels with the component.
// This is the ONLY FAQPage emitted on the homepage; the site-wide <SEO>
// no longer receives a `faq` prop on / so Google sees exactly one valid
// FAQPage with every visible Q&A pair.
const faqPageSchema = {
  '@context': 'https://schema.org',
  '@type': 'FAQPage',
  '@id': 'https://workroot.in/#homepage-money-faq',
  mainEntity: moneyFaqs.map((item) => ({
    '@type': 'Question',
    name: item.question,
    acceptedAnswer: {
      '@type': 'Answer',
      text: item.answer,
    },
  })),
};
---

<section
  id="homepage-money-faq"
  class="py-20 sm:py-24 bg-secondary-50 dark:bg-secondary-950 border-t border-secondary-100 dark:border-secondary-800"
  aria-labelledby="homepage-money-faq-heading"
>
  <div class="container-wrapper">
    <div class="max-w-3xl mx-auto">
      <!-- Section heading -->
      <div class="text-center mb-12 sm:mb-16" data-animate="fade-up">
        <span
          class="inline-block px-4 py-2 rounded-full bg-accent-50 dark:bg-accent-900/30 text-accent-700 dark:text-accent-300 text-xs sm:text-sm font-bold uppercase tracking-wider mb-4"
        >
          Before you reach out
        </span>
        <h2
          id="homepage-money-faq-heading"
          class="text-3xl sm:text-4xl lg:text-5xl font-bold text-secondary-900 dark:text-secondary-100 mb-4 leading-tight"
        >
          Frequently asked questions
        </h2>
        <p class="text-base sm:text-lg text-secondary-600 dark:text-secondary-300">
          Quick answers on cost, timelines, ownership, our process, support, security, and the stack we ship.
        </p>
      </div>

      <!-- Accordion list -->
      <ul class="space-y-3 sm:space-y-4" role="list">
        {
          moneyFaqs.map((item, index) => (
            <li
              class="bg-white dark:bg-secondary-800 rounded-2xl border border-secondary-200 dark:border-secondary-700 hover:border-primary-300 dark:hover:border-primary-500/60 shadow-sm transition-colors duration-200 overflow-hidden"
            >
              <button
                type="button"
                class="money-faq-question w-full text-left px-5 sm:px-7 py-5 sm:py-6 flex items-start justify-between gap-4 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-400 focus-visible:ring-offset-2 focus-visible:ring-offset-secondary-50 dark:focus-visible:ring-offset-secondary-950 rounded-2xl"
                aria-expanded="false"
                aria-controls={`money-faq-answer-${index}`}
                id={`money-faq-question-${index}`}
                data-money-faq-index={index}
              >
                <span class="font-semibold text-base sm:text-lg text-secondary-900 dark:text-secondary-100 leading-snug">
                  {item.question}
                </span>
                <svg
                  class="money-faq-icon w-5 h-5 sm:w-6 sm:h-6 mt-0.5 sm:mt-1 text-primary-500 dark:text-primary-400 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"
                  />
                </svg>
              </button>
              <div
                class="money-faq-answer grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 ease-out"
                id={`money-faq-answer-${index}`}
                role="region"
                aria-labelledby={`money-faq-question-${index}`}
              >
                <div class="overflow-hidden">
                  <p class="px-5 sm:px-7 pb-5 sm:pb-6 -mt-1 text-sm sm:text-base text-secondary-600 dark:text-secondary-300 leading-relaxed">
                    {item.answer}
                  </p>
                </div>
              </div>
            </li>
          ))
        }
      </ul>

      <!-- Soft secondary CTA — links to the contact page for visitors whose
           question wasn't covered. Avoids competing with the final CTA band
           below. -->
      <p class="text-center text-sm sm:text-base text-secondary-600 dark:text-secondary-400 mt-10 sm:mt-12">
        Have a different question?{' '}
        <a
          href="/contact?source=homepage-money-faq"
          class="font-semibold text-primary-600 dark:text-primary-300 hover:underline"
        >
          Ask us directly &rarr;
        </a>
      </p>
    </div>
  </div>
</section>

<!-- FAQPage structured data for rich-result eligibility -->
<script type="application/ld+json" set:html={JSON.stringify(faqPageSchema)} />

<style>
  /* The grid-rows trick gives a true intrinsic-height expand/collapse with
     no max-height guesswork and no layout shift on load (answers start at
     0fr). It animates smoothly in every modern browser; older browsers
     simply snap, which is still accessible. */
  .money-faq-answer[data-expanded='true'] {
    grid-template-rows: 1fr;
  }

  .money-faq-question[aria-expanded='true'] .money-faq-icon {
    transform: rotate(180deg);
  }

  @media (prefers-reduced-motion: reduce) {
    .money-faq-answer,
    .money-faq-icon {
      transition: none !important;
    }
  }
</style>

<script is:inline>
  (function () {
    var buttons = document.querySelectorAll('.money-faq-question');
    if (!buttons.length) return;

    function setExpanded(button, expanded) {
      button.setAttribute('aria-expanded', expanded ? 'true' : 'false');
      var answerId = button.getAttribute('aria-controls');
      if (!answerId) return;
      var answer = document.getElementById(answerId);
      if (!answer) return;
      if (expanded) {
        answer.setAttribute('data-expanded', 'true');
      } else {
        answer.removeAttribute('data-expanded');
      }
    }

    buttons.forEach(function (button) {
      button.addEventListener('click', function () {
        var isOpen = button.getAttribute('aria-expanded') === 'true';
        // Single-open accordion — collapse the rest so only one answer is
        // visible at a time. Matches the existing FAQ block's UX.
        buttons.forEach(function (other) {
          if (other !== button) setExpanded(other, false);
        });
        setExpanded(button, !isOpen);
      });
    });
  })();
</script>