Hero Glow

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

export interface HeroGlowCta {
  label: string;
  href: string;
}

export interface HeroGlowIncident {
  id: string;
  title: string;
  service: string;
  severity: "SEV1" | "SEV2" | "SEV3";
  status: "Investigating" | "Identified" | "Monitoring" | "Resolved";
  age: string;
}

export interface HeroGlowProps {
  announcement?: { label: string; href: string };
  title?: string;
  description?: string;
  primaryCta?: HeroGlowCta;
  secondaryCta?: HeroGlowCta;
  incidents?: HeroGlowIncident[];
  /** Hide the product window under the copy. */
  hideMockup?: boolean;
  className?: string;
}

const SEVERITY: Record<HeroGlowIncident["severity"], string> = {
  SEV1: "bg-da-danger",
  SEV2: "bg-da-warning",
  SEV3: "bg-da-muted-fg",
};

const DEFAULT_INCIDENTS: HeroGlowIncident[] = [
  { id: "INC-2481", title: "Elevated 5xx on checkout-api", service: "checkout-api", severity: "SEV1", status: "Identified", age: "4m" },
  { id: "INC-2480", title: "Webhook delivery delays (eu-west-1)", service: "webhooks", severity: "SEV2", status: "Monitoring", age: "38m" },
  { id: "INC-2477", title: "Search p95 latency above 800ms", service: "search", severity: "SEV3", status: "Investigating", age: "1h" },
  { id: "INC-2472", title: "Login emails not delivered to Outlook", service: "notifications", severity: "SEV2", status: "Resolved", age: "3h" },
];

export function HeroGlow({
  announcement = { label: "Tracewise AI now drafts your postmortems", href: "#changelog" },
  title = "Resolve incidents before your customers notice",
  description = "Tracewise routes the right alert to the right engineer, spins up the war room, and keeps your status page honest — so you can get back to shipping.",
  primaryCta = { label: "Start for free", href: "#signup" },
  secondaryCta = { label: "Book a demo", href: "#demo" },
  incidents = DEFAULT_INCIDENTS,
  hideMockup = false,
  className,
}: HeroGlowProps) {
  return (
    <section className={cn("relative isolate overflow-hidden bg-da-bg pt-20 pb-16 text-da-fg sm:pt-28", className)}>
      {/* Single soft glow + fading grid, the only decoration of the page */}
      <div
        aria-hidden
        className="absolute inset-x-0 -top-40 -z-10 mx-auto h-[520px] max-w-4xl rounded-full bg-da-primary/25 blur-[120px]"
      />
      <div
        aria-hidden
        className="absolute inset-0 -z-10 [background-image:linear-gradient(var(--da-border)_1px,transparent_1px),linear-gradient(90deg,var(--da-border)_1px,transparent_1px)] [background-size:64px_64px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,black,transparent)]"
      />

      <div className="da-container flex flex-col items-center text-center">
        <a
          href={announcement.href}
          className="da-focus da-transition group da-stroke inline-flex items-center gap-2 rounded-da-pill bg-da-surface/60 py-1 pr-2.5 pl-1 text-[13px] text-da-muted-fg backdrop-blur hover:text-da-fg"
        >
          <span className="rounded-da-pill bg-da-accent px-2 py-0.5 text-xs font-medium text-da-accent-fg">New</span>
          {announcement.label}
          <ChevronRight aria-hidden className="da-transition size-3.5 group-hover:translate-x-0.5" />
        </a>
        <h1 className="mt-6 max-w-3xl bg-gradient-to-b from-da-fg to-da-fg/65 bg-clip-text font-da-display text-[clamp(2.5rem,6vw,4.5rem)] leading-[1.02] font-semibold tracking-da-display text-balance text-transparent">
          {title}
        </h1>
        <p className="mt-6 max-w-xl text-[17px] leading-relaxed text-pretty text-da-muted-fg">{description}</p>
        <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
          <a
            href={primaryCta.href}
            className="da-focus da-transition group inline-flex h-10 items-center gap-1.5 rounded-da-md bg-da-primary px-4 text-sm font-medium text-da-primary-fg shadow-da-sm hover:bg-da-primary/90"
          >
            {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 da-stroke inline-flex h-10 items-center rounded-da-md bg-da-surface px-4 text-sm font-medium text-da-surface-fg shadow-da-sm hover:bg-da-muted"
          >
            {secondaryCta.label}
          </a>
        </div>
      </div>

      {!hideMockup && (
        <div className="da-container mt-16 sm:mt-20">
          <div className="relative [mask-image:linear-gradient(to_bottom,black_70%,transparent)]">
            <div className="da-stroke overflow-hidden rounded-da-lg bg-da-surface text-da-surface-fg shadow-da-lg">
              <div className="flex items-center gap-3 border-b border-da-border px-4 py-3">
                <span aria-hidden className="flex gap-1.5">
                  <span className="size-2.5 rounded-full bg-da-fg/15" />
                  <span className="size-2.5 rounded-full bg-da-fg/15" />
                  <span className="size-2.5 rounded-full bg-da-fg/15" />
                </span>
                <p className="text-[13px] font-medium">Incidents</p>
                <p className="ml-auto font-da-mono text-[11px] text-da-muted-fg">
                  <span className="mr-1.5 inline-block size-1.5 rounded-full bg-da-success align-middle" />
                  3 on-call · 2 active
                </p>
              </div>
              <ul className="divide-y divide-da-border text-left">
                {incidents.map((inc) => (
                  <li key={inc.id} className="flex items-center gap-4 px-4 py-3 text-sm">
                    <span aria-hidden className={cn("size-2 shrink-0 rounded-full", SEVERITY[inc.severity])} />
                    <span className="hidden w-20 shrink-0 font-da-mono text-xs text-da-muted-fg sm:block">{inc.id}</span>
                    <span className="min-w-0 flex-1 truncate">{inc.title}</span>
                    <span className="hidden shrink-0 rounded-da-sm bg-da-muted px-1.5 py-0.5 font-da-mono text-[11px] text-da-muted-fg md:block">
                      {inc.service}
                    </span>
                    <span className="w-24 shrink-0 text-right text-xs text-da-muted-fg">{inc.status}</span>
                    <span className="w-8 shrink-0 text-right font-da-mono text-xs text-da-muted-fg">{inc.age}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      )}
    </section>
  );
}

export default HeroGlow;