Hero Poster

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

export interface HeroPosterProps {
  /** Words of the giant headline, one per row. */
  words?: string[];
  description?: string;
  primaryCta?: { label: string; href: string };
  secondaryCta?: { label: string; href: string };
  stickers?: { label: string; tone: "primary" | "accent" | "secondary" | "success" }[];
  logos?: string[];
  className?: string;
}

const TONE = {
  primary: "bg-da-primary text-da-primary-fg",
  accent: "bg-da-accent text-da-accent-fg",
  secondary: "bg-da-secondary text-da-secondary-fg",
  success: "bg-da-success text-da-success-fg",
} as const;

// Sticker positions around the headline (desktop only).
const SPOTS = ["left-[2%] top-6 -rotate-6", "right-[2%] top-8 rotate-3", "left-[4%] bottom-[16%] rotate-2", "right-[4%] bottom-[22%] -rotate-3"];

export function HeroPoster({
  words = ["Changelogs", "people", "actually", "read."],
  description = "Shipyard turns merged PRs into release notes, in-app announcements and digests. Loud enough to notice. Clear enough to understand.",
  primaryCta = { label: "Start free", href: "#signup" },
  secondaryCta = { label: "See examples", href: "#examples" },
  stickers = [
    { label: "AI summaries", tone: "accent" },
    { label: "Free for OSS", tone: "success" },
    { label: "9 kB widget", tone: "secondary" },
    { label: "24 languages", tone: "primary" },
  ],
  logos = ["LEDGERLINE", "PARCELO", "KITEWIRE", "NORTHDESK", "FORMBASE", "QUEUEBIRD"],
  className,
}: HeroPosterProps) {
  return (
    <section className={cn("da-stroke-b relative overflow-hidden bg-da-bg text-da-fg", className)}>
      <div className="relative da-container pt-16 pb-12 text-center sm:pt-24">
        {stickers.map((s, i) => (
          <span
            key={s.label}
            className={cn(
              "da-stroke absolute hidden px-3 py-1.5 font-da-mono text-xs font-bold tracking-da-label uppercase shadow-da-sm lg:block",
              TONE[s.tone],
              SPOTS[i % SPOTS.length],
            )}
          >
            {s.label}
          </span>
        ))}
        <h1 className="font-da-display text-[clamp(3rem,11vw,9rem)] leading-[0.85] tracking-da-display uppercase">
          {words.map((w, i) => (
            <span key={`${w}-${i}`} className={cn("block", i % 2 === 1 && "text-transparent [-webkit-text-stroke:3px_var(--da-fg)]")}>
              {w}
            </span>
          ))}
        </h1>
        <p className="mx-auto mt-10 max-w-xl text-lg text-da-muted-fg">{description}</p>
        <div className="mt-8 flex flex-wrap justify-center gap-4">
          <a
            href={primaryCta.href}
            className="da-focus da-transition da-stroke bg-da-primary px-7 py-4 text-lg font-bold text-da-primary-fg shadow-da-md hover:translate-x-[6px] hover:translate-y-[6px] hover:shadow-none"
          >
            {primaryCta.label}
          </a>
          <a
            href={secondaryCta.href}
            className="da-focus da-transition da-stroke bg-da-surface px-7 py-4 text-lg font-bold text-da-surface-fg shadow-da-md hover:translate-x-[6px] hover:translate-y-[6px] hover:shadow-none"
          >
            {secondaryCta.label}
          </a>
        </div>
        <ul className="mt-6 flex flex-wrap justify-center gap-2 lg:hidden" aria-label="Highlights">
          {stickers.map((s) => (
            <li key={s.label} className={cn("da-stroke px-2 py-1 font-da-mono text-[11px] font-bold uppercase", TONE[s.tone])}>
              {s.label}
            </li>
          ))}
        </ul>
      </div>
      <div className="da-stroke-t bg-da-surface text-da-surface-fg">
        <ul className="da-container grid grid-cols-3 sm:grid-cols-6" aria-label="Customers">
          {logos.map((l, i) => (
            <li key={l} className={cn("py-5 text-center font-da-display text-sm tracking-da-display", i > 0 && "sm:da-stroke-l", i % 3 !== 0 && "da-stroke-l")}>
              {l}
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

export default HeroPoster;