export function TypewriterGlowHero() {
  const chips = ["Summarize a PDF", "Write SQL", "Refactor this fn", "Draft a reply"];
  return (
    <div className="relative min-h-[680px] w-full overflow-hidden bg-[#080a10] text-white antialiased grid place-items-center px-6">
      <div
        aria-hidden
        className="absolute inset-0"
        style={{ background: "radial-gradient(55% 60% at 50% 75%, rgba(34,211,238,0.16), transparent 70%), radial-gradient(50% 50% at 50% 20%, rgba(99,102,241,0.18), transparent 70%)" }}
      />
      <div
        aria-hidden
        className="absolute inset-0 opacity-[0.06]"
        style={{ backgroundImage: "radial-gradient(rgba(255,255,255,0.6) 1px, transparent 1.4px)", backgroundSize: "26px 26px" }}
      />

      <div className="absolute top-0 left-0 right-0 z-20 flex items-center justify-between px-8 lg:px-12 py-6">
        <span className="text-[13px] font-semibold tracking-[0.18em] uppercase text-white/85">Velyn<span className="text-cyan-300">AI</span></span>
        <a href="#" className="rounded-full border border-white/15 px-4 py-1.5 text-[12.5px] text-white/80 hover:bg-white/10 transition-colors">Sign in</a>
      </div>

      <div className="relative z-10 w-full max-w-2xl text-center">
        <p className="mb-6 inline-flex items-center gap-2 rounded-full border border-white/12 bg-white/[0.04] px-3 py-1 font-mono text-[11px] uppercase tracking-[0.2em] text-cyan-200/80">
          <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-cyan-400" /> Model · velyn-2 online
        </p>
        <h1 className="text-[clamp(38px,5.4vw,76px)] font-semibold leading-[0.98] tracking-[-0.035em]">
          Ask anything.
          <br />
          <span className="text-white/55">Ship the answer.</span>
        </h1>

        {/* prompt bar with typed query */}
        <div className="mx-auto mt-9 flex max-w-xl items-center gap-3 rounded-2xl border border-white/12 bg-white/[0.04] p-2.5 pl-4 backdrop-blur shadow-[0_0_60px_-20px_rgba(34,211,238,0.6)]">
          <span aria-hidden className="text-cyan-300">✦</span>
          <span className="flex-1 overflow-hidden text-left">
            <span
              className="inline-block whitespace-nowrap align-middle text-[14.5px] text-white/85"
              style={{ animation: "ai-type 3.2s steps(28) 0.6s both", width: 0, overflow: "hidden" }}
            >
              Generate a hero section for a fintech app…
            </span>
            <span className="ml-0.5 inline-block h-[16px] w-[2px] translate-y-[3px] bg-cyan-300" style={{ animation: "ai-caret 1s step-end infinite" }} />
          </span>
          <button className="shrink-0 rounded-xl bg-white px-4 py-2 text-[13px] font-medium text-black transition-transform hover:scale-[1.03]">
            Generate
          </button>
        </div>

        {/* suggestion chips */}
        <div className="mt-5 flex flex-wrap items-center justify-center gap-2">
          {chips.map((c) => (
            <span key={c} className="rounded-full border border-white/10 bg-white/[0.03] px-3 py-1.5 text-[12.5px] text-white/55 hover:text-white/85 transition-colors">
              {c}
            </span>
          ))}
        </div>
      </div>

      <style>{`
        @keyframes ai-type { to { width: 24.5ch; } }
        @keyframes ai-caret { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } }
      `}</style>
    </div>
  );
}
AI Prompt Hero

Ask anything.Ship the answer.

Ask anything.
Ship the answer.
