Feature 7

import { Check } from "lucide-react";

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

import type { Surface } from "../_types/common";
import type { FeatureChecklistContent } from "../_types/feature";
import { AnimatedNumber } from "./animated-number";
import { defaultFeature7Content } from "./data";
import {
  eyebrowClass,
  SectionHeader,
  surfaceClass,
  toneFor,
} from "./section-header";

/** A header (and optional paragraph) beside a ruled checklist, with an
 *  optional numeral grid underneath. `balance="text"` gives the paragraph
 *  the wider column. */
export default function Feature7({
  balance = "list",
  content = defaultFeature7Content,
  surface = "muted",
}: {
  balance?: "list" | "text";
  content?: FeatureChecklistContent;
  surface?: Surface;
}) {
  const textWide = balance === "text";

  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">
        <div className="grid gap-12 lg:grid-cols-12 lg:gap-16">
          <div className={textWide ? "lg:col-span-7" : "lg:col-span-5"}>
            <SectionHeader
              description={content.description}
              eyebrow={content.eyebrow}
              size="sm"
              title={content.title}
              tone={toneFor(surface)}
            />
            {content.body && (
              <p className="mt-8 text-muted-foreground leading-relaxed">
                {content.body}
              </p>
            )}
          </div>

          <div className={textWide ? "lg:col-span-5" : "lg:col-span-7"}>
            {content.pointsLabel && (
              <h3 className={cn(eyebrowClass, "text-muted-foreground/70")}>
                {content.pointsLabel}
              </h3>
            )}
            <ul className={cn("grid gap-4", content.pointsLabel && "mt-6")}>
              {content.points.map((point) => (
                <li
                  className="flex items-start gap-3 border-border border-b pb-4 text-muted-foreground leading-relaxed last:border-b-0"
                  key={point}
                >
                  <span className="mt-1 flex size-5 shrink-0 items-center justify-center rounded-sm border border-input text-primary">
                    <Check className="size-3" />
                  </span>
                  {point}
                </li>
              ))}
            </ul>
          </div>
        </div>

        {content.stats && content.stats.length > 0 && (
          <dl className="mt-16 grid grid-cols-2 gap-px overflow-hidden rounded-lg bg-border lg:grid-cols-4">
            {content.stats.map((stat) => (
              <div
                className={cn("px-6 py-8 lg:px-7", surfaceClass[surface])}
                key={stat.label}
              >
                <dd className="font-display text-4xl text-primary lg:text-5xl">
                  <AnimatedNumber
                    decimals={stat.decimals ?? 0}
                    prefix={stat.prefix ?? ""}
                    suffix={stat.suffix ?? ""}
                    value={stat.value}
                  />
                </dd>
                <dt className="mt-3 text-muted-foreground text-sm leading-snug">
                  {stat.label}
                </dt>
              </div>
            ))}
          </dl>
        )}
      </div>
    </section>
  );
}