Hero Tiles

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

export interface HeroTilesProps {
  eyebrow?: string;
  title?: string;
  description?: string;
  cta?: { label: string; href: string };
  tiles?: { title: string; text: string; icon: "board" | "week" | "remind" | "team" }[];
  className?: string;
}

const ICONS = { board: LayoutGrid, week: CalendarDays, remind: Bell, team: Users };
const TINTS = ["bg-da-accent text-da-accent-fg", "bg-da-secondary text-da-secondary-fg", "bg-da-primary/12 text-da-fg", "bg-da-warning/25 text-da-fg"];

/** Hero with a left-aligned headline block and a 2×2 grid of pastel feature tiles next to it (stacked on mobile). */
export function HeroTiles({
  eyebrow = "Planta for small teams",
  title = "Everything your team needs to get things done",
  description = "No 40-tab setup. Just boards, a weekly view, gentle reminders and a place to chat about the work.",
  cta = { label: "Try it free", href: "#signup" },
  tiles = [
    { title: "Boards", text: "Drag-and-drop columns for any workflow.", icon: "board" },
    { title: "Weekly view", text: "Plan by day, not by endless list.", icon: "week" },
    { title: "Reminders", text: "Nudges at the right moment, never spam.", icon: "remind" },
    { title: "Shared spaces", text: "One home per project or client.", icon: "team" },
  ],
  className,
}: HeroTilesProps) {
  return (
    <section className={cn("bg-da-bg py-16 text-da-fg sm:py-24", className)}>
      <div className="da-container grid items-center gap-10 lg:grid-cols-[1fr_1.1fr] lg:gap-16">
        <div>
          <p className="text-sm font-semibold text-da-primary">{eyebrow}</p>
          <h1 className="mt-4 font-da-display text-[clamp(2.5rem,5.5vw,4rem)] leading-[1.05] font-extrabold tracking-da-display text-balance">{title}</h1>
          <p className="mt-5 max-w-md text-lg text-da-muted-fg">{description}</p>
          <a
            href={cta.href}
            className="da-focus da-transition group mt-8 inline-flex h-13 items-center gap-2 rounded-da-pill bg-da-fg px-7 font-semibold text-da-bg hover:-translate-y-0.5"
          >
            {cta.label}
            <ArrowRight aria-hidden className="da-transition size-4 group-hover:translate-x-0.5" />
          </a>
        </div>
        <ul className="grid gap-4 sm:grid-cols-2">
          {tiles.map((t, i) => {
            const Icon = ICONS[t.icon];
            return (
              <li key={t.title} className={cn("rounded-da-lg p-6 sm:p-7", TINTS[i % TINTS.length], i % 2 === 1 && "sm:translate-y-8")}>
                <span className="grid size-12 place-items-center rounded-da-md bg-da-surface text-da-fg shadow-da-sm">
                  <Icon aria-hidden className="size-6" />
                </span>
                <h2 className="mt-6 font-da-display text-2xl font-extrabold tracking-da-display">{t.title}</h2>
                <p className="mt-1.5 opacity-90">{t.text}</p>
              </li>
            );
          })}
        </ul>
      </div>
    </section>
  );
}

export default HeroTiles;