{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "social-media-post-scheduler",
  "title": "Social Media Post Scheduler",
  "type": "registry:page",
  "files": [
    {
      "path": "packages/registry-react/blocks/social-media-post-scheduler/SocialMediaPostScheduler.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport {\n  Bookmark,\n  Calendar,\n  Check,\n  CheckCircle2,\n  Clock,\n  Eye,\n  Globe,\n  Heart,\n  Image as ImageIcon,\n  MessageCircle,\n  MessageSquare,\n  MoreHorizontal,\n  Repeat2,\n  Send,\n  Share2,\n  Sparkles,\n  ThumbsUp,\n  Trash2,\n  UploadCloud,\n  X,\n} from 'lucide-react'\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\nimport { Separator } from '@/components/ui/separator'\nimport { Switch } from '@/components/ui/switch'\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'\nimport { Textarea } from '@/components/ui/textarea'\nimport { cn } from '@/lib/utils'\n\nexport interface SocialMediaPostSchedulerProps {\n  initialContent?: string\n  initialChannels?: string[]\n  initialMediaUrl?: string\n  initialDate?: string\n  initialTime?: string\n  initialAutoRepost?: boolean\n}\n\n// Hardcoded Author Profile Data\nconst AUTHOR = {\n  name: 'Alex Morgan',\n  role: 'Staff Product Engineer',\n  headline: 'Staff Product Engineer · Building open-source UI design systems & web tools',\n  twitterHandle: '@alexmorgan_dev',\n  instagramHandle: 'alexmorgan.dev',\n  threadsHandle: 'alexmorgan',\n  avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=256&auto=format&fit=crop',\n  initials: 'AM',\n}\n\n// Media Presets\nconst SAMPLE_IMAGES = [\n  {\n    id: 'dashboard',\n    label: 'Dashboard Preview',\n    url: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=1200&auto=format&fit=crop',\n    dimensions: '1200 × 675 px · 284 KB',\n    aspect: '16:9 Landscape',\n  },\n  {\n    id: 'workspace',\n    label: 'Dev Workspace',\n    url: 'https://images.unsplash.com/photo-1498050108023-c5249f4df085?q=80&w=1200&auto=format&fit=crop',\n    dimensions: '1200 × 800 px · 340 KB',\n    aspect: '3:2 Photo',\n  },\n  {\n    id: 'design',\n    label: 'Design Canvas',\n    url: 'https://images.unsplash.com/photo-1507238691740-187a5b1d37b8?q=80&w=1200&auto=format&fit=crop',\n    dimensions: '1080 × 1080 px · 410 KB',\n    aspect: '1:1 Square',\n  },\n]\n\n// Suggested Hashtags\nconst SUGGESTED_HASHTAGS = [\n  '#UI',\n  '#Developer',\n  '#OpenSource',\n  '#DesignSystem',\n  '#WebDev',\n  '#Frontend',\n  '#Tech',\n  '#SaaS',\n]\n\n// Quick Emojis\nconst QUICK_EMOJIS = ['🚀', '✨', '💡', '🔥', '📊', '🧵', '🎉', '⚡', '👇', '🎯']\n\n// Recommended Time Slots\nconst TIME_SLOTS = ['09:00 AM EST', '10:00 AM EST', '01:30 PM EST', '05:00 PM EST']\n\n// Platform Limits\nconst PLATFORM_LIMITS: Record<string, { name: string; limit: number; color: string }> = {\n  twitter: { name: 'X (Twitter)', limit: 280, color: 'text-info' },\n  threads: { name: 'Threads', limit: 500, color: 'text-foreground' },\n  instagram: { name: 'Instagram', limit: 2200, color: 'text-pink-500' },\n  linkedin: { name: 'LinkedIn', limit: 3000, color: 'text-info' },\n}\n\nexport function SocialMediaPostScheduler({\n  initialContent = 'Excited to announce the new component release for our open source design system! 🚀 Built with accessible keyboard ergonomics, fluid motion, and crisp token hierarchy out of the box.\\n\\n#UI #Developer #OpenSource',\n  initialChannels = ['twitter', 'linkedin', 'instagram', 'threads'],\n  initialMediaUrl = 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=1200&auto=format&fit=crop',\n  initialDate = '2026-08-25',\n  initialTime = '10:00 AM EST',\n  initialAutoRepost = true,\n}: SocialMediaPostSchedulerProps) {\n  // State\n  const [content, setContent] = React.useState(initialContent)\n  const [selectedChannels, setSelectedChannels] = React.useState<string[]>(initialChannels)\n  const [activeTab, setActiveTab] = React.useState('twitter')\n  const [mediaUrl, setMediaUrl] = React.useState<string | null>(initialMediaUrl)\n  const [scheduledDate, setScheduledDate] = React.useState(initialDate)\n  const [scheduledTime, setScheduledTime] = React.useState(initialTime)\n  const [autoRepost, setAutoRepost] = React.useState(initialAutoRepost)\n  const [firstCommentThread, setFirstCommentThread] = React.useState(true)\n  const [isLikedInPreview, setIsLikedInPreview] = React.useState(false)\n  const [notificationMessage, setNotificationMessage] = React.useState<string | null>(null)\n  const [notificationType, setNotificationType] = React.useState<'success' | 'draft'>('success')\n\n  // Channel Toggle Logic\n  const toggleChannel = React.useCallback((channelId: string) => {\n    setSelectedChannels((prev) => {\n      if (prev.includes(channelId)) {\n        if (prev.length > 1) return prev.filter((c) => c !== channelId)\n        return prev\n      }\n      return [...prev, channelId]\n    })\n  }, [])\n\n  const isChannelSelected = React.useCallback(\n    (channelId: string) => selectedChannels.includes(channelId),\n    [selectedChannels],\n  )\n\n  // Hashtag & Emoji Insertion\n  const insertHashtag = React.useCallback((tag: string) => {\n    setContent((prev) => {\n      if (prev.includes(tag)) return prev\n      if (!prev.trim()) return tag\n      return `${prev.trim()} ${tag}`\n    })\n  }, [])\n\n  const insertEmoji = React.useCallback((emoji: string) => {\n    setContent((prev) => `${prev}${emoji}`)\n  }, [])\n\n  const polishWithAi = React.useCallback(() => {\n    setContent(\n      '🚀 Excited to announce our newest UI component release! Built with zero-dependency headless primitives, fluid spring physics, and full OKLCH dark mode tokens.\\n\\nExplore the interactive playground & let us know your thoughts below! 👇\\n\\n#UI #Developer #OpenSource #DesignSystem',\n    )\n  }, [])\n\n  const saveDraft = React.useCallback(() => {\n    setNotificationType('draft')\n    setNotificationMessage(\n      'Post draft saved locally. All changes, media attachments, and channel targets are up to date.',\n    )\n  }, [])\n\n  const schedulePost = React.useCallback(() => {\n    setNotificationType('success')\n    setNotificationMessage(\n      `Post scheduled for ${scheduledDate} at ${scheduledTime} across ${selectedChannels.length} connected channels!`,\n    )\n  }, [scheduledDate, scheduledTime, selectedChannels.length])\n\n  // Character Limit Computed\n  const currentLength = content.length\n  const currentPlatformLimit = PLATFORM_LIMITS[activeTab]?.limit ?? 280\n  const isOverLimit = currentLength > currentPlatformLimit\n  const isWarningLimit = currentLength > currentPlatformLimit - 40 && !isOverLimit\n\n  // Text tokens parsing for hashtag highlighting in preview\n  const formattedContentSegments = React.useMemo(() => {\n    if (!content) return []\n    const words = content.split(/(\\s+)/)\n    return words.map((word) => ({\n      text: word,\n      isHashtag: word.startsWith('#') && word.length > 1,\n      isMention: word.startsWith('@') && word.length > 1,\n    }))\n  }, [content])\n\n  return (\n    <div data-slot=\"social-media-post-scheduler\" className=\"bg-background text-foreground flex w-full flex-col gap-6\">\n      {/* Top Global Header */}\n      <header className=\"bg-card border-border flex flex-col gap-4 rounded-xl border p-5 shadow-xs sm:flex-row sm:items-center sm:justify-between\">\n        <div className=\"space-y-1\">\n          <div className=\"flex flex-wrap items-center gap-2.5\">\n            <div className=\"bg-primary/10 text-primary flex size-8 items-center justify-center rounded-lg\">\n              <Calendar className=\"size-4\" />\n            </div>\n            <h1 className=\"text-foreground text-lg font-semibold tracking-tight\">Social Post Composer & Scheduler</h1>\n            <Badge variant=\"secondary\" className=\"font-mono text-xs\">\n              {selectedChannels.length} / 4 Networks\n            </Badge>\n          </div>\n          <p className=\"text-muted-foreground text-sm\">\n            Compose, calibrate, and orchestrate cross-platform social broadcasts with live authentic previews.\n          </p>\n        </div>\n\n        <div className=\"flex flex-wrap items-center gap-2.5\">\n          <Button variant=\"outline\" size=\"sm\" onClick={saveDraft}>\n            <Bookmark className=\"mr-1.5 size-3.5\" />\n            Save Draft\n          </Button>\n          <Button size=\"sm\" onClick={schedulePost}>\n            <Calendar className=\"mr-1.5 size-3.5\" />\n            Schedule Post\n          </Button>\n        </div>\n      </header>\n\n      {/* Feedback Notification Toast Banner */}\n      {notificationMessage && (\n        <div\n          className={cn(\n            'flex items-center justify-between rounded-lg border p-3.5 text-sm shadow-xs transition-colors',\n            notificationType === 'success'\n              ? 'border-success/30 bg-success/10 text-success'\n              : 'bg-primary/10 border-primary/20 text-primary',\n          )}\n        >\n          <div className=\"flex flex-wrap items-center gap-2.5\">\n            {notificationType === 'success' ? (\n              <CheckCircle2 className=\"size-4 shrink-0\" />\n            ) : (\n              <Bookmark className=\"size-4 shrink-0\" />\n            )}\n            <span>{notificationMessage}</span>\n          </div>\n          <button\n            type=\"button\"\n            aria-label=\"Dismiss notification\"\n            className=\"text-muted-foreground hover:text-foreground focus-visible:ring-ring rounded p-1 focus-visible:ring-2 focus-visible:outline-none\"\n            onClick={() => setNotificationMessage(null)}\n          >\n            <X className=\"size-4\" />\n          </button>\n        </div>\n      )}\n\n      {/* 2-Column Composer & Live Preview Grid */}\n      <div className=\"grid grid-cols-1 gap-6 lg:grid-cols-12\">\n        {/* Left Column: Composer, Channels, Media, Schedule Settings */}\n        <section className=\"space-y-6 lg:col-span-6\">\n          {/* Target Channels Selection Card */}\n          <Card>\n            <CardHeader className=\"pb-3\">\n              <div className=\"flex items-center justify-between\">\n                <CardTitle className=\"text-base font-semibold\">Publishing Channels</CardTitle>\n                <span className=\"text-muted-foreground text-xs font-medium\">Select all target feeds</span>\n              </div>\n              <CardDescription className=\"text-xs\">\n                Toggle the target social accounts for this scheduled broadcast.\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <div className=\"grid grid-cols-2 gap-2.5 sm:grid-cols-4\">\n                {/* X (Twitter) Pill */}\n                <button\n                  type=\"button\"\n                  className={cn(\n                    'group focus-visible:ring-ring relative flex flex-col items-start gap-1.5 rounded-lg border p-3 text-left transition-colors focus-visible:ring-2 focus-visible:outline-none',\n                    isChannelSelected('twitter')\n                      ? 'border-primary bg-primary/5 ring-primary ring-1'\n                      : 'border-border bg-card hover:bg-accent/50 opacity-65',\n                  )}\n                  onClick={() => toggleChannel('twitter')}\n                >\n                  <div className=\"flex w-full items-center justify-between\">\n                    <div className=\"bg-foreground text-background flex size-6 items-center justify-center rounded-md\">\n                      <svg className=\"size-3.5\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n                        <path d=\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 24.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z\" />\n                      </svg>\n                    </div>\n                    <div\n                      className={cn(\n                        'flex size-4 items-center justify-center rounded-full text-xs',\n                        isChannelSelected('twitter') ? 'bg-primary text-primary-foreground' : 'border-border border',\n                      )}\n                    >\n                      {isChannelSelected('twitter') && <Check className=\"size-2.5 stroke-[3]\" />}\n                    </div>\n                  </div>\n                  <div>\n                    <div className=\"text-xs font-semibold\">X / Twitter</div>\n                    <div className=\"text-muted-foreground text-xs\">280 chars</div>\n                  </div>\n                </button>\n\n                {/* LinkedIn Pill */}\n                <button\n                  type=\"button\"\n                  className={cn(\n                    'group focus-visible:ring-ring relative flex flex-col items-start gap-1.5 rounded-lg border p-3 text-left transition-colors focus-visible:ring-2 focus-visible:outline-none',\n                    isChannelSelected('linkedin')\n                      ? 'border-info bg-info/5 ring-1 ring-blue-600'\n                      : 'border-border bg-card hover:bg-accent/50 opacity-65',\n                  )}\n                  onClick={() => toggleChannel('linkedin')}\n                >\n                  <div className=\"flex w-full items-center justify-between\">\n                    <div className=\"flex size-6 items-center justify-center rounded-md bg-[#0077B5] text-white\">\n                      <svg className=\"size-3.5\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n                        <path d=\"M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.28 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.75M6.46 8.76a1.45 1.45 0 1 0 0-2.9 1.45 1.45 0 0 0 0 2.9m1.4 9.74v-8.37H5.06v8.37z\" />\n                      </svg>\n                    </div>\n                    <div\n                      className={cn(\n                        'flex size-4 items-center justify-center rounded-full text-xs',\n                        isChannelSelected('linkedin') ? 'bg-info text-white' : 'border-border border',\n                      )}\n                    >\n                      {isChannelSelected('linkedin') && <Check className=\"size-2.5 stroke-[3]\" />}\n                    </div>\n                  </div>\n                  <div>\n                    <div className=\"text-xs font-semibold\">LinkedIn</div>\n                    <div className=\"text-muted-foreground text-xs\">3,000 chars</div>\n                  </div>\n                </button>\n\n                {/* Instagram Pill */}\n                <button\n                  type=\"button\"\n                  className={cn(\n                    'group focus-visible:ring-ring relative flex flex-col items-start gap-1.5 rounded-lg border p-3 text-left transition-colors focus-visible:ring-2 focus-visible:outline-none',\n                    isChannelSelected('instagram')\n                      ? 'border-pink-500 bg-pink-500/5 ring-1 ring-pink-500'\n                      : 'border-border bg-card hover:bg-accent/50 opacity-65',\n                  )}\n                  onClick={() => toggleChannel('instagram')}\n                >\n                  <div className=\"flex w-full items-center justify-between\">\n                    <div className=\"flex size-6 items-center justify-center rounded-md bg-gradient-to-tr from-[#f09433] via-[#dc2743] to-[#bc1888] text-white\">\n                      <svg className=\"size-3.5\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n                        <path d=\"M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z\" />\n                      </svg>\n                    </div>\n                    <div\n                      className={cn(\n                        'flex size-4 items-center justify-center rounded-full text-xs',\n                        isChannelSelected('instagram') ? 'bg-pink-500 text-white' : 'border-border border',\n                      )}\n                    >\n                      {isChannelSelected('instagram') && <Check className=\"size-2.5 stroke-[3]\" />}\n                    </div>\n                  </div>\n                  <div>\n                    <div className=\"text-xs font-semibold\">Instagram</div>\n                    <div className=\"text-muted-foreground text-xs\">2,200 chars</div>\n                  </div>\n                </button>\n\n                {/* Threads Pill */}\n                <button\n                  type=\"button\"\n                  className={cn(\n                    'group focus-visible:ring-ring relative flex flex-col items-start gap-1.5 rounded-lg border p-3 text-left transition-colors focus-visible:ring-2 focus-visible:outline-none',\n                    isChannelSelected('threads')\n                      ? 'border-foreground bg-foreground/5 ring-foreground ring-1'\n                      : 'border-border bg-card hover:bg-accent/50 opacity-65',\n                  )}\n                  onClick={() => toggleChannel('threads')}\n                >\n                  <div className=\"flex w-full items-center justify-between\">\n                    <div className=\"bg-foreground text-background flex size-6 items-center justify-center rounded-md\">\n                      <svg className=\"size-3.5\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n                        <path d=\"M12.186 24C5.454 24 0 18.618 0 12.016 0 5.414 5.454.032 12.186.032c6.64 0 11.966 5.228 12.004 11.758a12.08 12.08 0 0 1-3.69 8.643 11.85 11.85 0 0 1-8.314 3.567zm0-2.352a9.66 9.66 0 0 0 6.84-2.88 9.77 9.77 0 0 0 2.83-6.978c-.03-5.263-4.3-9.458-9.67-9.458-5.438 0-9.845 4.343-9.845 9.684 0 5.342 4.407 9.632 9.845 9.632z\" />\n                      </svg>\n                    </div>\n                    <div\n                      className={cn(\n                        'flex size-4 items-center justify-center rounded-full text-xs',\n                        isChannelSelected('threads') ? 'bg-foreground text-background' : 'border-border border',\n                      )}\n                    >\n                      {isChannelSelected('threads') && <Check className=\"size-2.5 stroke-[3]\" />}\n                    </div>\n                  </div>\n                  <div>\n                    <div className=\"text-xs font-semibold\">Threads</div>\n                    <div className=\"text-muted-foreground text-xs\">500 chars</div>\n                  </div>\n                </button>\n              </div>\n            </CardContent>\n          </Card>\n\n          {/* Post Content Composer Card */}\n          <Card>\n            <CardHeader className=\"pb-3\">\n              <div className=\"flex items-center justify-between\">\n                <CardTitle className=\"text-base font-semibold\">Post Content</CardTitle>\n                <Button\n                  variant=\"ghost\"\n                  size=\"xs\"\n                  className=\"text-primary hover:text-primary gap-1\"\n                  onClick={polishWithAi}\n                >\n                  <Sparkles className=\"size-3.5\" />\n                  <span>AI Polish</span>\n                </Button>\n              </div>\n            </CardHeader>\n            <CardContent className=\"space-y-4\">\n              {/* Textarea */}\n              <div className=\"space-y-2\">\n                <Textarea\n                  value={content}\n                  onValueChange={setContent}\n                  rows={6}\n                  placeholder=\"What would you like to share? Write once, preview across all social platforms...\"\n                  className=\"min-h-[140px] text-sm\"\n                />\n\n                {/* Bottom Bar: Emojis & Character Counter */}\n                <div className=\"flex flex-wrap items-center justify-between gap-2 pt-1\">\n                  {/* Quick Emojis */}\n                  <div className=\"flex flex-wrap items-center gap-1\">\n                    {QUICK_EMOJIS.map((emoji) => (\n                      <button\n                        key={emoji}\n                        type=\"button\"\n                        className=\"hover:bg-muted text-muted-foreground hover:text-foreground focus-visible:ring-ring flex size-7 items-center justify-center rounded text-sm transition-colors focus-visible:ring-1 focus-visible:outline-none\"\n                        onClick={() => insertEmoji(emoji)}\n                      >\n                        {emoji}\n                      </button>\n                    ))}\n                  </div>\n\n                  {/* Character Counter with dynamic limits */}\n                  <div className=\"flex items-center gap-2\">\n                    <Badge\n                      variant={isOverLimit ? 'destructive' : isWarningLimit ? 'warning' : 'secondary'}\n                      className=\"font-mono text-xs\"\n                    >\n                      {currentLength} / {currentPlatformLimit}\n                    </Badge>\n                  </div>\n                </div>\n              </div>\n\n              {/* Hashtag suggestions chips */}\n              <div className=\"space-y-1.5 pt-1\">\n                <span className=\"text-muted-foreground text-xs font-medium\">Recommended Hashtags</span>\n                <div className=\"flex flex-wrap gap-1.5\">\n                  {SUGGESTED_HASHTAGS.map((tag) => (\n                    <button\n                      key={tag}\n                      type=\"button\"\n                      className={cn(\n                        'focus-visible:ring-ring min-h-6 rounded-md border px-2 py-0.5 text-xs font-medium transition-colors focus-visible:ring-1 focus-visible:outline-none',\n                        content.includes(tag)\n                          ? 'border-primary/40 bg-primary/10 text-primary'\n                          : 'border-border bg-card text-muted-foreground hover:border-foreground/30 hover:text-foreground',\n                      )}\n                      onClick={() => insertHashtag(tag)}\n                    >\n                      {tag}\n                    </button>\n                  ))}\n                </div>\n              </div>\n            </CardContent>\n          </Card>\n\n          {/* Media Attachment Dropzone Card */}\n          <Card>\n            <CardHeader className=\"pb-3\">\n              <div className=\"flex items-center justify-between\">\n                <CardTitle className=\"text-base font-semibold\">Media Attachment</CardTitle>\n                {mediaUrl ? (\n                  <Badge variant=\"success\" className=\"text-xs\">\n                    Attached\n                  </Badge>\n                ) : (\n                  <Badge variant=\"outline\" className=\"text-xs\">\n                    Optional\n                  </Badge>\n                )}\n              </div>\n            </CardHeader>\n            <CardContent className=\"space-y-3\">\n              {/* Active Media Preview */}\n              {mediaUrl ? (\n                <div className=\"border-border bg-muted/20 relative flex flex-col gap-3 rounded-lg border p-3 sm:flex-row sm:items-center sm:justify-between\">\n                  <div className=\"flex items-center gap-3\">\n                    <div className=\"border-border relative size-16 shrink-0 overflow-hidden rounded-md border\">\n                      <img src={mediaUrl} alt=\"Post attachment preview\" className=\"size-full object-cover\" />\n                    </div>\n                    <div className=\"space-y-1\">\n                      <div className=\"text-foreground text-xs font-semibold\">product-launch-graphic.png</div>\n                      <div className=\"text-muted-foreground text-xs\">1200 × 675 px · 284 KB</div>\n                      <Badge variant=\"secondary\" className=\"text-xs\">\n                        16:9 Aspect\n                      </Badge>\n                    </div>\n                  </div>\n\n                  <div className=\"flex items-center gap-2\">\n                    <Button\n                      variant=\"ghost\"\n                      size=\"sm\"\n                      className=\"text-destructive hover:text-destructive hover:bg-destructive/10\"\n                      onClick={() => setMediaUrl(null)}\n                    >\n                      <Trash2 className=\"mr-1.5 size-3.5\" />\n                      Remove\n                    </Button>\n                  </div>\n                </div>\n              ) : (\n                /* Upload Dropzone (when empty) */\n                <div className=\"border-border hover:border-primary/50 flex flex-col items-center justify-center rounded-lg border border-dashed p-6 text-center transition-colors\">\n                  <div className=\"bg-muted text-muted-foreground flex size-10 items-center justify-center rounded-full\">\n                    <UploadCloud className=\"size-5\" />\n                  </div>\n                  <p className=\"text-foreground mt-2 text-xs font-semibold\">Drag & drop media attachment</p>\n                  <p className=\"text-muted-foreground text-xs\">PNG, JPG, GIF or MP4 up to 25MB</p>\n                </div>\n              )}\n\n              {/* Preset Sample Selector */}\n              <div className=\"space-y-1.5 pt-1\">\n                <span className=\"text-muted-foreground text-xs font-medium\">Quick Sample Media:</span>\n                <div className=\"flex flex-wrap gap-2\">\n                  {SAMPLE_IMAGES.map((sample) => (\n                    <button\n                      key={sample.id}\n                      type=\"button\"\n                      className={cn(\n                        'focus-visible:ring-ring min-h-6 rounded-md border px-2.5 py-1 text-xs font-medium transition-colors focus-visible:ring-1 focus-visible:outline-none',\n                        mediaUrl === sample.url\n                          ? 'border-primary bg-primary/10 text-primary'\n                          : 'border-border bg-card text-muted-foreground hover:text-foreground',\n                      )}\n                      onClick={() => setMediaUrl(sample.url)}\n                    >\n                      {sample.label}\n                    </button>\n                  ))}\n                </div>\n              </div>\n            </CardContent>\n          </Card>\n\n          {/* Schedule Configuration Card */}\n          <Card>\n            <CardHeader className=\"pb-3\">\n              <CardTitle className=\"text-base font-semibold\">Schedule Settings</CardTitle>\n              <CardDescription className=\"text-xs\">\n                Determine publish timing and automated amplification rules.\n              </CardDescription>\n            </CardHeader>\n            <CardContent className=\"space-y-4\">\n              <div className=\"grid grid-cols-1 gap-3 sm:grid-cols-2\">\n                <div className=\"space-y-1.5\">\n                  <label className=\"text-foreground text-xs font-medium\">Publish Date</label>\n                  <Input\n                    value={scheduledDate}\n                    onChange={(e) => setScheduledDate(e.target.value)}\n                    type=\"date\"\n                    className=\"text-xs\"\n                  />\n                </div>\n                <div className=\"space-y-1.5\">\n                  <label className=\"text-foreground text-xs font-medium\">Publish Time</label>\n                  <Input\n                    value={scheduledTime}\n                    onChange={(e) => setScheduledTime(e.target.value)}\n                    placeholder=\"10:00 AM EST\"\n                    className=\"text-xs\"\n                  />\n                </div>\n              </div>\n\n              {/* Optimal engagement recommendation banner */}\n              <div className=\"bg-primary/5 border-primary/20 flex items-start gap-2.5 rounded-lg border p-3 text-xs\">\n                <Clock className=\"text-primary mt-0.5 size-4 shrink-0\" />\n                <div className=\"space-y-1\">\n                  <span className=\"text-foreground font-semibold\">Optimal window: 10:00 AM EST</span>\n                  <p className=\"text-muted-foreground leading-relaxed\">\n                    Based on your audience timezone, posting between 09:30 AM – 10:30 AM EST generates +34% higher\n                    average CTR.\n                  </p>\n                  <div className=\"flex flex-wrap gap-1.5 pt-1\">\n                    {TIME_SLOTS.map((slot) => (\n                      <button\n                        key={slot}\n                        type=\"button\"\n                        className={cn(\n                          'focus-visible:ring-ring min-h-6 rounded border px-2 py-0.5 text-xs transition-colors focus-visible:ring-1 focus-visible:outline-none',\n                          scheduledTime === slot\n                            ? 'border-primary bg-primary text-primary-foreground font-medium'\n                            : 'border-border bg-card text-muted-foreground hover:text-foreground',\n                        )}\n                        onClick={() => setScheduledTime(slot)}\n                      >\n                        {slot}\n                      </button>\n                    ))}\n                  </div>\n                </div>\n              </div>\n\n              <Separator />\n\n              {/* Switches */}\n              <div className=\"space-y-3\">\n                <div className=\"flex items-center justify-between gap-2\">\n                  <div className=\"space-y-0.5\">\n                    <span className=\"text-foreground text-xs font-medium\">Auto-repost evergreen content</span>\n                    <p className=\"text-muted-foreground text-xs\">\n                      Reshuffle and repost to X & Threads after 24h if initial engagement crosses 100 interactions.\n                    </p>\n                  </div>\n                  <Switch checked={autoRepost} onCheckedChange={setAutoRepost} />\n                </div>\n\n                <div className=\"flex items-center justify-between gap-2\">\n                  <div className=\"space-y-0.5\">\n                    <span className=\"text-foreground text-xs font-medium\">Auto-append first comment / thread link</span>\n                    <p className=\"text-muted-foreground text-xs\">\n                      Places outbound GitHub & documentation links in the first comment to avoid algorithm penalty.\n                    </p>\n                  </div>\n                  <Switch checked={firstCommentThread} onCheckedChange={setFirstCommentThread} />\n                </div>\n              </div>\n            </CardContent>\n          </Card>\n        </section>\n\n        {/* Right Column: Live Social Feed Preview */}\n        <section className=\"space-y-4 lg:col-span-6\">\n          <Card className=\"flex h-full flex-col\">\n            <CardHeader className=\"pb-3\">\n              <div className=\"flex items-center justify-between\">\n                <div className=\"flex items-center gap-2\">\n                  <CardTitle className=\"text-base font-semibold\">Live Social Feed Preview</CardTitle>\n                  <Badge variant=\"outline\" className=\"border-success/30 bg-success/10 text-success gap-1 text-xs\">\n                    <span className=\"bg-success size-1.5 animate-pulse rounded-full\" />\n                    Live Sync\n                  </Badge>\n                </div>\n                <span className=\"text-muted-foreground font-mono text-xs\">\n                  Scheduled: {scheduledDate} · {scheduledTime}\n                </span>\n              </div>\n              <CardDescription className=\"text-xs\">\n                Preview pixel-accurate mockups in authentic platform containers.\n              </CardDescription>\n            </CardHeader>\n\n            <CardContent className=\"flex flex-1 flex-col space-y-4\">\n              {/* Platform Preview Switcher Tabs */}\n              <Tabs value={activeTab} onValueChange={setActiveTab} className=\"w-full\">\n                <TabsList className=\"grid w-full grid-cols-4\">\n                  <TabsTrigger value=\"twitter\" className=\"gap-1.5 text-xs\">\n                    <svg className=\"size-3.5\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n                      <path d=\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 24.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z\" />\n                    </svg>\n                    <span>X / Twitter</span>\n                  </TabsTrigger>\n                  <TabsTrigger value=\"linkedin\" className=\"gap-1.5 text-xs\">\n                    <svg className=\"size-3.5\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n                      <path d=\"M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.28 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.75M6.46 8.76a1.45 1.45 0 1 0 0-2.9 1.45 1.45 0 0 0 0 2.9m1.4 9.74v-8.37H5.06v8.37z\" />\n                    </svg>\n                    <span>LinkedIn</span>\n                  </TabsTrigger>\n                  <TabsTrigger value=\"instagram\" className=\"gap-1.5 text-xs\">\n                    <svg className=\"size-3.5\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n                      <path d=\"M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z\" />\n                    </svg>\n                    <span>Instagram</span>\n                  </TabsTrigger>\n                  <TabsTrigger value=\"threads\" className=\"gap-1.5 text-xs\">\n                    <svg className=\"size-3.5\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n                      <path d=\"M12.186 24C5.454 24 0 18.618 0 12.016 0 5.414 5.454.032 12.186.032c6.64 0 11.966 5.228 12.004 11.758a12.08 12.08 0 0 1-3.69 8.643 11.85 11.85 0 0 1-8.314 3.567zm0-2.352a9.66 9.66 0 0 0 6.84-2.88 9.77 9.77 0 0 0 2.83-6.978c-.03-5.263-4.3-9.458-9.67-9.458-5.438 0-9.845 4.343-9.845 9.684 0 5.342 4.407 9.632 9.845 9.632z\" />\n                    </svg>\n                    <span>Threads</span>\n                  </TabsTrigger>\n                </TabsList>\n\n                {/* TAB 1: X / Twitter Mockup */}\n                <TabsContent value=\"twitter\" className=\"mt-4\">\n                  <div className=\"border-border bg-card rounded-xl border p-4 shadow-xs\">\n                    <div className=\"flex items-start gap-3\">\n                      <Avatar className=\"size-10\">\n                        <AvatarImage src={AUTHOR.avatar} alt={AUTHOR.name} />\n                        <AvatarFallback>{AUTHOR.initials}</AvatarFallback>\n                      </Avatar>\n\n                      <div className=\"flex-1 space-y-2\">\n                        {/* X Header */}\n                        <div className=\"flex items-center justify-between\">\n                          <div className=\"flex flex-wrap items-center gap-1.5\">\n                            <span className=\"text-foreground text-sm font-bold\">{AUTHOR.name}</span>\n                            {/* Verified blue check badge */}\n                            <svg className=\"fill-info text-info size-4 shrink-0\" viewBox=\"0 0 24 24\">\n                              <path\n                                fillRule=\"evenodd\"\n                                clipRule=\"evenodd\"\n                                d=\"M8.603 3.799A4.49 4.49 0 0112 2.25c1.357 0 2.573.6 3.397 1.549a4.49 4.49 0 013.498 1.307 4.491 4.491 0 011.307 3.497A4.49 4.49 0 0121.75 12a4.49 4.49 0 01-1.549 3.397 4.491 4.491 0 01-1.307 3.497 4.491 4.491 0 01-3.497 1.307A4.49 4.49 0 0112 21.75a4.49 4.49 0 01-3.397-1.549 4.49 4.49 0 01-3.498-1.306 4.491 4.491 0 01-1.307-3.498A4.49 4.49 0 012.25 12c0-1.357.6-2.573 1.549-3.397a4.49 4.49 0 011.307-3.497 4.49 4.49 0 013.497-1.307zm7.004 6.308a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z\"\n                              />\n                            </svg>\n                            <span className=\"text-muted-foreground text-xs\">{AUTHOR.twitterHandle}</span>\n                            <span className=\"text-muted-foreground text-xs\">· Scheduled</span>\n                          </div>\n                          <MoreHorizontal className=\"text-muted-foreground size-4\" />\n                        </div>\n\n                        {/* X Body */}\n                        <div className=\"text-foreground text-sm leading-relaxed whitespace-pre-wrap\">\n                          {formattedContentSegments.length > 0 ? (\n                            formattedContentSegments.map((seg, idx) =>\n                              seg.isHashtag ? (\n                                <span key={idx} className=\"text-info cursor-pointer font-normal hover:underline\">\n                                  {seg.text}\n                                </span>\n                              ) : (\n                                <span key={idx}>{seg.text}</span>\n                              ),\n                            )\n                          ) : (\n                            <span className=\"text-muted-foreground italic\">Post body is empty...</span>\n                          )}\n                        </div>\n\n                        {/* Attached Media */}\n                        {mediaUrl && (\n                          <div className=\"border-border mt-3 overflow-hidden rounded-2xl border\">\n                            <img\n                              src={mediaUrl}\n                              alt=\"Post preview attachment\"\n                              className=\"max-h-72 w-full object-cover\"\n                            />\n                          </div>\n                        )}\n\n                        {/* Scheduled Metadata Stamp */}\n                        <div className=\"text-muted-foreground flex items-center gap-1.5 pt-1 text-xs\">\n                          <Clock className=\"size-3\" />\n                          <span>\n                            Will publish on {scheduledDate} at {scheduledTime}\n                          </span>\n                        </div>\n\n                        <Separator className=\"my-2\" />\n\n                        {/* X Action Bar */}\n                        <div className=\"text-muted-foreground flex items-center justify-between text-xs\">\n                          <button\n                            type=\"button\"\n                            className=\"hover:text-info flex min-h-6 items-center gap-1.5 transition-colors\"\n                          >\n                            <MessageCircle className=\"size-4\" />\n                            <span>24</span>\n                          </button>\n                          <button\n                            type=\"button\"\n                            className=\"hover:text-success flex min-h-6 items-center gap-1.5 transition-colors\"\n                          >\n                            <Repeat2 className=\"size-4\" />\n                            <span>12</span>\n                          </button>\n                          <button\n                            type=\"button\"\n                            className={cn(\n                              'hover:text-destructive flex min-h-6 items-center gap-1.5 transition-colors',\n                              isLikedInPreview && 'text-destructive',\n                            )}\n                            onClick={() => setIsLikedInPreview(!isLikedInPreview)}\n                          >\n                            <Heart className={cn('size-4', isLikedInPreview && 'fill-destructive')} />\n                            <span>{isLikedInPreview ? 159 : 158}</span>\n                          </button>\n                          <button\n                            type=\"button\"\n                            className=\"hover:text-info flex min-h-6 items-center gap-1.5 transition-colors\"\n                          >\n                            <Eye className=\"size-4\" />\n                            <span>4.2K</span>\n                          </button>\n                          <div className=\"flex items-center gap-2\">\n                            <Bookmark className=\"hover:text-foreground size-4 cursor-pointer\" />\n                            <Share2 className=\"hover:text-foreground size-4 cursor-pointer\" />\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </TabsContent>\n\n                {/* TAB 2: LinkedIn Mockup */}\n                <TabsContent value=\"linkedin\" className=\"mt-4\">\n                  <div className=\"border-border bg-card rounded-xl border p-4 shadow-xs\">\n                    {/* LinkedIn Header */}\n                    <div className=\"flex items-start justify-between\">\n                      <div className=\"flex items-start gap-3\">\n                        <Avatar className=\"size-11\">\n                          <AvatarImage src={AUTHOR.avatar} alt={AUTHOR.name} />\n                          <AvatarFallback>{AUTHOR.initials}</AvatarFallback>\n                        </Avatar>\n                        <div className=\"space-y-0.5\">\n                          <div className=\"flex items-center gap-1.5\">\n                            <span className=\"text-foreground text-sm font-semibold\">{AUTHOR.name}</span>\n                            <span className=\"text-muted-foreground text-xs\">• 1st</span>\n                          </div>\n                          <p className=\"text-muted-foreground line-clamp-1 text-xs\">{AUTHOR.headline}</p>\n                          <div className=\"text-muted-foreground flex items-center gap-1 text-xs\">\n                            <span>Scheduled ({scheduledDate})</span>\n                            <span>•</span>\n                            <Globe className=\"size-3\" />\n                          </div>\n                        </div>\n                      </div>\n                      <MoreHorizontal className=\"text-muted-foreground size-4\" />\n                    </div>\n\n                    {/* LinkedIn Body */}\n                    <div className=\"text-foreground mt-3 text-sm leading-relaxed whitespace-pre-wrap\">\n                      {formattedContentSegments.length > 0 ? (\n                        formattedContentSegments.map((seg, idx) =>\n                          seg.isHashtag ? (\n                            <span key={idx} className=\"text-info text-info cursor-pointer font-medium hover:underline\">\n                              {seg.text}\n                            </span>\n                          ) : (\n                            <span key={idx}>{seg.text}</span>\n                          ),\n                        )\n                      ) : (\n                        <span className=\"text-muted-foreground italic\">Post body is empty...</span>\n                      )}\n                    </div>\n\n                    {/* LinkedIn Media */}\n                    {mediaUrl && (\n                      <div className=\"border-border mt-3 overflow-hidden rounded-lg border\">\n                        <img src={mediaUrl} alt=\"Post preview attachment\" className=\"max-h-72 w-full object-cover\" />\n                      </div>\n                    )}\n\n                    {/* LinkedIn Reaction Metrics */}\n                    <div className=\"text-muted-foreground flex items-center justify-between pt-3 text-xs\">\n                      <div className=\"flex items-center gap-1.5\">\n                        <div className=\"flex -space-x-1\">\n                          <span className=\"bg-info flex size-4 items-center justify-center rounded-full text-xs text-white\">\n                            👍\n                          </span>\n                          <span className=\"bg-destructive flex size-4 items-center justify-center rounded-full text-xs text-white\">\n                            ❤️\n                          </span>\n                          <span className=\"bg-warning flex size-4 items-center justify-center rounded-full text-xs text-white\">\n                            💡\n                          </span>\n                        </div>\n                        <span className=\"font-medium\">89</span>\n                      </div>\n                      <span>14 comments · 6 reposts</span>\n                    </div>\n\n                    <Separator className=\"my-2\" />\n\n                    {/* LinkedIn Action Buttons */}\n                    <div className=\"text-muted-foreground grid grid-cols-4 gap-1 text-center text-xs font-medium\">\n                      <button\n                        type=\"button\"\n                        className={cn(\n                          'hover:bg-muted hover:text-foreground flex items-center justify-center gap-1.5 rounded-md py-2 transition-colors',\n                          isLikedInPreview && 'text-info font-semibold',\n                        )}\n                        onClick={() => setIsLikedInPreview(!isLikedInPreview)}\n                      >\n                        <ThumbsUp className=\"size-4\" />\n                        <span>Like</span>\n                      </button>\n                      <button\n                        type=\"button\"\n                        className=\"hover:bg-muted hover:text-foreground flex items-center justify-center gap-1.5 rounded-md py-2 transition-colors\"\n                      >\n                        <MessageSquare className=\"size-4\" />\n                        <span>Comment</span>\n                      </button>\n                      <button\n                        type=\"button\"\n                        className=\"hover:bg-muted hover:text-foreground flex items-center justify-center gap-1.5 rounded-md py-2 transition-colors\"\n                      >\n                        <Repeat2 className=\"size-4\" />\n                        <span>Repost</span>\n                      </button>\n                      <button\n                        type=\"button\"\n                        className=\"hover:bg-muted hover:text-foreground flex items-center justify-center gap-1.5 rounded-md py-2 transition-colors\"\n                      >\n                        <Send className=\"size-4\" />\n                        <span>Send</span>\n                      </button>\n                    </div>\n                  </div>\n                </TabsContent>\n\n                {/* TAB 3: Instagram Mockup */}\n                <TabsContent value=\"instagram\" className=\"mt-4\">\n                  <div className=\"border-border bg-card mx-auto max-w-md overflow-hidden rounded-xl border shadow-xs\">\n                    {/* IG Header */}\n                    <div className=\"flex items-center justify-between p-3\">\n                      <div className=\"flex flex-wrap items-center gap-2.5\">\n                        <div className=\"rounded-full bg-gradient-to-tr from-amber-500 via-rose-500 to-purple-600 p-0.5\">\n                          <Avatar className=\"border-background size-8 border-2\">\n                            <AvatarImage src={AUTHOR.avatar} alt={AUTHOR.name} />\n                            <AvatarFallback>{AUTHOR.initials}</AvatarFallback>\n                          </Avatar>\n                        </div>\n                        <div>\n                          <div className=\"text-foreground text-xs font-semibold\">{AUTHOR.instagramHandle}</div>\n                          <div className=\"text-muted-foreground text-xs\">San Francisco, California</div>\n                        </div>\n                      </div>\n                      <MoreHorizontal className=\"text-muted-foreground size-4\" />\n                    </div>\n\n                    {/* IG Media Container */}\n                    <div className=\"border-border/60 bg-muted/40 relative aspect-square w-full border-y\">\n                      {mediaUrl ? (\n                        <img src={mediaUrl} alt=\"Instagram post preview\" className=\"size-full object-cover\" />\n                      ) : (\n                        <div className=\"text-muted-foreground flex size-full flex-col items-center justify-center gap-2 p-6 text-center\">\n                          <ImageIcon className=\"size-10 stroke-[1.5]\" />\n                          <p className=\"text-xs\">Attach an image on the left to see Instagram photo preview</p>\n                        </div>\n                      )}\n                    </div>\n\n                    {/* IG Actions & Caption */}\n                    <div className=\"space-y-2 p-3\">\n                      <div className=\"flex items-center justify-between\">\n                        <div className=\"flex items-center gap-3\">\n                          <Heart\n                            className={cn(\n                              'size-5 cursor-pointer transition-colors',\n                              isLikedInPreview\n                                ? 'fill-destructive text-destructive'\n                                : 'text-foreground hover:text-destructive',\n                            )}\n                            onClick={() => setIsLikedInPreview(!isLikedInPreview)}\n                          />\n                          <MessageCircle className=\"text-foreground hover:text-muted-foreground size-5 cursor-pointer\" />\n                          <Send className=\"text-foreground hover:text-muted-foreground size-5 cursor-pointer\" />\n                        </div>\n                        <Bookmark className=\"text-foreground hover:text-muted-foreground size-5 cursor-pointer\" />\n                      </div>\n\n                      <div className=\"text-foreground text-xs font-semibold\">\n                        {isLikedInPreview ? '343 likes' : '342 likes'}\n                      </div>\n\n                      {/* IG Caption Text */}\n                      <div className=\"text-foreground text-xs leading-relaxed\">\n                        <span className=\"mr-1.5 font-semibold\">{AUTHOR.instagramHandle}</span>\n                        {formattedContentSegments.map((seg, idx) =>\n                          seg.isHashtag ? (\n                            <span key={idx} className=\"text-info text-info cursor-pointer font-medium hover:underline\">\n                              {seg.text}\n                            </span>\n                          ) : (\n                            <span key={idx}>{seg.text}</span>\n                          ),\n                        )}\n                      </div>\n\n                      <div className=\"text-muted-foreground cursor-pointer text-xs\">View all 28 comments</div>\n                      <div className=\"text-muted-foreground text-xs tracking-wider uppercase\">\n                        SCHEDULED FOR {scheduledDate} · {scheduledTime}\n                      </div>\n                    </div>\n                  </div>\n                </TabsContent>\n\n                {/* TAB 4: Threads Mockup */}\n                <TabsContent value=\"threads\" className=\"mt-4\">\n                  <div className=\"border-border bg-card rounded-xl border p-4 shadow-xs\">\n                    <div className=\"flex items-start gap-3\">\n                      <div className=\"flex flex-col items-center\">\n                        <Avatar className=\"size-10\">\n                          <AvatarImage src={AUTHOR.avatar} alt={AUTHOR.name} />\n                          <AvatarFallback>{AUTHOR.initials}</AvatarFallback>\n                        </Avatar>\n                        <div className=\"bg-border mt-2 h-20 w-0.5 rounded-full\" />\n                      </div>\n\n                      <div className=\"flex-1 space-y-2\">\n                        <div className=\"flex items-center justify-between\">\n                          <div className=\"flex items-center gap-1.5\">\n                            <span className=\"text-foreground text-sm font-semibold\">{AUTHOR.threadsHandle}</span>\n                            <svg className=\"fill-info text-info size-3.5 shrink-0\" viewBox=\"0 0 24 24\">\n                              <path\n                                fillRule=\"evenodd\"\n                                clipRule=\"evenodd\"\n                                d=\"M8.603 3.799A4.49 4.49 0 0112 2.25c1.357 0 2.573.6 3.397 1.549a4.49 4.49 0 013.498 1.307 4.491 4.491 0 011.307 3.497A4.49 4.49 0 0121.75 12a4.49 4.49 0 01-1.549 3.397 4.491 4.491 0 01-1.307 3.497 4.491 4.491 0 01-3.497 1.307A4.49 4.49 0 0112 21.75a4.49 4.49 0 01-3.397-1.549 4.49 4.49 0 01-3.498-1.306 4.491 4.491 0 01-1.307-3.498A4.49 4.49 0 012.25 12c0-1.357.6-2.573 1.549-3.397a4.49 4.49 0 011.307-3.497 4.49 4.49 0 013.497-1.307zm7.004 6.308a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z\"\n                              />\n                            </svg>\n                            <span className=\"text-muted-foreground text-xs\">· Scheduled</span>\n                          </div>\n                          <MoreHorizontal className=\"text-muted-foreground size-4\" />\n                        </div>\n\n                        <div className=\"text-foreground text-sm leading-relaxed whitespace-pre-wrap\">\n                          {formattedContentSegments.length > 0 ? (\n                            formattedContentSegments.map((seg, idx) =>\n                              seg.isHashtag ? (\n                                <span\n                                  key={idx}\n                                  className=\"text-foreground cursor-pointer font-semibold hover:underline\"\n                                >\n                                  {seg.text}\n                                </span>\n                              ) : (\n                                <span key={idx}>{seg.text}</span>\n                              ),\n                            )\n                          ) : (\n                            <span className=\"text-muted-foreground italic\">Post body is empty...</span>\n                          )}\n                        </div>\n\n                        {mediaUrl && (\n                          <div className=\"border-border mt-3 overflow-hidden rounded-xl border\">\n                            <img\n                              src={mediaUrl}\n                              alt=\"Post preview attachment\"\n                              className=\"max-h-72 w-full object-cover\"\n                            />\n                          </div>\n                        )}\n\n                        <div className=\"flex items-center gap-4 pt-2\">\n                          <Heart\n                            className={cn(\n                              'size-4 cursor-pointer transition-colors',\n                              isLikedInPreview\n                                ? 'fill-destructive text-destructive'\n                                : 'text-muted-foreground hover:text-foreground',\n                            )}\n                            onClick={() => setIsLikedInPreview(!isLikedInPreview)}\n                          />\n                          <MessageCircle className=\"text-muted-foreground hover:text-foreground size-4 cursor-pointer\" />\n                          <Repeat2 className=\"text-muted-foreground hover:text-foreground size-4 cursor-pointer\" />\n                          <Send className=\"text-muted-foreground hover:text-foreground size-4 cursor-pointer\" />\n                        </div>\n\n                        <div className=\"text-muted-foreground pt-1 text-xs\">48 replies · 312 likes</div>\n                      </div>\n                    </div>\n                  </div>\n                </TabsContent>\n              </Tabs>\n            </CardContent>\n\n            <CardFooter className=\"border-border/60 text-muted-foreground flex items-center justify-between border-t pt-4 text-xs\">\n              <span>Synchronized with Buffer & Hootsuite OAuth queues</span>\n              <div className=\"flex items-center gap-1.5\">\n                <span className=\"bg-success size-2 rounded-full\" />\n                <span>4 channels ready</span>\n              </div>\n            </CardFooter>\n          </Card>\n        </section>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:page",
      "target": "~/components/blocks/SocialMediaPostScheduler.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/avatar.json",
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/input.json",
    "https://uipkge.dev/r/react/separator.json",
    "https://uipkge.dev/r/react/switch.json",
    "https://uipkge.dev/r/react/tabs.json",
    "https://uipkge.dev/r/react/textarea.json"
  ],
  "description": "Multi-platform social media composer and post scheduler. Features channel toggles, rich text composer with emoji & hashtag insertion, character counter, media upload preview, scheduled time picker with best-time recommendations, auto-repost toggle, and high-fidelity live social feed previews for X (Twitter), LinkedIn, Instagram, and Threads.",
  "categories": [
    "marketing",
    "app"
  ]
}