{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "compose-email-card",
  "type": "registry:component",
  "title": "Compose Email Card",
  "description": "Compact card interface for composing emails with recipient, subject, actions.",
  "dependencies": [
    "lucide-react",
    "motion",
    "react-icons"
  ],
  "files": [
    {
      "path": "components/watermelon/compose-email-card.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport { useState, useRef, useEffect, useLayoutEffect, type FC } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\nimport {\n  X,\n  Minus,\n  Maximize2,\n  Mail,\n  ChevronDown,\n  Smile,\n  Paperclip,\n  Link2,\n  Sparkles,\n  MoreHorizontal,\n  Bold,\n  Italic,\n  Calendar,\n  Upload,\n  Check,\n} from 'lucide-react';\nimport { LuSend } from 'react-icons/lu';\n\n// --- Types ---\nexport interface Attachment {\n  id: string;\n  name: string;\n  type: string;\n  size: string;\n  icon: 'PDF' | 'IMAGE' | 'DOC';\n}\n\nexport interface Recipient {\n  id: string;\n  name: string;\n  avatar: string;\n  email: string;\n}\n\nexport interface EmailData {\n  from: Recipient;\n  to: Recipient[];\n  subject: string;\n  body: string;\n  attachments: Attachment[];\n}\n\ninterface ComposeEmailCardProps {\n  data: EmailData;\n  onSend?: (data: EmailData) => void;\n  onClose?: () => void;\n}\n\ntype ActivePopover =\n  | 'more'\n  | 'emoji'\n  | 'attach'\n  | 'link'\n  | 'ai'\n  | 'schedule'\n  | null;\n\nconst EMOJIS = [\n  '😊',\n  '👍',\n  '🙌',\n  '🔥',\n  '💡',\n  '✅',\n  '🚀',\n  '💼',\n  '📊',\n  '🎯',\n  '💬',\n  '🤝',\n  '⭐',\n  '📌',\n  '🎉',\n  '💪',\n  '🌟',\n  '📈',\n  '🔑',\n  '⚡',\n];\n\nconst AI_SUGGESTIONS = [\n  \"I'd love to schedule a quick call this week to discuss further.\",\n  'Please let me know if you have any questions — happy to help!',\n  'Looking forward to your feedback on this.',\n];\n\nconst SCHEDULE_OPTIONS = [\n  { label: 'Tomorrow 9:00 AM', value: 'tom-9am' },\n  { label: 'Tomorrow 2:00 PM', value: 'tom-2pm' },\n  { label: 'Monday 10:00 AM', value: 'mon-10am' },\n  { label: 'Monday 3:00 PM', value: 'mon-3pm' },\n];\n\nexport const ComposeEmailCard: FC<ComposeEmailCardProps> = ({\n  data,\n  onSend,\n  onClose,\n}) => {\n  const [showToolbar, setShowToolbar] = useState(false);\n  const [toolbarPos, setToolbarPos] = useState({ x: 0, y: 0 });\n  const [activePopover, setActivePopover] = useState<ActivePopover>(null);\n  const [linkUrl, setLinkUrl] = useState('');\n  const [linkText, setLinkText] = useState('');\n  const [linkInserted, setLinkInserted] = useState(false);\n  const [scheduledTime, setScheduledTime] = useState<string | null>(null);\n  const [attachedFiles, setAttachedFiles] = useState<string[]>([]);\n  const [isDraggingOver, setIsDraggingOver] = useState(false);\n  const [fromOpen, setFromOpen] = useState(false);\n  const [selectedFrom, setSelectedFrom] = useState(data.from);\n  const [safeX, setSafeX] = useState(0);\n\n  const bodyRef = useRef<HTMLDivElement>(null);\n  const toolbarRef = useRef<HTMLDivElement>(null);\n  const popoverRef = useRef<HTMLDivElement>(null);\n  const fromRef = useRef<HTMLDivElement>(null);\n\n  const springConfig = {\n    type: 'spring',\n    stiffness: 450,\n    damping: 32,\n    mass: 1,\n  } as const;\n  const popoverAnim = {\n    initial: { opacity: 0, y: 8, scale: 0.96 },\n    animate: { opacity: 1, y: 0, scale: 1 },\n    exit: { opacity: 0, y: 8, scale: 0.96 },\n    transition: { type: 'spring' as const, damping: 22, stiffness: 300 },\n  } as const;\n\n  const handleSelection = () => {\n    const selection = window.getSelection();\n    if (selection && selection.toString().length > 0 && bodyRef.current) {\n      const range = selection.getRangeAt(0);\n      const rect = range.getBoundingClientRect();\n      const parentRect = bodyRef.current.getBoundingClientRect();\n      setToolbarPos({\n        x: rect.left + rect.width / 2 - parentRect.left,\n        y: rect.top - parentRect.top - 60,\n      });\n      setShowToolbar(true);\n    } else {\n      setShowToolbar(false);\n    }\n  };\n\n  const getSafeToolbarX = (rawX: number) => {\n    if (!toolbarRef.current || !bodyRef.current) return rawX;\n    const toolbarWidth = toolbarRef.current.offsetWidth;\n    const containerWidth = bodyRef.current.offsetWidth;\n    const padding = 12;\n    const minX = padding;\n    const maxX = containerWidth - toolbarWidth - padding;\n    return Math.min(Math.max(rawX - toolbarWidth / 2, minX), maxX);\n  };\n\n  useLayoutEffect(() => {\n    if (showToolbar) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect\n      setSafeX(getSafeToolbarX(toolbarPos.x));\n    }\n  }, [toolbarPos, showToolbar]);\n\n  const togglePopover = (name: ActivePopover) => {\n    setActivePopover((prev) => (prev === name ? null : name));\n  };\n\n  // Close popover on outside click\n  useEffect(() => {\n    const handler = (e: MouseEvent) => {\n      if (\n        popoverRef.current &&\n        !popoverRef.current.contains(e.target as Node)\n      ) {\n        setActivePopover(null);\n      }\n    };\n    document.addEventListener('mousedown', handler);\n    return () => document.removeEventListener('mousedown', handler);\n  }, []);\n\n  const insertEmoji = (emoji: string) => {\n    if (bodyRef.current) {\n      const sel = window.getSelection();\n      if (sel && sel.rangeCount > 0) {\n        const range = sel.getRangeAt(0);\n        if (bodyRef.current.contains(range.commonAncestorContainer)) {\n          range.deleteContents();\n          range.insertNode(document.createTextNode(emoji));\n          range.collapse(false);\n          sel.removeAllRanges();\n          sel.addRange(range);\n          return;\n        }\n      }\n      // fallback: append at end\n      bodyRef.current.innerText += emoji;\n    }\n    setActivePopover(null);\n  };\n\n  const insertLink = () => {\n    if (!linkUrl) return;\n    const display = linkText || linkUrl;\n    if (bodyRef.current) {\n      const a = document.createElement('a');\n      a.href = linkUrl.startsWith('http') ? linkUrl : `https://${linkUrl}`;\n      a.textContent = display;\n      a.style.color = '#6366F1';\n      a.style.textDecoration = 'underline';\n      bodyRef.current.appendChild(document.createTextNode(' '));\n      bodyRef.current.appendChild(a);\n      bodyRef.current.appendChild(document.createTextNode(' '));\n    }\n    setLinkInserted(true);\n    setTimeout(() => {\n      setLinkInserted(false);\n      setLinkUrl('');\n      setLinkText('');\n      setActivePopover(null);\n    }, 1000);\n  };\n\n  const insertAISuggestion = (text: string) => {\n    if (bodyRef.current) {\n      bodyRef.current.innerText =\n        (bodyRef.current.innerText || '').trimEnd() + '\\n\\n' + text;\n    }\n    setActivePopover(null);\n  };\n\n  const handleSchedule = (label: string) => {\n    setScheduledTime(label);\n    setActivePopover(null);\n  };\n\n  const handleFakeAttach = () => {\n    const names = [\n      'proposal.pdf',\n      'design-v2.png',\n      'notes.docx',\n      'report.xlsx',\n    ];\n    const random = names[Math.floor(Math.random() * names.length)];\n    if (!attachedFiles.includes(random))\n      setAttachedFiles((p) => [...p, random]);\n    setActivePopover(null);\n  };\n\n  useEffect(() => {\n    const handler = (e: MouseEvent) => {\n      if (fromRef.current && !fromRef.current.contains(e.target as Node))\n        setFromOpen(false);\n      if (popoverRef.current && !popoverRef.current.contains(e.target as Node))\n        setActivePopover(null);\n    };\n    document.addEventListener('mousedown', handler);\n    return () => document.removeEventListener('mousedown', handler);\n  }, []);\n\n  return (\n    <motion.div\n      initial={{ opacity: 0, y: 40, scale: 0.98 }}\n      animate={{ opacity: 1, y: 0, scale: 1 }}\n      transition={{ ...springConfig, damping: 38 }}\n      className=\"z-10 flex max-h-[95vh] w-full flex-col overflow-hidden rounded-4xl border border-gray-200/60 bg-[#F5F5F7] text-[#374151] antialiased shadow-lg sm:max-h-[92vh] sm:rounded-[24px] lg:max-w-145 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-300\"\n    >\n      {/* Header */}\n      <div className=\"flex flex-none items-center justify-between bg-[#F5F5F7] py-3 pr-3 pl-4 sm:py-4 sm:pr-4 sm:pl-5 dark:bg-zinc-900\">\n        <div className=\"flex items-center gap-2 sm:gap-3\">\n          <div className=\"flex h-8 w-8 items-center justify-center rounded-lg bg-[#6B5FF5] text-white sm:h-10 sm:w-10 sm:rounded-xl\">\n            <Mail size={18} className=\"sm:w-5.5\" strokeWidth={1.5} />\n          </div>\n          <span className=\"text-[14px] font-semibold tracking-tight text-[#29292B] sm:text-[15px] dark:text-zinc-100\">\n            Compose email\n          </span>\n        </div>\n        <div className=\"flex items-center gap-0.5\">\n          <button\n            title=\"minimize\"\n            className=\"rounded-lg p-1.5 text-gray-400 transition-colors hover:text-black/70 sm:p-2 dark:hover:text-white/70\"\n          >\n            <Minus size={16} />\n          </button>\n          <button\n            title=\"Maximize\"\n            className=\"hidden rounded-lg p-2 text-gray-400 transition-colors hover:text-black/70 sm:block dark:hover:text-white/70\"\n          >\n            <Maximize2 size={15} />\n          </button>\n          <button\n            title=\"close\"\n            onClick={onClose}\n            className=\"rounded-lg p-1.5 text-gray-400 transition-colors hover:text-black/70 sm:p-2 dark:hover:text-white/70\"\n          >\n            <X size={18} />\n          </button>\n        </div>\n      </div>\n\n      {/* Scrollable Body */}\n      <div className=\"custom-scrollbar flex-1 overflow-y-auto rounded-[18px] border border-[#E5E5E5] bg-white sm:rounded-4xl dark:border-zinc-800 dark:bg-zinc-950\">\n        <div className=\"space-y-2 px-4 pt-4 pb-2 sm:px-8 sm:pt-6\">\n          {/* From Section */}\n          <div className=\"flex items-center text-[13px]\">\n            <span className=\"w-12 text-gray-400 sm:w-14\">From</span>\n            <div ref={fromRef} className=\"relative\">\n              <button\n                onClick={() => setFromOpen((v) => !v)}\n                className=\"flex max-w-50 cursor-pointer items-center gap-2 rounded-full border border-gray-200 bg-white px-2 py-0.5 shadow-sm transition-all hover:border-gray-300 sm:max-w-none sm:px-2.5 sm:py-1 dark:border-zinc-800 dark:bg-zinc-900\"\n              >\n                <img\n                  src={selectedFrom.avatar}\n                  alt=\"\"\n                  className=\"h-4 w-4 shrink-0 rounded-full object-cover sm:h-5 sm:w-5\"\n                />\n                <span className=\"truncate font-medium text-gray-700 dark:text-zinc-200\">\n                  {selectedFrom.name}\n                </span>\n                <ChevronDown\n                  size={14}\n                  className={`shrink-0 text-gray-400 transition-transform ${fromOpen ? 'rotate-180' : ''}`}\n                />\n              </button>\n              <AnimatePresence>\n                {fromOpen && (\n                  <motion.div\n                    {...popoverAnim}\n                    className=\"absolute top-full left-0 z-50 mt-2 w-52 overflow-hidden rounded-2xl border border-gray-200 bg-white py-1.5 shadow-2xl dark:border-zinc-700 dark:bg-zinc-900\"\n                  >\n                    <p className=\"px-4 pt-1.5 pb-1 text-[10px] font-semibold tracking-wider text-gray-400 uppercase\">\n                      Switch account\n                    </p>\n                    {[\n                      {\n                        id: data.from.id,\n                        name: data.from.name,\n                        email: data.from.email ?? 'me@example.com',\n                        avatar: data.from.avatar,\n                      },\n                      {\n                        id: 'work',\n                        name: 'Work',\n                        email: 'work@company.com',\n                        avatar: data.from.avatar,\n                      },\n                      {\n                        id: 'personal',\n                        name: 'Personal',\n                        email: 'personal@gmail.com',\n                        avatar: data.from.avatar,\n                      },\n                    ].map((acc) => (\n                      <button\n                        key={acc.email}\n                        onClick={() => {\n                          setSelectedFrom(acc);\n                          setFromOpen(false);\n                        }}\n                        className={`flex w-full items-center gap-2.5 px-4 py-2.5 text-left transition-colors hover:bg-gray-50 dark:hover:bg-zinc-800 ${selectedFrom.name === acc.name ? 'text-[#6366F1]' : 'text-gray-700 dark:text-zinc-300'}`}\n                      >\n                        <img\n                          src={acc.avatar}\n                          alt=\"\"\n                          className=\"h-5 w-5 shrink-0 rounded-full object-cover\"\n                        />\n                        <div className=\"min-w-0\">\n                          <p className=\"truncate text-xs font-medium\">\n                            {acc.name}\n                          </p>\n                          <p className=\"truncate text-[10px] text-gray-400 dark:text-zinc-500\">\n                            {acc.email}\n                          </p>\n                        </div>\n                        {selectedFrom.name === acc.name && (\n                          <Check size={13} className=\"ml-auto shrink-0\" />\n                        )}\n                      </button>\n                    ))}\n                  </motion.div>\n                )}\n              </AnimatePresence>\n            </div>\n          </div>\n\n          {/* To Section */}\n          <div className=\"flex items-start border-b border-gray-100 py-2 text-[13px] dark:border-zinc-800\">\n            <span className=\"mt-2 w-12 text-gray-400 sm:w-14\">To</span>\n            <div className=\"flex flex-1 flex-wrap gap-1.5 sm:gap-2\">\n              {data.to.map((recipient) => (\n                <div\n                  key={recipient.id}\n                  className=\"flex items-center gap-1.5 rounded-full border border-gray-200 bg-white px-2 py-0.5 shadow-sm sm:gap-2 sm:px-2.5 sm:py-1 dark:border-zinc-800 dark:bg-zinc-900\"\n                >\n                  <img\n                    src={recipient.avatar}\n                    alt=\"\"\n                    className=\"h-4 w-4 rounded-full object-cover sm:h-5 sm:w-5\"\n                  />\n                  <span className=\"font-medium text-gray-700 dark:text-zinc-200\">\n                    {recipient.name}\n                  </span>\n                </div>\n              ))}\n            </div>\n            <div className=\"mt-2.5 ml-2 flex gap-2 text-[10px] font-medium text-gray-400 sm:ml-4 sm:gap-3 sm:text-[11px]\">\n              <button className=\"transition-colors hover:text-[#6366F1]\">\n                CC\n              </button>\n              <button className=\"transition-colors hover:text-[#6366F1]\">\n                BCC\n              </button>\n            </div>\n          </div>\n\n          {/* Subject Section */}\n          <div className=\"flex items-center gap-2 border-b border-gray-100 py-2 sm:gap-4 dark:border-zinc-800\">\n            <span className=\"w-12 text-[13px] text-gray-400 sm:w-14\">\n              Subject\n            </span>\n            <input\n              title=\"subject\"\n              type=\"text\"\n              defaultValue={data.subject}\n              className=\"flex-1 bg-transparent text-[14px] font-medium text-gray-800 outline-none sm:text-[15px] dark:text-zinc-100\"\n            />\n          </div>\n        </div>\n\n        {/* Editor Area */}\n        <div className=\"relative min-h-37.5 px-4 py-2 sm:min-h-50 sm:px-8\">\n          <AnimatePresence>\n            {showToolbar && (\n              <motion.div\n                ref={toolbarRef}\n                initial={{ opacity: 0, y: 10, scale: 0.95 }}\n                animate={{\n                  opacity: 1,\n                  y: 0,\n                  scale: 1,\n                  left: safeX,\n                }}\n                exit={{ opacity: 0, scale: 0.95 }}\n                transition={springConfig}\n                className=\"absolute z-60 flex origin-bottom scale-90 items-center gap-1 rounded-xl border border-gray-200 bg-white p-1 shadow-xl sm:scale-100 dark:border-zinc-800 dark:bg-zinc-900\"\n                style={{ top: toolbarPos.y }}\n              >\n                <button className=\"flex items-center gap-2 rounded-xl bg-gray-50 px-2 py-1.5 whitespace-nowrap transition-colors hover:bg-gray-100 sm:px-3 dark:bg-zinc-800 dark:hover:bg-zinc-700\">\n                  <Sparkles size={14} className=\"text-[#6366F1]\" />\n                  <span className=\"text-[12px] font-semibold text-gray-700 sm:text-[13px] dark:text-zinc-200\">\n                    Ask AI\n                  </span>\n                </button>\n                <div className=\"mx-1 h-4 w-px bg-gray-200 dark:bg-zinc-700\" />\n                <button\n                  title=\"bold\"\n                  className=\"rounded-lg p-1.5 text-gray-500 hover:bg-gray-50 sm:p-2 dark:hover:bg-zinc-800\"\n                >\n                  <Bold size={14} />\n                </button>\n                <button\n                  title=\"italic\"\n                  className=\"rounded-lg p-1.5 text-gray-500 hover:bg-gray-50 sm:p-2 dark:hover:bg-zinc-800\"\n                >\n                  <Italic size={14} />\n                </button>\n              </motion.div>\n            )}\n          </AnimatePresence>\n\n          <div\n            ref={bodyRef}\n            contentEditable\n            onMouseUp={handleSelection}\n            onKeyUp={handleSelection}\n            className=\"min-h-37.5 text-[14px] leading-relaxed whitespace-pre-wrap text-gray-700 outline-none sm:text-[15px] dark:text-zinc-300\"\n            dangerouslySetInnerHTML={{ __html: data.body }}\n          />\n\n          {/* Attachments Section */}\n          <div className=\"mt-6 pb-4 sm:mt-8\">\n            <h4 className=\"mb-3 text-[11px] font-medium tracking-widest text-[#A7A7A9] capitalize sm:mb-4 sm:text-[12px]\">\n              Attachments\n            </h4>\n            <div className=\"grid grid-cols-1 gap-2 sm:grid-cols-2\">\n              {data.attachments.map((file) => (\n                <motion.div\n                  key={file.id}\n                  whileHover={{ y: -2 }}\n                  className=\"group flex cursor-pointer items-center gap-3 rounded-2xl border-[1.5px] border-[#F1F2F8] bg-white p-2 transition-all hover:border-[#6366F1]/30 sm:rounded-[14px] dark:border-zinc-800 dark:bg-zinc-900\"\n                >\n                  <div className=\"flex h-9 w-9 items-center justify-center rounded-lg bg-gray-100 text-[9px] font-bold text-gray-400 transition-colors group-hover:bg-[#F5F3FF] group-hover:text-[#6366F1] sm:h-11 sm:w-11 sm:text-[10px] dark:bg-zinc-800 dark:group-hover:bg-[#6366F1]/10\">\n                    {file.icon}\n                  </div>\n                  <div className=\"min-w-0 flex-1\">\n                    <p className=\"truncate text-[13px] font-bold text-gray-800 sm:text-[14px] dark:text-zinc-200\">\n                      {file.name}\n                    </p>\n                    <p className=\"text-[10px] font-normal text-gray-400 uppercase sm:text-[11px]\">\n                      {file.type} · {file.size}\n                    </p>\n                  </div>\n                </motion.div>\n              ))}\n              {/* Dynamically added attachments */}\n              {attachedFiles.map((fname) => (\n                <motion.div\n                  key={fname}\n                  initial={{ opacity: 0, y: 4 }}\n                  animate={{ opacity: 1, y: 0 }}\n                  whileHover={{ y: -2 }}\n                  className=\"group flex cursor-pointer items-center gap-3 rounded-2xl border-[1.5px] border-[#6366F1]/20 bg-white p-2 transition-all hover:border-[#6366F1]/40 sm:rounded-[14px] dark:bg-zinc-900\"\n                >\n                  <div className=\"flex h-9 w-9 items-center justify-center rounded-lg bg-[#F5F3FF] text-[9px] font-bold text-[#6366F1] sm:h-11 sm:w-11 sm:text-[10px] dark:bg-[#6366F1]/10\">\n                    {fname.split('.').pop()?.toUpperCase()}\n                  </div>\n                  <div className=\"min-w-0 flex-1\">\n                    <p className=\"truncate text-[13px] font-bold text-gray-800 sm:text-[14px] dark:text-zinc-200\">\n                      {fname}\n                    </p>\n                    <p className=\"text-[10px] font-normal text-[#6366F1] sm:text-[11px]\">\n                      Just added\n                    </p>\n                  </div>\n                  <button\n                    onClick={() =>\n                      setAttachedFiles((p) => p.filter((f) => f !== fname))\n                    }\n                    className=\"rounded-full p-1 text-gray-400 transition-colors hover:bg-gray-100 dark:hover:bg-zinc-800\"\n                  >\n                    <X size={12} />\n                  </button>\n                </motion.div>\n              ))}\n            </div>\n          </div>\n        </div>\n      </div>\n\n      {/* Footer */}\n      <div className=\"flex flex-none flex-col justify-between gap-4 border-gray-100 bg-[#F5F5F7] px-4 py-3 sm:flex-row sm:items-center sm:px-6 sm:py-4 dark:border-zinc-800 dark:bg-zinc-900\">\n        {/* Icon Toolbar with popovers */}\n        <div\n          ref={popoverRef}\n          className=\"relative flex items-center gap-0.5 text-gray-400 sm:gap-1\"\n        >\n          {/* More */}\n          <div className=\"relative\">\n            <button\n              title=\"more\"\n              onClick={() => togglePopover('more')}\n              className=\"rounded-lg p-2 transition-all hover:text-gray-600 dark:hover:text-zinc-200\"\n            >\n              <MoreHorizontal size={18} />\n            </button>\n            <AnimatePresence>\n              {activePopover === 'more' && (\n                <motion.div\n                  {...popoverAnim}\n                  className=\"absolute bottom-full left-0 z-50 mb-2 w-48 overflow-hidden rounded-2xl border border-gray-200 bg-white py-1.5 shadow-2xl dark:border-zinc-700 dark:bg-zinc-900\"\n                >\n                  {[\n                    { label: 'Discard draft', danger: true },\n                    { label: 'Print', danger: false },\n                    { label: 'Save as template', danger: false },\n                    { label: 'Spell check', danger: false },\n                  ].map((opt) => (\n                    <button\n                      key={opt.label}\n                      onClick={() => setActivePopover(null)}\n                      className={`w-full px-4 py-2 text-left text-[13px] transition-colors ${\n                        opt.danger\n                          ? 'text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10'\n                          : 'text-gray-700 hover:bg-gray-50 dark:text-zinc-300 dark:hover:bg-zinc-800'\n                      }`}\n                    >\n                      {opt.label}\n                    </button>\n                  ))}\n                </motion.div>\n              )}\n            </AnimatePresence>\n          </div>\n\n          {/* Emoji */}\n          <div className=\"relative\">\n            <button\n              title=\"emoji\"\n              onClick={() => togglePopover('emoji')}\n              className=\"rounded-lg p-2 transition-all hover:text-gray-600 dark:hover:text-zinc-200\"\n            >\n              <Smile size={18} />\n            </button>\n            <AnimatePresence>\n              {activePopover === 'emoji' && (\n                <motion.div\n                  {...popoverAnim}\n                  className=\"absolute bottom-full left-0 z-50 mb-2 w-52 rounded-2xl border border-gray-200 bg-white p-3 shadow-2xl dark:border-zinc-700 dark:bg-zinc-900\"\n                >\n                  <p className=\"mb-2 text-[11px] font-semibold tracking-wider text-gray-400 uppercase\">\n                    Emoji\n                  </p>\n                  <div className=\"grid grid-cols-5 gap-1\">\n                    {EMOJIS.map((e) => (\n                      <button\n                        key={e}\n                        onClick={() => insertEmoji(e)}\n                        className=\"rounded-lg p-1 text-xl transition-colors hover:bg-gray-100 dark:hover:bg-zinc-800\"\n                      >\n                        {e}\n                      </button>\n                    ))}\n                  </div>\n                </motion.div>\n              )}\n            </AnimatePresence>\n          </div>\n\n          {/* Attach */}\n          <div className=\"relative\">\n            <button\n              title=\"attach\"\n              onClick={() => togglePopover('attach')}\n              className=\"rounded-lg p-2 transition-all hover:text-gray-600 dark:hover:text-zinc-200\"\n            >\n              <Paperclip size={18} />\n            </button>\n            <AnimatePresence>\n              {activePopover === 'attach' && (\n                <motion.div\n                  {...popoverAnim}\n                  className=\"absolute bottom-full left-0 z-50 mb-2 w-52 -translate-x-6 rounded-2xl border border-gray-200 bg-white p-4 shadow-2xl sm:w-56 sm:translate-x-0 dark:border-zinc-700 dark:bg-zinc-900\"\n                >\n                  <p className=\"mb-3 text-[11px] font-semibold tracking-wider text-gray-400 uppercase\">\n                    Attach File\n                  </p>\n                  <div\n                    onDragOver={(e) => {\n                      e.preventDefault();\n                      setIsDraggingOver(true);\n                    }}\n                    onDragLeave={() => setIsDraggingOver(false)}\n                    onDrop={(e) => {\n                      e.preventDefault();\n                      setIsDraggingOver(false);\n                      handleFakeAttach();\n                    }}\n                    onClick={handleFakeAttach}\n                    className={`flex cursor-pointer flex-col items-center gap-2 rounded-xl border-2 border-dashed p-4 transition-all ${isDraggingOver ? 'border-[#6366F1] bg-[#F5F3FF] dark:bg-[#6366F1]/10' : 'border-gray-200 hover:border-[#6366F1]/50 hover:bg-gray-50 dark:border-zinc-700 dark:hover:bg-zinc-800'}`}\n                  >\n                    <Upload size={20} className=\"text-gray-400\" />\n                    <p className=\"text-center text-[12px] text-gray-500 dark:text-zinc-400\">\n                      Click or drag files here\n                    </p>\n                  </div>\n                </motion.div>\n              )}\n            </AnimatePresence>\n          </div>\n\n          {/* Link */}\n          <div className=\"relative\">\n            <button\n              title=\"link\"\n              onClick={() => togglePopover('link')}\n              className=\"rounded-lg p-2 transition-all hover:text-gray-600 dark:hover:text-zinc-200\"\n            >\n              <Link2 size={18} />\n            </button>\n            <AnimatePresence>\n              {activePopover === 'link' && (\n                <motion.div\n                  {...popoverAnim}\n                  className=\"absolute bottom-full left-0 z-50 mb-2 w-56 -translate-x-16 rounded-2xl border border-gray-200 bg-white p-4 shadow-2xl sm:w-64 sm:translate-x-0 dark:border-zinc-700 dark:bg-zinc-900\"\n                >\n                  <p className=\"mb-3 text-[11px] font-semibold tracking-wider text-gray-400 uppercase\">\n                    Insert Link\n                  </p>\n                  <div className=\"space-y-2\">\n                    <input\n                      type=\"text\"\n                      placeholder=\"URL (e.g. https://...)\"\n                      value={linkUrl}\n                      onChange={(e) => setLinkUrl(e.target.value)}\n                      className=\"w-full rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-[13px] text-gray-800 transition-colors outline-none focus:border-[#6366F1] dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-200\"\n                    />\n                    <input\n                      type=\"text\"\n                      placeholder=\"Display text (optional)\"\n                      value={linkText}\n                      onChange={(e) => setLinkText(e.target.value)}\n                      className=\"w-full rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-[13px] text-gray-800 transition-colors outline-none focus:border-[#6366F1] dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-200\"\n                    />\n                    <button\n                      onClick={insertLink}\n                      disabled={!linkUrl}\n                      className=\"flex w-full items-center justify-center gap-2 rounded-lg bg-[#6366F1] py-2 text-[13px] font-medium text-white transition-colors hover:bg-[#5558E8] disabled:cursor-not-allowed disabled:opacity-40\"\n                    >\n                      {linkInserted ? (\n                        <>\n                          <Check size={14} /> Inserted!\n                        </>\n                      ) : (\n                        'Insert Link'\n                      )}\n                    </button>\n                  </div>\n                </motion.div>\n              )}\n            </AnimatePresence>\n          </div>\n\n          {/* AI Suggestions */}\n          <div className=\"relative\">\n            <button\n              title=\"ai\"\n              onClick={() => togglePopover('ai')}\n              className=\"rounded-lg p-2 transition-all hover:text-[#6366F1]\"\n            >\n              <Sparkles size={18} />\n            </button>\n            <AnimatePresence>\n              {activePopover === 'ai' && (\n                <motion.div\n                  {...popoverAnim}\n                  className=\"absolute bottom-full left-0 z-50 mb-2 w-56 -translate-x-24 rounded-2xl border border-gray-200 bg-white p-4 shadow-2xl sm:w-72 sm:translate-x-0 dark:border-zinc-700 dark:bg-zinc-900\"\n                >\n                  <div className=\"mb-3 flex items-center gap-2\">\n                    <Sparkles size={14} className=\"text-[#6366F1]\" />\n                    <p className=\"text-[11px] font-semibold tracking-wider text-gray-400 uppercase\">\n                      AI Suggestions\n                    </p>\n                  </div>\n                  <div className=\"space-y-2\">\n                    {AI_SUGGESTIONS.map((s, i) => (\n                      <button\n                        key={i}\n                        onClick={() => insertAISuggestion(s)}\n                        className=\"w-full rounded-xl bg-gray-50 px-3 py-2.5 text-left text-[13px] leading-relaxed text-gray-700 transition-colors hover:bg-[#F5F3FF] hover:text-[#6366F1] dark:bg-zinc-800 dark:text-zinc-300 dark:hover:bg-[#6366F1]/10\"\n                      >\n                        {s}\n                      </button>\n                    ))}\n                  </div>\n                </motion.div>\n              )}\n            </AnimatePresence>\n          </div>\n\n          <div className=\"mx-2 hidden h-5 w-px bg-gray-200 sm:block dark:bg-zinc-800\" />\n        </div>\n\n        {/* Action Buttons */}\n        <div className=\"flex min-w-0 items-center justify-between gap-2 border-t border-gray-200 pt-3 sm:justify-end sm:gap-3 sm:border-t-0 sm:pt-0 dark:border-zinc-800\">\n          <span className=\"max-w-[140px] min-w-0 truncate text-[11px] font-medium text-[#C6C5CA] sm:max-w-[180px]\">\n            {scheduledTime ? `📅 ${scheduledTime}` : 'Draft saved'}\n          </span>\n          <div className=\"flex flex-shrink-0 items-center gap-2\">\n            {/* Schedule */}\n            <div className=\"relative\">\n              <button\n                onClick={() => togglePopover('schedule')}\n                className={`flex items-center justify-center gap-1.5 rounded-full border px-2.5 py-1.5 text-[13px] font-normal transition-all ${scheduledTime ? 'border-[#6366F1]/40 bg-[#F5F3FF] text-[#6366F1] dark:bg-[#6366F1]/10' : 'border-gray-200 text-[#535355] hover:bg-gray-50 dark:border-zinc-700 dark:text-zinc-400 dark:hover:bg-zinc-800'}`}\n              >\n                <Calendar size={15} strokeWidth={2.5} />\n                {!scheduledTime && (\n                  <span className=\"hidden sm:inline\">Schedule</span>\n                )}\n              </button>\n              <AnimatePresence>\n                {activePopover === 'schedule' && (\n                  <motion.div\n                    {...popoverAnim}\n                    className=\"absolute right-0 bottom-full z-50 mb-2 w-56 rounded-2xl border border-gray-200 bg-white p-4 shadow-2xl dark:border-zinc-700 dark:bg-zinc-900\"\n                  >\n                    <p className=\"mb-3 text-[11px] font-semibold tracking-wider text-gray-400 uppercase\">\n                      Schedule Send\n                    </p>\n                    <div className=\"space-y-1.5\">\n                      {SCHEDULE_OPTIONS.map((opt) => (\n                        <button\n                          key={opt.value}\n                          onClick={() => handleSchedule(opt.label)}\n                          className={`flex w-full items-center justify-between rounded-xl px-3 py-2.5 text-left text-[13px] transition-colors ${scheduledTime === opt.label ? 'bg-[#F5F3FF] text-[#6366F1] dark:bg-[#6366F1]/10' : 'text-gray-700 hover:bg-gray-50 dark:text-zinc-300 dark:hover:bg-zinc-800'}`}\n                        >\n                          {opt.label}\n                          {scheduledTime === opt.label && <Check size={14} />}\n                        </button>\n                      ))}\n                    </div>\n                  </motion.div>\n                )}\n              </AnimatePresence>\n            </div>\n\n            <motion.button\n              whileHover={{ scale: 1.02 }}\n              whileTap={{ scale: 0.98 }}\n              onClick={() => onSend?.(data)}\n              className=\"flex items-center gap-1.5 rounded-full bg-[#0F0F0F] px-4 py-1.5 text-[13px] font-medium whitespace-nowrap text-white shadow-md transition-all hover:opacity-90 sm:px-5 sm:py-2 sm:text-[14px] dark:bg-white dark:text-black\"\n            >\n              <LuSend size={14} /> {scheduledTime ? 'Confirm' : 'Send'}\n            </motion.button>\n          </div>\n        </div>\n      </div>\n    </motion.div>\n  );\n};\n\nexport default ComposeEmailCard;\n"
    }
  ]
}