Hero Planner

import { cn } from "@/lib/utils";

export interface HeroPlannerProps {
  title?: string;
  description?: string;
  primaryCta?: { label: string; href: string };
  secondaryCta?: { label: string; href: string };
  week?: { day: string; date: string; tasks: { text: string; tint: "peach" | "mint" | "lavender" | "butter" }[] }[];
  className?: string;
}

const TINT = {
  peach: "bg-da-accent text-da-accent-fg",
  mint: "bg-da-secondary text-da-secondary-fg",
  lavender: "bg-da-primary/12 text-da-fg",
  butter: "bg-da-warning/25 text-da-fg",
} as const;

const DEFAULT_WEEK: NonNullable<HeroPlannerProps["week"]> = [
  {
    day: "Mon",
    date: "6",
    tasks: [
      { text: "Team kickoff", tint: "lavender" },
      { text: "Write brief", tint: "peach" },
    ],
  },
  { day: "Tue", date: "7", tasks: [{ text: "Design review", tint: "mint" }] },
  {
    day: "Wed",
    date: "8",
    tasks: [
      { text: "Client call", tint: "butter" },
      { text: "Fix onboarding", tint: "peach" },
      { text: "1:1 with Ana", tint: "lavender" },
    ],
  },
  { day: "Thu", date: "9", tasks: [{ text: "Ship v2.1", tint: "mint" }] },
  { day: "Fri", date: "10", tasks: [{ text: "Retro 🎉", tint: "butter" }] },
];

/** Centered hero with a big rounded headline and a full-width weekly planner mock-up (five pastel day columns) under it. */
export function HeroPlanner({
  title = "A calmer way to plan your team’s week",
  description = "Drop tasks on days, not in endless lists. Planta shows everyone what’s happening — and what can wait.",
  primaryCta = { label: "Start planning free", href: "#signup" },
  secondaryCta = { label: "Watch 1-min tour", href: "#tour" },
  week = DEFAULT_WEEK,
  className,
}: HeroPlannerProps) {
  return (
    <section className={cn("bg-da-bg pt-20 pb-16 text-da-fg sm:pt-28", className)}>
      <div className="da-container text-center">
        <h1 className="mx-auto max-w-3xl font-da-display text-[clamp(2.5rem,6.5vw,4.5rem)] leading-[1.03] font-extrabold tracking-da-display text-balance">
          {title}
        </h1>
        <p className="mx-auto mt-5 max-w-xl text-lg text-pretty text-da-muted-fg">{description}</p>
        <div className="mt-8 flex flex-wrap justify-center gap-3">
          <a
            href={primaryCta.href}
            className="da-focus da-transition inline-flex h-13 items-center rounded-da-pill bg-da-primary px-7 font-semibold text-da-primary-fg shadow-da-md hover:-translate-y-0.5"
          >
            {primaryCta.label}
          </a>
          <a
            href={secondaryCta.href}
            className="da-focus da-transition inline-flex h-13 items-center gap-2 rounded-da-pill bg-da-surface px-7 font-semibold shadow-da-sm hover:-translate-y-0.5"
          >
            <span aria-hidden className="grid size-6 place-items-center rounded-full bg-da-accent text-[10px] text-da-accent-fg">
              ▶
            </span>
            {secondaryCta.label}
          </a>
        </div>
      </div>
      <div className="da-container mt-16">
        <figure aria-label="Planta weekly planner example" className="rounded-da-lg bg-da-surface p-4 shadow-da-lg sm:p-6">
          <div className="flex items-center justify-between px-1">
            <p className="font-da-display text-lg font-extrabold">This week</p>
            <p className="rounded-da-pill bg-da-surface-2 px-3 py-1 font-da-mono text-xs text-da-muted-fg">Oct 6 – 10</p>
          </div>
          <div className="mt-5 grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5">
            {week.map((d, i) => (
              <div key={d.day} className={cn("rounded-da-md bg-da-surface-2 p-3 text-left", i > 1 && "max-sm:hidden", i > 2 && "sm:max-lg:hidden")}>
                <p className="flex items-baseline gap-2">
                  <span className="font-da-display text-2xl font-extrabold">{d.date}</span>
                  <span className="text-sm font-medium text-da-muted-fg">{d.day}</span>
                </p>
                <ul className="mt-3 space-y-2">
                  {d.tasks.map((t) => (
                    <li key={t.text} className={cn("rounded-da-sm px-3 py-2.5 text-sm font-medium", TINT[t.tint])}>
                      {t.text}
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </figure>
      </div>
    </section>
  );
}

export default HeroPlanner;