Features Alternating

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

export interface FeaturesAlternatingItem {
  eyebrow: string;
  title: string;
  text: string;
  points: string[];
  visual: "suppliers" | "actions" | "report";
}

export interface FeaturesAlternatingProps {
  items?: FeaturesAlternatingItem[];
  className?: string;
}

const DEFAULT_ITEMS: FeaturesAlternatingItem[] = [
  {
    eyebrow: "Suppliers",
    title: "Bring your supply chain along",
    text: "Invite suppliers to share their own data in a friendly two-minute form. Grove replaces estimates with real numbers as they come in.",
    points: ["Supplier portal in 12 languages", "Automatic reminders, no chasing"],
    visual: "suppliers",
  },
  {
    eyebrow: "Reduction",
    title: "A plan you can actually follow",
    text: "Every action is sized by tonnes saved, cost and effort — and tracked month by month so you see progress, not just promises.",
    points: ["120+ vetted actions", "Targets aligned with SBTi"],
    visual: "actions",
  },
  {
    eyebrow: "Reporting",
    title: "Reports that write themselves",
    text: "Export CSRD, CDP or GHG Protocol reports with every figure traceable back to its invoice.",
    points: ["Audit trail on every number", "Public climate page"],
    visual: "report",
  },
];

function Visual({ kind }: { kind: FeaturesAlternatingItem["visual"] }) {
  if (kind === "suppliers")
    return (
      <ul className="grid gap-3">
        {[
          ["Moulin Paper Co.", "Data shared", "bg-da-accent text-da-accent-fg"],
          ["Rhône Freight", "Invited 2 days ago", "bg-da-secondary text-da-secondary-fg"],
          ["Kiln & Clay", "Data shared", "bg-da-accent text-da-accent-fg"],
        ].map(([n, s, c]) => (
          <li key={n} className="flex items-center justify-between gap-3 rounded-da-md bg-da-surface px-4 py-3 shadow-da-sm">
            <span className="font-medium">{n}</span>
            <span className={cn("rounded-da-pill px-2.5 py-0.5 text-xs", c)}>{s}</span>
          </li>
        ))}
      </ul>
    );
  if (kind === "actions")
    return (
      <ul className="grid gap-3">
        {[
          ["Switch to green electricity", 42],
          ["Rail instead of short flights", 27],
          ["Consolidate freight lanes", 38],
        ].map(([n, v]) => (
          <li key={n} className="rounded-da-md bg-da-surface px-4 py-3 shadow-da-sm">
            <div className="flex justify-between text-sm">
              <span className="font-medium">{n}</span>
              <span className="font-da-mono text-da-primary">−{v} t</span>
            </div>
            <div className="mt-2 h-2 rounded-full bg-da-surface-2">
              <div className="h-full rounded-full bg-da-primary" style={{ width: `${Number(v) * 2}%` }} />
            </div>
          </li>
        ))}
      </ul>
    );
  return (
    <div className="rounded-da-md bg-da-surface p-5 shadow-da-sm">
      <p className="font-da-display text-xl">Climate report 2026</p>
      <p className="font-da-mono text-xs text-da-muted-fg">GHG Protocol · CSRD E1</p>
      <div className="mt-4 space-y-2">
        {[90, 75, 82, 60].map((w, i) => (
          <div key={i} className="h-2 rounded-full bg-da-surface-2" style={{ width: `${w}%` }} />
        ))}
      </div>
      <div className="mt-5 grid grid-cols-3 gap-2 text-center text-xs">
        {["Scope 1", "Scope 2", "Scope 3"].map((s) => (
          <span key={s} className="rounded-da-sm bg-da-accent py-2 text-da-accent-fg">
            {s}
          </span>
        ))}
      </div>
    </div>
  );
}

/** Alternating zig-zag rows: copy with check points on one side, a soft blob-shaped tinted panel holding a small product vignette (suppliers, actions, report) on the other. */
export function FeaturesAlternating({ items = DEFAULT_ITEMS, className }: FeaturesAlternatingProps) {
  const blobs = ["rounded-[60%_40%_55%_45%/50%_60%_40%_50%]", "rounded-[45%_55%_40%_60%/55%_45%_60%_40%]", "rounded-[55%_45%_60%_40%/40%_55%_45%_60%]"];
  const tints = ["bg-da-accent", "bg-da-secondary", "bg-da-muted"];
  return (
    <section aria-label="Features" className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container grid gap-24">
        {items.map((it, i) => (
          <article key={it.title} className="grid items-center gap-10 lg:grid-cols-2 lg:gap-20">
            <div className={cn(i % 2 && "lg:order-2")}>
              <p className="text-sm font-medium text-da-primary">{it.eyebrow}</p>
              <h2 className="mt-3 font-da-display text-[clamp(2rem,4.5vw,3rem)] leading-[1.08] tracking-da-display">{it.title}</h2>
              <p className="mt-4 text-lg text-da-muted-fg">{it.text}</p>
              <ul className="mt-6 space-y-2.5">
                {it.points.map((p) => (
                  <li key={p} className="flex items-center gap-3">
                    <span aria-hidden className="grid size-6 place-items-center rounded-full bg-da-accent text-da-accent-fg">
                      <Check className="size-3.5" strokeWidth={2.5} />
                    </span>
                    {p}
                  </li>
                ))}
              </ul>
            </div>
            <div className={cn("px-8 py-14 sm:px-14", blobs[i % 3], tints[i % 3])}>
              <div className="mx-auto max-w-sm text-da-surface-fg">
                <Visual kind={it.visual} />
              </div>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

export default FeaturesAlternating;