About Section with Stats

// About section: tall photo beside a large statement and button,
// then four stats with labels and short descriptions.
// Pure Tailwind, no dependencies. Works with Tailwind v3 and v4.

type Stat = { value: string; label: string; text: string };

type Props = {
  eyebrow?: string;
  statement?: string;
  cta?: { label: string; href: string };
  image?: string;
  imageAlt?: string;
  stats?: Stat[];
};

const DEFAULT_STATS: Stat[] = [
  { value: "2,400+", label: "Properties sold", text: "Homes matched to buyers through careful listening and local knowledge." },
  { value: "1,200+", label: "Happy clients", text: "Families and investors who came back, or sent their friends." },
  { value: "15+", label: "Years of experience", text: "A team that has seen every kind of market and knows how to move in it." },
  { value: "$4.2B", label: "In sales volume", text: "Brokered across residential, luxury and new-build developments." },
];

export default function AboutStats({
  eyebrow = "About us",
  statement = "We believe a great home begins with a deep understanding of people, place and purpose. Every viewing we book and every offer we negotiate starts there.",
  cta = { label: "More about us", href: "#" },
  image = "https://images.unsplash.com/photo-1600566753376-12c8ab7fb75b?w=1200&q=80&auto=format&fit=crop",
  imageAlt = "Modern house lit up at dusk",
  stats = DEFAULT_STATS,
}: Props) {
  return (
    <section className="bg-white px-5 py-20 font-['Manrope',ui-sans-serif,system-ui,sans-serif] antialiased md:px-10 md:py-28">
      <div className="mx-auto max-w-7xl">
        <div className="mb-24 flex flex-wrap items-start gap-10 lg:flex-nowrap lg:gap-24">
          <div className="relative aspect-[3/4] w-full shrink-0 overflow-hidden lg:w-[35%]">
            <img src={image} alt={imageAlt} className="absolute inset-0 h-full w-full object-cover" />
          </div>
          <div className="flex-1">
            <span className="mb-3 block text-xs font-bold uppercase tracking-[0.2em] text-[#F66F00]">{eyebrow}</span>
            <p className="font-['Bricolage_Grotesque',ui-sans-serif,system-ui,sans-serif] text-[clamp(26px,3vw,40px)] font-medium leading-[1.25] text-neutral-900">{statement}</p>
            <a href={cta.href} className="mt-12 inline-block rounded-full bg-[#F66F00] px-8 py-4 font-semibold text-white transition-colors hover:bg-black lg:mt-20">
              {cta.label}
            </a>
          </div>
        </div>

        <div className="grid grid-cols-2 gap-8 lg:grid-cols-4">
          {stats.map((s) => (
            <div key={s.label}>
              <div className="mb-4 font-['Bricolage_Grotesque',ui-sans-serif,system-ui,sans-serif] text-[clamp(36px,4vw,56px)] font-medium leading-none text-neutral-900">{s.value}</div>
              <div className="mb-2 text-xl font-bold text-neutral-900">{s.label}</div>
              <div className="my-4 h-px w-full bg-neutral-200" />
              <div className="text-base font-medium text-neutral-700">{s.text}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}