Hero Illustrated

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

export interface HeroIllustratedProps {
  badge?: string;
  title?: string;
  description?: string;
  primaryCta?: { label: string; href: string };
  secondaryCta?: { label: string; href: string };
  proof?: string;
  className?: string;
}

/** Split hero: friendly headline and pill CTAs on the left, a flat pastel illustration of a kanban board (built from shapes, no images) on the right. */
export function HeroIllustrated({
  badge = "New: recurring tasks 🔁",
  title = "Plan your week without the stress",
  description = "Planta keeps your team’s tasks, deadlines and weekly plans in one calm place — so everyone knows what’s next.",
  primaryCta = { label: "Get started — free", href: "#signup" },
  secondaryCta = { label: "See templates", href: "#templates" },
  proof = "Loved by 40,000+ small teams",
  className,
}: HeroIllustratedProps) {
  const columns = [
    { title: "To do", tint: "bg-da-accent", cards: ["Draft newsletter", "Book venue"] },
    { title: "Doing", tint: "bg-da-primary/12", cards: ["Q4 roadmap", "Logo refresh"] },
    { title: "Done", tint: "bg-da-secondary", cards: ["Hire designer"] },
  ];
  return (
    <section className={cn("overflow-hidden bg-da-bg py-16 text-da-fg sm:py-24", className)}>
      <div className="da-container grid items-center gap-14 lg:grid-cols-2">
        <div>
          <p className="inline-flex rounded-da-pill bg-da-warning/25 px-4 py-1.5 text-sm font-semibold">{badge}</p>
          <h1 className="mt-6 font-da-display text-[clamp(2.5rem,6vw,4.25rem)] leading-[1.04] font-extrabold tracking-da-display text-balance">{title}</h1>
          <p className="mt-5 max-w-lg text-lg text-pretty text-da-muted-fg">{description}</p>
          <div className="mt-8 flex flex-wrap gap-3">
            <a
              href={primaryCta.href}
              className="da-focus da-transition group inline-flex h-13 items-center gap-2 rounded-da-pill bg-da-primary px-7 font-semibold text-da-primary-fg shadow-da-md hover:-translate-y-0.5"
            >
              {primaryCta.label}
              <ArrowRight aria-hidden className="da-transition size-4 group-hover:translate-x-0.5" />
            </a>
            <a
              href={secondaryCta.href}
              className="da-focus da-transition inline-flex h-13 items-center rounded-da-pill bg-da-surface px-7 font-semibold shadow-da-sm hover:-translate-y-0.5"
            >
              {secondaryCta.label}
            </a>
          </div>
          <p className="mt-8 flex items-center gap-3 text-sm text-da-muted-fg">
            <span aria-hidden className="flex -space-x-2">
              {["bg-da-accent", "bg-da-secondary", "bg-da-primary/30", "bg-da-warning/60"].map((c) => (
                <span key={c} className={cn("size-8 rounded-full ring-3 ring-da-bg", c)} />
              ))}
            </span>
            {proof}
          </p>
        </div>

        <div aria-hidden className="relative">
          <div className="absolute -top-10 -right-8 size-40 rounded-full bg-da-warning/30" />
          <div className="absolute -bottom-8 -left-6 size-28 rounded-[32px] bg-da-secondary" />
          <div className="relative rounded-da-lg bg-da-surface p-5 shadow-da-lg">
            <div className="flex items-center justify-between">
              <p className="font-da-display text-lg font-extrabold">Launch week 🚀</p>
              <span className="flex -space-x-1.5">
                <span className="size-6 rounded-full bg-da-primary ring-2 ring-da-surface" />
                <span className="size-6 rounded-full bg-da-accent ring-2 ring-da-surface" />
              </span>
            </div>
            <div className="mt-4 grid grid-cols-3 gap-3">
              {columns.map((c) => (
                <div key={c.title} className="rounded-da-md bg-da-surface-2 p-2.5">
                  <p className="px-1 text-xs font-semibold text-da-muted-fg">{c.title}</p>
                  <div className="mt-2 space-y-2">
                    {c.cards.map((t) => (
                      <div key={t} className={cn("rounded-da-sm p-2.5 text-xs font-medium", c.tint)}>
                        {c.title === "Done" && <Check className="mb-1 size-3.5" />}
                        {t}
                      </div>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          </div>
          <div className="absolute -bottom-6 right-6 flex items-center gap-2 rounded-da-pill bg-da-surface px-4 py-2.5 text-sm font-semibold shadow-da-md">
            <span className="grid size-6 place-items-center rounded-full bg-da-secondary text-da-secondary-fg">
              <Check className="size-3.5" />
            </span>
            3 tasks done today
          </div>
        </div>
      </div>
    </section>
  );
}

export default HeroIllustrated;