Hero Mesh

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

export interface HeroMeshProps {
  badge?: string;
  title?: string;
  highlight?: string;
  description?: string;
  primaryCta?: { label: string; href: string };
  secondaryCta?: { label: string; href: string };
  meeting?: {
    title: string;
    time: string;
    participants: string[];
    summary: string[];
    actions: { text: string; owner: string }[];
  };
  className?: string;
}

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

const AVATAR_TONES = ["from-da-primary to-da-accent", "from-da-accent to-da-success", "from-da-danger to-da-primary", "from-da-warning to-da-danger"];

export function HeroMesh({
  badge = "New · Halo Recaps for Zoom and Google Meet",
  title = "Every meeting,",
  highlight = "summarized before you leave the call.",
  description = "Halo joins your calls, writes crisp notes, and turns decisions into tasks in Linear, Jira or Notion. Replace status meetings with 2-minute async video updates.",
  primaryCta = { label: "Start free", href: "#signup" },
  secondaryCta = { label: "Watch the 90s demo", href: "#demo" },
  meeting = {
    title: "Q4 roadmap sync",
    time: "Today · 32 min",
    participants: ["Amara Diallo", "Leo Park", "Sofia Rossi", "Noah Klein"],
    summary: ["Mobile offline mode moves to November.", "Pricing page test wins: +18% trial starts.", "Hiring: second designer approved."],
    actions: [
      { text: "Draft offline mode RFC", owner: "Leo" },
      { text: "Ship pricing variant B to 100%", owner: "Sofia" },
    ],
  },
  className,
}: HeroMeshProps) {
  return (
    <section className={cn("relative overflow-hidden pt-16 pb-24 text-da-fg sm:pt-24", className)}>
      <div className="da-container grid items-center gap-16 lg:grid-cols-[1.05fr_1fr]">
        <div>
          <p className={cn("inline-flex items-center gap-2 rounded-da-pill px-3 py-1.5 text-[13px] font-medium shadow-da-sm", GLASS)}>
            <Sparkles aria-hidden className="size-3.5 text-da-primary" />
            {badge}
          </p>
          <h1 className="mt-6 font-da-display text-[clamp(2.5rem,5.5vw,4.25rem)] leading-[1.04] font-semibold tracking-da-display text-balance">
            {title}{" "}
            <span className="bg-gradient-to-r from-da-primary to-da-accent bg-clip-text text-transparent">{highlight}</span>
          </h1>
          <p className="mt-6 max-w-xl text-lg leading-relaxed text-da-muted-fg">{description}</p>
          <div className="mt-9 flex flex-wrap 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 gap-2.5 rounded-da-pill pr-6 pl-2 font-semibold shadow-da-sm hover:-translate-y-0.5", GLASS)}
            >
              <span className="grid size-8 place-items-center rounded-full bg-da-fg text-da-bg">
                <Play aria-hidden className="size-3.5 translate-x-px fill-current" />
              </span>
              {secondaryCta.label}
            </a>
          </div>
        </div>

        {/* Product composition: layered glass cards */}
        <div className="relative mx-auto w-full max-w-lg sm:mb-24 lg:mx-0">
          <div aria-hidden className="absolute -inset-10 -z-10 rounded-full bg-gradient-to-tr from-da-primary/40 via-da-accent/25 to-transparent blur-3xl" />

          <article className={cn("rounded-da-lg p-6 shadow-da-lg", GLASS)} aria-label={`Meeting recap: ${meeting.title}`}>
            <div className="flex items-start justify-between gap-4">
              <div>
                <p className="font-da-mono text-xs text-da-muted-fg">{meeting.time}</p>
                <h2 className="mt-1 font-da-display text-xl font-semibold tracking-da-display">{meeting.title}</h2>
              </div>
              <ul className="flex -space-x-2" aria-label="Participants">
                {meeting.participants.map((p, i) => (
                  <li key={p} title={p} className={cn("grid size-8 place-items-center rounded-full bg-gradient-to-br text-[11px] font-semibold text-white ring-2 ring-da-bg", AVATAR_TONES[i % AVATAR_TONES.length])}>
                    <span aria-hidden>{p.split(" ").map((w) => w[0]).join("")}</span>
                    <span className="sr-only">{p}</span>
                  </li>
                ))}
              </ul>
            </div>
            <div className="mt-5 rounded-da-md bg-da-surface-2 p-4">
              <p className="flex items-center gap-1.5 text-xs font-semibold text-da-primary">
                <Sparkles aria-hidden className="size-3.5" /> AI summary
              </p>
              <ul className="mt-2 space-y-1.5 text-sm">
                {meeting.summary.map((s) => (
                  <li key={s} className="flex gap-2">
                    <span aria-hidden className="mt-2 size-1 shrink-0 rounded-full bg-da-fg/50" />
                    {s}
                  </li>
                ))}
              </ul>
            </div>
            <ul className="mt-4 space-y-2 text-sm">
              {meeting.actions.map((a) => (
                <li key={a.text} className="flex items-center gap-2.5">
                  <CheckCircle2 aria-hidden className="size-4 shrink-0 text-da-success" />
                  <span className="flex-1">{a.text}</span>
                  <span className="rounded-da-pill bg-da-muted px-2 py-0.5 text-xs font-medium text-da-muted-fg">@{a.owner}</span>
                </li>
              ))}
            </ul>
          </article>

          {/* Floating async update card */}
          <div aria-hidden className={cn("absolute -bottom-28 -left-10 hidden w-56 rounded-da-lg p-3 shadow-da-lg sm:block", GLASS, "glass-float")}>
            <div className="relative aspect-video overflow-hidden rounded-da-md bg-gradient-to-br from-da-primary/80 via-da-accent/60 to-da-danger/50">
              <span className="absolute inset-0 grid place-items-center">
                <span className="grid size-9 place-items-center rounded-full bg-white/30 backdrop-blur">
                  <Play className="size-4 translate-x-px fill-white text-white" />
                </span>
              </span>
              <span className="absolute right-2 bottom-2 rounded bg-black/40 px-1 font-da-mono text-[10px] text-white">1:48</span>
            </div>
            <p className="mt-2 text-xs font-semibold">Weekly update · Design</p>
            <p className="text-[11px] text-da-muted-fg">Sofia · 3 reactions</p>
          </div>

          {/* Recording pill */}
          <p aria-hidden className={cn("absolute -top-5 right-4 flex items-center gap-2 rounded-da-pill px-3 py-1.5 text-xs font-semibold shadow-da-md", GLASS, "glass-float [animation-delay:-3s]")}>
            <span className="size-2 animate-pulse rounded-full bg-da-danger motion-reduce:animate-none" /> Recording · 12:04
          </p>
        </div>
      </div>
      <style href="glass-float" precedence="default">{`
        @keyframes glass-float { 0%,100% { translate: 0 0 } 50% { translate: 0 -8px } }
        .glass-float { animation: glass-float 6s ease-in-out infinite }
        @media (prefers-reduced-motion: reduce) { .glass-float { animation: none } }
      `}</style>
    </section>
  );
}

export default HeroMesh;