import { SiteLink } from "@/components/site/site-link";

export function SiteMetaRow({
  items,
  className = "",
}: {
  items: Array<string | null | undefined | false>;
  className?: string;
}) {
  const parts = items.filter(Boolean) as string[];
  if (parts.length === 0) return null;
  return (
    <p
      className={`text-sm tracking-wide text-[var(--archi-ink-muted)] ${className}`}
    >
      {parts.join(" · ")}
    </p>
  );
}

export function SiteEmptyState({
  eyebrow = "Coming soon",
  title,
  description,
  actionLabel = "Contact the studio",
  actionHref = "/contact",
}: {
  eyebrow?: string;
  title: string;
  description: string;
  actionLabel?: string;
  actionHref?: string;
}) {
  return (
    <div className="relative overflow-hidden border border-[var(--archi-line)] bg-[var(--studio-stone)] px-6 py-14 text-center sm:px-10 sm:py-16">
      <div
        aria-hidden
        className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-[var(--archi-gold)] to-transparent"
      />
      <p className="text-[0.65rem] tracking-[0.28em] text-[var(--archi-ink-muted)] uppercase">
        {eyebrow}
      </p>
      <h2 className="mt-3 font-[family-name:var(--font-display)] text-[clamp(1.6rem,4vw,2.25rem)] tracking-tight">
        {title}
      </h2>
      <p className="mx-auto mt-4 max-w-md text-sm leading-7 text-[var(--archi-ink-muted)] sm:text-[0.95rem]">
        {description}
      </p>
      <SiteLink href={actionHref} className="studio-btn-primary mt-8 inline-flex">
        {actionLabel}
      </SiteLink>
    </div>
  );
}

export function SiteClosingCta({
  studioName,
  title = "Ready to begin?",
  description,
}: {
  studioName: string;
  title?: string;
  description?: string;
}) {
  return (
    <section className="relative overflow-hidden border-t border-white/10 bg-[var(--archi-dark)] text-white">
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0"
        style={{
          background:
            "radial-gradient(ellipse 50% 60% at 85% 20%, rgba(201,162,39,0.16), transparent 55%)",
        }}
      />
      <div className="studio-grain pointer-events-none absolute inset-0 opacity-25" />
      <div className="studio-container relative flex flex-col gap-8 py-14 sm:flex-row sm:items-end sm:justify-between sm:py-16 lg:py-20">
        <div className="max-w-xl">
          <div className="mb-5 h-px w-12 bg-gradient-to-r from-[var(--archi-gold)] to-transparent" />
          <h2 className="font-[family-name:var(--font-display)] text-[clamp(1.75rem,4.5vw,2.75rem)] tracking-tight">
            {title}
          </h2>
          <p className="mt-4 text-sm leading-7 text-white/45 sm:text-base">
            {description ??
              `Tell ${studioName} about your site, program, or ambition.`}
          </p>
        </div>
        <div className="studio-cta-row shrink-0">
          <SiteLink href="/contact" className="studio-btn-primary">
            Inquire
          </SiteLink>
          <SiteLink href="/projects" className="studio-btn-ghost-on-dark">
            View projects
          </SiteLink>
        </div>
      </div>
    </section>
  );
}
