"use client"; import Script from "next/script"; import { createElement, useState } from "react"; import { FadeIn } from "@/components/ui/fade-in"; import { cn } from "@/lib/utils"; /** Edit CONTENT to swap demo models. */ const CONTENT = [ { id: "og-tool", title: "OG Image Generator", description: "Preview how your social cards look in 3D space before sharing.", src: "https://modelviewer.dev/shared-assets/models/Astronaut.glb", poster: "/opengraph-image", }, { id: "dashboard", title: "SaaS Dashboard MVP", description: "Interactive 3D preview of a shipped client dashboard layout.", src: "https://modelviewer.dev/shared-assets/models/NeilArmstrong.glb", }, ]; const chipBase = "border px-3 py-1.5 text-xs font-medium transition-colors"; const chipActive = "border-brand bg-brand/10 text-brand"; const chipIdle = "border-border-subtle text-muted-foreground hover:border-border hover:text-foreground"; export function ArPortfolio() { const [active, setActive] = useState(CONTENT[0]!.id); const model = CONTENT.find((m) => m.id === active) ?? CONTENT[0]!; const [scriptReady, setScriptReady] = useState(false); return ( <>