"use client";
import * as React from "react";
import { AnimatePresence, LayoutGroup, motion, useMotionValue, useReducedMotion } from "motion/react";
import { BarChart3, Check, Inbox, Search, Settings2, Sparkles, type LucideIcon } from "lucide-react";
import { cn } from "@/lib/utils";
export interface FeatureTab {
id: string;
label: string;
icon: LucideIcon;
title: string;
description: string;
bullets?: string[];
/** Mockup shown on the right. Defaults to a built-in illustration for the first three tabs. */
panel?: React.ReactNode;
}
export interface FeaturesTabsProps {
eyebrow?: string;
title?: string;
description?: string;
tabs?: FeatureTab[];
/** Milliseconds before auto-advancing to the next tab. 0 disables auto-advance. */
interval?: number;
className?: string;
}
const DEFAULT_TABS: FeatureTab[] = [
{
id: "inbox",
label: "Unified inbox",
icon: Inbox,
title: "Every conversation, one calm inbox",
description: "Email, chat and support tickets land in a single stream that sorts itself by urgency.",
bullets: ["AI summaries for long threads", "Snooze, assign and tag in one keystroke", "Shared drafts with live cursors"],
panel: <InboxMock />,
},
{
id: "insights",
label: "Live insights",
icon: BarChart3,
title: "Numbers that update while you watch",
description: "Dashboards stream in real time, so decisions are made on this minute — not last week.",
bullets: ["Sub-second refresh on any metric", "Anomaly alerts before customers notice", "Share a chart with one link"],
panel: <ChartMock />,
},
{
id: "controls",
label: "Fine controls",
icon: Settings2,
title: "Powerful settings, sensible defaults",
description: "Everything works out of the box. When you need control, every knob is one click away.",
bullets: ["Granular roles and permissions", "Per-workspace data residency", "Audit log for every change"],
panel: <SettingsMock />,
},
];
const EASE = [0.22, 1, 0.36, 1] as const;
export function FeaturesTabs({
eyebrow = "Product tour",
title = "One workspace, three superpowers",
description = "Switch tabs or sit back — the tour advances on its own. Hover to pause.",
tabs = DEFAULT_TABS,
interval = 6000,
className,
}: FeaturesTabsProps) {
const uid = React.useId();
const reduce = useReducedMotion();
const [active, setActive] = React.useState(0);
const [paused, setPaused] = React.useState(false);
const progress = useMotionValue(0);
const elapsed = React.useRef(0);
const tabRefs = React.useRef<(HTMLButtonElement | null)[]>([]);
React.useEffect(() => {
if (!interval || paused || tabs.length < 2) return;
let raf = 0;
let last = performance.now();
const tick = (now: number) => {
elapsed.current += now - last;
last = now;
const p = Math.min(1, elapsed.current / interval);
progress.set(p);
if (p >= 1) {
elapsed.current = 0;
progress.set(0);
setActive((a) => (a + 1) % tabs.length);
}
raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, [interval, paused, tabs.length, progress]);
const select = (i: number) => {
elapsed.current = 0;
progress.set(0);
setActive(i);
};
const onKeyDown = (e: React.KeyboardEvent) => {
let next = -1;
if (e.key === "ArrowRight") next = (active + 1) % tabs.length;
if (e.key === "ArrowLeft") next = (active - 1 + tabs.length) % tabs.length;
if (e.key === "Home") next = 0;
if (e.key === "End") next = tabs.length - 1;
if (next < 0) return;
e.preventDefault();
select(next);
tabRefs.current[next]?.focus();
};
const tab = tabs[active] ?? tabs[0];
return (
<section
className={cn("relative w-full overflow-x-clip bg-background py-16 sm:py-20", className)}
onPointerEnter={() => setPaused(true)}
onPointerLeave={() => setPaused(false)}
onFocus={() => setPaused(true)}
onBlur={(e) => {
if (!e.currentTarget.contains(e.relatedTarget as Node | null)) setPaused(false);
}}
>
<div className="mx-auto max-w-6xl px-4 sm:px-6">
<div className="mx-auto max-w-2xl text-center">
<p className="text-sm font-medium text-primary">{eyebrow}</p>
<h2 className="mt-3 text-balance text-3xl font-semibold tracking-tight text-foreground sm:text-4xl">{title}</h2>
<p className="mt-3 text-pretty text-muted-foreground">{description}</p>
</div>
<LayoutGroup id={uid}>
<div
role="tablist"
aria-label="Features"
onKeyDown={onKeyDown}
className="mx-auto mt-10 grid max-w-3xl gap-1 rounded-2xl border bg-muted/60 p-1"
style={{ gridTemplateColumns: `repeat(${tabs.length}, minmax(0, 1fr))` }}
>
{tabs.map((t, i) => {
const Icon = t.icon;
const on = i === active;
return (
<button
key={t.id}
ref={(el) => {
tabRefs.current[i] = el;
}}
role="tab"
id={`${uid}-tab-${t.id}`}
aria-selected={on}
aria-controls={`${uid}-panel`}
tabIndex={on ? 0 : -1}
onClick={() => select(i)}
className={cn(
"relative flex items-center justify-center gap-2 overflow-hidden rounded-xl px-2 py-2.5 text-sm font-medium outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring sm:px-4",
on ? "text-foreground" : "text-muted-foreground hover:text-foreground",
)}
>
{on && (
<motion.span
layoutId="pill"
className="absolute inset-0 rounded-xl border bg-card shadow-sm"
transition={reduce ? { duration: 0 } : { type: "spring", stiffness: 420, damping: 34 }}
/>
)}
<Icon className="relative hidden size-4 shrink-0 sm:block" aria-hidden />
<span className="relative truncate">{t.label}</span>
{on && interval > 0 && (
<span aria-hidden className="absolute inset-x-3 bottom-1 h-0.5 overflow-hidden rounded-full bg-foreground/10">
<motion.span style={{ scaleX: progress }} className="block h-full origin-left rounded-full bg-primary" />
</span>
)}
</button>
);
})}
</div>
</LayoutGroup>
<div
role="tabpanel"
id={`${uid}-panel`}
aria-labelledby={`${uid}-tab-${tab.id}`}
className="mt-10 grid items-center gap-8 lg:mt-12 lg:grid-cols-[minmax(0,5fr)_minmax(0,7fr)] lg:gap-14"
>
<AnimatePresence mode="wait" initial={false}>
<motion.div
key={`text-${tab.id}`}
initial={{ opacity: 0, x: reduce ? 0 : -16 }}
animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: reduce ? 0 : 16 }}
transition={{ duration: 0.35, ease: EASE }}
className="order-2 lg:order-1"
>
<h3 className="text-balance text-2xl font-semibold tracking-tight text-foreground">{tab.title}</h3>
<p className="mt-3 text-pretty text-muted-foreground">{tab.description}</p>
{tab.bullets && (
<ul className="mt-6 space-y-3">
{tab.bullets.map((b, i) => (
<motion.li
key={b}
initial={{ opacity: 0, y: 8 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.1 + i * 0.07 }}
className="flex items-start gap-3 text-sm text-foreground"
>
<span className="mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary">
<Check className="size-3" strokeWidth={3} aria-hidden />
</span>
{b}
</motion.li>
))}
</ul>
)}
</motion.div>
</AnimatePresence>
<div className="relative order-1 lg:order-2">
<div aria-hidden className="absolute -inset-6 -z-0 rounded-[2rem] bg-gradient-to-br from-primary/15 via-transparent to-fuchsia-500/10 blur-2xl" />
<div className="relative overflow-hidden rounded-2xl border bg-card shadow-xl shadow-black/5">
<div className="flex items-center gap-1.5 border-b bg-muted/40 px-4 py-2.5">
<span className="size-2.5 rounded-full bg-foreground/15" />
<span className="size-2.5 rounded-full bg-foreground/15" />
<span className="size-2.5 rounded-full bg-foreground/15" />
<span className="ml-3 truncate font-mono text-[11px] text-muted-foreground">app.northwind.io/{tab.id}</span>
</div>
<div className="relative h-[300px] sm:h-[320px]">
<AnimatePresence mode="popLayout" initial={false}>
<motion.div
key={`panel-${tab.id}`}
initial={reduce ? { opacity: 0 } : { opacity: 0, y: 20, filter: "blur(8px)" }}
animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
exit={reduce ? { opacity: 0 } : { opacity: 0, y: -20, filter: "blur(8px)" }}
transition={{ duration: 0.45, ease: EASE }}
className="absolute inset-0"
>
{tab.panel ?? <PlaceholderMock icon={tab.icon} />}
</motion.div>
</AnimatePresence>
</div>
</div>
</div>
</div>
</div>
</section>
);
}
function PlaceholderMock({ icon: Icon }: { icon: LucideIcon }) {
return (
<div className="flex size-full items-center justify-center">
<Icon className="size-12 text-muted-foreground/40" />
</div>
);
}
/* ---------- Built-in mockups ---------- */
const MAILS = [
{ from: "Maya Chen", initials: "MC", tone: "bg-violet-500", subject: "Q3 launch plan — final review", snippet: "Attached the deck with the updated timeline…", time: "9:41", unread: true },
{ from: "Orbit Billing", initials: "OB", tone: "bg-sky-500", subject: "Invoice #2041 paid", snippet: "Thanks! Your receipt is ready to download.", time: "9:12", unread: true },
{ from: "Diego Alvarez", initials: "DA", tone: "bg-emerald-500", subject: "Re: onboarding feedback", snippet: "Loved the new checklist, one small idea…", time: "Tue" },
{ from: "Priya Nair", initials: "PN", tone: "bg-amber-500", subject: "Design crit moved to 3pm", snippet: "Room changed to Lumen, see you there.", time: "Mon" },
{ from: "Lumen Support", initials: "LS", tone: "bg-rose-500", subject: "Ticket #884 resolved", snippet: "The export now includes custom fields.", time: "Sun" },
];
export function InboxMock() {
return (
<div className="flex size-full" aria-hidden>
<div className="hidden w-40 shrink-0 space-y-1 border-r p-3 sm:block">
{["Inbox", "Assigned", "Snoozed", "Done"].map((l, i) => (
<div key={l} className={cn("flex items-center justify-between rounded-lg px-2.5 py-1.5 text-xs", i === 0 ? "bg-accent font-medium text-accent-foreground" : "text-muted-foreground")}>
{l}
{i === 0 && <span className="rounded-full bg-primary px-1.5 text-[10px] text-primary-foreground">12</span>}
</div>
))}
</div>
<div className="min-w-0 flex-1">
<div className="flex items-center gap-2 border-b px-4 py-2.5 text-xs text-muted-foreground">
<Search className="size-3.5" /> Search conversations
</div>
<ul>
{MAILS.map((m, i) => (
<motion.li
key={m.subject}
initial={{ opacity: 0, x: 16 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.15 + i * 0.06, duration: 0.4, ease: EASE }}
className={cn("flex items-center gap-3 border-b px-4 py-2.5", i === 0 && "bg-primary/5")}
>
<span className={cn("flex size-8 shrink-0 items-center justify-center rounded-full text-[11px] font-semibold text-white", m.tone)}>{m.initials}</span>
<div className="min-w-0 flex-1">
<div className="flex items-center gap-2">
<span className={cn("truncate text-xs", m.unread ? "font-semibold text-foreground" : "text-muted-foreground")}>{m.from}</span>
{i === 0 && (
<motion.span
initial={{ opacity: 0, scale: 0.8 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ delay: 0.7 }}
className="flex shrink-0 items-center gap-1 rounded-full bg-primary/10 px-1.5 py-0.5 text-[10px] font-medium text-primary"
>
<Sparkles className="size-2.5" /> Summary
</motion.span>
)}
<span className="ml-auto shrink-0 text-[10px] text-muted-foreground">{m.time}</span>
</div>
<p className={cn("truncate text-xs", m.unread ? "text-foreground" : "text-muted-foreground")}>{m.subject}</p>
<p className="truncate text-[11px] text-muted-foreground">{m.snippet}</p>
</div>
</motion.li>
))}
</ul>
</div>
</div>
);
}
const SERIES = [22, 28, 25, 34, 31, 42, 38, 47, 44, 55, 52, 63, 60, 72];
export function ChartMock() {
const w = 520;
const h = 170;
const max = 80;
const pts = SERIES.map((v, i) => [(i / (SERIES.length - 1)) * w, h - (v / max) * h] as const);
const line = pts.map(([x, y], i) => `${i ? "L" : "M"}${x.toFixed(1)} ${y.toFixed(1)}`).join(" ");
const area = `${line} L${w} ${h} L0 ${h} Z`;
const [lx, ly] = pts[pts.length - 1];
return (
<div className="flex size-full flex-col p-4 sm:p-5" aria-hidden>
<div className="grid grid-cols-3 gap-2 sm:gap-3">
{[
{ l: "Revenue", v: "$48.2k", d: "+12.4%" },
{ l: "Active users", v: "8,931", d: "+6.1%" },
{ l: "Churn", v: "1.8%", d: "−0.4%" },
].map((k, i) => (
<motion.div
key={k.l}
initial={{ opacity: 0, y: 8 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.1 + i * 0.07 }}
className="rounded-xl border bg-background p-2.5 sm:p-3"
>
<p className="truncate text-[10px] text-muted-foreground sm:text-[11px]">{k.l}</p>
<p className="mt-0.5 text-sm font-semibold tabular-nums text-foreground sm:text-base">{k.v}</p>
<p className="text-[10px] font-medium text-emerald-600 dark:text-emerald-400">{k.d}</p>
</motion.div>
))}
</div>
<div className="relative mt-4 min-h-0 flex-1">
<svg viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none" className="absolute inset-0 size-full overflow-visible">
<defs>
<linearGradient id="ft-area" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stopColor="var(--primary)" stopOpacity="0.28" />
<stop offset="100%" stopColor="var(--primary)" stopOpacity="0" />
</linearGradient>
</defs>
{[0.25, 0.5, 0.75].map((g) => (
<line key={g} x1="0" x2={w} y1={h * g} y2={h * g} stroke="var(--border)" strokeDasharray="4 4" vectorEffect="non-scaling-stroke" />
))}
<motion.path d={area} fill="url(#ft-area)" initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 0.6, duration: 0.6 }} />
<motion.path
d={line}
fill="none"
stroke="var(--primary)"
strokeWidth="2.5"
strokeLinejoin="round"
strokeLinecap="round"
vectorEffect="non-scaling-stroke"
initial={{ pathLength: 0 }}
animate={{ pathLength: 1 }}
transition={{ duration: 1.2, ease: "easeInOut", delay: 0.15 }}
/>
</svg>
<motion.span
className="absolute size-3 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-card bg-primary shadow-[0_0_0_4px] shadow-primary/20"
style={{ left: `${(lx / w) * 100}%`, top: `${(ly / h) * 100}%` }}
initial={{ scale: 0 }}
animate={{ scale: 1 }}
transition={{ delay: 1.3, type: "spring", stiffness: 400, damping: 15 }}
/>
</div>
</div>
);
}
const SETTINGS_TARGET = [true, true, true, false];
export function SettingsMock() {
const rows = [
{ l: "Two-factor authentication", d: "Required for all members" },
{ l: "Weekly digest", d: "Every Monday at 9:00" },
{ l: "Data residency: EU", d: "Frankfurt region" },
{ l: "Public share links", d: "Anyone with the link" },
];
const [on, setOn] = React.useState([false, false, false, false]);
React.useEffect(() => {
const ids = SETTINGS_TARGET.map((t, i) =>
setTimeout(() => setOn((prev) => prev.map((v, j) => (j === i ? t : v))), 300 + i * 220),
);
return () => ids.forEach(clearTimeout);
}, []);
return (
<div className="flex size-full flex-col p-4 sm:p-5" aria-hidden>
<p className="text-sm font-semibold text-foreground">Workspace settings</p>
<ul className="mt-3 divide-y rounded-xl border bg-background">
{rows.map((r, i) => (
<li key={r.l} className="flex items-center gap-3 px-3 py-2.5">
<div className="min-w-0 flex-1">
<p className="truncate text-xs font-medium text-foreground">{r.l}</p>
<p className="truncate text-[11px] text-muted-foreground">{r.d}</p>
</div>
<span className={cn("relative h-5 w-9 shrink-0 rounded-full transition-colors duration-300", on[i] ? "bg-primary" : "bg-muted-foreground/25")}>
<motion.span
className="absolute top-0.5 size-4 rounded-full bg-white shadow"
animate={{ left: on[i] ? 18 : 2 }}
transition={{ type: "spring", stiffness: 500, damping: 30 }}
/>
</span>
</li>
))}
</ul>
<div className="mt-4">
<div className="flex justify-between text-[11px] text-muted-foreground">
<span>Session timeout</span>
<span className="font-mono text-foreground">45 min</span>
</div>
<div className="relative mt-2 h-1.5 rounded-full bg-muted">
<motion.div className="h-full rounded-full bg-primary" initial={{ width: "10%" }} animate={{ width: "62%" }} transition={{ delay: 0.4, duration: 1, ease: EASE }} />
<motion.span
className="absolute top-1/2 size-3.5 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-primary bg-card"
initial={{ left: "10%" }}
animate={{ left: "62%" }}
transition={{ delay: 0.4, duration: 1, ease: EASE }}
/>
</div>
</div>
</div>
);
}
