Footer Garden

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

export interface FooterGardenProps {
  brand?: string;
  brandHref?: string;
  tagline?: string;
  columns?: { title: string; links: { label: string; href: string }[] }[];
  className?: string;
}

const DEFAULT_COLUMNS = [
  {
    title: "Product",
    links: [
      { label: "Measure", href: "#measure" },
      { label: "Reduce", href: "#reduce" },
      { label: "Report", href: "#report" },
      { label: "Pricing", href: "#pricing" },
    ],
  },
  {
    title: "Learn",
    links: [
      { label: "Journal", href: "#journal" },
      { label: "Methodology", href: "#method" },
      { label: "Glossary", href: "#glossary" },
    ],
  },
  {
    title: "Company",
    links: [
      { label: "About", href: "#about" },
      { label: "Our footprint", href: "#footprint" },
      { label: "Careers", href: "#careers" },
      { label: "Contact", href: "#contact" },
    ],
  },
];

function GroveMark({ className }: { className?: string }) {
  return (
    <svg aria-hidden viewBox="0 0 32 32" className={cn("size-8 shrink-0", className)}>
      <circle cx="16" cy="16" r="16" fill="var(--da-primary)" />
      <path d="M16 25V13" stroke="var(--da-primary-fg)" strokeWidth="2" strokeLinecap="round" />
      <path d="M16 17c-4 0-6.5-2.6-6.5-6.5 4 0 6.5 2.6 6.5 6.5Z" fill="var(--da-primary-fg)" opacity=".85" />
      <path d="M16 14c3.6 0 6-2.3 6-6-3.6 0-6 2.3-6 6Z" fill="var(--da-primary-fg)" />
    </svg>
  );
}

/** Large footer on deep sage (a dark sage tint in dark mode) with rolling-hill silhouettes along the top edge, logo + tagline, three link columns and a “we measure our own footprint” note in the bottom line. */
export function FooterGarden({
  brand = "Grove",
  brandHref = "/",
  tagline = "Carbon accounting for companies that want to do the quiet work well.",
  columns = DEFAULT_COLUMNS,
  className,
}: FooterGardenProps) {
  return (
    <footer
      className={cn(
        "bg-da-bg text-(--gfg) [--g:var(--da-primary)] [--gfg:var(--da-primary-fg)] dark:[--g:var(--da-accent)] dark:[--gfg:var(--da-accent-fg)]",
        className,
      )}
    >
      <svg aria-hidden viewBox="0 0 1440 120" preserveAspectRatio="none" className="block h-16 w-full sm:h-24">
        <path d="M0 80C160 40 320 30 480 56s300 50 460 30 300-60 500-40v74H0Z" fill="color-mix(in oklab, var(--g) 55%, var(--da-bg))" />
        <path d="M0 96c200-30 380-34 560-12s360 30 540 10 250-28 340-24v50H0Z" fill="var(--g)" />
      </svg>
      <div className="bg-(--g)">
        <div className="da-container grid gap-12 pt-10 pb-12 md:grid-cols-[1.5fr_repeat(3,1fr)]">
          <div>
            <a href={brandHref} className="da-focus inline-flex items-center gap-2.5 rounded-da-pill font-da-display text-3xl">
              <GroveMark className="[&_circle]:fill-(--gfg) [&_path]:fill-(--g) [&_path]:stroke-(--g)" />
              {brand}
            </a>
            <p className="mt-4 max-w-xs opacity-85">{tagline}</p>
          </div>
          {columns.map((c) => (
            <nav key={c.title} aria-label={c.title}>
              <h2 className="font-da-display text-lg italic">{c.title}</h2>
              <ul className="mt-4 space-y-2.5">
                {c.links.map((l) => (
                  <li key={l.label}>
                    <a href={l.href} className="da-focus rounded-da-sm opacity-85 hover:underline hover:opacity-100">
                      {l.label}
                    </a>
                  </li>
                ))}
              </ul>
            </nav>
          ))}
        </div>
        <div className="border-t border-(--gfg)/20">
          <p className="da-container flex flex-wrap justify-between gap-3 py-6 text-sm opacity-85">
            <span>© 2026 {brand} SAS · Lyon, France</span>
            <span>This website emits ~0.12 g CO₂e per visit.</span>
          </p>
        </div>
      </div>
    </footer>
  );
}

export default FooterGarden;