Hero Centered

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

export interface HeroCenteredProps {
  badge?: string;
  title?: string;
  highlight?: string;
  description?: string;
  primaryCta?: { label: string; href: string };
  secondaryCta?: { label: string; href: string };
  transcript?: { speaker: string; text: string; time: string }[];
  className?: string;
}

const GLASS = "da-stroke bg-da-surface backdrop-blur-da backdrop-saturate-150";

/** Centered hero over the mesh with a gradient-text line and a large frosted “live call” window: video tiles, live transcript and an AI summary chip. */
export function HeroCentered({
  badge = "Halo 3.0 — now with live translation",
  title = "Meetings that",
  highlight = "write themselves",
  description = "Halo listens, transcribes in 30 languages and hands you a crisp recap with decisions and owners — seconds after you hang up.",
  primaryCta = { label: "Start free", href: "#signup" },
  secondaryCta = { label: "See how it works", href: "#how" },
  transcript = [
    { speaker: "Amara", text: "So we agree offline mode slips to November?", time: "12:04" },
    { speaker: "Leo", text: "Yes — I’ll write the RFC by Friday.", time: "12:04" },
    { speaker: "Sofia", text: "Pricing variant B won, shipping to 100% today.", time: "12:05" },
  ],
  className,
}: HeroCenteredProps) {
  const tiles = ["Amara Diallo", "Leo Park", "Sofia Rossi", "Noah Klein"];
  return (
    <section className={cn("relative overflow-hidden pt-20 pb-16 text-da-fg sm:pt-28", className)}>
      <div className="da-container flex flex-col items-center text-center">
        <p className={cn("inline-flex items-center gap-2 rounded-da-pill px-3 py-1.5 text-sm font-medium shadow-da-sm", GLASS)}>
          <Sparkles aria-hidden className="size-4 text-da-primary" />
          {badge}
        </p>
        <h1 className="mt-6 max-w-3xl font-da-display text-[clamp(2.5rem,6.5vw,4.75rem)] leading-[1.02] font-semibold tracking-da-display text-balance">
          {title} <span className="bg-gradient-to-r from-da-primary via-da-accent to-da-primary bg-clip-text text-transparent">{highlight}</span>
        </h1>
        <p className="mt-6 max-w-xl text-lg text-pretty text-da-muted-fg">{description}</p>
        <div className="mt-8 flex flex-wrap justify-center gap-3">
          <a
            href={primaryCta.href}
            className="da-focus da-transition group inline-flex h-12 items-center gap-2 rounded-da-pill bg-gradient-to-r from-da-primary to-da-accent px-6 font-semibold text-da-primary-fg shadow-da-md hover:-translate-y-0.5 hover:shadow-da-lg"
          >
            {primaryCta.label}
            <ArrowRight aria-hidden className="da-transition size-4 group-hover:translate-x-0.5" />
          </a>
          <a
            href={secondaryCta.href}
            className={cn("da-focus da-transition inline-flex h-12 items-center rounded-da-pill px-6 font-semibold shadow-da-sm hover:-translate-y-0.5", GLASS)}
          >
            {secondaryCta.label}
          </a>
        </div>
      </div>

      <div className="da-container mt-16">
        <figure aria-label="Halo recording a team call" className={cn("mx-auto max-w-5xl rounded-da-lg p-3 shadow-da-lg", GLASS)}>
          <div className="grid gap-3 lg:grid-cols-[1.6fr_1fr]">
            <div className="grid grid-cols-2 gap-3">
              {tiles.map((t, i) => (
                <div
                  key={t}
                  className="relative aspect-video overflow-hidden rounded-da-md bg-gradient-to-br from-da-primary/25 via-da-surface-2 to-da-accent/25"
                >
                  <span aria-hidden className="absolute inset-0 grid place-items-center">
                    <span className="grid size-14 place-items-center rounded-full bg-da-surface font-da-display text-lg font-semibold shadow-da-sm">
                      {t
                        .split(" ")
                        .map((p) => p[0])
                        .join("")}
                    </span>
                  </span>
                  <span className="absolute bottom-2 left-2 rounded-da-pill bg-da-fg/70 px-2 py-0.5 text-[11px] font-medium text-da-bg">{t}</span>
                  {i === 0 && <span aria-hidden className="absolute inset-0 rounded-da-md ring-2 ring-da-primary" />}
                </div>
              ))}
            </div>
            <div className="flex flex-col rounded-da-md bg-da-surface-2 p-4 text-left">
              <div className="flex items-center justify-between">
                <p className="inline-flex items-center gap-2 text-sm font-semibold">
                  <span aria-hidden className="relative flex size-2">
                    <span className="absolute inset-0 animate-ping rounded-full bg-da-danger opacity-60 motion-reduce:hidden" />
                    <span className="relative size-2 rounded-full bg-da-danger" />
                  </span>
                  Live transcript
                </p>
                <span className="inline-flex items-center gap-1 font-da-mono text-xs text-da-muted-fg">
                  <Pause aria-hidden className="size-3" /> 32:10
                </span>
              </div>
              <ul className="mt-4 space-y-3 text-sm">
                {transcript.map((l) => (
                  <li key={l.text}>
                    <p className="text-xs text-da-muted-fg">
                      <span className="font-semibold text-da-fg">{l.speaker}</span> · {l.time}
                    </p>
                    <p className="mt-0.5">{l.text}</p>
                  </li>
                ))}
              </ul>
              <p className="mt-auto inline-flex items-center gap-2 self-start rounded-da-pill bg-gradient-to-r from-da-primary to-da-accent px-3 py-1.5 text-xs font-semibold text-da-primary-fg shadow-da-sm max-lg:mt-4">
                <Sparkles aria-hidden className="size-3.5" /> 2 decisions · 3 action items captured
              </p>
            </div>
          </div>
        </figure>
      </div>
    </section>
  );
}

export default HeroCentered;