Transparent Hero Navbar

"use client";

import { useEffect, useRef, useState } from "react";
import type { ReactNode } from "react";
import { motion, AnimatePresence, useReducedMotion } from "motion/react";

type NavLink = { label: string; href: string };
type PlatformItem = { title: string; desc: string; href: string; icon: ReactNode };

const NAV_LINKS: NavLink[] = [
  { label: "Solutions", href: "#solutions" },
  { label: "Pricing", href: "#pricing" },
  { label: "Docs", href: "#docs" },
];

const PLATFORM_ITEMS: PlatformItem[] = [
  {
    title: "Realtime Analytics",
    desc: "Sub-second dashboards on live event streams.",
    href: "#analytics",
    icon: <ChartIcon className="h-5 w-5" />,
  },
  {
    title: "Streaming Warehouse",
    desc: "Query 50B rows without waiting for a nightly job.",
    href: "#warehouse",
    icon: <DatabaseIcon className="h-5 w-5" />,
  },
  {
    title: "Anomaly Alerts",
    desc: "Get paged the moment a metric drifts off course.",
    href: "#alerts",
    icon: <BellIcon className="h-5 w-5" />,
  },
  {
    title: "Source Connectors",
    desc: "Kafka, Postgres, Segment, and 40 more in minutes.",
    href: "#connectors",
    icon: <PlugIcon className="h-5 w-5" />,
  },
];

const STATS: { value: string; label: string }[] = [
  { value: "12ms", label: "p99 query latency" },
  { value: "50B", label: "events ingested / day" },
  { value: "99.99%", label: "measured uptime" },
  { value: "8 min", label: "median time to first chart" },
];

export default function NavxTransparentHero() {
  const reduce = useReducedMotion();

  const [scrolled, setScrolled] = useState<boolean>(false);
  const [platformOpen, setPlatformOpen] = useState<boolean>(false);
  const [mobileOpen, setMobileOpen] = useState<boolean>(false);

  const sentinelRef = useRef<HTMLDivElement | null>(null);
  const platformWrapRef = useRef<HTMLDivElement | null>(null);
  const platformBtnRef = useRef<HTMLButtonElement | null>(null);
  const mobileBtnRef = useRef<HTMLButtonElement | null>(null);
  const mobilePanelRef = useRef<HTMLDivElement | null>(null);

  // Toggle the "scrolled" (solid) navbar state once the hero scrolls under it.
  useEffect(() => {
    const el = sentinelRef.current;
    if (!el) return;
    const io = new IntersectionObserver(
      ([entry]) => setScrolled(!entry.isIntersecting),
      { rootMargin: "-80px 0px 0px 0px", threshold: 0 },
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);

  // Dropdown: close on outside click + Escape, restoring focus to the trigger.
  useEffect(() => {
    if (!platformOpen) return;
    function onPointer(e: PointerEvent) {
      if (platformWrapRef.current && !platformWrapRef.current.contains(e.target as Node)) {
        setPlatformOpen(false);
      }
    }
    function onKey(e: KeyboardEvent) {
      if (e.key === "Escape") {
        setPlatformOpen(false);
        platformBtnRef.current?.focus();
      }
    }
    document.addEventListener("pointerdown", onPointer);
    document.addEventListener("keydown", onKey);
    return () => {
      document.removeEventListener("pointerdown", onPointer);
      document.removeEventListener("keydown", onKey);
    };
  }, [platformOpen]);

  // Mobile sheet: lock scroll, Escape to close, focus the panel on open.
  useEffect(() => {
    if (!mobileOpen) return;
    const prevOverflow = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    const raf = window.requestAnimationFrame(() => mobilePanelRef.current?.focus());
    function onKey(e: KeyboardEvent) {
      if (e.key === "Escape") {
        setMobileOpen(false);
        mobileBtnRef.current?.focus();
      }
    }
    document.addEventListener("keydown", onKey);
    return () => {
      document.body.style.overflow = prevOverflow;
      window.cancelAnimationFrame(raf);
      document.removeEventListener("keydown", onKey);
    };
  }, [mobileOpen]);

  const heroStagger = reduce ? 0 : 0.09;

  return (
    <section className="relative w-full overflow-hidden bg-white text-slate-900 dark:bg-slate-950 dark:text-slate-100">
      <style>{`
        @keyframes navxth-float {
          0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
          50% { transform: translate3d(0, -26px, 0) scale(1.05); }
        }
        @keyframes navxth-drift {
          0%, 100% { transform: translate3d(0, 0, 0); }
          50% { transform: translate3d(28px, 18px, 0); }
        }
        @keyframes navxth-ping {
          0% { transform: scale(1); opacity: 0.55; }
          70%, 100% { transform: scale(2.4); opacity: 0; }
        }
        @media (prefers-reduced-motion: reduce) {
          .navxth-blob, .navxth-ping { animation: none !important; }
        }
      `}</style>

      {/* Sentinel that drives the transparent -> solid navbar transition */}
      <div ref={sentinelRef} aria-hidden className="pointer-events-none absolute left-0 top-0 h-px w-full" />

      {/* Atmospheric hero backdrop */}
      <div aria-hidden className="pointer-events-none absolute inset-0 -z-10">
        <div className="absolute inset-0 bg-gradient-to-b from-indigo-50 via-white to-white dark:from-indigo-950/40 dark:via-slate-950 dark:to-slate-950" />
        <div
          className="navxth-blob absolute -left-24 -top-28 h-[26rem] w-[26rem] rounded-full bg-violet-400/30 blur-3xl dark:bg-violet-600/25"
          style={{ animation: "navxth-float 11s ease-in-out infinite" }}
        />
        <div
          className="navxth-blob absolute -right-20 top-10 h-[22rem] w-[22rem] rounded-full bg-sky-400/25 blur-3xl dark:bg-sky-600/20"
          style={{ animation: "navxth-drift 14s ease-in-out infinite" }}
        />
        <div
          className="navxth-blob absolute bottom-0 left-1/3 h-[20rem] w-[20rem] rounded-full bg-emerald-300/20 blur-3xl dark:bg-emerald-600/15"
          style={{ animation: "navxth-float 13s ease-in-out infinite 1.5s" }}
        />
        <div
          className="absolute inset-0 opacity-[0.04] dark:opacity-[0.06]"
          style={{
            backgroundImage:
              "linear-gradient(to right, currentColor 1px, transparent 1px), linear-gradient(to bottom, currentColor 1px, transparent 1px)",
            backgroundSize: "72px 72px",
            maskImage: "radial-gradient(ellipse 80% 60% at 50% 0%, black, transparent 75%)",
            WebkitMaskImage: "radial-gradient(ellipse 80% 60% at 50% 0%, black, transparent 75%)",
          }}
        />
      </div>

      {/* ================= NAVBAR ================= */}
      <header
        className={[
          "sticky top-0 z-40 w-full transition-colors duration-300",
          scrolled
            ? "border-b border-slate-200/70 bg-white/80 backdrop-blur-xl supports-[backdrop-filter]:bg-white/60 dark:border-white/10 dark:bg-slate-950/70 dark:supports-[backdrop-filter]:bg-slate-950/50"
            : "border-b border-transparent bg-transparent",
        ].join(" ")}
      >
        <nav aria-label="Primary" className="mx-auto flex h-20 max-w-7xl items-center justify-between gap-6 px-5 sm:px-8">
          {/* Brand */}
          <a
            href="#top"
            className="group flex items-center gap-2.5 rounded-xl px-1 py-1 outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-slate-950"
          >
            <BrandMark className="h-9 w-9 shrink-0" />
            <span className="text-lg font-semibold tracking-tight text-slate-900 dark:text-white">
              Meridian
            </span>
          </a>

          {/* Desktop links */}
          <div className="hidden items-center gap-1 lg:flex">
            <div ref={platformWrapRef} className="relative">
              <button
                ref={platformBtnRef}
                type="button"
                aria-haspopup="true"
                aria-expanded={platformOpen}
                aria-controls="navxth-platform-menu"
                onClick={() => setPlatformOpen((v) => !v)}
                className="inline-flex items-center gap-1.5 rounded-xl px-3.5 py-2 text-sm font-medium text-slate-700 outline-none transition hover:bg-slate-900/5 hover:text-slate-900 focus-visible:ring-2 focus-visible:ring-indigo-500 dark:text-slate-300 dark:hover:bg-white/10 dark:hover:text-white"
              >
                Platform
                <ChevronIcon
                  className={[
                    "h-4 w-4 transition-transform duration-200",
                    platformOpen ? "rotate-180" : "rotate-0",
                  ].join(" ")}
                />
              </button>

              <AnimatePresence>
                {platformOpen && (
                  <motion.div
                    id="navxth-platform-menu"
                    initial={reduce ? { opacity: 0 } : { opacity: 0, y: 10, scale: 0.97 }}
                    animate={{ opacity: 1, y: 0, scale: 1 }}
                    exit={reduce ? { opacity: 0 } : { opacity: 0, y: 8, scale: 0.98 }}
                    transition={{ duration: reduce ? 0 : 0.18, ease: [0.16, 1, 0.3, 1] }}
                    className="absolute left-1/2 top-full z-50 mt-3 w-[34rem] -translate-x-1/2 overflow-hidden rounded-2xl border border-slate-200 bg-white/95 p-2 shadow-2xl shadow-slate-900/10 backdrop-blur-xl dark:border-white/10 dark:bg-slate-900/95 dark:shadow-black/40"
                  >
                    <div className="grid grid-cols-2 gap-1">
                      {PLATFORM_ITEMS.map((item) => (
                        <a
                          key={item.title}
                          href={item.href}
                          onClick={() => setPlatformOpen(false)}
                          className="group flex items-start gap-3 rounded-xl p-3 outline-none transition hover:bg-indigo-50 focus-visible:ring-2 focus-visible:ring-indigo-500 dark:hover:bg-white/10"
                        >
                          <span className="mt-0.5 grid h-10 w-10 shrink-0 place-items-center rounded-lg bg-gradient-to-br from-indigo-500 to-violet-600 text-white shadow-sm">
                            {item.icon}
                          </span>
                          <span className="min-w-0">
                            <span className="block text-sm font-semibold text-slate-900 dark:text-white">
                              {item.title}
                            </span>
                            <span className="mt-0.5 block text-xs leading-relaxed text-slate-500 dark:text-slate-400">
                              {item.desc}
                            </span>
                          </span>
                        </a>
                      ))}
                    </div>
                    <a
                      href="#changelog"
                      onClick={() => setPlatformOpen(false)}
                      className="mt-1 flex items-center justify-between rounded-xl bg-slate-50 px-4 py-3 text-sm outline-none transition hover:bg-slate-100 focus-visible:ring-2 focus-visible:ring-indigo-500 dark:bg-white/5 dark:hover:bg-white/10"
                    >
                      <span className="font-medium text-slate-700 dark:text-slate-200">
                        What shipped this week
                      </span>
                      <span className="inline-flex items-center gap-1 font-semibold text-indigo-600 dark:text-indigo-400">
                        Changelog <ArrowIcon className="h-4 w-4" />
                      </span>
                    </a>
                  </motion.div>
                )}
              </AnimatePresence>
            </div>

            {NAV_LINKS.map((link) => (
              <a
                key={link.href}
                href={link.href}
                className="rounded-xl px-3.5 py-2 text-sm font-medium text-slate-700 outline-none transition hover:bg-slate-900/5 hover:text-slate-900 focus-visible:ring-2 focus-visible:ring-indigo-500 dark:text-slate-300 dark:hover:bg-white/10 dark:hover:text-white"
              >
                {link.label}
              </a>
            ))}
          </div>

          {/* Desktop actions */}
          <div className="hidden items-center gap-2 lg:flex">
            <a
              href="#signin"
              className="rounded-xl px-3.5 py-2 text-sm font-medium text-slate-700 outline-none transition hover:text-slate-900 focus-visible:ring-2 focus-visible:ring-indigo-500 dark:text-slate-300 dark:hover:text-white"
            >
              Sign in
            </a>
            <a
              href="#trial"
              className="group inline-flex items-center gap-1.5 rounded-xl bg-slate-900 px-4 py-2 text-sm font-semibold text-white shadow-sm outline-none transition hover:bg-slate-800 focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:bg-white dark:text-slate-900 dark:hover:bg-slate-100 dark:focus-visible:ring-offset-slate-950"
            >
              Start free trial
              <ArrowIcon className="h-4 w-4 transition-transform duration-200 group-hover:translate-x-0.5" />
            </a>
          </div>

          {/* Mobile toggle */}
          <button
            ref={mobileBtnRef}
            type="button"
            aria-haspopup="dialog"
            aria-expanded={mobileOpen}
            aria-controls="navxth-mobile"
            aria-label={mobileOpen ? "Close menu" : "Open menu"}
            onClick={() => setMobileOpen((v) => !v)}
            className="inline-flex h-11 w-11 items-center justify-center rounded-xl border border-slate-200 bg-white/70 text-slate-800 outline-none transition hover:bg-white focus-visible:ring-2 focus-visible:ring-indigo-500 dark:border-white/15 dark:bg-white/5 dark:text-slate-100 dark:hover:bg-white/10 lg:hidden"
          >
            {mobileOpen ? <CloseIcon className="h-5 w-5" /> : <MenuIcon className="h-5 w-5" />}
          </button>
        </nav>
      </header>

      {/* ================= MOBILE SHEET ================= */}
      <AnimatePresence>
        {mobileOpen && (
          <div className="fixed inset-0 z-50 lg:hidden" role="dialog" aria-modal="true" aria-label="Site menu">
            <motion.button
              type="button"
              aria-label="Close menu"
              onClick={() => setMobileOpen(false)}
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              transition={{ duration: reduce ? 0 : 0.2 }}
              className="absolute inset-0 h-full w-full cursor-default bg-slate-900/40 backdrop-blur-sm dark:bg-black/60"
            />
            <motion.div
              ref={mobilePanelRef}
              tabIndex={-1}
              initial={reduce ? { opacity: 0 } : { x: "100%" }}
              animate={reduce ? { opacity: 1 } : { x: 0 }}
              exit={reduce ? { opacity: 0 } : { x: "100%" }}
              transition={{ duration: reduce ? 0 : 0.28, ease: [0.16, 1, 0.3, 1] }}
              className="absolute right-0 top-0 flex h-full w-[min(22rem,90vw)] flex-col gap-2 overflow-y-auto bg-white p-6 shadow-2xl outline-none dark:bg-slate-950"
            >
              <div className="mb-4 flex items-center justify-between">
                <span className="flex items-center gap-2.5">
                  <BrandMark className="h-8 w-8" />
                  <span className="text-base font-semibold tracking-tight text-slate-900 dark:text-white">
                    Meridian
                  </span>
                </span>
                <button
                  type="button"
                  aria-label="Close menu"
                  onClick={() => setMobileOpen(false)}
                  className="inline-flex h-10 w-10 items-center justify-center rounded-xl text-slate-600 outline-none transition hover:bg-slate-100 focus-visible:ring-2 focus-visible:ring-indigo-500 dark:text-slate-300 dark:hover:bg-white/10"
                >
                  <CloseIcon className="h-5 w-5" />
                </button>
              </div>

              <p className="px-1 pb-1 text-xs font-semibold uppercase tracking-wider text-slate-400 dark:text-slate-500">
                Platform
              </p>
              {PLATFORM_ITEMS.map((item) => (
                <a
                  key={item.title}
                  href={item.href}
                  onClick={() => setMobileOpen(false)}
                  className="flex items-center gap-3 rounded-xl p-2.5 outline-none transition hover:bg-slate-100 focus-visible:ring-2 focus-visible:ring-indigo-500 dark:hover:bg-white/10"
                >
                  <span className="grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-gradient-to-br from-indigo-500 to-violet-600 text-white">
                    {item.icon}
                  </span>
                  <span className="text-sm font-medium text-slate-800 dark:text-slate-100">
                    {item.title}
                  </span>
                </a>
              ))}

              <div className="my-3 h-px w-full bg-slate-200 dark:bg-white/10" />

              {NAV_LINKS.map((link) => (
                <a
                  key={link.href}
                  href={link.href}
                  onClick={() => setMobileOpen(false)}
                  className="rounded-xl px-2.5 py-3 text-base font-medium text-slate-800 outline-none transition hover:bg-slate-100 focus-visible:ring-2 focus-visible:ring-indigo-500 dark:text-slate-100 dark:hover:bg-white/10"
                >
                  {link.label}
                </a>
              ))}

              <div className="mt-auto flex flex-col gap-2 pt-6">
                <a
                  href="#signin"
                  onClick={() => setMobileOpen(false)}
                  className="rounded-xl border border-slate-200 px-4 py-3 text-center text-sm font-semibold text-slate-800 outline-none transition hover:bg-slate-50 focus-visible:ring-2 focus-visible:ring-indigo-500 dark:border-white/15 dark:text-slate-100 dark:hover:bg-white/10"
                >
                  Sign in
                </a>
                <a
                  href="#trial"
                  onClick={() => setMobileOpen(false)}
                  className="inline-flex items-center justify-center gap-1.5 rounded-xl bg-slate-900 px-4 py-3 text-center text-sm font-semibold text-white outline-none transition hover:bg-slate-800 focus-visible:ring-2 focus-visible:ring-indigo-500 dark:bg-white dark:text-slate-900 dark:hover:bg-slate-100"
                >
                  Start free trial
                  <ArrowIcon className="h-4 w-4" />
                </a>
              </div>
            </motion.div>
          </div>
        )}
      </AnimatePresence>

      {/* ================= HERO ================= */}
      <div id="top" className="relative mx-auto max-w-7xl px-5 pb-20 pt-16 sm:px-8 sm:pt-24 lg:pb-28 lg:pt-28">
        <div className="mx-auto max-w-3xl text-center">
          <motion.a
            href="#changelog"
            initial={reduce ? { opacity: 0 } : { opacity: 0, y: 14 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: reduce ? 0 : 0.5, ease: "easeOut" }}
            className="group relative inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white/70 py-1.5 pl-2 pr-4 text-sm text-slate-700 shadow-sm outline-none backdrop-blur transition hover:border-indigo-300 focus-visible:ring-2 focus-visible:ring-indigo-500 dark:border-white/15 dark:bg-white/5 dark:text-slate-200 dark:hover:border-indigo-500/50"
          >
            <span className="relative flex h-2.5 w-2.5">
              <span
                className="navxth-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400"
                style={{ animation: "navxth-ping 2.4s cubic-bezier(0,0,0.2,1) infinite" }}
              />
              <span className="relative inline-flex h-2.5 w-2.5 rounded-full bg-emerald-500" />
            </span>
            <span className="font-medium">Streaming SQL is now generally available</span>
            <ArrowIcon className="h-4 w-4 text-slate-400 transition-transform duration-200 group-hover:translate-x-0.5 dark:text-slate-500" />
          </motion.a>

          <motion.h1
            initial={reduce ? { opacity: 0 } : { opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: reduce ? 0 : 0.6, ease: "easeOut", delay: heroStagger }}
            className="mt-7 text-balance text-4xl font-semibold leading-[1.05] tracking-tight text-slate-900 sm:text-6xl lg:text-7xl dark:text-white"
          >
            Ship dashboards on live data,{" "}
            <span className="relative whitespace-nowrap font-serif italic text-indigo-600 dark:text-indigo-400">
              not yesterday&rsquo;s
              <svg
                aria-hidden
                viewBox="0 0 300 12"
                className="absolute -bottom-1 left-0 h-2.5 w-full text-indigo-400/70 dark:text-indigo-500/60"
                preserveAspectRatio="none"
              >
                <path d="M2 8 C 80 2, 220 2, 298 7" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" />
              </svg>
            </span>
            .
          </motion.h1>

          <motion.p
            initial={reduce ? { opacity: 0 } : { opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: reduce ? 0 : 0.6, ease: "easeOut", delay: heroStagger * 2 }}
            className="mx-auto mt-6 max-w-2xl text-pretty text-lg leading-relaxed text-slate-600 dark:text-slate-300"
          >
            Meridian turns raw event streams into sub-second dashboards, alerts, and APIs&mdash;without
            standing up a data team. Point it at a source, write plain SQL, and watch the numbers move in
            real time.
          </motion.p>

          <motion.div
            initial={reduce ? { opacity: 0 } : { opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: reduce ? 0 : 0.6, ease: "easeOut", delay: heroStagger * 3 }}
            className="mt-9 flex flex-col items-center justify-center gap-3 sm:flex-row"
          >
            <a
              href="#trial"
              className="group inline-flex w-full items-center justify-center gap-2 rounded-xl bg-slate-900 px-6 py-3.5 text-base font-semibold text-white shadow-lg shadow-slate-900/20 outline-none transition hover:bg-slate-800 focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white sm:w-auto dark:bg-white dark:text-slate-900 dark:shadow-black/40 dark:hover:bg-slate-100 dark:focus-visible:ring-offset-slate-950"
            >
              Start free trial
              <ArrowIcon className="h-5 w-5 transition-transform duration-200 group-hover:translate-x-1" />
            </a>
            <a
              href="#demo"
              className="group inline-flex w-full items-center justify-center gap-2 rounded-xl border border-slate-300 bg-white/60 px-6 py-3.5 text-base font-semibold text-slate-800 outline-none backdrop-blur transition hover:bg-white focus-visible:ring-2 focus-visible:ring-indigo-500 sm:w-auto dark:border-white/15 dark:bg-white/5 dark:text-slate-100 dark:hover:bg-white/10"
            >
              <PlayIcon className="h-5 w-5 text-indigo-600 dark:text-indigo-400" />
              Watch 2-min demo
            </a>
          </motion.div>

          <motion.ul
            initial={reduce ? { opacity: 0 } : { opacity: 0, y: 16 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: reduce ? 0 : 0.6, ease: "easeOut", delay: heroStagger * 4 }}
            className="mx-auto mt-8 flex flex-wrap items-center justify-center gap-x-6 gap-y-2 text-sm text-slate-500 dark:text-slate-400"
          >
            {["No credit card required", "SOC 2 Type II", "Trusted by 4,000+ teams"].map((item) => (
              <li key={item} className="inline-flex items-center gap-1.5">
                <CheckIcon className="h-4 w-4 text-emerald-500" />
                {item}
              </li>
            ))}
          </motion.ul>
        </div>

        {/* Stats strip — gives real scroll depth so the navbar can go solid */}
        <motion.dl
          initial={reduce ? { opacity: 0 } : { opacity: 0, y: 24 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: reduce ? 0 : 0.6, ease: "easeOut", delay: heroStagger * 5 }}
          className="mx-auto mt-16 grid max-w-4xl grid-cols-2 gap-px overflow-hidden rounded-2xl border border-slate-200 bg-slate-200 shadow-sm sm:grid-cols-4 dark:border-white/10 dark:bg-white/10"
        >
          {STATS.map((stat) => (
            <div key={stat.label} className="bg-white/80 px-5 py-7 text-center backdrop-blur dark:bg-slate-950/70">
              <dt className="sr-only">{stat.label}</dt>
              <dd>
                <span className="block text-3xl font-semibold tracking-tight text-slate-900 dark:text-white">
                  {stat.value}
                </span>
                <span className="mt-1 block text-sm text-slate-500 dark:text-slate-400">{stat.label}</span>
              </dd>
            </div>
          ))}
        </motion.dl>
      </div>
    </section>
  );
}

/* ============================ Inline icons ============================ */

function BrandMark({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 40 40" fill="none" aria-hidden>
      <rect x="1" y="1" width="38" height="38" rx="11" className="fill-slate-900 dark:fill-white" />
      <path
        d="M11 27V13.5L20 22l9-8.5V27"
        className="stroke-white dark:stroke-slate-900"
        strokeWidth="2.6"
        strokeLinecap="round"
        strokeLinejoin="round"
        fill="none"
      />
      <circle cx="20" cy="14.5" r="2.2" className="fill-indigo-400 dark:fill-indigo-600" />
    </svg>
  );
}

function ChevronIcon({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 20 20" fill="none" aria-hidden>
      <path d="M6 8l4 4 4-4" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function ArrowIcon({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 20 20" fill="none" aria-hidden>
      <path d="M4 10h11m0 0l-4.5-4.5M15 10l-4.5 4.5" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function MenuIcon({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="none" aria-hidden>
      <path d="M4 7h16M4 12h16M4 17h16" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" />
    </svg>
  );
}

function CloseIcon({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="none" aria-hidden>
      <path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" />
    </svg>
  );
}

function CheckIcon({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 20 20" fill="none" aria-hidden>
      <path d="M4 10.5l3.5 3.5L16 6" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function PlayIcon({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 20 20" fill="none" aria-hidden>
      <circle cx="10" cy="10" r="8.25" stroke="currentColor" strokeWidth="1.6" />
      <path d="M8.5 7.2l4.2 2.8-4.2 2.8V7.2z" fill="currentColor" />
    </svg>
  );
}

function ChartIcon({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 20 20" fill="none" aria-hidden>
      <path d="M4 14V9m4 5V5m4 9v-4m4 4V7" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
    </svg>
  );
}

function DatabaseIcon({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 20 20" fill="none" aria-hidden>
      <ellipse cx="10" cy="5" rx="6" ry="2.5" stroke="currentColor" strokeWidth="1.6" />
      <path d="M4 5v10c0 1.4 2.7 2.5 6 2.5s6-1.1 6-2.5V5M4 10c0 1.4 2.7 2.5 6 2.5s6-1.1 6-2.5" stroke="currentColor" strokeWidth="1.6" />
    </svg>
  );
}

function BellIcon({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 20 20" fill="none" aria-hidden>
      <path d="M6 8a4 4 0 018 0c0 4 1.5 5 1.5 5h-11S6 12 6 8z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" />
      <path d="M8.5 16a1.5 1.5 0 003 0" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
    </svg>
  );
}

function PlugIcon({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 20 20" fill="none" aria-hidden>
      <path d="M7 3v4m6-4v4M5 7h10v2a5 5 0 01-10 0V7zM10 14v3" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}