Hero Centered

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

export interface HeroCenteredProps {
  title?: string;
  highlight?: string;
  description?: string;
  primary?: { label: string; href: string };
  secondary?: { label: string; href: string };
  stats?: { value: string; label: string }[];
  className?: string;
}

/** Centered serif hero floating over two soft organic blobs (sage and clay), a hand-drawn underline under the italic highlight, pill CTAs and a row of three calm stats. */
export function HeroCentered({
  title = "Measure what matters. Reduce what you can.",
  highlight = "Reduce",
  description = "The carbon platform that small, ambitious teams actually enjoy using — honest numbers, clear next steps, no consultants.",
  primary = { label: "Start for free", href: "#start" },
  secondary = { label: "Book a walk-through", href: "#demo" },
  stats = [
    { value: "2,300+", label: "companies measuring" },
    { value: "1.2M t", label: "CO₂e tracked" },
    { value: "−21%", label: "average first-year cut" },
  ],
  className,
}: HeroCenteredProps) {
  const parts = highlight && title.includes(highlight) ? title.split(highlight) : [title];
  return (
    <section aria-labelledby="os-center-title" className={cn("relative isolate overflow-hidden bg-da-bg py-[clamp(5rem,12vw,9rem)] text-da-fg", className)}>
      <svg aria-hidden viewBox="0 0 600 600" className="absolute -top-40 -left-40 -z-10 w-[36rem] max-w-none text-da-accent sm:w-[44rem]">
        <path fill="currentColor" d="M421 97c56 44 96 115 90 186-7 71-60 142-128 181s-150 46-218 12S46 364 42 290s31-160 92-205 170-60 287 12Z" />
      </svg>
      <svg aria-hidden viewBox="0 0 600 600" className="absolute -right-48 -bottom-56 -z-10 w-[34rem] max-w-none text-da-secondary sm:w-[42rem]">
        <path fill="currentColor" d="M455 132c45 54 62 131 37 197s-91 121-164 137-151-9-196-64-56-139-21-205 105-114 181-121 118 2 163 56Z" />
      </svg>
      <div className="da-container text-center">
        <h1 id="os-center-title" className="mx-auto max-w-4xl font-da-display text-[clamp(2.75rem,7vw,5.5rem)] leading-[1.02] tracking-da-display text-balance">
          {parts[0]}
          {parts.length > 1 && (
            <em className="relative whitespace-nowrap text-da-primary">
              {highlight}
              <svg aria-hidden viewBox="0 0 200 14" preserveAspectRatio="none" className="absolute -bottom-2 left-0 h-3 w-full text-da-secondary-fg/70">
                <path d="M3 9c40-6 90-8 194-3" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" />
              </svg>
            </em>
          )}
          {parts[1]}
        </h1>
        <p className="mx-auto mt-7 max-w-xl text-lg text-da-muted-fg">{description}</p>
        <div className="mt-9 flex flex-wrap justify-center gap-3">
          <a
            href={primary.href}
            className="da-focus da-transition inline-flex h-12 items-center rounded-da-pill bg-da-primary px-7 font-medium text-da-primary-fg hover:bg-da-primary/90"
          >
            {primary.label}
          </a>
          <a
            href={secondary.href}
            className="da-focus da-transition inline-flex h-12 items-center rounded-da-pill bg-da-surface px-7 font-medium text-da-surface-fg shadow-da-sm hover:shadow-da-md"
          >
            {secondary.label}
          </a>
        </div>
        <dl className="mx-auto mt-16 grid max-w-2xl gap-8 sm:grid-cols-3">
          {stats.map((s) => (
            <div key={s.label} className="flex flex-col">
              <dt className="order-2 text-sm text-da-muted-fg">{s.label}</dt>
              <dd className="order-1 font-da-display text-4xl">{s.value}</dd>
            </div>
          ))}
        </dl>
      </div>
    </section>
  );
}

export default HeroCentered;