Hero Statement

import { ArrowDown } from "lucide-react";
import { cn } from "@/lib/utils";

export interface HeroStatementProps {
  statement?: string;
  /** Word after which the signal dot appears. */
  mark?: string;
  footnotes?: { label: string; value: string }[];
  cta?: { label: string; href: string };
  className?: string;
}

/** Quiet manifesto hero: a single large statement set in the display face with generous line height and an orange signal dot after a key word, bottom-anchored mono footnotes and a scroll cue; nearly full-height. */
export function HeroStatement({
  statement = "We build tools for people who care about the last pixel. Frame is a website builder that gets out of the way of the work.",
  mark = "pixel.",
  footnotes = [
    { label: "Founded", value: "Amsterdam, 2019" },
    { label: "Used by", value: "3,400 studios in 61 countries" },
    { label: "Built by", value: "A team of 14" },
  ],
  cta = { label: "Scroll to see the work", href: "#work" },
  className,
}: HeroStatementProps) {
  const i = statement.indexOf(mark);
  const before = i >= 0 ? statement.slice(0, i + mark.length) : statement;
  const after = i >= 0 ? statement.slice(i + mark.length) : "";
  return (
    <section aria-label="Introduction" className={cn("flex min-h-[90dvh] flex-col bg-da-bg text-da-fg", className)}>
      <div className="da-container flex flex-1 items-center py-20">
        <h1 className="max-w-5xl font-da-display text-[clamp(2rem,5vw,4.25rem)] leading-[1.1] font-medium tracking-[-0.03em] text-balance">
          {before}
          {i >= 0 && <span aria-hidden className="ml-2 inline-block size-[0.28em] translate-y-[-0.1em] rounded-full bg-da-accent align-middle" />}
          <span className="text-da-muted-fg">{after}</span>
        </h1>
      </div>
      <div className="da-container grid gap-6 border-t border-da-border py-6 sm:grid-cols-4">
        {footnotes.map((f) => (
          <p key={f.label} className="font-da-mono text-[11px] tracking-da-label uppercase">
            <span className="block text-da-muted-fg">{f.label}</span>
            {f.value}
          </p>
        ))}
        <a
          href={cta.href}
          className="da-focus flex items-center gap-2 self-end justify-self-start rounded-da-sm font-da-mono text-[11px] tracking-da-label uppercase sm:justify-self-end"
        >
          {cta.label} <ArrowDown aria-hidden className="size-3.5" />
        </a>
      </div>
    </section>
  );
}

export default HeroStatement;