/**
 * WelcomeFeatureGridSection — "What's in the box" feature grid (DEBT-005 extraction).
 *
 * Section 5 from Welcome.tsx: ROI spotlight + feature grid + positioning callout.
 * Extracted verbatim (Wave-2 content preserved, move not rewrite).
 */
import { BarChart3 } from 'lucide-react';

import { ScrollReveal } from '@/Components/marketing/operator/ScrollReveal';
import { SectionHeader } from '@/Components/marketing/operator/SectionHeader';
import { features } from '@/Components/marketing/WelcomePageData';

export function WelcomeFeatureGridSection() {
  return (
    <section className="border-b border-border bg-muted/20">
      <div className="container max-w-6xl py-16 md:py-20">
        <SectionHeader
          eyebrow="What's in the box"
          title="Diagnose. Fix. Prove."
          emphasis="One workflow."
          description="Not another AI writer. An engine that tells you what to fix, drafts the fix, ships it — and the proof layer below shows you exactly what moved."
          className="mb-14"
        />
        {/* ROI Tracking - featured standalone callout, extracted from the symmetric grid */}
        <ScrollReveal className="mb-4 flex flex-col gap-6 overflow-hidden rounded-2xl border border-primary/20 bg-primary/5 p-8 md:flex-row md:items-start md:gap-10">
          <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-xl bg-primary/15 text-primary">
            <BarChart3 className="size-7" aria-hidden="true" />
          </div>
          <div>
            <p className="text-xs uppercase tracking-widest text-muted-foreground">
              The proof layer
            </p>
            <p className="font-data mt-1 text-xs font-semibold uppercase tracking-[0.18em] text-primary">
              The measurable difference
            </p>
            <h3 className="mt-2 text-xl font-semibold text-foreground">ROI Tracking</h3>
            <p className="mt-3 max-w-2xl text-sm leading-relaxed text-muted-foreground md:text-base">
              Measure clicks, CTR, and position changes at 7, 14, 30, and 90 days. Impact scores
              adapt to what actually works on your site — the product grades its own work.
            </p>
          </div>
        </ScrollReveal>
        <hr className="mb-4 border-border" />
        <div className="grid gap-0 divide-y divide-border rounded-2xl border border-border bg-card md:grid-cols-2 md:divide-x md:divide-y-0">
          {/* D1-C-008: per-child border-b classes removed; parent divide-y is the single source of hairlines */}
          {features
            .filter((f) => f.title !== 'ROI Tracking')
            .map((feature, i) => (
              <ScrollReveal
                key={feature.title}
                delay={(i % 2) * 60}
                className="flex items-start gap-4 p-5"
              >
                <span className="font-data mt-0.5 shrink-0 text-xs font-semibold tracking-[0.18em] text-muted-foreground">
                  {String(i + 1).padStart(2, '0')}
                </span>
                <div>
                  <h3 className="text-sm font-semibold text-foreground">{feature.title}</h3>
                  <p className="mt-1 text-sm leading-relaxed text-muted-foreground">
                    {feature.description}
                  </p>
                </div>
              </ScrollReveal>
            ))}
        </div>

        {/* Positioning callout - refactored as a hairline-rule editorial aside,
            not a center-aligned muted box. Reads more like a margin note. */}
        <div className="mt-12 grid gap-6 rounded-xl border border-border border-l-4 border-l-primary bg-card px-6 py-5 md:grid-cols-[auto_1fr] md:gap-10 md:px-8">
          <p className="font-data text-xs uppercase tracking-[0.18em] text-primary md:self-center">
            A note on positioning
          </p>
          <div className="text-sm text-foreground">
            <p>
              Keep using <span className="font-semibold">Ahrefs</span> for backlinks and{' '}
              <span className="font-semibold">Semrush</span> for competitors. RankWizAI owns the
              GSC → fix → proof loop they skip — the part where you actually have to do the work.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}