import * as React from "react";
import { createRoot } from "react-dom/client";
import { ColineAppProvider, useColine } from "@colineapp/ui";
import { DEFAULT_GEOMETRY, type GlassAppearance, type GlassVariant } from "@colineapp/liquid-glass";
import { LiquidGlass, useLiquidGlassTabs, type LiquidGlassHandle } from "@colineapp/liquid-glass/react";
import "@colineapp/ui/styles.css";
import "@colineapp/liquid-glass/styles.css";
import "./app.css";

const SOURCE_URL = "https://upstream.codes/coline/liquid-glass";
const GITHUB_URL = "https://github.com/colineapp/liquid-glass";
const INSTALL = "npm install @colineapp/liquid-glass";

type Shape = "capsule" | "card" | "circle";

const SHAPES: Record<Shape, { width: number; height: number; radius: number }> = {
  capsule: { width: 300, height: 84, radius: 42 },
  card: { width: 280, height: 184, radius: 32 },
  circle: { width: 168, height: 168, radius: 84 },
};

const HUES = [
  { label: "None", value: null },
  { label: "Blue", value: "#3d6bff" },
  { label: "Pink", value: "#ff4fa3" },
  { label: "Green", value: "#2fb36d" },
  { label: "Amber", value: "#f0a020" },
] as const;

function cx(...classes: (string | false | null | undefined)[]) {
  return classes.filter(Boolean).join(" ");
}

// ── Pieces ──────────────────────────────────────────────

/** A busy, moving page for the glass to bend: colour, fine lines and large type. */
function Scene({ appearance, words = true }: { appearance: GlassAppearance; words?: boolean }) {
  return (
    <div aria-hidden="true" className={cx("scene", appearance === "dark" ? "scene-dark" : "scene-light")}>
      <div className="scene-blob scene-blob-a" />
      <div className="scene-blob scene-blob-b" />
      <div className="scene-blob scene-blob-c" />
      <div className="scene-grid" />
      {words ? (
        <div className="scene-words">
          <span>Bends</span>
          <span>the page</span>
          <span>behind it.</span>
        </div>
      ) : null}
    </div>
  );
}

/** A segmented control on Liquid Glass tabs: drag the selected one, or press it to lift it. */
function GlassTabs<T extends string>({
  label,
  value,
  options,
  onChange,
  appearance,
  className,
}: {
  label: string;
  value: T;
  options: { value: T; label: string }[];
  onChange: (value: T) => void;
  appearance: GlassAppearance;
  className?: string;
}) {
  const track = React.useRef<HTMLDivElement>(null);
  useLiquidGlassTabs(track, { appearance, tabs: '[role="radio"]' });
  const index = options.findIndex((option) => option.value === value);
  return (
    <div
      ref={track}
      role="radiogroup"
      aria-label={label}
      className={cx("flex rounded-full p-1", className)}
      onKeyDown={(event) => {
        const step = event.key === "ArrowRight" || event.key === "ArrowDown" ? 1 : event.key === "ArrowLeft" || event.key === "ArrowUp" ? -1 : 0;
        if (!step) return;
        event.preventDefault();
        const next = options[(index + step + options.length) % options.length];
        if (!next) return;
        onChange(next.value);
        track.current?.querySelector<HTMLElement>(`[data-value="${next.value}"]`)?.focus();
      }}
    >
      {options.map((option) => {
        const selected = option.value === value;
        return (
          <button
            key={option.value}
            type="button"
            role="radio"
            aria-checked={selected}
            tabIndex={selected ? 0 : -1}
            data-value={option.value}
            onClick={() => onChange(option.value)}
            className={cx(
              "flex-1 rounded-full px-3 py-1.5 text-sm font-medium whitespace-nowrap transition-opacity duration-150",
              !selected && "opacity-60 hover:opacity-90",
            )}
          >
            {option.label}
          </button>
        );
      })}
    </div>
  );
}

function Segmented<T extends string>(props: {
  label: string;
  value: T;
  options: { value: T; label: string }[];
  onChange: (value: T) => void;
  appearance: GlassAppearance;
}) {
  return (
    <div className="grid gap-2">
      <span className="text-sm font-medium opacity-70">{props.label}</span>
      <GlassTabs {...props} />
    </div>
  );
}

function Range({
  label,
  value,
  min,
  max,
  step,
  onChange,
}: {
  label: string;
  value: number;
  min: number;
  max: number;
  step: number;
  onChange: (value: number) => void;
}) {
  return (
    <label className="grid gap-2">
      <span className="flex justify-between text-sm font-medium">
        <span className="opacity-70">{label}</span>
        <span className="tabular-nums">{value}</span>
      </span>
      <input
        type="range"
        min={min}
        max={max}
        step={step}
        value={value}
        onChange={(event) => onChange(Number(event.target.value))}
        className="range"
      />
    </label>
  );
}

async function copyText(text: string) {
  try {
    await navigator.clipboard.writeText(text);
    return true;
  } catch {
    // The sandbox may withhold the clipboard API; a selected textarea still copies.
    const area = document.createElement("textarea");
    area.value = text;
    area.style.position = "fixed";
    area.style.opacity = "0";
    document.body.append(area);
    area.select();
    const copied = document.execCommand("copy");
    area.remove();
    return copied;
  }
}

function CopyButton({ text, label = "Copy" }: { text: string; label?: string }) {
  const [copied, setCopied] = React.useState(false);
  return (
    <button
      type="button"
      onClick={async () => {
        if (!(await copyText(text))) return;
        setCopied(true);
        window.setTimeout(() => setCopied(false), 1400);
      }}
      className="rounded-full px-3 py-1 text-sm font-medium opacity-70 transition-opacity hover:opacity-100"
    >
      {copied ? "Copied" : label}
    </button>
  );
}

function Code({ code }: { code: string }) {
  return (
    <div className="code relative min-w-0">
      <div className="absolute top-2.5 right-2.5">
        <CopyButton text={code} />
      </div>
      <pre className="overflow-x-auto py-4 pr-20 pl-5 text-sm leading-6">
        <code>{code}</code>
      </pre>
    </div>
  );
}

/** In Coline's sandbox, links open through the host; on the site, they are plain links. */
const IN_SANDBOX = typeof window !== "undefined" && window.parent !== window;

function ExternalLink(props: { href: string; children: React.ReactNode; className?: string }) {
  return IN_SANDBOX ? (
    <SandboxLink {...props} />
  ) : (
    <a href={props.href} className={props.className} target="_blank" rel="noreferrer">
      {props.children}
    </a>
  );
}

function SandboxLink({ href, children, className }: { href: string; children: React.ReactNode; className?: string }) {
  const coline = useColine();
  return (
    <a
      href={href}
      className={className}
      onClick={(event) => {
        // The page runs in a sandbox without popups; the host opens the tab.
        event.preventDefault();
        void coline.navigation.navigate(href);
      }}
    >
      {children}
    </a>
  );
}

const icon = "size-5 shrink-0";

function IconPlay() {
  return <svg viewBox="0 0 24 24" className={icon} fill="currentColor"><path d="M8 5.5v13a1 1 0 0 0 1.52.85l10.4-6.5a1 1 0 0 0 0-1.7L9.52 4.65A1 1 0 0 0 8 5.5Z" /></svg>;
}
function IconPause() {
  return <svg viewBox="0 0 24 24" className={icon} fill="currentColor"><rect x="6" y="5" width="4" height="14" rx="1.2" /><rect x="14" y="5" width="4" height="14" rx="1.2" /></svg>;
}
function IconSkip({ back = false }: { back?: boolean }) {
  return (
    <svg viewBox="0 0 24 24" className={cx(icon, back && "-scale-x-100")} fill="currentColor">
      <path d="M5 6.2v11.6a.9.9 0 0 0 1.4.75l8.3-5.8a.9.9 0 0 0 0-1.5L6.4 5.45A.9.9 0 0 0 5 6.2Z" />
      <rect x="16.5" y="5.5" width="2.5" height="13" rx="1" />
    </svg>
  );
}
function IconMore() {
  return <svg viewBox="0 0 24 24" className={icon} fill="currentColor"><circle cx="5.5" cy="12" r="1.8" /><circle cx="12" cy="12" r="1.8" /><circle cx="18.5" cy="12" r="1.8" /></svg>;
}
function IconSun() {
  return (
    <svg viewBox="0 0 24 24" className={icon} fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round">
      <circle cx="12" cy="12" r="4" />
      <path d="M12 2.5v2M12 19.5v2M4.6 4.6 6 6M18 18l1.4 1.4M2.5 12h2M19.5 12h2M4.6 19.4 6 18M18 6l1.4-1.4" />
    </svg>
  );
}
function IconMoon() {
  return <svg viewBox="0 0 24 24" className={icon} fill="currentColor"><path d="M20.5 14.6A8.5 8.5 0 0 1 9.4 3.5a8.5 8.5 0 1 0 11.1 11.1Z" /></svg>;
}

// ── Sections ────────────────────────────────────────────

function Nav({ appearance, onToggle }: { appearance: GlassAppearance; onToggle: () => void }) {
  return (
    <div className="sticky top-0 z-20 px-4 pt-4">
      <nav aria-label="Main" className="relative mx-auto flex max-w-xl items-center justify-between gap-3 rounded-full py-2 pr-2 pl-5">
        <LiquidGlass appearance={appearance} />
        <a href="#top" className="text-sm font-semibold tracking-tight">liquid-glass</a>
        <div className="flex items-center gap-1 text-sm font-medium">
          <a href="#playground" className="hidden rounded-full px-3 py-1.5 opacity-75 transition-opacity hover:opacity-100 sm:block">Playground</a>
          <a href="#install" className="hidden rounded-full px-3 py-1.5 opacity-75 transition-opacity hover:opacity-100 sm:block">Install</a>
          <ExternalLink href={SOURCE_URL} className="rounded-full px-3 py-1.5 opacity-75 transition-opacity hover:opacity-100">Source</ExternalLink>
          <button
            type="button"
            onClick={onToggle}
            aria-label={appearance === "dark" ? "Use light glass" : "Use dark glass"}
            className="liquid-glass-well flex size-9 items-center justify-center rounded-full"
          >
            {appearance === "dark" ? <IconSun /> : <IconMoon />}
          </button>
        </div>
      </nav>
    </div>
  );
}

function Hero() {
  return (
    <header id="top" className="mx-auto grid max-w-3xl gap-6 px-6 pt-20 pb-14 text-center">
      <h1 className="text-5xl font-semibold tracking-tight text-balance sm:text-6xl">Liquid Glass for the web</h1>
      <p className="mx-auto max-w-xl text-lg text-pretty opacity-70">
        Rim refraction, lighting and materials after iOS 27, computed from a lens profile instead of drawn by hand. One
        function for any element, and a component for React.
      </p>
      <div className="flex flex-wrap items-center justify-center gap-3">
        <div className="code flex items-center gap-1 rounded-full py-1 pr-1 pl-5 text-sm font-medium">
          <span>{INSTALL}</span>
          <CopyButton text={INSTALL} />
        </div>
        <ExternalLink href={SOURCE_URL} className="rounded-full px-4 py-2 text-sm font-medium opacity-75 transition-opacity hover:opacity-100">
          View source
        </ExternalLink>
      </div>
    </header>
  );
}

type Shaping = { bezel: number; thickness: number; refractiveIndex: number; edge: number; glint: number };

function snippet(options: { variant: GlassVariant; hue: string | null } & Shaping) {
  const lines: string[] = [];
  if (options.variant !== "regular") lines.push(`variant="${options.variant}"`);
  if (options.hue) lines.push(`hue="${options.hue}"`);
  const geometry = (["bezel", "thickness", "refractiveIndex", "edge", "glint"] as const)
    .filter((key) => options[key] !== DEFAULT_GEOMETRY[key])
    .map((key) => `${key}: ${options[key]}`);
  if (geometry.length) lines.push(`geometry={{ ${geometry.join(", ")} }}`);
  const glass = lines.length ? `<LiquidGlass\n    ${lines.join("\n    ")}\n  />` : "<LiquidGlass />";
  return `<div className="relative rounded-full">\n  ${glass}\n  …\n</div>`;
}

function Playground({ appearance }: { appearance: GlassAppearance }) {
  const stage = React.useRef<HTMLDivElement>(null);
  const [shape, setShape] = React.useState<Shape>("capsule");
  const [variant, setVariant] = React.useState<GlassVariant>("regular");
  const [hue, setHue] = React.useState<string | null>(null);
  const [bezel, setBezel] = React.useState(DEFAULT_GEOMETRY.bezel);
  const [thickness, setThickness] = React.useState(DEFAULT_GEOMETRY.thickness);
  const [refractiveIndex, setRefractiveIndex] = React.useState(DEFAULT_GEOMETRY.refractiveIndex);
  const [edge, setEdge] = React.useState(DEFAULT_GEOMETRY.edge);
  const [glint, setGlint] = React.useState(DEFAULT_GEOMETRY.glint);
  const [position, setPosition] = React.useState({ x: 0.36, y: 0.5 });
  const grab = React.useRef<{ dx: number; dy: number } | null>(null);
  const size = SHAPES[shape];

  const moveTo = (clientX: number, clientY: number) => {
    const rect = stage.current?.getBoundingClientRect();
    if (!rect || !grab.current) return;
    const halfX = size.width / 2 / rect.width;
    const halfY = size.height / 2 / rect.height;
    const clamp = (value: number, half: number) => Math.min(1 - half, Math.max(half, value));
    setPosition({
      x: clamp((clientX - rect.left - grab.current.dx) / rect.width, halfX),
      y: clamp((clientY - rect.top - grab.current.dy) / rect.height, halfY),
    });
  };

  const reset = () => {
    setBezel(DEFAULT_GEOMETRY.bezel);
    setThickness(DEFAULT_GEOMETRY.thickness);
    setRefractiveIndex(DEFAULT_GEOMETRY.refractiveIndex);
    setEdge(DEFAULT_GEOMETRY.edge);
    setGlint(DEFAULT_GEOMETRY.glint);
  };

  // Rendered over the stage on wide screens and under it on narrow ones.
  const controls = (
    <>
      <Segmented
        label="Shape"
        value={shape}
        onChange={setShape}
        appearance={appearance}
        options={[
          { value: "capsule", label: "Capsule" },
          { value: "card", label: "Card" },
          { value: "circle", label: "Circle" },
        ]}
      />
      <Segmented
        label="Material"
        value={variant}
        onChange={setVariant}
        appearance={appearance}
        options={[
          { value: "regular", label: "Regular" },
          { value: "clear", label: "Clear" },
        ]}
      />
      <div className="grid gap-2">
        <span className="text-sm font-medium opacity-70">Hue</span>
        <div role="radiogroup" aria-label="Hue" className="flex gap-2">
          {HUES.map((option) => (
            <button
              key={option.label}
              type="button"
              role="radio"
              aria-checked={hue === option.value}
              aria-label={option.label}
              onClick={() => setHue(option.value)}
              className={cx(
                "size-7 rounded-full ring-offset-2 ring-offset-transparent transition-shadow",
                hue === option.value ? "ring-2 ring-current" : "ring-1 ring-current/25",
              )}
              style={{ background: option.value ?? "transparent" }}
            />
          ))}
        </div>
      </div>
      <Range label="Rim width" value={bezel} min={1} max={40} step={1} onChange={setBezel} />
      <Range label="Depth" value={thickness} min={0} max={60} step={1} onChange={setThickness} />
      <Range label="Refractive index" value={refractiveIndex} min={1} max={2.4} step={0.05} onChange={setRefractiveIndex} />
      <Range label="Edge" value={edge} min={0} max={3} step={0.25} onChange={setEdge} />
      <Range label="Glints" value={glint} min={0} max={1} step={0.05} onChange={setGlint} />
      <button type="button" onClick={reset} className="justify-self-start text-sm font-medium opacity-70 transition-opacity hover:opacity-100">
        Reset shape
      </button>
    </>
  );

  return (
    <section id="playground" className="mx-auto grid max-w-5xl scroll-mt-24 gap-4 px-4 sm:px-6">
      <div ref={stage} className="relative h-[520px] overflow-hidden rounded-[28px]">
        <Scene appearance={appearance} />
        <div
          role="slider"
          tabIndex={0}
          aria-label="Glass position. Drag it, or move it with the arrow keys."
          aria-valuetext={`${Math.round(position.x * 100)}% across, ${Math.round(position.y * 100)}% down`}
          onPointerDown={(event) => {
            const rect = event.currentTarget.getBoundingClientRect();
            grab.current = { dx: event.clientX - rect.left - rect.width / 2, dy: event.clientY - rect.top - rect.height / 2 };
            event.currentTarget.setPointerCapture(event.pointerId);
          }}
          onPointerMove={(event) => moveTo(event.clientX, event.clientY)}
          onPointerUp={() => {
            grab.current = null;
          }}
          onKeyDown={(event) => {
            const step = event.shiftKey ? 0.08 : 0.02;
            const moves: Record<string, [number, number]> = {
              ArrowLeft: [-step, 0],
              ArrowRight: [step, 0],
              ArrowUp: [0, -step],
              ArrowDown: [0, step],
            };
            const delta = moves[event.key];
            if (!delta) return;
            event.preventDefault();
            setPosition((current) => ({
              x: Math.min(0.95, Math.max(0.05, current.x + delta[0])),
              y: Math.min(0.95, Math.max(0.05, current.y + delta[1])),
            }));
          }}
          className={cx(
            "absolute flex cursor-grab touch-none items-center justify-center text-center outline-none select-none active:cursor-grabbing",
            "focus-visible:ring-2 focus-visible:ring-white/70",
            appearance === "dark" ? "text-white" : "text-neutral-900",
          )}
          style={{
            left: `${position.x * 100}%`,
            top: `${position.y * 100}%`,
            width: size.width,
            height: size.height,
            borderRadius: size.radius,
            translate: "-50% -50%",
          }}
        >
          <LiquidGlass
            appearance={appearance}
            variant={variant}
            hue={hue}
            geometry={{ bezel, thickness, refractiveIndex, edge, glint }}
          />
          {shape === "capsule" ? <span className="text-base font-semibold">Drag the glass</span> : null}
          {shape === "card" ? (
            <span className="grid gap-1 px-7 text-left">
              <span className="text-lg font-semibold">{variant === "regular" ? "Regular" : "Clear"}</span>
              <span className="text-sm opacity-80">
                {variant === "regular"
                  ? "Diffuses and evens out the page, so text stays legible over anything."
                  : "Only bends and lights the page. For media and calm backgrounds."}
              </span>
            </span>
          ) : null}
        </div>

        <div
          className={cx(
            "absolute inset-y-4 right-4 hidden w-72 overflow-y-auto rounded-[24px] p-5 md:grid md:content-start md:gap-5",
            appearance === "dark" ? "text-white" : "text-neutral-900",
          )}
        >
          <LiquidGlass appearance={appearance} fit="scroll" />
          {controls}
        </div>
      </div>

      <div className="grid gap-4">
        <div className="panel grid gap-5 rounded-[24px] p-5 md:hidden">
          {controls}
        </div>
        <Code code={snippet({ variant, hue, bezel, thickness, refractiveIndex, edge, glint })} />
      </div>
    </section>
  );
}

function Player({ appearance }: { appearance: GlassAppearance }) {
  const [playing, setPlaying] = React.useState(true);
  return (
    <div className="relative h-80 overflow-hidden rounded-[28px]">
      <Scene appearance={appearance} words={false} />
      <div
        className={cx(
          "absolute inset-x-5 bottom-5 flex items-center gap-3 rounded-full py-2 pr-2 pl-5",
          appearance === "dark" ? "text-white" : "text-neutral-900",
        )}
      >
        <LiquidGlass appearance={appearance} interactive />
        <span className="grid min-w-0 flex-1 leading-tight">
          <span className="truncate text-sm font-semibold">Afterglow</span>
          <span className="truncate text-sm opacity-70">Tidal Index</span>
        </span>
        <button type="button" aria-label="Previous" className="flex size-10 items-center justify-center rounded-full opacity-80 hover:opacity-100">
          <IconSkip back />
        </button>
        <button
          type="button"
          aria-label={playing ? "Pause" : "Play"}
          onClick={() => setPlaying((current) => !current)}
          className="liquid-glass-well flex size-10 items-center justify-center rounded-full"
        >
          {playing ? <IconPause /> : <IconPlay />}
        </button>
        <button type="button" aria-label="Next" className="flex size-10 items-center justify-center rounded-full opacity-80 hover:opacity-100">
          <IconSkip />
        </button>
      </div>
    </div>
  );
}

const MENU_ITEMS = ["Share", "Add to queue", "Download", "Go to album"];

function Menu({ appearance }: { appearance: GlassAppearance }) {
  const [open, setOpen] = React.useState(false);
  const [leaving, setLeaving] = React.useState(false);
  const [active, setActive] = React.useState<number | null>(null);
  const glass = React.useRef<LiquidGlassHandle | null>(null);
  const button = React.useRef<HTMLButtonElement>(null);

  React.useLayoutEffect(() => {
    // The glass grows with the menu's contents (app.css), through its inset.
    if (open) void glass.current?.materialize({ duration: 240, scale: 0.96 });
  }, [open]);

  const close = React.useCallback(async () => {
    setLeaving(true);
    await glass.current?.dematerialize({ duration: 160, scale: 0.97 });
    setOpen(false);
    setLeaving(false);
    setActive(null);
  }, []);

  React.useEffect(() => {
    if (!open) return;
    const onKey = (event: KeyboardEvent) => {
      if (event.key !== "Escape") return;
      void close();
      button.current?.focus();
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, close]);

  const tone = appearance === "dark" ? "text-white" : "text-neutral-900";
  return (
    <div
      className="relative h-80 overflow-hidden rounded-[28px]"
      onClick={(event) => {
        // A click anywhere outside the menu and its button closes it.
        if (open && !(event.target as Element).closest("[role=menu], button")) void close();
      }}
    >
      <Scene appearance={appearance} words={false} />
      <button
        ref={button}
        type="button"
        aria-label="More"
        aria-expanded={open}
        onClick={() => (open ? void close() : setOpen(true))}
        className={cx("absolute top-5 right-5 flex size-11 items-center justify-center rounded-full", tone)}
      >
        <LiquidGlass appearance={appearance} interactive />
        <IconMore />
      </button>
      {open ? (
        <div role="menu" aria-label="Track" className={cx("absolute top-[76px] right-5 w-52 rounded-[22px] p-1.5", tone)}>
          <LiquidGlass appearance={appearance} glassRef={glass} floating />
          <div className={cx("menu-content grid", leaving && "menu-content-leaving")}>
            {MENU_ITEMS.map((item, index) => (
              <button
                key={item}
                type="button"
                role="menuitem"
                onPointerEnter={() => setActive(index)}
                onFocus={() => setActive(index)}
                onClick={() => void close()}
                className={cx("rounded-[16px] px-3.5 py-2 text-left text-sm font-medium outline-none", active === index && "liquid-glass-well")}
              >
                {item}
              </button>
            ))}
          </div>
        </div>
      ) : null}
    </div>
  );
}

const PERIODS = [
  { value: "day", label: "Day" },
  { value: "week", label: "Week" },
  { value: "month", label: "Month" },
  { value: "year", label: "Year" },
] as const;

type Period = (typeof PERIODS)[number]["value"];

function Tabs({ appearance }: { appearance: GlassAppearance }) {
  const [period, setPeriod] = React.useState<Period>("week");
  return (
    <div className="relative grid h-56 place-items-center overflow-hidden rounded-[28px] md:col-span-2">
      <Scene appearance={appearance} />
      <GlassTabs
        label="Period"
        value={period}
        onChange={setPeriod}
        appearance={appearance}
        options={[...PERIODS]}
        className={cx("w-full max-w-sm", appearance === "dark" ? "text-white" : "text-neutral-900")}
      />
    </div>
  );
}

function InUse({ appearance }: { appearance: GlassAppearance }) {
  return (
    <section className="mx-auto grid max-w-5xl gap-6 px-4 pt-24 sm:px-6">
      <div className="grid gap-2 px-2">
        <h2 className="text-2xl font-semibold tracking-tight">In use</h2>
        <p className="max-w-xl opacity-70">
          The selected tab lifts into a lens that travels to the next one, and you can drag it across the others. Glass
          that holds controls lights up under the pointer, and menus materialize from clear glass as they open.
        </p>
      </div>
      <div className="grid gap-4 md:grid-cols-2">
        <Tabs appearance={appearance} />
        <Player appearance={appearance} />
        <Menu appearance={appearance} />
      </div>
    </section>
  );
}

const REACT_USAGE = `import { LiquidGlass } from "@colineapp/liquid-glass/react";
import "@colineapp/liquid-glass/styles.css";

export function Toolbar() {
  return (
    <nav className="relative rounded-full px-6 py-3">
      <LiquidGlass appearance="class" />
      …
    </nav>
  );
}`;

const VANILLA_USAGE = `import { createLiquidGlass } from "@colineapp/liquid-glass";
import "@colineapp/liquid-glass/styles.css";

const glass = createLiquidGlass(document.querySelector(".toolbar"), {
  variant: "clear",
});

// Later
glass.update({ variant: "regular" });
glass.destroy();`;

const TABS_USAGE = `import { useLiquidGlassTabs } from "@colineapp/liquid-glass/react";

export function Period({ value, onChange }) {
  const track = useRef(null);
  useLiquidGlassTabs(track);
  return (
    <div ref={track} role="tablist" className="flex rounded-full p-1">
      {["Day", "Week", "Month"].map((label) => (
        <button key={label} role="tab" aria-selected={label === value} onClick={() => onChange(label)}>
          {label}
        </button>
      ))}
    </div>
  );
}`;

function Install() {
  return (
    <section id="install" className="mx-auto grid max-w-5xl scroll-mt-24 gap-6 px-4 pt-24 sm:px-6">
      <div className="grid gap-2 px-2">
        <h2 className="text-2xl font-semibold tracking-tight">Install</h2>
        <p className="max-w-xl opacity-70">
          Put the glass first inside a positioned, rounded element. It takes the element’s corner radius and sits behind its
          content. Paint nothing over it: no background, border or shadow on the element.
        </p>
      </div>
      <Code code={INSTALL} />
      <div className="grid gap-4 md:grid-cols-2">
        <div className="grid min-w-0 content-start gap-3">
          <h3 className="px-2 font-semibold">React</h3>
          <Code code={REACT_USAGE} />
        </div>
        <div className="grid min-w-0 content-start gap-3">
          <h3 className="px-2 font-semibold">Any element</h3>
          <Code code={VANILLA_USAGE} />
        </div>
      </div>
      <div className="grid min-w-0 content-start gap-3">
        <h3 className="px-2 font-semibold">Tabs</h3>
        <p className="max-w-xl px-2 text-sm opacity-70">
          Your tabs and selection stay yours. The thumb follows aria-selected, aria-checked or Radix’s data-state, and
          a tab it is dragged onto gets clicked.
        </p>
        <Code code={TABS_USAGE} />
      </div>
    </section>
  );
}

const DETAILS = [
  {
    title: "A real lens",
    body: "Each rim pixel traces a ray through a squircle-shaped bevel with Snell’s law. The shift is capped where it would fold the page into mirrored echoes, so content compresses toward the rim instead.",
  },
  {
    title: "An edge that catches the light",
    body: "A darkened contour separates the glass from what is behind it, with the rim’s hairline just inside. Light from the top-left gathers into glints where it catches the curve.",
  },
  {
    title: "Any size, mid-animation",
    body: "The lens is rendered once as nine slices: fixed corners and stretched edges. Surfaces can resize and change radius while the glass stays on.",
  },
  {
    title: "A lens that travels",
    body: "The tab thumb moves like iOS 27’s tab bar: it lifts into a lens that magnifies the labels beneath, stretches with its speed and squashes as it lands. Four samples a pixel keep the labels it bends from stair-stepping.",
  },
  {
    title: "Every browser",
    body: "Refraction needs SVG filters in backdrop-filter, which Chromium renders. Safari and Firefox get the same material without the bend.",
  },
  {
    title: "Accessible",
    body: "Reduced transparency swaps the glass for a solid fill, increased contrast darkens the sides and edge, and forced colours hide it. Reduced motion keeps the tab thumb still.",
  },
];

function Details() {
  return (
    <section className="mx-auto grid max-w-5xl gap-4 px-4 pt-24 sm:grid-cols-2 sm:px-6">
      {DETAILS.map((detail) => (
        <div key={detail.title} className="panel grid content-start gap-2 rounded-[24px] p-6">
          <h3 className="font-semibold">{detail.title}</h3>
          <p className="text-sm leading-6 opacity-70">{detail.body}</p>
        </div>
      ))}
    </section>
  );
}

function Footer() {
  return (
    <footer className="mx-auto flex max-w-5xl flex-wrap items-center justify-between gap-3 px-6 pt-24 pb-12 text-sm opacity-70">
      <span>MIT license. Made by Coline.</span>
      <span className="flex gap-4">
        <ExternalLink href={SOURCE_URL} className="hover:underline">upstream.codes</ExternalLink>
        <ExternalLink href={GITHUB_URL} className="hover:underline">GitHub</ExternalLink>
      </span>
    </footer>
  );
}

export function Site() {
  const [appearance, setAppearance] = React.useState<GlassAppearance>("dark");
  return (
    <div className={cx("site min-h-dvh", appearance === "dark" ? "site-dark" : "site-light")}>
      <Nav appearance={appearance} onToggle={() => setAppearance((current) => (current === "dark" ? "light" : "dark"))} />
      <Hero />
      <Playground appearance={appearance} />
      <InUse appearance={appearance} />
      <Install />
      <Details />
      <Footer />
    </div>
  );
}

// The app's home inside Coline. The public site mounts from site.tsx.
const root = document.getElementById("root");
if (root && IN_SANDBOX) {
  createRoot(root).render(
    <ColineAppProvider>
      <Site />
    </ColineAppProvider>,
  );
}