Hero Chat

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

export interface HeroChatProps {
  badge?: string;
  title?: string;
  highlight?: string;
  description?: string;
  primaryCta?: { label: string; href: string };
  secondaryCta?: { label: string; href: string };
  question?: string;
  answer?: string[];
  className?: string;
}

/** Centered dark hero: model badge, headline with a gradient ending, two CTAs, then a chat window mock-up lit by the Nocturne glow. */
export function HeroChat({
  badge = "New — Nova 3 with team memory",
  title = "Ask anything.",
  highlight = "Nova remembers the rest.",
  description = "One assistant for your whole team. Nova reads your docs, tickets and threads, keeps the context, and answers in seconds — with sources.",
  primaryCta = { label: "Start chatting", href: "#start" },
  secondaryCta = { label: "Watch the demo", href: "#demo" },
  question = "What did we decide about the onboarding redesign?",
  answer = [
    "In Thursday's product sync, the team agreed to ship the 3-step onboarding behind a flag on Oct 14.",
    "Maya owns the copy, Leo the analytics events. Open question: whether to keep the video intro — decision due Friday.",
  ],
  className,
}: HeroChatProps) {
  return (
    <section className={cn("relative isolate overflow-hidden da-section", className)}>
      <div aria-hidden className="absolute inset-x-0 bottom-0 -z-10 h-[70%] bg-(image:--nocturne-glow)" />
      <div className="da-container flex flex-col items-center text-center">
        <p className="da-stroke inline-flex items-center gap-2 rounded-da-pill bg-da-surface/70 px-3 py-1 text-xs font-medium text-da-muted-fg">
          <Sparkles aria-hidden className="size-3.5 text-da-primary" />
          {badge}
        </p>
        <h1 className="mt-6 max-w-3xl font-da-display text-4xl leading-[1.05] font-semibold tracking-da-display text-balance sm:text-6xl">
          {title}{" "}
          <span className="bg-gradient-to-r from-da-primary to-da-accent bg-clip-text text-transparent">{highlight}</span>
        </h1>
        <p className="mt-5 max-w-xl text-base text-pretty text-da-muted-fg sm:text-lg">{description}</p>
        <div className="mt-8 flex flex-wrap justify-center gap-3">
          <a
            href={primaryCta.href}
            className="da-focus da-transition inline-flex h-11 items-center gap-2 rounded-da-pill bg-da-primary px-6 text-sm font-semibold text-da-primary-fg shadow-[0_0_32px_-8px_var(--da-primary)] hover:brightness-110"
          >
            {primaryCta.label}
            <ArrowRight aria-hidden className="size-4" />
          </a>
          <a href={secondaryCta.href} className="da-focus da-transition da-stroke inline-flex h-11 items-center rounded-da-pill bg-da-surface px-6 text-sm font-medium hover:bg-da-surface-2">
            {secondaryCta.label}
          </a>
        </div>

        <div className="da-stroke mt-14 w-full max-w-2xl overflow-hidden rounded-da-lg bg-da-bg/80 text-left shadow-da-lg backdrop-blur-da">
          <div className="flex items-center gap-2 border-b border-da-border px-4 py-3">
            <span aria-hidden className="grid size-7 place-items-center rounded-full bg-da-primary font-da-display text-xs font-semibold text-da-primary-fg">N</span>
            <span className="text-sm font-semibold">Nova</span>
            <span className="rounded-da-pill bg-da-secondary px-2 py-0.5 font-da-mono text-[11px] text-da-muted-fg">nova-3 · team memory</span>
          </div>
          <div className="space-y-5 px-4 py-5 sm:px-6">
            <p className="ml-auto w-fit max-w-[85%] rounded-da-pill bg-da-secondary px-4 py-2 text-sm">{question}</p>
            <div className="flex gap-3">
              <span aria-hidden className="grid size-7 shrink-0 place-items-center rounded-full bg-da-primary font-da-display text-xs font-semibold text-da-primary-fg">N</span>
              <div className="min-w-0 space-y-2 text-sm leading-relaxed">
                <p className="flex items-center gap-1.5 text-xs text-da-muted-fg">
                  <Sparkles aria-hidden className="size-3.5" /> Thought for 2 seconds <ChevronDown aria-hidden className="size-3.5" />
                </p>
                {answer.map((line) => (
                  <p key={line}>{line}</p>
                ))}
                <p className="flex flex-wrap gap-1.5 pt-1">
                  {["Product sync — Oct 3", "ONB-214", "#design-crit"].map((s) => (
                    <span key={s} className="da-stroke rounded-da-pill px-2 py-0.5 font-da-mono text-[11px] text-da-muted-fg">
                      {s}
                    </span>
                  ))}
                </p>
              </div>
            </div>
          </div>
          <div className="px-3 pb-3">
            <div aria-hidden className="da-stroke flex items-center gap-2 rounded-da-lg bg-da-surface px-4 py-3 text-sm text-da-muted-fg">
              <Paperclip className="size-4" />
              <span className="flex-1">Ask a follow-up…</span>
              <span className="grid size-8 place-items-center rounded-full bg-da-fg text-da-bg">
                <ArrowUp className="size-4" />
              </span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

export default HeroChat;