Features Pastel

import { Bell, CalendarDays, LayoutGrid, MessageCircle } from "lucide-react";
import { cn } from "@/lib/utils";

export interface FeaturesPastelProps {
  eyebrow?: string;
  title?: string;
  description?: string;
  className?: string;
}

/** Four large pastel feature cards (peach, mint, lavender, butter) in a 2×2 grid, each with a tiny flat illustration built from shapes. */
export function FeaturesPastel({
  eyebrow = "Features",
  title = "Small tools, big calm",
  description = "Everything in Planta is designed to be understood in five seconds.",
  className,
}: FeaturesPastelProps) {
  return (
    <section aria-labelledby="sf-pastel-title" className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container">
        <div className="mx-auto max-w-2xl text-center">
          <p className="text-sm font-semibold text-da-primary">{eyebrow}</p>
          <h2
            id="sf-pastel-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>
        <ul className="mt-14 grid gap-5 md:grid-cols-2">
          <li className="flex flex-col rounded-da-lg bg-da-accent p-8 text-da-accent-fg">
            <LayoutGrid aria-hidden className="size-7" />
            <h3 className="mt-5 font-da-display text-2xl font-extrabold tracking-da-display">Boards that stay tidy</h3>
            <p className="mt-2 opacity-90">Columns, colors and due dates — nothing else. Drag a card and you’re done.</p>
            <div aria-hidden className="mt-8 grid grid-cols-3 gap-2">
              {[3, 2, 1].map((n, i) => (
                <div key={i} className="space-y-2 rounded-da-md bg-da-surface/60 p-2">
                  {Array.from({ length: n }, (_, k) => (
                    <div key={k} className="h-6 rounded-da-sm bg-da-surface" />
                  ))}
                </div>
              ))}
            </div>
          </li>
          <li className="flex flex-col rounded-da-lg bg-da-secondary p-8 text-da-secondary-fg">
            <CalendarDays aria-hidden className="size-7" />
            <h3 className="mt-5 font-da-display text-2xl font-extrabold tracking-da-display">A week you can see</h3>
            <p className="mt-2 opacity-90">Drop tasks on days. Planta warns you gently when Wednesday gets too full.</p>
            <div aria-hidden className="mt-8 flex items-end gap-2">
              {[40, 65, 95, 50, 30].map((h, i) => (
                <div key={i} className="flex-1 rounded-t-da-sm bg-da-surface/70" style={{ height: h }} />
              ))}
            </div>
          </li>
          <li className="flex flex-col rounded-da-lg bg-da-primary/12 p-8">
            <Bell aria-hidden className="size-7 text-da-primary" />
            <h3 className="mt-5 font-da-display text-2xl font-extrabold tracking-da-display">Reminders, not nagging</h3>
            <p className="mt-2 text-da-muted-fg">One friendly nudge the day before. Snooze with a single tap.</p>
            <div aria-hidden className="mt-8 flex items-center gap-3 rounded-da-md bg-da-surface p-3 shadow-da-sm">
              <span className="grid size-9 place-items-center rounded-full bg-da-warning/40">🔔</span>
              <span className="text-sm font-medium">“Send invoice to Lumen” is due tomorrow</span>
            </div>
          </li>
          <li className="flex flex-col rounded-da-lg bg-da-warning/25 p-8">
            <MessageCircle aria-hidden className="size-7" />
            <h3 className="mt-5 font-da-display text-2xl font-extrabold tracking-da-display">Comments where work lives</h3>
            <p className="mt-2 text-da-muted-fg">Discuss a task on the task. No more lost threads in chat.</p>
            <div aria-hidden className="mt-8 space-y-2">
              <p className="w-fit rounded-da-md rounded-bl-[4px] bg-da-surface px-3 py-2 text-sm shadow-da-sm">Can we move this to Friday?</p>
              <p className="ml-auto w-fit rounded-da-md rounded-br-[4px] bg-da-primary px-3 py-2 text-sm text-da-primary-fg">Done ✅</p>
            </div>
          </li>
        </ul>
      </div>
    </section>
  );
}

export default FeaturesPastel;