SIMON Master Console Rebuild

File viewer

guarded to /htdocs

/connlink/4.php

import React, { useMemo, useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import {
  Bell,
  Brain,
  Calendar,
  ChevronDown,
  CircleDollarSign,
  Clapperboard,
  Command,
  Filter,
  Flame,
  LayoutDashboard,
  Megaphone,
  MessageSquare,
  PauseCircle,
  PlayCircle,
  Plus,
  Radio,
  RefreshCw,
  Search,
  Sparkles,
  Target,
  TrendingUp,
  Wand2,
  X,
  Zap,
} from "lucide-react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Input } from "@/components/ui/input";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Progress } from "@/components/ui/progress";
import { Switch } from "@/components/ui/switch";

const carriers = ["All", "Instagram", "TikTok", "Facebook", "YouTube", "X", "Pinterest"];

const signalFeed = [
  "Trend spike: AI voice clone reels up 28%",
  "Meta API latency warning detected",
  "Instagram saves outperform shares today",
  "Two campaigns reached profitable threshold",
  "RSS: Creator economy ads CPC trending down",
];

const stats = [
  { label: "Revenue", value: "$24,880", delta: "+18.4%", icon: CircleDollarSign },
  { label: "Reel Views", value: "482K", delta: "+9.2%", icon: Clapperboard },
  { label: "Leads", value: "1,294", delta: "+14.1%", icon: Target },
  { label: "AI Confidence", value: "94%", delta: "strong", icon: Brain },
];

const reels = [
  {
    id: 1,
    title: "AI Poems Launch Reel",
    platform: "Instagram",
    status: "Scheduled",
    type: "Organic",
    hook: "What happens when AI writes poetry with soul?",
    views: 78200,
    clicks: 412,
    revenue: 860,
    score: 92,
  },
  {
    id: 2,
    title: "SIMON Orb UI Teaser",
    platform: "TikTok",
    status: "Boost This",
    type: "Boosted",
    hook: "This is not a dashboard. It is a command center.",
    views: 141600,
    clicks: 1190,
    revenue: 2180,
    score: 97,
  },
  {
    id: 3,
    title: "Comic Drop Promo",
    platform: "Instagram",
    status: "Fix Caption",
    type: "Draft",
    hook: "Keith, Simon, and Jemay are back again.",
    views: 9800,
    clicks: 68,
    revenue: 120,
    score: 61,
  },
  {
    id: 4,
    title: "Cleaning Hack Demo",
    platform: "Facebook",
    status: "Pause Ad",
    type: "Paid",
    hook: "One cleaning trick that saves 30 minutes.",
    views: 22400,
    clicks: 128,
    revenue: 310,
    score: 54,
  },
  {
    id: 5,
    title: "WEB360 Before / After",
    platform: "YouTube",
    status: "Duplicate",
    type: "Paid",
    hook: "Watch a weak page become a revenue machine.",
    views: 32100,
    clicks: 286,
    revenue: 1240,
    score: 88,
  },
];

const campaigns = [
  { name: "Books Spring Push", objective: "Traffic", budget: "$45/day", roas: 3.4, status: "Scaling" },
  { name: "Art Portfolio Visibility", objective: "Reach", budget: "$20/day", roas: 1.8, status: "Learning" },
  { name: "SIMON Waitlist", objective: "Lead Gen", budget: "$35/day", roas: 4.1, status: "Profitable" },
  { name: "WEB360 Demo Funnel", objective: "Conversion", budget: "$60/day", roas: 2.9, status: "Active" },
];

const aiActions = [
  {
    type: "boost",
    title: "Boost this",
    subtitle: "SIMON Orb UI Teaser",
    detail: "High click-to-revenue signal. Raise spend by 20%.",
  },
  {
    type: "fix",
    title: "Fix this",
    subtitle: "Comic Drop Promo",
    detail: "Strong concept, weak opening frame. Rewrite first 2 seconds.",
  },
  {
    type: "duplicate",
    title: "Duplicate this",
    subtitle: "WEB360 Before / After",
    detail: "Split-test a stronger CTA against the current winner.",
  },
  {
    type: "pause",
    title: "Pause this",
    subtitle: "Cleaning Hack Demo",
    detail: "ROAS dropping below threshold for 2 cycles.",
  },
];

const activity = [
  { time: "08:14", text: "Meta metrics sync completed", level: "good" },
  { time: "08:02", text: "TikTok token nearing expiry in 5 days", level: "warn" },
  { time: "07:56", text: "AI Poems Launch Reel approved", level: "good" },
  { time: "07:42", text: "Webhook validation failed on one campaign", level: "bad" },
  { time: "07:28", text: "Generated 9 new caption variants", level: "good" },
];

const colors = {
  boost: "from-amber-400/20 to-orange-500/20 border-amber-300/30",
  fix: "from-pink-400/20 to-rose-500/20 border-pink-300/30",
  duplicate: "from-cyan-400/20 to-sky-500/20 border-cyan-300/30",
  pause: "from-violet-400/20 to-fuchsia-500/20 border-violet-300/30",
};

function formatCompact(value) {
  return new Intl.NumberFormat("en", { notation: "compact", maximumFractionDigits: 1 }).format(value);
}

function statusTone(status) {
  if (["Boost This", "Profitable", "Scaling", "Scheduled", "Active", "Duplicate"].includes(status)) return "text-emerald-300 border-emerald-400/30 bg-emerald-400/10";
  if (["Fix Caption", "Learning"].includes(status)) return "text-amber-300 border-amber-400/30 bg-amber-400/10";
  return "text-rose-300 border-rose-400/30 bg-rose-400/10";
}

function levelTone(level) {
  if (level === "good") return "bg-emerald-400";
  if (level === "warn") return "bg-amber-400";
  return "bg-rose-400";
}

export default function SimonSocialInteractiveUI() {
  const [carrier, setCarrier] = useState("All");
  const [query, setQuery] = useState("");
  const [expandedHeader, setExpandedHeader] = useState(false);
  const [autoMode, setAutoMode] = useState(true);
  const [selectedReel, setSelectedReel] = useState(reels[1]);
  const [signalIndex, setSignalIndex] = useState(0);

const totalRevenue = filteredReels.reduce((sum, reel) => sum + reel.revenue, 0);
  const avgScore = Math.round(filteredReels.reduce((sum, reel) => sum + reel.score, 0) / Math.max(filteredReels.length, 1));

React.useEffect(() => {
    const timer = setInterval(() => {
      setSignalIndex((prev) => (prev + 1) % signalFeed.length);
    }, 2600);
    return () => clearInterval(timer);
  }, []);

return (
    <div className="min-h-screen overflow-hidden bg-[#040816] text-white">
      <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_20%_20%,rgba(69,196,255,.18),transparent_24%),radial-gradient(circle_at_80%_18%,rgba(175,98,255,.16),transparent_20%),radial-gradient(circle_at_60%_70%,rgba(0,216,255,.12),transparent_26%),linear-gradient(180deg,#02050d_0%,#07111f_45%,#040813_100%)]" />
      <div className="pointer-events-none absolute inset-0 opacity-80">
        {Array.from({ length: 28 }).map((_, i) => (
          <motion.div
            key={i}
            className="absolute rounded-full bg-cyan-300/30 blur-xl"
            style={{
              width: `${40 + (i % 6) * 18}px`,
              height: `${40 + (i % 6) * 18}px`,
              left: `${(i * 13) % 100}%`,
              top: `${(i * 17) % 100}%`,
            }}
            animate={{ y: [0, -18, 10, 0], x: [0, 12, -10, 0], opacity: [0.18, 0.35, 0.2] }}
            transition={{ duration: 8 + (i % 5), repeat: Infinity, ease: "easeInOut" }}
          />
        ))}
      </div>

<div className="relative z-10 mx-auto max-w-[1600px] px-4 pb-10 pt-4 md:px-6 lg:px-8">
        <motion.header
          layout
          onHoverStart={() => setExpandedHeader(true)}
          onHoverEnd={() => setExpandedHeader(false)}
          className="mb-4 rounded-[30px] border border-cyan-300/15 bg-slate-950/55 shadow-[0_0_80px_rgba(19,38,77,.45)] backdrop-blur-2xl"
        >
          <div className="flex flex-col gap-4 p-4 md:p-5">
            <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
              <div className="flex items-center gap-4">
                <div className="relative flex h-14 w-14 items-center justify-center rounded-2xl border border-cyan-300/20 bg-gradient-to-br from-cyan-300/20 via-blue-400/10 to-violet-500/20 shadow-[0_0_35px_rgba(56,189,248,.25)]">
                  <div className="absolute inset-1 rounded-[14px] border border-white/10" />
                  <Sparkles className="h-6 w-6 text-cyan-200" />
                </div>
                <div>
                  <div className="flex items-center gap-3">
                    <h1 className="text-2xl font-black tracking-tight md:text-3xl">SIMON Social</h1>
                    <Badge className="border-cyan-300/20 bg-cyan-300/10 text-cyan-200 hover:bg-cyan-300/10">Interactive UI</Badge>
                  </div>
                  <p className="text-sm text-slate-300 md:text-base">Dynamic social command center for reels, campaigns, content intelligence, and AI actions.</p>
                </div>
              </div>

<div className="flex flex-wrap items-center gap-3">
                <div className="relative min-w-[280px] flex-1 lg:w-[360px] lg:flex-none">
                  <Search className="pointer-events-none absolute left-4 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
                  <Input
                    value={query}
                    onChange={(e) => setQuery(e.target.value)}
                    placeholder="Search reels, campaigns, hooks, products..."
                    className="h-12 rounded-2xl border-white/10 bg-white/5 pl-11 text-white placeholder:text-slate-400"
                  />
                </div>
                <Button className="h-12 rounded-2xl border border-cyan-300/25 bg-cyan-300/10 text-cyan-100 hover:bg-cyan-300/20">
                  <Plus className="mr-2 h-4 w-4" />
                  New Reel
                </Button>
                <Button variant="outline" className="h-12 rounded-2xl border-white/10 bg-white/5 text-white hover:bg-white/10">
                  <Bell className="mr-2 h-4 w-4" />
                  Alerts
                </Button>
              </div>
            </div>

<div className="flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between">
              <div className="flex min-h-12 flex-1 items-center gap-3 rounded-2xl border border-amber-300/20 bg-amber-300/10 px-4 py-3 text-sm text-amber-100 shadow-[0_0_28px_rgba(251,191,36,.08)]">
                <Radio className="h-4 w-4 text-amber-300" />
                <span className="font-semibold">Signal Feed:</span>
                <AnimatePresence mode="wait">
                  <motion.span
                    key={signalIndex}
                    initial={{ opacity: 0, y: 8 }}
                    animate={{ opacity: 1, y: 0 }}
                    exit={{ opacity: 0, y: -8 }}
                    transition={{ duration: 0.25 }}
                    className="text-amber-50"
                  >
                    {signalFeed[signalIndex]}
                  </motion.span>
                </AnimatePresence>
              </div>

<div className="flex items-center gap-3 self-end rounded-2xl border border-white/10 bg-white/5 px-4 py-3 text-sm text-slate-200">
                <span>Header</span>
                <Button variant="ghost" size="sm" onClick={() => setExpandedHeader((v) => !v)} className="text-slate-100 hover:bg-white/10">
                  {expandedHeader ? "Collapse" : "Expand"}
                  <ChevronDown className={`ml-2 h-4 w-4 transition-transform ${expandedHeader ? "rotate-180" : ""}`} />
                </Button>
              </div>
            </div>

<AnimatePresence>
              {expandedHeader && (
                <motion.div
                  initial={{ opacity: 0, height: 0 }}
                  animate={{ opacity: 1, height: "auto" }}
                  exit={{ opacity: 0, height: 0 }}
                  className="overflow-hidden"
                >
                  <div className="grid gap-3 border-t border-white/10 pt-3 md:grid-cols-2 xl:grid-cols-4">
                    {[
                      { icon: LayoutDashboard, title: "Overview", text: "System score, revenue, signal health" },
                      { icon: Megaphone, title: "Campaign Tools", text: "Boost, pause, duplicate, budget shifts" },
                      { icon: Calendar, title: "Scheduling", text: "Auto-post queue and publishing windows" },
                      { icon: Wand2, title: "AI Studio", text: "Hooks, captions, CTAs, predictions" },
                    ].map((item) => (
                      <div key={item.title} className="rounded-2xl border border-white/10 bg-white/5 p-4">
                        <item.icon className="mb-3 h-5 w-5 text-cyan-200" />
                        <div className="font-semibold text-white">{item.title}</div>
                        <div className="mt-1 text-sm text-slate-300">{item.text}</div>
                      </div>
                    ))}
                  </div>
                </motion.div>
              )}
            </AnimatePresence>
          </div>
        </motion.header>

<div className="mb-5 flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
          <Tabs value={carrier} onValueChange={setCarrier} className="w-full lg:w-auto">
            <TabsList className="h-auto flex-wrap gap-2 rounded-2xl border border-white/10 bg-slate-950/50 p-2">
              {carriers.map((item) => (
                <TabsTrigger
                  key={item}
                  value={item}
                  className="rounded-xl border border-transparent px-4 py-2 data-[state=active]:border-cyan-300/25 data-[state=active]:bg-cyan-300/10 data-[state=active]:text-cyan-100"
                >
                  {item}
                </TabsTrigger>
              ))}
            </TabsList>
          </Tabs>

<div className="flex items-center gap-3 rounded-2xl border border-white/10 bg-slate-950/50 px-4 py-3 text-sm text-slate-200">
            <Filter className="h-4 w-4 text-cyan-200" />
            <span>Auto Mode</span>
            <Switch checked={autoMode} onCheckedChange={setAutoMode} />
            <Badge className={`${autoMode ? "bg-emerald-400/15 text-emerald-200" : "bg-slate-400/15 text-slate-300"} border-0 hover:bg-inherit`}>
              {autoMode ? "Enabled" : "Paused"}
            </Badge>
          </div>
        </div>

<div className="grid gap-4 xl:grid-cols-[1.25fr_0.75fr]">
          <div className="space-y-4">
            <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
              {stats.map((item) => (
                <Card key={item.label} className="rounded-[26px] border-white/10 bg-slate-950/50 shadow-[0_0_40px_rgba(15,23,42,.45)] backdrop-blur-xl">
                  <CardContent className="p-5">
                    <div className="mb-3 flex items-center justify-between">
                      <div className="rounded-2xl border border-cyan-300/20 bg-cyan-300/10 p-3">
                        <item.icon className="h-5 w-5 text-cyan-200" />
                      </div>
                      <Badge className="border-0 bg-emerald-400/15 text-emerald-200 hover:bg-emerald-400/15">{item.delta}</Badge>
                    </div>
                    <div className="text-sm text-slate-300">{item.label}</div>
                    <div className="mt-2 text-3xl font-black tracking-tight text-white">{item.label === "Revenue" ? `$${formatCompact(totalRevenue)}` : item.label === "AI Confidence" ? `${avgScore}%` : item.value}</div>
                  </CardContent>
                </Card>
              ))}
            </div>

<div className="grid gap-4 lg:grid-cols-[1fr_0.95fr]">
              <Card className="rounded-[28px] border-white/10 bg-slate-950/50 backdrop-blur-xl">
                <CardHeader className="pb-3">
                  <div className="flex items-center justify-between gap-3">
                    <div>
                      <CardTitle className="text-xl text-white">Reels Pipeline</CardTitle>
                      <CardDescription className="text-slate-300">Track every reel as a revenue asset, not just a post.</CardDescription>
                    </div>
                    <Button variant="outline" size="sm" className="border-white/10 bg-white/5 text-white hover:bg-white/10">
                      <RefreshCw className="mr-2 h-4 w-4" />
                      Sync
                    </Button>
                  </div>
                </CardHeader>
                <CardContent className="space-y-3">
                  {filteredReels.map((reel) => (
                    <motion.button
                      key={reel.id}
                      whileHover={{ y: -2, scale: 1.01 }}
                      onClick={() => setSelectedReel(reel)}
                      className={`w-full rounded-2xl border p-4 text-left transition ${selectedReel.id === reel.id ? "border-cyan-300/30 bg-cyan-300/10" : "border-white/10 bg-white/5 hover:bg-white/10"}`}
                    >
                      <div className="mb-3 flex items-start justify-between gap-3">
                        <div>
                          <div className="font-semibold text-white">{reel.title}</div>
                          <div className="mt-1 text-sm text-slate-300">{reel.platform} • {reel.type}</div>
                        </div>
                        <Badge className={`border ${statusTone(reel.status)} hover:bg-inherit`}>{reel.status}</Badge>
                      </div>
                      <div className="mb-3 text-sm text-slate-300">{reel.hook}</div>
                      <div className="grid grid-cols-3 gap-3 text-sm">
                        <div className="rounded-xl bg-black/20 p-3">
                          <div className="text-slate-400">Views</div>
                          <div className="mt-1 font-semibold text-white">{formatCompact(reel.views)}</div>
                        </div>
                        <div className="rounded-xl bg-black/20 p-3">
                          <div className="text-slate-400">Clicks</div>
                          <div className="mt-1 font-semibold text-white">{formatCompact(reel.clicks)}</div>
                        </div>
                        <div className="rounded-xl bg-black/20 p-3">
                          <div className="text-slate-400">Revenue</div>
                          <div className="mt-1 font-semibold text-white">${formatCompact(reel.revenue)}</div>
                        </div>
                      </div>
                    </motion.button>
                  ))}
                </CardContent>
              </Card>

<Card className="rounded-[28px] border-white/10 bg-slate-950/50 backdrop-blur-xl">
                <CardHeader className="pb-3">
                  <CardTitle className="text-xl text-white">Selected Reel Intelligence</CardTitle>
                  <CardDescription className="text-slate-300">SIMON review panel with score, performance, and next move.</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="rounded-[26px] border border-cyan-300/20 bg-gradient-to-br from-cyan-400/10 via-sky-400/5 to-violet-500/10 p-5 shadow-[0_0_35px_rgba(34,211,238,.08)]">
                    <div className="mb-4 flex items-start justify-between gap-3">
                      <div>
                        <div className="text-2xl font-black text-white">{selectedReel.title}</div>
                        <div className="mt-1 text-sm text-slate-300">{selectedReel.platform} • {selectedReel.type}</div>
                      </div>
                      <Badge className="border-0 bg-cyan-300/15 text-cyan-100 hover:bg-cyan-300/15">Score {selectedReel.score}</Badge>
                    </div>

<div className="mb-4 text-sm text-slate-200">{selectedReel.hook}</div>
                    <div className="mb-5 space-y-3">
                      <div>
                        <div className="mb-2 flex justify-between text-sm text-slate-300"><span>Revenue strength</span><span>{selectedReel.score}%</span></div>
                        <Progress value={selectedReel.score} className="h-2 bg-white/10" />
                      </div>
                      <div>
                        <div className="mb-2 flex justify-between text-sm text-slate-300"><span>Click intent</span><span>{Math.min(selectedReel.score + 2, 99)}%</span></div>
                        <Progress value={Math.min(selectedReel.score + 2, 99)} className="h-2 bg-white/10" />
                      </div>
                      <div>
                        <div className="mb-2 flex justify-between text-sm text-slate-300"><span>Scale readiness</span><span>{Math.max(selectedReel.score - 5, 20)}%</span></div>
                        <Progress value={Math.max(selectedReel.score - 5, 20)} className="h-2 bg-white/10" />
                      </div>
                    </div>

<div className="grid gap-3 sm:grid-cols-2">
                      <Button className="rounded-2xl bg-emerald-400/20 text-emerald-100 hover:bg-emerald-400/30"><TrendingUp className="mr-2 h-4 w-4" />Boost Winner</Button>
                      <Button className="rounded-2xl bg-amber-400/20 text-amber-100 hover:bg-amber-400/30"><Wand2 className="mr-2 h-4 w-4" />Rewrite Hook</Button>
                      <Button className="rounded-2xl bg-cyan-400/20 text-cyan-100 hover:bg-cyan-400/30"><Plus className="mr-2 h-4 w-4" />Duplicate Variant</Button>
                      <Button className="rounded-2xl bg-violet-400/20 text-violet-100 hover:bg-violet-400/30"><Calendar className="mr-2 h-4 w-4" />Schedule Now</Button>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>

<Card className="rounded-[28px] border-white/10 bg-slate-950/50 backdrop-blur-xl">
              <CardHeader className="pb-3">
                <CardTitle className="text-xl text-white">AI Decision Hub</CardTitle>
                <CardDescription className="text-slate-300">Your strongest next moves based on content, spend, trend signals, and attribution.</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="grid gap-4 md:grid-cols-2">
                  {aiActions.map((item) => (
                    <motion.div
                      key={item.title + item.subtitle}
                      whileHover={{ y: -3 }}
                      className={`rounded-[24px] border bg-gradient-to-br p-5 ${colors[item.type]}`}
                    >
                      <div className="mb-3 flex items-center justify-between gap-3">
                        <div className="flex items-center gap-2 text-sm font-semibold uppercase tracking-[0.2em] text-white/85">
                          {item.type === "boost" && <TrendingUp className="h-4 w-4" />}
                          {item.type === "fix" && <Wand2 className="h-4 w-4" />}
                          {item.type === "duplicate" && <Sparkles className="h-4 w-4" />}
                          {item.type === "pause" && <PauseCircle className="h-4 w-4" />}
                          {item.title}
                        </div>
                        <Badge className="border-0 bg-white/10 text-white hover:bg-white/10">AI</Badge>
                      </div>
                      <div className="text-lg font-bold text-white">{item.subtitle}</div>
                      <div className="mt-2 text-sm text-slate-200">{item.detail}</div>
                      <div className="mt-4 flex gap-2">
                        <Button size="sm" className="rounded-xl bg-white/15 text-white hover:bg-white/25">Run</Button>
                        <Button size="sm" variant="outline" className="rounded-xl border-white/15 bg-white/5 text-white hover:bg-white/10">Explain</Button>
                      </div>
                    </motion.div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </div>

<div className="space-y-4">
            <Card className="rounded-[28px] border-white/10 bg-slate-950/50 backdrop-blur-xl">
              <CardHeader className="pb-3">
                <CardTitle className="text-xl text-white">Campaign Performance</CardTitle>
                <CardDescription className="text-slate-300">Paid media control with objective, budget, and return visibility.</CardDescription>
              </CardHeader>
              <CardContent className="space-y-3">
                {campaigns.map((campaign) => (
                  <div key={campaign.name} className="rounded-2xl border border-white/10 bg-white/5 p-4">
                    <div className="mb-2 flex items-center justify-between gap-3">
                      <div>
                        <div className="font-semibold text-white">{campaign.name}</div>
                        <div className="text-sm text-slate-300">{campaign.objective} • {campaign.budget}</div>
                      </div>
                      <Badge className={`border ${statusTone(campaign.status)} hover:bg-inherit`}>{campaign.status}</Badge>
                    </div>
                    <div className="flex items-center justify-between text-sm text-slate-300">
                      <span>ROAS</span>
                      <span className="font-semibold text-white">{campaign.roas.toFixed(1)}x</span>
                    </div>
                  </div>
                ))}
              </CardContent>
            </Card>

<Card className="rounded-[28px] border-white/10 bg-slate-950/50 backdrop-blur-xl">
              <CardHeader className="pb-3">
                <CardTitle className="text-xl text-white">Live Activity</CardTitle>
                <CardDescription className="text-slate-300">Signals from SOCIAL, LINK, and AI workflows.</CardDescription>
              </CardHeader>
              <CardContent className="space-y-3">
                {activity.map((item) => (
                  <div key={item.time + item.text} className="flex items-start gap-3 rounded-2xl border border-white/10 bg-white/5 p-4">
                    <div className={`mt-1 h-2.5 w-2.5 rounded-full ${levelTone(item.level)}`} />
                    <div className="flex-1">
                      <div className="flex items-center justify-between gap-3">
                        <span className="text-sm font-semibold text-white">{item.time}</span>
                        <Badge className="border-0 bg-white/10 text-slate-200 hover:bg-white/10">log</Badge>
                      </div>
                      <div className="mt-1 text-sm text-slate-300">{item.text}</div>
                    </div>
                  </div>
                ))}
              </CardContent>
            </Card>

<Card className="rounded-[28px] border-white/10 bg-slate-950/50 backdrop-blur-xl">
              <CardContent className="p-5">
                <div className="mb-4 flex items-center justify-between">
                  <div>
                    <div className="text-lg font-bold text-white">Floating SIMON</div>
                    <div className="text-sm text-slate-300">Command orb for quick actions and AI assist.</div>
                  </div>
                  <Command className="h-5 w-5 text-cyan-200" />
                </div>
                <div className="grid grid-cols-2 gap-3">
                  <Button className="rounded-2xl bg-cyan-400/20 text-cyan-100 hover:bg-cyan-400/30"><PlayCircle className="mr-2 h-4 w-4" />Run Auto</Button>
                  <Button className="rounded-2xl bg-rose-400/20 text-rose-100 hover:bg-rose-400/30"><PauseCircle className="mr-2 h-4 w-4" />Pause Ads</Button>
                  <Button className="rounded-2xl bg-violet-400/20 text-violet-100 hover:bg-violet-400/30"><MessageSquare className="mr-2 h-4 w-4" />Write Captions</Button>
                  <Button className="rounded-2xl bg-amber-400/20 text-amber-100 hover:bg-amber-400/30"><Flame className="mr-2 h-4 w-4" />Trend Scan</Button>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>

<motion.div
        drag
        dragMomentum={false}
        initial={{ x: 0, y: 0 }}
        className="fixed bottom-6 right-6 z-20"
      >
        <div className="group relative">
          <div className="absolute inset-0 rounded-full bg-cyan-400/30 blur-2xl" />
          <Button className="relative h-20 w-20 rounded-full border border-cyan-300/25 bg-gradient-to-br from-cyan-300/20 via-blue-500/15 to-violet-500/20 shadow-[0_0_35px_rgba(34,211,238,.35)] hover:scale-105">
            <Zap className="h-8 w-8 text-cyan-100" />
          </Button>
          <div className="pointer-events-none absolute -left-48 bottom-24 w-44 rounded-2xl border border-white/10 bg-slate-950/85 p-3 text-sm text-slate-200 opacity-0 backdrop-blur-xl transition group-hover:opacity-100">
            Floating SIMON I<br />
            Drag me. Open AI actions, boost, schedule, or analyze.
          </div>
        </div>
      </motion.div>
    </div>
  );
}

Quick jump

open a path

True command center for SIMON + WEB360

File viewer

Quick jump