---
/**
 * PricingTimelineBand Component
 *
 * Sits directly above the homepage InlineLeadForm and answers the two
 * questions every late-stage buyer has BEFORE they fill in a contact form:
 *   1. "Roughly how much does this cost?"
 *   2. "Roughly how long does it take?"
 *
 * Layout:
 *   - 2 cards side-by-side on md+ (Pricing, Timeline)
 *   - Stacked vertically on mobile (<md)
 *   - A subtle "Custom quote available — tell us about your project" line
 *     visually bridges the band into the form below it.
 *
 * Anchor: `id="pricing-timeline"` so the mobile sticky CTA bar / nav /
 * external deep-links can scroll directly to this band.
 *
 * CLS guard: each card has an explicit `min-h-[...]` so the band reserves
 * its own vertical space at first paint, regardless of font loading or
 * icon-fetch delay. Lighthouse CLS should be unaffected.
 *
 * Design tokens: uses the same `text-secondary-*`, `text-primary-*`,
 * `rounded-3xl`, container-wrapper, and gradient conventions established
 * by InlineLeadForm and ProofNumbers so the band feels native to the page.
 *
 * NOTE on copy: the headline values below are PLACEHOLDERS pending
 * stakeholder (marketing / leadership) confirmation. See the inline
 * `data-stakeholder-confirm` markers + HTML comments at each value.
 */
---

<!--
  Pricing + Timeline band.
  ANCHOR: #pricing-timeline — referenced by the mobile sticky CTA bar
  and any nav deep-links. Do not rename without updating those callers.
-->
<section
  id="pricing-timeline"
  class="pt-20 sm:pt-24 pb-10 sm:pb-12 bg-gradient-to-b from-white to-white dark:from-secondary-900 dark:to-secondary-900"
  aria-labelledby="pricing-timeline-heading"
>
  <div class="container-wrapper">
    <div class="max-w-5xl mx-auto">
      <!-- Eyebrow + section heading. Kept short so the cards below are the
           visual focal point. -->
      <div class="text-center mb-10 sm:mb-12" data-animate="fade-up">
        <p
          class="text-xs sm:text-sm font-semibold uppercase tracking-[0.18em] text-primary-600 dark:text-primary-400"
        >
          What to expect
        </p>
        <h2
          id="pricing-timeline-heading"
          class="mt-3 text-3xl sm:text-4xl lg:text-5xl font-bold text-secondary-900 dark:text-secondary-100 leading-tight"
        >
          Transparent pricing &amp; predictable timelines.
        </h2>
      </div>

      <!-- Two-card grid: stacks on mobile, side-by-side on md+. -->
      <div
        class="grid grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8"
        data-animate="fade-up"
      >
        <!-- Card 1: Pricing -->
        <article
          class="relative bg-gradient-to-br from-secondary-50 to-white dark:from-secondary-800 dark:to-secondary-900 rounded-3xl border border-secondary-100 dark:border-secondary-700 shadow-lg hover:shadow-xl transition-shadow duration-300 p-8 sm:p-10 min-h-[260px] sm:min-h-[280px] flex flex-col"
          aria-labelledby="pricing-card-heading"
        >
          <!-- Icon chip -->
          <div
            class="w-12 h-12 rounded-2xl bg-primary-100 dark:bg-primary-500/20 text-primary-600 dark:text-primary-300 flex items-center justify-center mb-5 flex-shrink-0"
            aria-hidden="true"
          >
            <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"
                d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
              />
            </svg>
          </div>

          <p
            class="text-xs sm:text-sm font-semibold uppercase tracking-wider text-secondary-500 dark:text-secondary-400"
          >
            Starting at
          </p>

          <!--
            Pricing floor — mirrors the Services page "Starter" tier
            (₹1,00,000). Keep this value in sync with the Starter price in
            src/pages/services.astro so the homepage band and the pricing
            table never contradict each other.
          -->
          <h3
            id="pricing-card-heading"
            class="mt-2 text-4xl sm:text-5xl font-bold text-secondary-900 dark:text-secondary-100 leading-none tracking-tight"
          >
            Projects from
            <span
              class="block mt-1 bg-gradient-to-br from-primary-600 to-primary-500 dark:from-primary-400 dark:to-primary-300 bg-clip-text text-transparent"
            >
              ₹1,00,000
            </span>
          </h3>

          <p
            class="mt-5 text-base sm:text-lg text-secondary-600 dark:text-secondary-300 leading-relaxed"
          >
            <!-- 1-line "what's included" copy — keep to ~14 words so it
                 sits in one comfortable line at md+ widths. -->
            Includes discovery, design, build, QA, and post-launch support.
          </p>
        </article>

        <!-- Card 2: Timeline -->
        <article
          class="relative bg-gradient-to-br from-secondary-50 to-white dark:from-secondary-800 dark:to-secondary-900 rounded-3xl border border-secondary-100 dark:border-secondary-700 shadow-lg hover:shadow-xl transition-shadow duration-300 p-8 sm:p-10 min-h-[260px] sm:min-h-[280px] flex flex-col"
          aria-labelledby="timeline-card-heading"
        >
          <!-- Icon chip -->
          <div
            class="w-12 h-12 rounded-2xl bg-accent-100 dark:bg-accent-500/20 text-accent-600 dark:text-accent-300 flex items-center justify-center mb-5 flex-shrink-0"
            aria-hidden="true"
          >
            <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"
                d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
              />
            </svg>
          </div>

          <p
            class="text-xs sm:text-sm font-semibold uppercase tracking-wider text-secondary-500 dark:text-secondary-400"
          >
            Typical timeline
          </p>

          <!--
            STAKEHOLDER-CONFIRM: the "4–8 weeks" range is the current
            default placeholder. Update after delivery-lead review if the
            average shifts (e.g. 6–10 weeks for ERP-heavy scopes).
          -->
          <h3
            id="timeline-card-heading"
            data-stakeholder-confirm="timeline-range"
            class="mt-2 text-4xl sm:text-5xl font-bold text-secondary-900 dark:text-secondary-100 leading-none tracking-tight"
          >
            <span
              class="block bg-gradient-to-br from-accent-600 to-accent-500 dark:from-accent-400 dark:to-accent-300 bg-clip-text text-transparent"
            >
              4&ndash;8 weeks
            </span>
          </h3>

          <p
            class="mt-5 text-base sm:text-lg text-secondary-600 dark:text-secondary-300 leading-relaxed"
          >
            <!-- 1-line "process" copy — discovery → sprints → launch. -->
            Discovery in week 1, weekly demos through build, launch by week 8.
          </p>
        </article>
      </div>

      <!-- Bridging line into the form below. Visually subtle: small text,
           muted color, centered, with a chevron pointing down to imply
           "fill the form below to get the custom number". -->
      <p
        class="mt-10 sm:mt-12 text-center text-sm sm:text-base text-secondary-600 dark:text-secondary-300"
        data-animate="fade-up"
      >
        <span class="inline-flex items-center gap-2">
          <span>
            <span class="font-semibold text-secondary-800 dark:text-secondary-100">Custom quote available</span>
            &mdash; tell us about your project
          </span>
          <svg
            class="w-4 h-4 text-primary-500 dark:text-primary-300 animate-bounce-slow"
            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 14l-7 7m0 0l-7-7m7 7V3" />
          </svg>
        </span>
      </p>
    </div>
  </div>
</section>

<style>
  /* Slow bounce for the bridging chevron — pure CSS, no JS, no layout
     impact (transform only, so it never triggers reflow / CLS). */
  @keyframes pricing-timeline-bounce-slow {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(4px); }
  }
  .animate-bounce-slow {
    animation: pricing-timeline-bounce-slow 2.4s ease-in-out infinite;
  }

  /* Respect reduced-motion preference. */
  @media (prefers-reduced-motion: reduce) {
    .animate-bounce-slow {
      animation: none;
    }
  }
</style>
