Features Checklist

"use client";

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

export interface FeaturesChecklistProps {
  eyebrow?: string;
  title?: string;
  description?: string;
  items?: { title: string; text: string }[];
  className?: string;
}

const DEFAULT_ITEMS = [
  { title: "Create a board in one click", text: "Start from 60+ templates for launches, hiring, content and more." },
  { title: "Invite your team", text: "Everyone gets their own weekly view of shared work." },
  { title: "Set gentle reminders", text: "One nudge before the deadline — never a notification storm." },
  { title: "Celebrate the done column", text: "Weekly recaps show what the team finished, not just what’s left." },
];

/** Split feature section: an interactive round-checkbox checklist on one side (click to tick items), explanatory copy and progress on the other. */
export function FeaturesChecklist({
  eyebrow = "How it works",
  title = "Four steps to a calmer week",
  description = "Planta is set up in minutes. Tick the steps to see how it feels.",
  items = DEFAULT_ITEMS,
  className,
}: FeaturesChecklistProps) {
  const [done, setDone] = useState<boolean[]>(() => items.map((_, i) => i === 0));
  const count = done.filter(Boolean).length;

  return (
    <section aria-labelledby="sf-check-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-semibold text-da-primary">{eyebrow}</p>
          <h2
            id="sf-check-title"
            className="mt-3 font-da-display text-[clamp(2rem,4.5vw,3.25rem)] leading-[1.08] font-extrabold tracking-da-display text-balance"
          >
            {title}
          </h2>
          <p className="mt-4 text-lg text-da-muted-fg">{description}</p>
          <div className="mt-8 max-w-sm">
            <p className="flex justify-between text-sm font-semibold">
              <span>Your progress</span>
              <span aria-live="polite">
                {count}/{items.length}
              </span>
            </p>
            <div className="mt-2 h-3 overflow-hidden rounded-da-pill bg-da-muted">
              <div
                className="h-full rounded-da-pill bg-da-secondary-fg transition-[width] duration-(--da-duration-slow) ease-da-emphasized"
                style={{ width: `${(count / items.length) * 100}%` }}
              />
            </div>
            {count === items.length && <p className="mt-3 font-da-display text-lg font-extrabold">All done — nice! 🎉</p>}
          </div>
        </div>
        <ul className="space-y-3 rounded-da-lg bg-da-surface p-4 shadow-da-md sm:p-6">
          {items.map((it, i) => (
            <li key={it.title}>
              <label
                className={cn(
                  "da-transition flex cursor-pointer items-start gap-4 rounded-da-md p-4 has-focus-visible:ring-(length:--da-ring-width) has-focus-visible:ring-da-ring",
                  done[i] ? "bg-da-secondary" : "hover:bg-da-surface-2",
                )}
              >
                <input type="checkbox" checked={done[i]} onChange={() => setDone((d) => d.map((v, k) => (k === i ? !v : v)))} className="sr-only" />
                <span
                  aria-hidden
                  className={cn(
                    "mt-0.5 grid size-7 shrink-0 place-items-center rounded-full border-2 transition-all duration-(--da-duration) ease-da-emphasized",
                    done[i] ? "scale-110 border-da-secondary-fg bg-da-secondary-fg text-da-secondary" : "border-da-border-strong",
                  )}
                >
                  {done[i] && <Check className="size-4" strokeWidth={3} />}
                </span>
                <span>
                  <span className={cn("block font-da-display text-lg font-extrabold", done[i] && "text-da-secondary-fg")}>{it.title}</span>
                  <span className={cn("mt-0.5 block text-sm", done[i] ? "text-da-secondary-fg/85" : "text-da-muted-fg")}>{it.text}</span>
                </span>
              </label>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

export default FeaturesChecklist;