Cta Pledge

"use client";

import { useState } from "react";
import { Check } from "lucide-react";
import { cn } from "@/lib/utils";

export interface CtaPledgeProps {
  title?: string;
  pledges?: string[];
  count?: number;
  cta?: { label: string; href: string };
  className?: string;
}

/** Interactive pledge CTA: pick the commitments your team is ready for (round check cards), a counter of companies who pledged, and a CTA that reflects how many you chose. */
export function CtaPledge({
  title = "What is your team ready to commit to?",
  pledges = [
    "Measure our full footprint this year",
    "Switch to renewable electricity",
    "Replace short flights with trains",
    "Ask our top 10 suppliers for data",
  ],
  count = 1284,
  cta = { label: "Make it official", href: "#pledge" },
  className,
}: CtaPledgeProps) {
  const [picked, setPicked] = useState<string[]>([pledges[0] ?? ""]);
  const toggle = (p: string) => setPicked((x) => (x.includes(p) ? x.filter((y) => y !== p) : [...x, p]));
  return (
    <section aria-labelledby="os-cp-title" className={cn("da-section bg-da-surface-2 text-da-fg", className)}>
      <div className="da-container grid items-center gap-12 lg:grid-cols-2">
        <div>
          <h2 id="os-cp-title" className="font-da-display text-[clamp(2.25rem,5vw,3.5rem)] leading-[1.05] tracking-da-display text-balance">
            {title}
          </h2>
          <p className="mt-5 text-lg text-da-muted-fg">
            <span className="font-da-display text-3xl text-da-primary">{count.toLocaleString("en-US")}</span> companies have pledged this year.
          </p>
        </div>
        <div>
          <fieldset>
            <legend className="sr-only">Commitments</legend>
            <div className="grid gap-3">
              {pledges.map((p) => {
                const on = picked.includes(p);
                return (
                  <label
                    key={p}
                    className={cn(
                      "da-transition flex cursor-pointer items-center gap-4 rounded-da-lg p-5 has-focus-visible:ring-3 has-focus-visible:ring-da-ring",
                      on ? "bg-da-accent text-da-accent-fg" : "bg-da-surface text-da-surface-fg shadow-da-sm hover:shadow-da-md",
                    )}
                  >
                    <input type="checkbox" checked={on} onChange={() => toggle(p)} className="sr-only" />
                    <span
                      aria-hidden
                      className={cn(
                        "grid size-7 shrink-0 place-items-center rounded-full border-2 transition-colors duration-(--da-duration)",
                        on ? "border-da-primary bg-da-primary text-da-primary-fg" : "border-da-border-strong",
                      )}
                    >
                      {on && <Check className="size-4" strokeWidth={3} />}
                    </span>
                    <span className="text-lg">{p}</span>
                  </label>
                );
              })}
            </div>
          </fieldset>
          <a
            href={cta.href}
            aria-disabled={picked.length === 0}
            className={cn(
              "da-focus da-transition mt-6 inline-flex h-12 w-full items-center justify-center rounded-da-pill bg-da-primary font-medium text-da-primary-fg hover:bg-da-primary/90",
              picked.length === 0 && "pointer-events-none opacity-50",
            )}
          >
            {cta.label} · {picked.length} {picked.length === 1 ? "pledge" : "pledges"}
          </a>
        </div>
      </div>
    </section>
  );
}

export default CtaPledge;