"use client"
// shadcn
import { Badge } from "@/components/ui/badge"
// third-party
import { motion } from "framer-motion"
// project-imports
import { SpotlightCard } from "@/components/uiable/blocks/landing/components/PortfolioSpotlightCard"
// assets
import {
CheckCircle2,
Coins,
ShieldCheck,
Scale,
Sparkles,
Landmark,
ArrowUpRight,
TrendingUp,
Activity,
FileCheck,
Cpu,
Percent,
type LucideIcon,
} from "lucide-react"
// ============================================================================
// Types
// ============================================================================
export interface ServiceItem {
number: string
category: string
badge: string
icon: LucideIcon
title: string
description: string
tags: string[]
metric: {
icon: LucideIcon
label: string
}
widget: {
type: "allocation" | "collar" | "tax" | "syndicate" | "trust"
title: string
subtitle?: string
badge: string
[key: string]: any
}
}
export interface FeatureHeaderData {
badge?: string
titlePrefix?: string
titleHighlight?: string
titleSuffix?: string
description?: string
counterLabel?: string
showCounter?: boolean
}
export interface Feature27Props {
id?: string
className?: string
header?: Partial<FeatureHeaderData>
services?: ServiceItem[]
}
// ============================================================================
// Dynamic JSON Data (Header & 5 Core Services in Same File)
// ============================================================================
export const FEATURE_HEADER_DATA: FeatureHeaderData = {
badge: "My Advisory Disciplines & Experience",
titlePrefix: "How I Structure & ",
titleHighlight: "Advise Client Capital",
titleSuffix: "",
description:
"Explore the five core strategic areas I specialize in for founders, executives, and family offices. Every mandate is discretionary, independent, and fiduciary-aligned.",
counterLabel: "Strategic Disciplines",
showCounter: true,
}
export const FEATURE_SERVICES: ServiceItem[] = [
{
number: "01",
category: "Exit & Public Markets",
badge: "Flagship Mandate",
icon: Coins,
title: "Tech Founder Liquidity & Core Portfolio Management",
description:
"I structure post-acquisition liquidity into a multi-asset compound engine across global index equities, private credit, and tactical cash reserves to sustain generational prosperity without sacrificing upside.",
tags: [
"Post-Exit Liquidity Blueprint",
"Thematic Equity Models",
"Quarterly Rebalancing",
],
metric: {
icon: TrendingUp,
label: "Target Net Compound Rate: 9.2%–11.5%",
},
widget: {
type: "allocation",
title: "Discretionary Allocation Engine",
badge: "LIVE MODEL",
items: [
{ label: "Global Core Index Equities", value: "60% • $7.2M", pct: 60 },
{ label: "Private Senior Debt & Yield", value: "25% • $3.0M", pct: 25 },
{ label: "Tactical Cash & T-Bills", value: "15% • $1.8M", pct: 15 },
],
stats: [
{ label: "Sharpe Ratio", value: "1.84" },
{ label: "Max Drawdown", value: "-7.2%" },
{ label: "Rebalance Drift", value: "Automated" },
],
},
},
{
number: "02",
category: "Risk & Hedging",
badge: "Risk Shield",
icon: ShieldCheck,
title: "Executive Stock Option Hedging & Downside Collars",
description:
"I design systematic derivative overlays, options collars, and non-correlated asset buffers to protect concentrated equity positions without triggering immediate taxable sales or losing upside participation.",
tags: [
"Concentrated Stock Hedging",
"83(b) Optimization",
"Downside Collars",
],
metric: {
icon: ShieldCheck,
label: "Zero Forced Liquidation Risk",
},
widget: {
type: "collar",
title: "Zero-Cost Collar Risk Simulator",
badge: "$8.5M TECH EQUITY",
cards: [
{
label: "Downside Put Floor",
value: "$92.00",
note: "Max downside capped at -10%",
},
{
label: "Upside Call Ceiling",
value: "$138.00",
note: "+35% upside retained",
},
],
rows: [
{ label: "Net Out-of-Pocket Cost:", value: "$0.00 (Zero Premium)" },
{ label: "Capital Gains Triggered:", value: "0% (Deferred)" },
],
},
},
{
number: "03",
category: "Tax Efficiency",
badge: "Algorithmic Engine",
icon: Scale,
title: "Automated Tax-Loss Harvesting & Asset Placement",
description:
"I execute continuous year-round algorithmic tax harvesting and strategic multi-entity account placement (taxable vs. tax-deferred vs. trusts) to convert market volatility into substantial tax alpha.",
tags: ["Year-Round Harvesting", "Entity Structuring", "Retained Alpha"],
metric: {
icon: Cpu,
label: "~1.4% Avg. Annual Retained Tax Alpha",
},
widget: {
type: "tax",
title: "Tax Harvest Telemetry • 2026 YTD",
badge: "+$76,440 SAVINGS",
rows: [
{ label: "Harvested Capital Losses", value: "-$218,400" },
{ label: "Offset Cap Gains Liability", value: "-$76,440 Taxes" },
{ label: "Tracking Error vs Benchmark", value: "0.02%" },
],
footer: {
label: "Algorithm Frequency: Continuous Automated Scan",
status: "ACTIVE",
},
},
},
{
number: "04",
category: "Alternative Markets",
badge: "Direct Co-Invest",
icon: Sparkles,
title: "Pre-IPO Allocations & Private Venture Syndicates",
description:
"I grant clients direct co-investment allocations into vetted Series B+ tech leaders, pre-IPO secondaries, and institutional private debt funds alongside top tier Sand Hill Road venture firms.",
tags: ["Pre-IPO Access", "Direct Venture Flow", "Private Debt Yield"],
metric: {
icon: Sparkles,
label: "Direct Cap Table Allocations",
},
widget: {
type: "syndicate",
title: "Private Syndicate Ticket #408",
subtitle: "Enterprise AI Cloud Infrastructure",
badge: "ALLOCATION OPEN",
stats: [
{ label: "Round", value: "Series C Secondary" },
{ label: "Valuation", value: "$1.8B" },
{ label: "Discount", value: "18.5% Off" },
{ label: "Min Ticket", value: "$100,000" },
],
footer: {
label: "Co-investing alongside:",
value: "Tier-1 Silicon Valley VC Partners",
},
},
},
{
number: "05",
category: "Estate & Legacy",
badge: "Generational Wealth",
icon: Landmark,
title: "Family Office Governance & Succession Blueprints",
description:
"I advise families on intergenerational trust architecture, family constitutions, philanthropic foundations, and next-gen financial literacy governance to protect wealth across decades.",
tags: ["Irrevocable Trusts", "Next-Gen Mentorship", "Legacy Governance"],
metric: {
icon: Landmark,
label: "Multi-Generational Continuity Framework",
},
widget: {
type: "trust",
title: "Intergenerational Trust Architecture",
badge: "DELAWARE JURISDICTION",
primary: {
title: "1. Primary Family Revocable Living Trust",
tag: "Core Asset Hub",
desc: "Total asset management & incapacity administration",
},
subTiers: [
{
title: "2. Dynasty Trust (GST-Exempt)",
desc: "Shields descendants from estate taxes in perpetuity",
},
{
title: "3. Philanthropic Foundation / DAF",
desc: "Immediate 30% AGI tax deduction + legacy giving",
},
],
footer: {
label: "Family Constitution: Ratified",
value: "Annual Assembly Active",
},
},
},
]
// ============================================================================
// Compact Feature Widget Renderer
// ============================================================================
function FeatureWidget({ widget }: { widget: ServiceItem["widget"] }) {
return (
<div className="rounded-xl border border-emerald-500/20 bg-[#060c09]/95 p-5 shadow-2xl backdrop-blur-xl sm:p-6">
{/* Widget Header */}
<div className="mb-4 flex items-center justify-between border-b border-white/5 pb-3">
<div className="flex items-center gap-2">
{widget.type === "allocation" && (
<span className="h-2 w-2 animate-pulse rounded-full bg-emerald-400" />
)}
{widget.type === "collar" && (
<Percent className="h-4 w-4 text-emerald-400" />
)}
{widget.type === "tax" && (
<Activity className="h-4 w-4 text-emerald-400" />
)}
{widget.type === "trust" && (
<FileCheck className="h-4 w-4 text-emerald-400" />
)}
<div>
<div className="text-xs font-semibold text-zinc-200">
{widget.title}
</div>
{widget.subtitle && (
<div className="text-[11px] text-zinc-400">{widget.subtitle}</div>
)}
</div>
</div>
<span className="rounded bg-emerald-500/10 px-2 py-0.5 font-mono text-[10px] font-semibold text-emerald-400">
{widget.badge}
</span>
</div>
{/* 01. Allocation Widget */}
{widget.type === "allocation" && (
<div className="space-y-4">
<div className="space-y-3">
{widget.items?.map((item: any, i: number) => (
<div key={i}>
<div className="mb-1 flex justify-between text-xs">
<span className="text-zinc-300">{item.label}</span>
<span className="font-mono text-emerald-400">
{item.value}
</span>
</div>
<div className="h-2 w-full overflow-hidden rounded-full bg-white/5">
<div
className="h-full rounded-full bg-linear-to-r from-emerald-500 to-teal-400"
style={{ width: `${item.pct}%` }}
/>
</div>
</div>
))}
</div>
<div className="grid grid-cols-3 gap-2 border-t border-white/5 pt-3 text-center">
{widget.stats?.map((s: any, i: number) => (
<div key={i} className="rounded-lg bg-white/[0.02] p-2">
<div className="text-[10px] text-zinc-500 uppercase">
{s.label}
</div>
<div className="mt-0.5 font-mono text-xs font-bold text-emerald-400 sm:text-sm">
{s.value}
</div>
</div>
))}
</div>
</div>
)}
{/* 02. Collar Widget */}
{widget.type === "collar" && (
<div className="space-y-3">
<div className="grid grid-cols-2 gap-3">
{widget.cards?.map((c: any, i: number) => (
<div
key={i}
className={`rounded-lg p-3 ${
i === 0
? "border border-emerald-500/30 bg-emerald-500/5"
: "border border-white/10 bg-white/[0.02]"
}`}
>
<div className="text-xs text-zinc-400">{c.label}</div>
<div className="mt-1 font-mono text-xl font-bold text-white">
{c.value}
</div>
<div className="mt-0.5 text-[11px] text-emerald-400">
{c.note}
</div>
</div>
))}
</div>
<div className="rounded-lg bg-white/[0.02] p-2.5 text-xs text-zinc-400">
{widget.rows?.map((r: any, i: number) => (
<div key={i} className="flex justify-between py-0.5 font-mono">
<span className="text-zinc-400">{r.label}</span>
<span className="text-emerald-400">{r.value}</span>
</div>
))}
</div>
</div>
)}
{/* 03. Tax Harvest Widget */}
{widget.type === "tax" && (
<div className="space-y-2.5">
<div className="space-y-2 font-mono text-xs">
{widget.rows?.map((r: any, i: number) => (
<div
key={i}
className="flex items-center justify-between rounded-lg bg-white/[0.02] p-2"
>
<span className="text-zinc-300">{r.label}</span>
<span className="font-bold text-emerald-400">{r.value}</span>
</div>
))}
</div>
{widget.footer && (
<div className="flex items-center justify-between rounded-lg border border-emerald-500/20 bg-emerald-500/5 px-3 py-1.5 text-[11px] text-emerald-300">
<span>{widget.footer.label}</span>
<span className="font-mono font-semibold">
{widget.footer.status}
</span>
</div>
)}
</div>
)}
{/* 04. Syndicate Deal Widget */}
{widget.type === "syndicate" && (
<div className="space-y-3">
<div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
{widget.stats?.map((s: any, i: number) => (
<div
key={i}
className="rounded-lg bg-white/[0.02] p-2 text-center"
>
<div className="text-[10px] text-zinc-500 uppercase">
{s.label}
</div>
<div className="mt-0.5 font-mono text-xs font-bold text-emerald-400">
{s.value}
</div>
</div>
))}
</div>
{widget.footer && (
<div className="flex items-center justify-between rounded-lg border border-white/5 bg-white/[0.02] p-2.5 text-xs">
<span className="text-zinc-400">{widget.footer.label}</span>
<span className="font-semibold text-zinc-200">
{widget.footer.value}
</span>
</div>
)}
</div>
)}
{/* 05. Trust Architecture Widget */}
{widget.type === "trust" && (
<div className="space-y-2 text-xs">
{widget.primary && (
<div className="rounded-lg border border-emerald-500/30 bg-emerald-500/10 p-2.5">
<div className="flex justify-between font-semibold text-white">
<span>{widget.primary.title}</span>
<span className="font-mono text-emerald-400">
{widget.primary.tag}
</span>
</div>
<div className="mt-0.5 text-[11px] text-zinc-400">
{widget.primary.desc}
</div>
</div>
)}
<div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
{widget.subTiers?.map((sub: any, i: number) => (
<div
key={i}
className="rounded-lg border border-white/10 bg-white/[0.02] p-2.5"
>
<div className="font-semibold text-zinc-200">{sub.title}</div>
<div className="mt-0.5 text-[11px] text-zinc-500">
{sub.desc}
</div>
</div>
))}
</div>
{widget.footer && (
<div className="flex justify-between border-t border-white/5 pt-2 text-[11px] text-zinc-400">
<span>{widget.footer.label}</span>
<span className="font-mono text-emerald-400">
{widget.footer.value}
</span>
</div>
)}
</div>
)}
</div>
)
}
// ============================================================================
// Main Feature27 Component
// ============================================================================
export default function Feature27({
id = "services",
className = "",
header,
services = FEATURE_SERVICES,
}: Feature27Props) {
const currentHeader = { ...FEATURE_HEADER_DATA, ...header }
return (
<section
id={id}
className={`dark relative overflow-hidden bg-[#070b09] py-8 text-white sm:py-12 lg:py-16 ${className}`.trim()}
>
{/* Background Ambient Glows */}
<div className="pointer-events-none absolute -top-24 right-1/4 h-[550px] w-[550px] rounded-full bg-emerald-500/[0.04] blur-[150px]" />
<div className="pointer-events-none absolute -bottom-24 left-1/4 h-[500px] w-[500px] rounded-full bg-teal-500/[0.03] blur-[140px]" />
<div className="relative z-10 container mx-auto max-w-7xl px-4 sm:px-6">
{/* Dynamic Section Header */}
<motion.div
initial={{ opacity: 0, y: 25 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: "-60px" }}
transition={{ duration: 0.6 }}
className="mb-12 flex flex-col justify-between gap-6 md:flex-row md:items-end lg:mb-16"
>
<div className="max-w-2xl">
{currentHeader.badge && (
<Badge
variant="default"
className="mb-4 rounded-full border-emerald-500/30 bg-emerald-500/10 text-emerald-400 shadow-[0_0_12px_rgba(16,185,129,0.15)]"
>
{currentHeader.badge}
</Badge>
)}
<h2 className="mb-4 text-3xl font-bold tracking-tight text-white sm:text-4xl md:text-5xl">
{currentHeader.titlePrefix}
{currentHeader.titleHighlight && (
<span className="bg-linear-to-r from-emerald-400 to-teal-300 bg-clip-text text-transparent">
{currentHeader.titleHighlight}
</span>
)}
{currentHeader.titleSuffix}
</h2>
{currentHeader.description && (
<p className="text-base text-zinc-400 sm:text-lg">
{currentHeader.description}
</p>
)}
</div>
{currentHeader.showCounter && currentHeader.counterLabel && (
<div className="hidden shrink-0 items-center gap-2 rounded-full border border-white/10 bg-[#0c1410] px-4 py-2 text-xs whitespace-nowrap text-zinc-400 md:flex">
<span className="h-2 w-2 shrink-0 animate-pulse rounded-full bg-emerald-400" />
{services.length} {currentHeader.counterLabel}
</div>
)}
</motion.div>
{/* Dynamic Feature Cards Loop */}
<div className="space-y-6 sm:space-y-8">
{services.map((service, index) => {
const Icon = service.icon
const MetricIcon = service.metric.icon
return (
<SpotlightCard
key={service.number}
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: "-40px" }}
transition={{ duration: 0.5, delay: index * 0.05 }}
className="group relative rounded-2xl border border-white/10 bg-[#0a110d]/90 p-6 transition-all duration-300 hover:border-emerald-500/40 hover:bg-[#0c1712] hover:shadow-[0_0_35px_rgba(16,185,129,0.12)] sm:p-8"
>
<div className="grid grid-cols-1 gap-8 lg:grid-cols-12 lg:items-center lg:gap-10">
{/* Left Column: Feature Narrative */}
<div className="flex flex-col justify-center lg:col-span-5">
<div className="mb-4 flex flex-wrap items-center gap-2.5">
<span className="flex h-7 w-7 items-center justify-center rounded-lg border border-emerald-500/30 bg-emerald-500/10 font-mono text-xs font-bold text-emerald-400 shadow-[0_0_10px_rgba(16,185,129,0.15)] sm:h-8 sm:w-8 sm:text-sm">
{service.number}
</span>
<span className="rounded border border-emerald-500/20 bg-emerald-500/10 px-2.5 py-0.5 text-[11px] font-semibold tracking-wider text-emerald-400 uppercase">
{service.category}
</span>
<span className="font-mono text-[11px] text-zinc-500">
{service.badge}
</span>
</div>
<div className="mb-3 flex items-start gap-3.5">
<div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl border border-emerald-500/25 bg-emerald-500/10 text-emerald-400 shadow-[0_0_15px_rgba(0,229,153,0.15)] transition-all duration-300 group-hover:scale-105 group-hover:border-emerald-400/40 group-hover:bg-emerald-500/20 group-hover:text-emerald-300">
<Icon className="h-5 w-5" />
</div>
<h3 className="text-xl font-bold tracking-tight text-white transition-colors group-hover:text-emerald-300 sm:text-2xl">
{service.title}
</h3>
</div>
<p className="mb-5 text-sm leading-relaxed text-zinc-400 sm:text-base">
{service.description}
</p>
<div className="mb-6 flex flex-wrap gap-2">
{service.tags.map((item, i) => (
<span
key={i}
className="inline-flex items-center gap-1.5 rounded-lg border border-white/5 bg-white/[0.03] px-2.5 py-1 text-xs font-medium text-zinc-300 transition-colors group-hover:border-emerald-500/20 group-hover:bg-emerald-500/5 group-hover:text-emerald-200"
>
<CheckCircle2 className="h-3.5 w-3.5 shrink-0 text-emerald-400" />
{item}
</span>
))}
</div>
<div className="flex items-center justify-between border-t border-white/10 pt-3 text-xs text-zinc-400">
<span className="flex items-center gap-1.5 font-medium text-emerald-400/90 sm:text-sm">
<MetricIcon className="h-4 w-4 shrink-0 text-emerald-400" />
{service.metric.label}
</span>
<ArrowUpRight className="h-4 w-4 shrink-0 text-zinc-600 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-emerald-400" />
</div>
</div>
{/* Right Column: Visual Mockup Widget */}
<div className="lg:col-span-7">
<FeatureWidget widget={service.widget} />
</div>
</div>
</SpotlightCard>
)
})}
</div>
</div>
</section>
)
}
