Glass Nav

"use client";

import { useState } from "react";
import { GlassNav, type GlassNavTone } from "@/components/ui/glass-nav";

/**
 * Demo: the glass-pill nav floating over a scrollable page.
 * Scroll down to watch it compact — the logo morphs to the spark mark and the
 * nav collapses to just the active tab. Click the active tab to peek it open.
 * Use the Light / Dark switch (top-right) to preview both surface tones.
 */
function Demo() {
  const [tone, setTone] = useState<GlassNavTone>("light");
  const dark = tone === "dark";

  return (
    <div
      className="min-h-screen transition-colors duration-500"
      style={{
        color: dark ? "#EAF1F6" : "#0B1220",
        background: dark
          ? "radial-gradient(120% 80% at 50% -10%, #0f3040 0%, #0a1622 55%, #060a12 100%)"
          : "radial-gradient(120% 80% at 50% -10%, #eaf6fd 0%, #f7fbff 45%, #ffffff 100%)",
      }}
    >
      <GlassNav brandName="Lumen" cta={{ label: "Get Started", href: "#start" }} tone={tone} />

      {/* Tone switch (demo control, not part of the component) */}
      <div className="pointer-events-none fixed right-4 top-4 z-[80] flex justify-end">
        <div
          className={`pointer-events-auto inline-flex items-center gap-1 rounded-full p-1 text-[12px] font-semibold ${
            dark ? "bg-white/10 text-white/70" : "bg-black/[0.06] text-black/60"
          }`}
        >
          {(["light", "dark"] as const).map((tn) => (
            <button
              key={tn}
              type="button"
              onClick={() => setTone(tn)}
              className={`rounded-full px-3 py-1 capitalize transition-colors ${
                tone === tn
                  ? dark
                    ? "bg-white text-[#0B1220]"
                    : "bg-[#0B1220] text-white"
                  : ""
              }`}
            >
              {tn}
            </button>
          ))}
        </div>
      </div>

      <main className="mx-auto max-w-6xl px-6">
        <section className="py-24 text-center">
          <p
            className={`mb-4 inline-block rounded-full px-3.5 py-1.5 text-[13px] font-bold tracking-[0.02em] ${
              dark ? "bg-white/10 text-[#9FD8F2]" : "bg-[rgba(43,168,224,0.12)] text-[#0F4A66]"
            }`}
          >
            Scroll to see the bar compact ↓
          </p>
          <h1 className="mx-0 mb-4 text-[clamp(38px,6vw,68px)] font-extrabold leading-[1.02] tracking-[-0.035em]">
            A floating glass nav
            <br />
            that gets out of the way.
          </h1>
          <p
            className={`mx-auto max-w-[560px] text-[18px] leading-relaxed ${
              dark ? "text-[rgba(234,241,246,0.7)]" : "text-[#4A5261]"
            }`}
          >
            Shrink-wrapped chrome, a sliding hover pill, scroll-to-compact with a
            click-to-peek active tab, and a full-screen drawer on mobile.
          </p>
        </section>

        {Array.from({ length: 6 }).map((_, i) => (
          <section
            key={i}
            className={`mb-6 rounded-[28px] border p-11 ${
              dark
                ? "border-white/10 bg-white/[0.04]"
                : "border-[rgba(15,74,102,0.08)] bg-white/70 shadow-[0_10px_30px_rgba(15,74,102,0.06)]"
            }`}
          >
            <h2
              className={`mb-2.5 text-[24px] font-extrabold tracking-[-0.02em] ${
                dark ? "text-[#7FD0F2]" : "text-[#0F4A66]"
              }`}
            >
              Section {i + 1}
            </h2>
            <p
              className={`text-[16px] leading-[1.7] ${
                dark ? "text-[rgba(234,241,246,0.68)]" : "text-[#4A5261]"
              }`}
            >
              Keep scrolling — the header collapses to a compact pill with just the
              active tab visible. Click it to peek the full navigation without
              scrolling back to the top.
            </p>
          </section>
        ))}
        <div className="h-10" />
      </main>
    </div>
  );
}

export { Demo };
export default Demo;