since3-portal/modules/templates/catalog/shared/demo-badge.tsx

"use client"

import { AnimatePresence, motion } from "motion/react"
import { useState } from "react"
import { ArrowUpRightIcon, SparklesIcon } from "lucide-react"
import { useAiAccess } from "../../ai/access-context"
import { AI_DEMO_SLUGS, AI_DEMOS, demoHref } from "../../ai/demos"
import type { TemplateContent } from "../../lib/types"

const pill = "flex items-center gap-2 rounded-full bg-black/70 px-3 py-1.5 font-sans text-[11px] font-medium tracking-wide text-white/90 backdrop-blur-md"
const position = "fixed bottom-[calc(1rem+var(--t-safe-bottom,0px))] left-4 z-[60]"

// Entwurfs-Hinweis unten links; mit freigeschalteten KI-Demos zugleich deren Startmenü
export function DemoBadge({ content }: { content: TemplateContent }) {
    const access = useAiAccess()
    const [open, setOpen] = useState(false)
    const demos = access ? AI_DEMO_SLUGS.filter((slug) => content.ai[AI_DEMOS[slug].feature]) : []
    const label = (
        <>
            <span className="size-1.5 animate-pulse rounded-full bg-emerald-400" />
            Entwurf · Since3
        </>
    )

    if (!access || demos.length === 0) return <div className={`pointer-events-none ${position} ${pill}`}>{label}</div>

    return (
        <div className={`${position} flex flex-col items-start gap-2 font-sans`}>
            <AnimatePresence>
                {open && (
                    <motion.nav
                        aria-label="KI-Demos"
                        initial={{ opacity: 0, y: 8 }}
                        animate={{ opacity: 1, y: 0 }}
                        exit={{ opacity: 0, y: 8 }}
                        className="w-64 rounded-2xl bg-black/80 p-1.5 text-white shadow-2xl backdrop-blur-md"
                    >
                        <p className="px-3 pt-2 pb-1 text-[11px] uppercase tracking-wider text-white/50">KI-Demos für Ihren Betrieb</p>
                        {demos.map((slug) => (
                            <a key={slug} href={demoHref(access, slug)} className="flex items-center justify-between rounded-xl px-3 py-2.5 text-sm transition-colors hover:bg-white/10">
                                {AI_DEMOS[slug].label}
                                <ArrowUpRightIcon className="size-4 opacity-60" />
                            </a>
                        ))}
                    </motion.nav>
                )}
            </AnimatePresence>
            <button type="button" aria-expanded={open} onClick={() => setOpen(!open)} className={`${pill} cursor-pointer`}>
                {label}
                <span className="ml-1 flex items-center gap-1 rounded-full bg-white/15 px-2 py-0.5">
                    <SparklesIcon className="size-3" /> KI-Demos
                </span>
            </button>
        </div>
    )
}