"use client"

import { Icon } from "@iconify/react"

const ACCENT = "#34A853"

const MESSAGES = [
  { name: "Léa Fontaine", color: "#34A853", text: "Je partage le planning du sprint." },
  { name: "Vincent Morel", color: "#4285F4", text: "Parfait, on valide la date de jeudi ?" },
] as const

const REACTIONS = ["👍", "🎉", "👏", "❤️"] as const

const TRANSCRIPT = [
  { speaker: "Léa", text: "On cale la démo client pour jeudi 14 h." },
  { speaker: "Vincent", text: "Je prépare les slides d'ici mercredi." },
] as const

/** Aperçu statique des outils en réunion UltiMeet — partage d'écran, chat, transcription IA. */
export function UltimeetCollabDemo() {
  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.2fr)_minmax(0,1fr)]">
          <div className="relative flex min-h-[12rem] flex-col border-b border-[var(--landing-line)] bg-[var(--landing-bg)] sm:border-b-0 sm:border-r">
            <div className="flex items-center gap-2 px-3 py-2 text-[11px] font-medium text-[var(--landing-muted)]">
              <span className="flex items-center gap-1.5 rounded-full bg-[#EA4335]/15 px-2 py-0.5 text-[#EA4335]">
                <span className="size-1.5 rounded-full bg-[#EA4335]" aria-hidden />
                REC
              </span>
              <span className="flex items-center gap-1">
                <Icon icon="mdi:monitor-share" className="size-3.5" style={{ color: ACCENT }} aria-hidden />
                Léa partage son écran
              </span>
            </div>
            <div className="relative mx-3 mb-3 flex-1 overflow-hidden rounded-xl border border-[var(--landing-line)] bg-[var(--landing-chip)]/40">
              <div className="flex flex-col gap-2 p-3">
                <div className="h-2.5 w-1/3 rounded-full bg-[var(--landing-line)]" />
                <div className="h-2 w-3/4 rounded-full bg-[var(--landing-line)]/70" />
                <div className="h-2 w-2/3 rounded-full bg-[var(--landing-line)]/70" />
                <div className="mt-2 grid grid-cols-3 gap-2">
                  <div className="h-10 rounded-lg" style={{ backgroundColor: `${ACCENT}33` }} />
                  <div className="h-10 rounded-lg bg-[#4285F4]/25" />
                  <div className="h-10 rounded-lg bg-[#FBBC04]/25" />
                </div>
              </div>
              <div className="pointer-events-none absolute bottom-2 right-2 flex items-end gap-1 text-lg">
                {REACTIONS.slice(0, 2).map((emoji) => (
                  <span key={emoji} aria-hidden>
                    {emoji}
                  </span>
                ))}
              </div>
            </div>
          </div>

          <div className="flex flex-col">
            <div className="flex items-center gap-2 border-b border-[var(--landing-line)] px-3 py-2 text-xs font-semibold">
              <Icon icon="mdi:message-text-outline" className="size-4" style={{ color: ACCENT }} aria-hidden />
              Chat
              <span className="ml-auto flex gap-1">
                {REACTIONS.map((emoji) => (
                  <span key={emoji} className="text-sm" aria-hidden>
                    {emoji}
                  </span>
                ))}
              </span>
            </div>

            <ul className="flex flex-1 flex-col gap-2.5 px-3 py-3">
              {MESSAGES.map((message) => (
                <li key={message.text} className="flex gap-2">
                  <span
                    className="mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-full text-[10px] font-semibold text-white"
                    style={{ backgroundColor: message.color }}
                    aria-hidden
                  >
                    {message.name.charAt(0)}
                  </span>
                  <div className="min-w-0">
                    <p className="text-[11px] font-medium text-[var(--landing-muted)]">{message.name}</p>
                    <p className="text-xs text-[var(--landing-fg)]">{message.text}</p>
                  </div>
                </li>
              ))}
            </ul>

            <div className="border-t border-[var(--landing-line)] bg-[var(--landing-chip)]/30 px-3 py-2.5">
              <p className="mb-1.5 flex items-center gap-1.5 text-[10px] font-medium uppercase tracking-wide text-[var(--landing-muted)]">
                <img src="/ultiai-mark.svg" alt="" className="size-3.5 object-contain" aria-hidden />
                Transcription en direct · UltiAI
              </p>
              <ul className="flex flex-col gap-1">
                {TRANSCRIPT.map((line) => (
                  <li key={line.text} className="text-[11px] leading-snug text-[var(--landing-muted)]">
                    <span className="font-semibold text-[var(--landing-fg)]">{line.speaker} :</span> {line.text}
                  </li>
                ))}
              </ul>
            </div>
          </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 — partage d&apos;écran, réactions et transcription IA, rien n&apos;est enregistré.
      </p>
    </div>
  )
}