Feature 6

import { Check } from "lucide-react";

import { cn } from "@/lib/utils";

import type { Surface } from "../_types/common";
import type { FeatureListContent } from "../_types/feature";
import { defaultFeature6Content } from "./data";
import { SectionHeader, surfaceClass, toneFor } from "./section-header";

/** Numbered rows on a hairline rule: the pitch on the left, its checklist
 *  on the right. Each row carries its `id` as an anchor. */
export default function Feature6({
  content = defaultFeature6Content,
  surface = "default",
}: {
  content?: FeatureListContent;
  surface?: Surface;
}) {
  return (
    <section className={cn("py-20 sm:py-28", surfaceClass[surface])}>
      <div className="mx-auto max-w-7xl px-5 sm:px-8 lg:px-12">
        <SectionHeader
          description={content.description}
          eyebrow={content.eyebrow}
          title={content.title}
          tone={toneFor(surface)}
        />

        <div className="mt-10 grid gap-px overflow-hidden rounded-lg bg-border">
          {content.items.map((item, index) => (
            <article
              // scroll-mt clears a fixed navbar when an anchor link lands here.
              className="grid scroll-mt-24 gap-8 bg-card p-8 lg:grid-cols-12 lg:gap-12 lg:p-12"
              id={item.id}
              key={item.id}
            >
              <div className="lg:col-span-5">
                <p className="font-mono text-muted-foreground/70 text-xs">
                  {String(index + 1).padStart(2, "0")}
                </p>
                <h3 className="mt-4 font-display text-3xl text-primary sm:text-4xl">
                  {item.title}
                </h3>
                <p className="mt-4 text-muted-foreground leading-relaxed">
                  {item.body}
                </p>
              </div>

              <ul className="grid gap-4 border-border border-t pt-8 lg:col-span-7 lg:border-t-0 lg:border-l lg:pt-0 lg:pl-12">
                {item.points.map((point) => (
                  <li
                    className="flex items-start gap-3 text-muted-foreground text-sm leading-relaxed"
                    key={point}
                  >
                    <span className="mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-sm border border-input text-primary">
                      <Check className="size-3" />
                    </span>
                    {point}
                  </li>
                ))}
              </ul>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}