"use client"

import type { CSSProperties } from "react"
import { ArrowLeftIcon } from "lucide-react"
import { cn } from "@/lib/utils"
import type { DemoInfo } from "../demo-info"
import { AI_DEMOS, demoHref, type AiAccess, type AiDemoSlug } from "../demos"
import { AssistantDemo } from "./assistant-demo"
import { ContentDemo } from "./content-demo"
import { PhoneDemo } from "./phone-demo"

const intro: Record<AiDemoSlug, (brand: string) => { title: string; text: string }> = {
    telefon: (brand) => ({
        title: "Ihr KI-Telefonassistent",
        text: `Nimmt Anrufe an, beantwortet Fragen rund um ${brand} und notiert Terminwünsche – rund um die Uhr. Auf „Anrufen“ klicken und einfach lossprechen.`,
    }),
    assistent: () => ({
        title: "Angebots- & E-Mail-Assistent",
        text: "Aus einer Kundenanfrage wird in Sekunden eine passende Antwort oder ein Angebotsentwurf – auf Basis Ihrer Leistungen und Preise.",
    }),
    content: (brand) => ({
        title: "Content-Generator",
        text: `Posts und Anzeigen für ${brand} in Ihrem Ton – für Instagram, Facebook, LinkedIn und Google Ads.`,
    }),
}

// Gemeinsamer Rahmen der KI-Demos: dunkle Produktoberfläche in der Akzentfarbe des Kunden
export function AiDemo({ tool, access, info }: { tool: AiDemoSlug; access: AiAccess; info: DemoInfo }) {
    const { title, text } = intro[tool](info.brand)

    return (
        <div
            style={{ "--t-accent": info.accent, "--t-accent-fg": info.accentFg } as CSSProperties}
            className="relative min-h-dvh overflow-x-clip bg-[#09090b] font-sans text-zinc-100 [color-scheme:dark]"
        >
            <div
                aria-hidden
                className="pointer-events-none fixed inset-0 bg-[radial-gradient(70rem_40rem_at_80%_-10%,color-mix(in_oklab,var(--t-accent)_22%,transparent),transparent_70%)]"
            />
            <header className="relative mx-auto flex max-w-6xl flex-wrap items-center justify-between gap-4 px-5 py-5">
                <a href={info.siteHref} className="group flex items-center gap-3">
                    <span className="grid size-10 place-items-center rounded-xl bg-t-accent text-lg font-semibold text-t-accent-fg">
                        {info.brand.charAt(0).toUpperCase()}
                    </span>
                    <span>
                        <span className="block font-semibold">{info.brand}</span>
                        <span className="flex items-center gap-1 text-xs text-zinc-400 group-hover:text-zinc-200">
                            <ArrowLeftIcon className="size-3" /> Zur Webseite
                        </span>
                    </span>
                </a>
                <nav aria-label="KI-Demos" className="flex flex-wrap gap-1 rounded-full border border-white/10 bg-white/5 p-1 text-sm">
                    {info.demos.map((slug) => (
                        <a
                            key={slug}
                            href={demoHref(access, slug)}
                            aria-current={slug === tool ? "page" : undefined}
                            className={cn(
                                "rounded-full px-4 py-2 transition-colors",
                                slug === tool ? "bg-white font-medium text-zinc-900" : "text-zinc-300 hover:text-white"
                            )}
                        >
                            {AI_DEMOS[slug].label}
                        </a>
                    ))}
                </nav>
            </header>

            <main className="relative mx-auto max-w-6xl px-5 pt-6 pb-16">
                <div className="mb-10 max-w-2xl">
                    <p className="mb-3 inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs text-zinc-300">
                        <span className="size-1.5 rounded-full bg-t-accent" /> KI-Demo für {info.brand}
                    </p>
                    <h1 className="text-3xl font-semibold tracking-tight md:text-5xl">{title}</h1>
                    <p className="mt-4 text-zinc-400 md:text-lg">{text}</p>
                </div>
                {tool === "telefon" && <PhoneDemo access={access} info={info} />}
                {tool === "assistent" && <AssistantDemo access={access} info={info} />}
                {tool === "content" && <ContentDemo access={access} info={info} />}
            </main>

            <footer className="relative mx-auto max-w-6xl px-5 pb-8 text-xs text-zinc-500">
                Demo von Since3 · Antworten entstehen live per KI und können Fehler enthalten. Es wird nichts versendet oder gebucht.
            </footer>
        </div>
    )
}