"use client"

import { Icon } from "@iconify/react"

const ACCENT = "#34A853"

const DEVICES = [
  { icon: "mdi:microphone", label: "MacBook Pro · Micro" },
  { icon: "mdi:video", label: "Caméra FaceTime HD" },
  { icon: "mdi:volume-high", label: "Haut-parleurs système" },
] as const

const WAITING = [
  { name: "Léa Fontaine", color: "#34A853" },
  { name: "Vincent Morel", color: "#4285F4" },
] as const

/** Aperçu statique du lobby UltiMeet — réglages caméra/micro avant de rejoindre. */
export function UltimeetLobbyDemo() {
  return (
    <div className="flex flex-col gap-3">
      <div className="landing-glass-strong overflow-hidden rounded-2xl shadow-[0_32px_70px_-36px_rgba(30,40,90,0.45)]">
        <div className="grid grid-cols-1 sm:grid-cols-[minmax(0,1.15fr)_minmax(0,1fr)]">
          <div className="relative flex min-h-[12rem] items-center justify-center border-b border-[var(--landing-line)] bg-[var(--landing-bg)] p-4 sm:border-b-0 sm:border-r">
            <div
              className="absolute inset-3 rounded-xl"
              style={{
                background: `radial-gradient(circle at 50% 40%, ${ACCENT}26, transparent 70%)`,
              }}
              aria-hidden
            />
            <span
              className="z-10 flex size-16 items-center justify-center rounded-full text-xl font-semibold text-white"
              style={{ backgroundColor: ACCENT }}
              aria-hidden
            >
              CV
            </span>
            <div className="absolute bottom-4 left-4 flex items-center gap-1.5 rounded-md bg-black/55 px-2 py-1 text-[11px] font-medium text-white">
              <Icon icon="mdi:microphone" className="size-3" aria-hidden />
              Camille Visiteur
            </div>
            <div className="absolute bottom-4 right-4 flex gap-1.5">
              <span className="flex size-8 items-center justify-center rounded-full bg-black/55 text-white" aria-hidden>
                <Icon icon="mdi:microphone" className="size-4" />
              </span>
              <span className="flex size-8 items-center justify-center rounded-full bg-black/55 text-white" aria-hidden>
                <Icon icon="mdi:blur" className="size-4" />
              </span>
            </div>
          </div>

          <div className="flex flex-col gap-3 p-5">
            <div className="flex items-center gap-2 text-xs font-medium text-[var(--landing-muted)]">
              <img src="/agenda-mark.svg" alt="" className="size-4 object-contain" aria-hidden />
              Lien généré depuis UltiCal
            </div>
            <h3 className="text-base font-semibold tracking-tight">Atelier Nord — point hebdo</h3>

            <ul className="flex flex-col gap-1.5">
              {DEVICES.map((device) => (
                <li
                  key={device.label}
                  className="flex items-center gap-2.5 rounded-lg border border-[var(--landing-line)] px-2.5 py-2 text-xs text-[var(--landing-fg)]"
                >
                  <Icon icon={device.icon} className="size-4 shrink-0 text-[var(--landing-muted)]" aria-hidden />
                  <span className="min-w-0 flex-1 truncate">{device.label}</span>
                  <Icon icon="mdi:chevron-down" className="size-4 shrink-0 text-[var(--landing-muted)]" aria-hidden />
                </li>
              ))}
            </ul>

            <div className="flex items-center gap-2 rounded-lg bg-[var(--landing-chip)]/40 px-2.5 py-2 text-xs text-[var(--landing-muted)]">
              <div className="flex -space-x-1.5">
                {WAITING.map((person) => (
                  <span
                    key={person.name}
                    className="flex size-5 items-center justify-center rounded-full border border-[var(--landing-bg)] text-[9px] font-semibold text-white"
                    style={{ backgroundColor: person.color }}
                    aria-hidden
                  >
                    {person.name.charAt(0)}
                  </span>
                ))}
              </div>
              2 personnes déjà dans la salle d&apos;attente
            </div>

            <button
              type="button"
              tabIndex={-1}
              className="mt-auto flex h-10 items-center justify-center gap-2 rounded-full text-sm font-semibold text-white"
              style={{ backgroundColor: ACCENT }}
            >
              <Icon icon="mdi:video" className="size-4" aria-hidden />
              Demander à rejoindre
            </button>
          </div>
        </div>
      </div>
      <p className="flex items-start gap-2 text-sm text-[var(--landing-muted)]">
        <Icon icon="mdi:incognito" className="mt-0.5 size-4 shrink-0" aria-hidden />
        Aperçu statique — testez vos périphériques avant d&apos;entrer, aucun appareil activé.
      </p>
    </div>
  )
}