Night Stats Band

// Dark stats band: heading and intro on the left, a 2×2 grid of large
// sun-yellow numbers on the right. Pure Tailwind, no dependencies. Works with Tailwind v3 and v4.

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

type Props = {
  eyebrow?: string;
  heading?: string;
  intro?: string;
  stats?: Stat[];
};

const DEFAULT_STATS: Stat[] = [
  { value: "4,800+", label: "Homes powered" },
  { value: "62 MW", label: "Installed capacity" },
  { value: "38k t", label: "CO₂ avoided a year" },
  { value: "4.9★", label: "Average review" },
];

export default function NightStats({
  eyebrow = "Our impact",
  heading = "Clean energy, one roof at a time",
  intro = "Since 2014 we've helped families and businesses cut their bills and their footprint.",
  stats = DEFAULT_STATS,
}: Props) {
  return (
    <section className="bg-[#052625] px-5 py-24 font-['Manrope',ui-sans-serif,system-ui,sans-serif] text-white antialiased md:px-10 md:py-32">
      <div className="mx-auto grid max-w-7xl gap-12 lg:grid-cols-[1fr_1.6fr] lg:items-end lg:gap-20">
        <div>
          <p className="mb-5 inline-block rounded-full bg-white/10 px-4 py-1.5 text-sm font-semibold text-[#ffe500]">{eyebrow}</p>
          <h2 className="font-['Bricolage_Grotesque',ui-sans-serif,system-ui,sans-serif] text-[clamp(2.25rem,4.5vw,3.75rem)] font-semibold leading-[1.05]">{heading}</h2>
          <p className="mt-5 text-lg text-white/70">{intro}</p>
        </div>
        <dl className="grid grid-cols-2 gap-x-6 gap-y-10">
          {stats.map((stat) => (
            <div key={stat.label} className="flex flex-col-reverse gap-2 border-t border-white/15 pt-6">
              <dt className="font-['Bricolage_Grotesque',ui-sans-serif,system-ui,sans-serif] text-base font-medium text-white/70">{stat.label}</dt>
              <dd className="font-['Bricolage_Grotesque',ui-sans-serif,system-ui,sans-serif] text-[clamp(2.75rem,5vw,4.5rem)] font-semibold leading-none text-[#ffe500]">{stat.value}</dd>
            </div>
          ))}
        </dl>
      </div>
    </section>
  );
}