Hero Footprint

import { ArrowRight, Factory, Plane, Truck, Zap } from "lucide-react";
import { cn } from "@/lib/utils";

export interface HeroFootprintProps {
  eyebrow?: string;
  title?: string;
  description?: string;
  primary?: { label: string; href: string };
  secondary?: { label: string; href: string };
  total?: string;
  breakdown?: { label: string; value: number; tone: "primary" | "accent" | "secondary" | "warning" }[];
  className?: string;
}

const TONE = {
  primary: "var(--da-primary)",
  accent: "color-mix(in oklab, var(--da-primary) 45%, var(--da-accent))",
  secondary: "var(--da-secondary-fg)",
  warning: "var(--da-warning)",
} as const;
const ICON = [Truck, Zap, Plane, Factory];

/** Product hero: copy + CTAs on the left, a soft rounded footprint card on the right with a donut chart of emissions by source, legend with percentages and a gentle “biggest lever” tip. */
export function HeroFootprint({
  eyebrow = "Your footprint, in plain sight",
  title = "Know exactly where your emissions come from",
  description = "Connect accounting, cloud and travel tools. Grove turns every invoice into tonnes of CO₂e — and tells you which lever to pull first.",
  primary = { label: "Connect your tools", href: "#connect" },
  secondary = { label: "Watch a 2-min tour", href: "#tour" },
  total = "284 tCO₂e",
  breakdown = [
    { label: "Suppliers & logistics", value: 46, tone: "primary" },
    { label: "Energy & cloud", value: 24, tone: "accent" },
    { label: "Business travel", value: 19, tone: "secondary" },
    { label: "Offices", value: 11, tone: "warning" },
  ],
  className,
}: HeroFootprintProps) {
  const c = 2 * Math.PI * 42;
  const segments = breakdown.map((b, i) => ({
    ...b,
    len: (b.value / 100) * c,
    offset: breakdown.slice(0, i).reduce((sum, x) => sum + (x.value / 100) * c, 0),
  }));
  return (
    <section aria-labelledby="os-fp-title" className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container grid items-center gap-12 lg:grid-cols-2">
        <div>
          <p className="text-sm font-medium text-da-primary">{eyebrow}</p>
          <h1 id="os-fp-title" className="mt-4 font-da-display text-[clamp(2.5rem,5.5vw,4.25rem)] leading-[1.05] tracking-da-display text-balance">
            {title}
          </h1>
          <p className="mt-6 max-w-lg text-lg text-da-muted-fg">{description}</p>
          <div className="mt-9 flex flex-wrap gap-3">
            <a
              href={primary.href}
              className="da-focus da-transition inline-flex h-12 items-center gap-2 rounded-da-pill bg-da-primary px-6 font-medium text-da-primary-fg hover:bg-da-primary/90"
            >
              {primary.label} <ArrowRight aria-hidden className="size-4" />
            </a>
            <a
              href={secondary.href}
              className="da-focus da-transition inline-flex h-12 items-center rounded-da-pill bg-da-surface-2 px-6 font-medium hover:bg-da-muted"
            >
              {secondary.label}
            </a>
          </div>
        </div>
        <figure className="rounded-da-lg bg-da-surface p-6 text-da-surface-fg shadow-da-lg sm:p-8">
          <figcaption className="flex items-baseline justify-between gap-4">
            <span className="font-da-display text-xl">2026 footprint</span>
            <span className="font-da-mono text-sm text-da-muted-fg">Jan – Sep</span>
          </figcaption>
          <div className="mt-6 grid items-center gap-8 sm:grid-cols-[180px_1fr]">
            <div className="relative mx-auto size-44">
              <svg
                viewBox="0 0 100 100"
                className="size-full -rotate-90"
                role="img"
                aria-label={`Total ${total}: ${breakdown.map((b) => `${b.label} ${b.value}%`).join(", ")}`}
              >
                <circle cx="50" cy="50" r="42" fill="none" stroke="var(--da-surface-2)" strokeWidth="12" />
                {segments.map((b) => (
                  <circle
                    key={b.label}
                    cx="50"
                    cy="50"
                    r="42"
                    fill="none"
                    stroke={TONE[b.tone]}
                    strokeWidth="12"
                    strokeDasharray={`${b.len - 1.5} ${c - b.len + 1.5}`}
                    strokeDashoffset={-b.offset}
                  />
                ))}
              </svg>
              <div className="absolute inset-0 grid place-content-center text-center">
                <span className="font-da-display text-2xl">{total.split(" ")[0]}</span>
                <span className="font-da-mono text-xs text-da-muted-fg">{total.split(" ")[1]}</span>
              </div>
            </div>
            <ul className="space-y-3">
              {breakdown.map((b, i) => {
                const Icon = ICON[i % ICON.length]!;
                return (
                  <li key={b.label} className="flex items-center gap-3 text-sm">
                    <span
                      aria-hidden
                      className="grid size-8 place-items-center rounded-full"
                      style={{ background: `color-mix(in oklab, ${TONE[b.tone]} 18%, transparent)`, color: TONE[b.tone] }}
                    >
                      <Icon className="size-4" />
                    </span>
                    <span className="flex-1">{b.label}</span>
                    <span className="font-da-mono">{b.value}%</span>
                  </li>
                );
              })}
            </ul>
          </div>
          <p className="mt-6 rounded-da-md bg-da-accent px-4 py-3 text-sm text-da-accent-fg">
            <strong className="font-medium">Biggest lever:</strong> switching 3 freight lanes to rail could save ~38 tCO₂e a year.
          </p>
        </figure>
      </div>
    </section>
  );
}

export default HeroFootprint;