TLD detail page redesign - techy chic

frontend/src/app/terminal/intel/[tld]/page.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useState, useMemo, useRef, useCallback, memo } from 'react'
 import { useParams, useRouter } from 'next/navigation'
-import { TerminalLayout } from '@/components/TerminalLayout'
+import { CommandCenterLayout } from '@/components/CommandCenterLayout'
 import { useStore } from '@/lib/store'
 import { api } from '@/lib/api'
 import {
@@ -29,13 +29,14 @@ import {
   Lock,
   Sparkles,
   Diamond,
-  Activity
+  Activity,
+  Zap
 } from 'lucide-react'
 import Link from 'next/link'
 import clsx from 'clsx'
 
 // ============================================================================
-// TIER ACCESS LEVELS
+// TYPES & HELPERS
 // ============================================================================
 
 type UserTier = 'scout' | 'trader' | 'tycoon'
@@ -50,87 +51,6 @@ function getTierLevel(tier: UserTier): number {
   }
 }
 
-// ============================================================================
-// SHARED COMPONENTS (Synced with Overview)
-// ============================================================================
-
-const Tooltip = memo(({ children, content }: { children: React.ReactNode; content: string }) => (
-  <div className="relative flex items-center group/tooltip w-fit">
-    {children}
-    <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-zinc-900 border border-zinc-800 rounded text-[10px] text-zinc-300 whitespace-nowrap opacity-0 group-hover/tooltip:opacity-100 transition-opacity pointer-events-none z-50 shadow-xl max-w-xs text-center">
-      {content}
-      <div className="absolute top-full left-1/2 -translate-x-1/2 -mt-px border-4 border-transparent border-t-zinc-800" />
-    </div>
-  </div>
-))
-Tooltip.displayName = 'Tooltip'
-
-// EXACT COPY OF STATCARD FROM INTEL PAGE (Modified for flexibility)
-const StatCard = memo(({ 
-  label, 
-  value, 
-  subValue, 
-  icon: Icon, 
-  highlight,
-  locked = false,
-  lockTooltip,
-  valueClassName
-}: { 
-  label: string
-  value: string | number
-  subValue?: string
-  icon: any
-  highlight?: boolean
-  locked?: boolean
-  lockTooltip?: string
-  valueClassName?: string
-}) => (
-  <div className={clsx(
-    "bg-zinc-900/40 border p-4 relative overflow-hidden group hover:border-white/10 transition-colors", 
-    highlight ? "border-emerald-500/30" : "border-white/5"
-  )}>
-    {/* Icon Top Right (Absolute) */}
-    <div className="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
-      <Icon className="w-16 h-16" />
-    </div>
-    
-    <div className="relative z-10">
-      {/* Label & Small Icon */}
-      <div className="flex items-center gap-2 text-zinc-400 mb-1">
-        <Icon className={clsx("w-4 h-4", highlight && "text-emerald-400")} />
-        <span className="text-xs font-medium uppercase tracking-wider">{label}</span>
-      </div>
-      
-      {locked ? (
-        <Tooltip content={lockTooltip || 'Upgrade to unlock'}>
-          <div className="flex items-center gap-2 text-zinc-600 cursor-help mt-1">
-            <Lock className="w-5 h-5" />
-            <span className="text-2xl font-bold">—</span>
-          </div>
-        </Tooltip>
-      ) : (
-        <div className="flex flex-col gap-0.5 mt-1">
-          <div className="flex items-baseline gap-2">
-            <span className={clsx("text-2xl font-bold tracking-tight", valueClassName || "text-white")}>{value}</span>
-          </div>
-          {subValue && <span className="text-xs text-zinc-500 font-medium">{subValue}</span>}
-        </div>
-      )}
-      
-      {highlight && (
-        <div className="mt-2 text-[10px] font-medium px-1.5 py-0.5 w-fit rounded border text-emerald-400 border-emerald-400/20 bg-emerald-400/5">
-          ● LIVE
-        </div>
-      )}
-    </div>
-  </div>
-))
-StatCard.displayName = 'StatCard'
-
-// ============================================================================
-// TYPES & DATA
-// ============================================================================
-
 interface TldDetails {
   tld: string
   type: string
@@ -139,11 +59,7 @@ interface TldDetails {
   introduced: number
   trend: string
   trend_reason: string
-  pricing: {
-    avg: number
-    min: number
-    max: number
-  }
+  pricing: { avg: number; min: number; max: number }
   registrars: Array<{
     name: string
     registration_price: number
@@ -166,10 +82,7 @@ interface TldHistory {
   price_change_90d: number
   trend: string
   trend_reason: string
-  history: Array<{
-    date: string
-    price: number
-  }>
+  history: Array<{ date: string; price: number }>
 }
 
 interface DomainCheckResult {
@@ -192,7 +105,7 @@ const REGISTRAR_URLS: Record<string, string> = {
 }
 
 // ============================================================================
-// SUB-COMPONENTS
+// CHART COMPONENT
 // ============================================================================
 
 function PriceChart({ 
@@ -207,8 +120,8 @@ function PriceChart({
 
   if (data.length === 0) {
     return (
-      <div className="h-64 flex flex-col items-center justify-center text-zinc-600 text-xs font-mono uppercase space-y-2">
-        <BarChart3 className="w-8 h-8 opacity-20" />
+      <div className="h-64 flex flex-col items-center justify-center text-white/20 text-xs font-mono space-y-2">
+        <BarChart3 className="w-8 h-8" />
         <span>No price history available</span>
       </div>
     )
@@ -258,7 +171,6 @@ function PriceChart({
         <path d={linePath} fill="none" stroke={strokeColor} strokeWidth="1.5" vectorEffect="non-scaling-stroke" />
         
         {hoveredIndex !== null && points[hoveredIndex] && (
-          <g>
           <line 
             x1={points[hoveredIndex].x} 
             y1="0" 
@@ -269,14 +181,12 @@ function PriceChart({
             strokeDasharray="2"
             vectorEffect="non-scaling-stroke"
           />
-          </g>
         )}
       </svg>
       
-      {/* Hover Dot (HTML overlay to avoid SVG scaling distortion) */}
       {hoveredIndex !== null && points[hoveredIndex] && (
         <div
-          className="absolute w-3 h-3 bg-zinc-950 border-2 rounded-full transform -translate-x-1/2 -translate-y-1/2 pointer-events-none z-10"
+          className="absolute w-3 h-3 bg-[#020202] border-2 transform -translate-x-1/2 -translate-y-1/2 pointer-events-none z-10"
           style={{ 
             left: `${points[hoveredIndex].x}%`, 
             top: `${points[hoveredIndex].y}%`,
@@ -285,68 +195,42 @@ function PriceChart({
         />
       )}
       
-      {/* Chart Tooltip */}
       {hoveredIndex !== null && points[hoveredIndex] && (
         <div 
-          className="absolute -top-12 transform -translate-x-1/2 bg-zinc-900/90 border border-zinc-700 rounded px-3 py-2 shadow-2xl z-20 pointer-events-none backdrop-blur-md"
+          className="absolute -top-12 transform -translate-x-1/2 bg-[#0a0a0a] border border-white/10 px-3 py-2 z-20 pointer-events-none"
           style={{ left: `${points[hoveredIndex].x}%` }}
         >
           <div className="flex flex-col items-center">
             <span className="text-sm font-bold text-white font-mono">${points[hoveredIndex].price.toFixed(2)}</span>
-             <span className="text-[10px] text-zinc-400 font-mono">{new Date(points[hoveredIndex].date).toLocaleDateString()}</span>
+            <span className="text-[10px] text-white/40 font-mono">{new Date(points[hoveredIndex].date).toLocaleDateString()}</span>
           </div>
-          <div className="absolute top-full left-1/2 -translate-x-1/2 -mt-px border-4 border-transparent border-t-zinc-700" />
         </div>
       )}
     </div>
   )
 }
 
-function LockedChartOverlay({ onUpgrade }: { onUpgrade: () => void }) {
-  return (
-    <div className="absolute inset-0 bg-zinc-950/60 backdrop-blur-[2px] flex flex-col items-center justify-center rounded-xl z-20 transition-all hover:bg-zinc-950/70">
-      <div className="w-16 h-16 bg-zinc-900 rounded-full flex items-center justify-center mb-4 border border-zinc-800 shadow-xl">
-        <Lock className="w-8 h-8 text-zinc-600" />
-      </div>
-      <h3 className="text-lg font-bold text-white mb-2">Detailed History Locked</h3>
-      <p className="text-sm text-zinc-400 mb-4 text-center max-w-xs">
-        Upgrade to Trader to access detailed price charts and historical data.
-      </p>
-      <button
-        onClick={onUpgrade}
-        className="px-6 py-2 bg-white text-black font-bold rounded-lg hover:bg-zinc-200 transition-all flex items-center gap-2 shadow-lg shadow-white/10"
-      >
-        <Sparkles className="w-4 h-4" />
-        Unlock Access
-      </button>
-    </div>
-  )
-}
-
 // ============================================================================
 // MAIN PAGE
 // ============================================================================
 
-export default function CommandTldDetailPage() {
+export default function TldDetailPage() {
   const params = useParams()
   const router = useRouter()
   const { fetchSubscription, subscription } = useStore()
   const tld = params.tld as string
   
-  // Determine user tier
   const userTier: UserTier = (subscription?.tier as UserTier) || 'scout'
   const tierLevel = getTierLevel(userTier)
   
-  // Feature access checks
-  const canAccessDetailPage = tierLevel >= 2 // Trader+
-  const canSeeRenewal = tierLevel >= 2 // Trader+
-  const canSeeFullHistory = tierLevel >= 3 // Tycoon only
+  const canAccessDetailPage = tierLevel >= 2
+  const canSeeRenewal = tierLevel >= 2
+  const canSeeFullHistory = tierLevel >= 3
   
-  // Available chart periods based on tier
   const availablePeriods: ChartPeriod[] = useMemo(() => {
     if (tierLevel >= 3) return ['1M', '3M', '1Y', 'ALL']
-    if (tierLevel >= 2) return ['1Y'] // Trader gets only 1Y
-    return [] // Scout gets no chart
+    if (tierLevel >= 2) return ['1Y']
+    return []
   }, [tierLevel])
   
   const [details, setDetails] = useState<TldDetails | null>(null)
@@ -360,9 +244,7 @@ export default function CommandTldDetailPage() {
 
   useEffect(() => {
     fetchSubscription()
-    if (tld) {
-      loadData()
-    }
+    if (tld) loadData()
   }, [tld, fetchSubscription])
 
   const loadData = async () => {
@@ -377,7 +259,6 @@ export default function CommandTldDetailPage() {
         const sortedRegistrars = [...(compareData.registrars || [])].sort((a, b) => 
           a.registration_price - b.registration_price
         )
-        
         const tldFromOverview = overviewData?.tlds?.[0]
         
         setDetails({
@@ -415,17 +296,14 @@ export default function CommandTldDetailPage() {
 
   const filteredHistory = useMemo(() => {
     if (!history?.history) return []
-    
     const now = new Date()
     let cutoffDays = 365
-    
     switch (chartPeriod) {
       case '1M': cutoffDays = 30; break
       case '3M': cutoffDays = 90; break
       case '1Y': cutoffDays = 365; break
       case 'ALL': cutoffDays = 9999; break
     }
-    
     const cutoff = new Date(now.getTime() - cutoffDays * 24 * 60 * 60 * 1000)
     return history.history.filter(h => new Date(h.date) >= cutoff)
   }, [history, chartPeriod])
@@ -442,10 +320,8 @@ export default function CommandTldDetailPage() {
 
   const handleDomainCheck = async () => {
     if (!domainSearch.trim()) return
-    
     setCheckingDomain(true)
     setDomainResult(null)
-    
     try {
       const domain = domainSearch.includes('.') ? domainSearch : `${domainSearch}.${tld}`
       const result = await api.checkDomain(domain, false)
@@ -475,282 +351,301 @@ export default function CommandTldDetailPage() {
     if (!details?.registrars?.length) return null
     const cheapest = details.registrars[0]
     const ratio = cheapest.renewal_price / cheapest.registration_price
-    return {
-      registration: cheapest.registration_price,
-      renewal: cheapest.renewal_price,
-      ratio,
-      isTrap: ratio > 2,
-    }
+    return { registration: cheapest.registration_price, renewal: cheapest.renewal_price, ratio, isTrap: ratio > 2 }
   }
 
   const renewalInfo = getRenewalInfo()
 
-  const getRiskBadge = () => {
-    if (!details) return null
-    const level = details.risk_level
-    const reason = details.risk_reason
-    return (
-      <Tooltip content={`Risk Assessment: ${reason}`}>
-        <span className={clsx(
-          "inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider border",
-          level === 'high' ? "bg-rose-500/10 text-rose-400 border-rose-500/20" :
-          level === 'medium' ? "bg-amber-500/10 text-amber-400 border-amber-500/20" :
-          "bg-emerald-500/10 text-emerald-400 border-emerald-500/20"
-        )}>
-          <ShieldCheck className="w-3.5 h-3.5" />
-          {level} Risk
-      </span>
-      </Tooltip>
-    )
-  }
-
-  const handleUpgrade = useCallback(() => {
-    router.push('/pricing')
-  }, [router])
-
   if (loading) {
     return (
-      <TerminalLayout hideHeaderSearch={true}>
+      <CommandCenterLayout minimal>
         <div className="flex items-center justify-center min-h-[50vh]">
-           <Loader2 className="w-8 h-8 text-emerald-500 animate-spin" />
+          <Loader2 className="w-6 h-6 text-accent animate-spin" />
         </div>
-      </TerminalLayout>
+      </CommandCenterLayout>
     )
   }
 
   if (error || !details) {
     return (
-      <TerminalLayout hideHeaderSearch={true}>
-        <div className="flex flex-col items-center justify-center min-h-[50vh] text-zinc-400">
-           <X className="w-12 h-12 text-zinc-600 mb-4" />
-           <h1 className="text-xl font-bold text-white mb-2">TLD Not Found</h1>
+      <CommandCenterLayout minimal>
+        <div className="flex flex-col items-center justify-center min-h-[50vh] text-white/40">
+          <X className="w-12 h-12 text-white/10 mb-4" />
+          <h1 className="text-xl font-display text-white mb-2">TLD Not Found</h1>
           <p className="mb-6">The extension .{tld} is not currently tracked.</p>
-           <Link href="/terminal/intel" className="text-emerald-400 hover:text-emerald-300 flex items-center gap-2">
-             <ArrowLeft className="w-4 h-4" /> Back to Intelligence
+          <Link href="/terminal/intel" className="text-accent hover:text-white flex items-center gap-2 text-sm">
+            <ArrowLeft className="w-4 h-4" /> Back to Intel
           </Link>
         </div>
-      </TerminalLayout>
+      </CommandCenterLayout>
     )
   }
 
   return (
-    <TerminalLayout hideHeaderSearch={true}>
-      <div className="relative font-sans text-zinc-100 selection:bg-emerald-500/30">
-        
-        {/* Ambient Background Glow (Consistent with Overview) */}
-        <div className="fixed inset-0 pointer-events-none overflow-hidden">
-          <div className="absolute top-0 right-1/4 w-[800px] h-[600px] bg-emerald-500/5 rounded-full blur-[120px] mix-blend-screen" />
-          <div className="absolute bottom-0 left-1/4 w-[600px] h-[500px] bg-blue-500/5 rounded-full blur-[100px] mix-blend-screen" />
-        </div>
-
-        <div className="relative z-10 max-w-[1600px] mx-auto p-4 md:p-8 space-y-8">
-          
-          {/* Header Section */}
-          <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-6 border-b border-white/5 pb-8">
+    <CommandCenterLayout minimal>
+      {/* ═══════════════════════════════════════════════════════════════════════ */}
+      {/* HEADER */}
+      {/* ═══════════════════════════════════════════════════════════════════════ */}
+      <section className="pt-6 lg:pt-8 pb-6 border-b border-white/[0.08]">
+        <div className="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-6">
           <div className="space-y-4">
             {/* Breadcrumb */}
-              <nav className="flex items-center gap-2 text-xs font-medium text-zinc-500 uppercase tracking-widest">
-                <Link href="/terminal/intel" className="hover:text-emerald-400 transition-colors">
-                  TLD Intelligence
-          </Link>
+            <nav className="flex items-center gap-2 text-[10px] font-mono text-white/40 tracking-wide">
+              <Link href="/terminal/intel" className="hover:text-accent transition-colors">Intel</Link>
               <ChevronRight className="w-3 h-3" />
               <span className="text-white">.{details.tld}</span>
             </nav>
             
             <div className="flex items-center gap-4">
-                <div className="h-12 w-1.5 bg-emerald-500 rounded-full shadow-[0_0_15px_rgba(16,185,129,0.5)]" />
+              <div className="w-1 h-12 bg-accent" />
               <div>
                 <div className="flex items-center gap-3">
-                     <h1 className="text-4xl font-bold tracking-tight text-white font-mono">
+                  <h1 className="font-display text-[2.5rem] lg:text-[3rem] leading-[1] tracking-[-0.02em] text-white">
                     .{details.tld}
                   </h1>
-                     {getRiskBadge()}
+                  {/* Risk Badge */}
+                  <span className={clsx(
+                    "px-2 py-1 text-[10px] font-mono border",
+                    details.risk_level === 'high' ? "bg-red-500/10 text-red-400 border-red-500/20" :
+                    details.risk_level === 'medium' ? "bg-amber-500/10 text-amber-400 border-amber-500/20" :
+                    "bg-accent/10 text-accent border-accent/20"
+                  )}>
+                    {details.risk_level} risk
+                  </span>
                 </div>
-                   <p className="text-zinc-400 text-sm mt-1 max-w-lg">
-                    {details.description}
-                   </p>
+                <p className="text-white/40 text-sm mt-1 max-w-lg">{details.description}</p>
               </div>
             </div>
           </div>
           
-            <div className="flex gap-2 items-center">
-              {/* Tier Badge */}
+          <div className="flex items-center gap-3">
             <div className={clsx(
-                "px-3 py-1.5 rounded-full border flex items-center gap-2 text-xs font-medium",
+              "px-3 py-1.5 border flex items-center gap-2 text-xs font-mono",
               userTier === 'tycoon' ? "bg-amber-500/5 border-amber-500/20 text-amber-400" :
-                userTier === 'trader' ? "bg-blue-500/5 border-blue-500/20 text-blue-400" :
-                "bg-white/5 border-white/10 text-zinc-300"
+              userTier === 'trader' ? "bg-accent/5 border-accent/20 text-accent" :
+              "bg-white/5 border-white/10 text-white/50"
             )}>
               <Diamond className="w-3.5 h-3.5" />
-                {userTier === 'tycoon' ? 'Tycoon Access' : userTier === 'trader' ? 'Trader Access' : 'Scout Access'}
+              {userTier}
             </div>
           </div>
         </div>
+      </section>
+
+      {/* ═══════════════════════════════════════════════════════════════════════ */}
+      {/* STATS GRID */}
+      {/* ═══════════════════════════════════════════════════════════════════════ */}
+      <section className="py-6">
+        <div className="grid grid-cols-2 lg:grid-cols-4 gap-px bg-white/[0.05]">
+          {/* Registration */}
+          <div className="bg-[#020202] p-5">
+            <div className="flex items-center gap-2 text-white/40 mb-2">
+              <DollarSign className="w-4 h-4" />
+              <span className="text-[10px] font-mono tracking-wide">Registration</span>
+            </div>
+            <div className="text-2xl font-display text-white">${details.pricing.min.toFixed(2)}</div>
+            <div className="text-[10px] text-white/30 mt-1">at {details.cheapest_registrar}</div>
+          </div>
           
-          {/* Metric Grid */}
-          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-            <StatCard 
-              label="Registration" 
-              value={`$${details.pricing.min.toFixed(2)}`}
-              subValue={`at ${details.cheapest_registrar}`}
-              icon={DollarSign} 
-            />
-            <StatCard 
-              label="Renewal" 
-              value={canSeeRenewal && details.min_renewal_price ? `$${details.min_renewal_price.toFixed(2)}` : '—'}
-              subValue={canSeeRenewal ? (renewalInfo?.isTrap ? `${renewalInfo.ratio.toFixed(1)}x Markup` : '/ year') : undefined}
-              icon={RefreshCw} 
-              locked={!canSeeRenewal}
-              lockTooltip="Upgrade to Trader to see renewal prices"
-              valueClassName={renewalInfo?.isTrap ? "text-amber-400" : undefined}
-            />
-            <StatCard 
-              label="1y Trend" 
-              value={`${details.price_change_1y > 0 ? '+' : ''}${details.price_change_1y.toFixed(0)}%`}
-              subValue="Volatility"
-              icon={details.price_change_1y > 0 ? TrendingUp : TrendingDown}
-              valueClassName={
+          {/* Renewal */}
+          <div className="bg-[#020202] p-5">
+            <div className="flex items-center gap-2 text-white/40 mb-2">
+              <RefreshCw className="w-4 h-4" />
+              <span className="text-[10px] font-mono tracking-wide">Renewal</span>
+            </div>
+            {canSeeRenewal ? (
+              <>
+                <div className={clsx(
+                  "text-2xl font-display",
+                  renewalInfo?.isTrap ? "text-amber-400" : "text-white"
+                )}>
+                  ${details.min_renewal_price.toFixed(2)}
+                </div>
+                {renewalInfo?.isTrap && (
+                  <div className="text-[10px] text-amber-400 mt-1">{renewalInfo.ratio.toFixed(1)}x markup</div>
+                )}
+              </>
+            ) : (
+              <div className="flex items-center gap-2 text-white/20">
+                <Lock className="w-4 h-4" />
+                <span className="text-lg">—</span>
+              </div>
+            )}
+          </div>
+          
+          {/* 1Y Trend */}
+          <div className="bg-[#020202] p-5">
+            <div className="flex items-center gap-2 text-white/40 mb-2">
+              {details.price_change_1y > 0 ? <TrendingUp className="w-4 h-4" /> : <TrendingDown className="w-4 h-4" />}
+              <span className="text-[10px] font-mono tracking-wide">1Y Trend</span>
+            </div>
+            <div className={clsx(
+              "text-2xl font-display",
               details.price_change_1y > 5 ? "text-orange-400" : 
-                details.price_change_1y < -5 ? "text-emerald-400" : 
-                "text-zinc-400"
-              }
-            />
-            <StatCard 
-              label="3y Trend" 
-              value={canSeeFullHistory ? `${details.price_change_3y > 0 ? '+' : ''}${details.price_change_3y.toFixed(0)}%` : '—'}
-              subValue={canSeeFullHistory ? "Long-term" : undefined}
-              icon={BarChart3} 
-              locked={!canSeeFullHistory}
-              lockTooltip="Upgrade to Tycoon for 3-year trends"
-              valueClassName={
-                canSeeFullHistory && details.price_change_3y > 10 ? "text-orange-400" :
-                canSeeFullHistory && details.price_change_3y < -10 ? "text-emerald-400" :
-                "text-zinc-400"
-              }
-            />
+              details.price_change_1y < -5 ? "text-accent" : 
+              "text-white/40"
+            )}>
+              {details.price_change_1y > 0 ? '+' : ''}{details.price_change_1y.toFixed(0)}%
+            </div>
           </div>
           
-          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
-             
-             {/* Left Column: Chart & Info */}
-             <div className="lg:col-span-2 space-y-8">
-                
-                {/* Price History Chart */}
-                <div className="bg-zinc-900/40 border border-white/5 p-6 backdrop-blur-sm shadow-xl relative overflow-hidden group">
-                   <div className="absolute top-0 right-0 p-4 opacity-5 group-hover:opacity-10 transition-opacity pointer-events-none">
-                     <Activity className="w-32 h-32" />
+          {/* 3Y Trend */}
+          <div className="bg-[#020202] p-5">
+            <div className="flex items-center gap-2 text-white/40 mb-2">
+              <BarChart3 className="w-4 h-4" />
+              <span className="text-[10px] font-mono tracking-wide">3Y Trend</span>
             </div>
+            {canSeeFullHistory ? (
+              <div className={clsx(
+                "text-2xl font-display",
+                details.price_change_3y > 10 ? "text-orange-400" :
+                details.price_change_3y < -10 ? "text-accent" :
+                "text-white/40"
+              )}>
+                {details.price_change_3y > 0 ? '+' : ''}{details.price_change_3y.toFixed(0)}%
+              </div>
+            ) : (
+              <div className="flex items-center gap-2 text-white/20">
+                <Lock className="w-4 h-4" />
+                <span className="text-lg">—</span>
+              </div>
+            )}
+          </div>
+        </div>
+      </section>
 
-                   {/* Lock overlay for Scout users */}
-                   {!canAccessDetailPage && <LockedChartOverlay onUpgrade={handleUpgrade} />}
+      {/* ═══════════════════════════════════════════════════════════════════════ */}
+      {/* MAIN CONTENT */}
+      {/* ═══════════════════════════════════════════════════════════════════════ */}
+      <section className="pb-12">
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
           
-                   <div className="flex items-center justify-between mb-8 relative z-10">
+          {/* Left Column: Chart + Search */}
+          <div className="lg:col-span-2 space-y-6">
+            
+            {/* Price Chart */}
+            <div className="border border-white/[0.08] bg-white/[0.01] p-6 relative">
+              {/* Lock overlay for Scout */}
+              {!canAccessDetailPage && (
+                <div className="absolute inset-0 bg-[#020202]/80 backdrop-blur-[2px] flex flex-col items-center justify-center z-20">
+                  <div className="w-14 h-14 border border-white/10 bg-white/5 flex items-center justify-center mb-4">
+                    <Lock className="w-6 h-6 text-white/30" />
+                  </div>
+                  <h3 className="text-lg font-display text-white mb-2">Charts Locked</h3>
+                  <p className="text-sm text-white/40 mb-4 text-center max-w-xs">
+                    Upgrade to Trader for detailed price history.
+                  </p>
+                  <Link
+                    href="/pricing"
+                    className="px-5 py-2 bg-accent text-black text-sm font-semibold hover:bg-white transition-colors flex items-center gap-2"
+                  >
+                    <Sparkles className="w-4 h-4" />
+                    Unlock
+                  </Link>
+                </div>
+              )}
+              
+              <div className="flex items-center justify-between mb-6">
                 <div>
-                         <h3 className="text-lg font-bold text-white flex items-center gap-2">
-                           <BarChart3 className="w-5 h-5 text-emerald-500" />
-                           Price History
-                         </h3>
-                         <p className="text-xs text-zinc-500">Historical registration price trends</p>
+                  <h3 className="text-sm font-mono text-white/40 tracking-wide">Price History</h3>
                 </div>
-                      <div className="flex bg-zinc-900 rounded-lg p-1 border border-zinc-800">
+                <div className="flex bg-white/5 border border-white/10">
                   {(['1M', '3M', '1Y', 'ALL'] as ChartPeriod[]).map((period) => {
                     const isAvailable = availablePeriods.includes(period)
                     const isActive = chartPeriod === period && isAvailable
                     return (
-                            <Tooltip key={period} content={!isAvailable ? 'Upgrade to Tycoon for more history' : ''}>
                       <button
+                        key={period}
                         onClick={() => isAvailable && setChartPeriod(period)}
                         disabled={!isAvailable}
                         className={clsx(
-                                  "px-3 py-1 text-[10px] font-bold rounded transition-all",
+                          "px-3 py-1.5 text-[10px] font-mono transition-all",
                           isActive
-                                    ? "bg-zinc-800 text-white shadow-sm"
+                            ? "bg-white/10 text-white"
                             : isAvailable
-                                      ? "text-zinc-500 hover:text-zinc-300"
-                                      : "text-zinc-700 cursor-not-allowed opacity-50"
+                              ? "text-white/40 hover:text-white"
+                              : "text-white/15 cursor-not-allowed"
                         )}
                       >
                         {period}
-                                {!isAvailable && <Lock className="w-2 h-2 inline ml-1" />}
                       </button>
-                            </Tooltip>
                     )
                   })}
                 </div>
               </div>
               
-                   <div className={clsx("h-64 relative z-10", !canAccessDetailPage && "blur-sm")}>
+              <div className={clsx("h-64", !canAccessDetailPage && "blur-sm")}>
                 <PriceChart data={filteredHistory} chartStats={chartStats} />
               </div>
               
-                   <div className="grid grid-cols-3 gap-4 mt-6 pt-6 border-t border-white/5 relative z-10">
+              <div className="grid grid-cols-3 gap-4 mt-6 pt-6 border-t border-white/[0.06]">
                 <div className="text-center">
-                         <div className="text-[10px] text-zinc-500 uppercase tracking-widest mb-1">High</div>
-                         <div className="text-lg font-mono font-bold text-white">${chartStats.high.toFixed(2)}</div>
+                  <div className="text-[10px] text-white/30 font-mono mb-1">High</div>
+                  <div className="text-lg font-mono text-white">${chartStats.high.toFixed(2)}</div>
                 </div>
-                      <div className="text-center border-l border-r border-white/5">
-                         <div className="text-[10px] text-zinc-500 uppercase tracking-widest mb-1">Average</div>
-                         <div className="text-lg font-mono font-bold text-white">${chartStats.avg.toFixed(2)}</div>
+                <div className="text-center border-l border-r border-white/[0.06]">
+                  <div className="text-[10px] text-white/30 font-mono mb-1">Average</div>
+                  <div className="text-lg font-mono text-white">${chartStats.avg.toFixed(2)}</div>
                 </div>
                 <div className="text-center">
-                         <div className="text-[10px] text-zinc-500 uppercase tracking-widest mb-1">Low</div>
-                         <div className="text-lg font-mono font-bold text-emerald-400">${chartStats.low.toFixed(2)}</div>
+                  <div className="text-[10px] text-white/30 font-mono mb-1">Low</div>
+                  <div className="text-lg font-mono text-accent">${chartStats.low.toFixed(2)}</div>
                 </div>
               </div>
             </div>
 
-                {/* Quick Check Bar */}
-                <div className="bg-zinc-900/40 border border-white/5 p-6 backdrop-blur-sm relative overflow-hidden group hover:border-white/10 transition-colors">
-                  <div className="absolute inset-0 bg-gradient-to-r from-emerald-500/5 to-transparent pointer-events-none opacity-50" />
-                  <div className="relative z-10 flex flex-col md:flex-row gap-6 items-center">
+            {/* Domain Check */}
+            <div className="border border-white/[0.08] bg-white/[0.01] p-6">
+              <div className="flex flex-col lg:flex-row gap-6 items-start lg:items-center">
                 <div className="flex-1">
-                        <h2 className="text-lg font-bold text-white mb-1 flex items-center gap-2">
-                          <Search className="w-5 h-5 text-emerald-500" />
+                  <h2 className="text-sm font-mono text-white/40 tracking-wide mb-1 flex items-center gap-2">
+                    <Search className="w-4 h-4" />
                     Check Availability
                   </h2>
-                        <p className="text-sm text-zinc-400">Instantly check if your desired .{details.tld} domain is available.</p>
+                  <p className="text-xs text-white/30">Check if your .{details.tld} domain is available</p>
                 </div>
 
-                      <div className="flex-1 w-full max-w-xl flex gap-3">
-                        <div className="relative flex-1 group/input">
+                <div className="flex-1 w-full flex gap-3">
                   <input
                     type="text"
                     value={domainSearch}
                     onChange={(e) => setDomainSearch(e.target.value)}
                     onKeyDown={(e) => e.key === 'Enter' && handleDomainCheck()}
                     placeholder={`example.${details.tld}`}
-                              className="w-full h-12 bg-black/50 border border-white/10 rounded-lg pl-4 pr-4 text-white placeholder:text-zinc-600 focus:outline-none focus:border-emerald-500/50 focus:ring-1 focus:ring-emerald-500/50 transition-all font-mono"
+                    className="flex-1 h-10 bg-white/5 border border-white/10 px-4 text-white placeholder:text-white/25 outline-none focus:border-accent/50 font-mono text-sm"
                   />
-            </div>
                   <button
                     onClick={handleDomainCheck}
                     disabled={checkingDomain || !domainSearch.trim()}
-                            className="h-12 px-8 bg-emerald-500 text-white font-bold rounded-lg hover:bg-emerald-400 transition-all disabled:opacity-50 shadow-lg shadow-emerald-500/20"
+                    className="h-10 px-6 bg-accent text-black text-sm font-semibold hover:bg-white transition-colors disabled:opacity-50"
                   >
-                            {checkingDomain ? <Loader2 className="w-5 h-5 animate-spin" /> : 'Check'}
+                    {checkingDomain ? <Loader2 className="w-4 h-4 animate-spin" /> : 'Check'}
                   </button>
                 </div>
               </div>
               
-                  {/* Check Result */}
               {domainResult && (
-                      <div className="mt-6 pt-6 border-t border-white/5 animate-in fade-in slide-in-from-top-2">
+                <div className="mt-6 pt-6 border-t border-white/[0.06]">
                   <div className={clsx(
-                            "p-4 rounded-lg border flex items-center justify-between",
+                    "p-4 border flex items-center justify-between",
                     domainResult.is_available 
-                              ? "bg-emerald-500/10 border-emerald-500/20" 
-                              : "bg-rose-500/10 border-rose-500/20"
+                      ? "bg-accent/5 border-accent/20" 
+                      : "bg-red-500/5 border-red-500/20"
                   )}>
                     <div className="flex items-center gap-3">
                       {domainResult.is_available ? (
-                                  <div className="p-2 rounded-full bg-emerald-500/20 text-emerald-400"><Check className="w-5 h-5" /></div>
+                        <div className="w-8 h-8 bg-accent/10 border border-accent/20 flex items-center justify-center">
+                          <Check className="w-4 h-4 text-accent" />
+                        </div>
                       ) : (
-                                  <div className="p-2 rounded-full bg-rose-500/20 text-rose-400"><X className="w-5 h-5" /></div>
+                        <div className="w-8 h-8 bg-red-500/10 border border-red-500/20 flex items-center justify-center">
+                          <X className="w-4 h-4 text-red-400" />
+                        </div>
                       )}
                       <div>
-                                  <div className="font-mono font-bold text-white text-lg">{domainResult.domain}</div>
-                                  <div className={clsx("text-xs font-medium uppercase tracking-wider", domainResult.is_available ? "text-emerald-400" : "text-rose-400")}>
-                                    {domainResult.is_available ? 'Available for registration' : 'Already Registered'}
+                        <div className="font-mono font-medium text-white">{domainResult.domain}</div>
+                        <div className={clsx("text-[10px] font-mono", domainResult.is_available ? "text-accent" : "text-red-400")}>
+                          {domainResult.is_available ? 'Available' : 'Registered'}
                         </div>
                       </div>
                     </div>
@@ -760,9 +655,10 @@ export default function CommandTldDetailPage() {
                         href={getRegistrarUrl(details.cheapest_registrar, domainResult.domain)}
                         target="_blank"
                         rel="noopener noreferrer"
-                                  className="px-4 py-2 bg-emerald-500 text-white text-sm font-bold rounded hover:bg-emerald-400 transition-colors flex items-center gap-2"
+                        className="px-4 py-2 bg-accent text-black text-xs font-semibold hover:bg-white transition-colors flex items-center gap-2"
                       >
-                                  Buy at {details.cheapest_registrar} <ExternalLink className="w-4 h-4" />
+                        Buy at {details.cheapest_registrar}
+                        <ExternalLink className="w-3 h-3" />
                       </a>
                     )}
                   </div>
@@ -770,109 +666,91 @@ export default function CommandTldDetailPage() {
               )}
             </div>
 
-                {/* TLD Info Cards */}
-                <div className="grid grid-cols-2 gap-4">
-                   <div className="bg-zinc-900/40 border border-white/5 p-4 hover:border-white/10 transition-colors">
-                      <div className="flex items-center gap-2 text-zinc-500 mb-2">
+            {/* Info Cards */}
+            <div className="grid grid-cols-2 gap-px bg-white/[0.05]">
+              <div className="bg-[#020202] p-4">
+                <div className="flex items-center gap-2 text-white/40 mb-2">
                   <Globe className="w-4 h-4" />
-                         <span className="text-xs uppercase tracking-widest">Type</span>
+                  <span className="text-[10px] font-mono">Type</span>
                 </div>
-                      <div className="text-lg font-medium text-white capitalize">{details.type}</div>
+                <div className="text-sm text-white capitalize">{details.type}</div>
               </div>
-                   <div className="bg-zinc-900/40 border border-white/5 p-4 hover:border-white/10 transition-colors">
-                      <div className="flex items-center gap-2 text-zinc-500 mb-2">
+              <div className="bg-[#020202] p-4">
+                <div className="flex items-center gap-2 text-white/40 mb-2">
                   <Building className="w-4 h-4" />
-                         <span className="text-xs uppercase tracking-widest">Registry</span>
+                  <span className="text-[10px] font-mono">Registry</span>
+                </div>
+                <div className="text-sm text-white truncate">{details.registry}</div>
               </div>
-                      <div className="text-lg font-medium text-white truncate" title={details.registry}>{details.registry}</div>
             </div>
           </div>
 
+          {/* Right Column: Registrars */}
+          <div className="border border-white/[0.08] bg-white/[0.01] h-fit">
+            <div className="p-4 border-b border-white/[0.06]">
+              <h3 className="text-sm font-mono text-white/40 tracking-wide">Registrar Prices</h3>
             </div>
             
-             {/* Right Column: Registrars Table */}
-             <div className="bg-zinc-900/40 border border-white/5 overflow-hidden backdrop-blur-sm flex flex-col h-fit shadow-xl">
-                <div className="p-4 border-b border-white/5 bg-white/[0.02]">
-                   <h3 className="text-lg font-bold text-white">Registrar Prices</h3>
-                   <p className="text-xs text-zinc-500">Live comparison sorted by price</p>
-              </div>
-                
-                <div className="overflow-x-auto">
-                   <table className="w-full text-left">
-                      <thead>
-                         <tr className="border-b border-white/5 text-[10px] font-bold text-zinc-500 uppercase tracking-wider bg-white/[0.02]">
-                            <th className="px-4 py-3">Registrar</th>
-                            <th className="px-4 py-3 text-right">Reg</th>
-                            <th className="px-4 py-3 text-right">
-                              {canSeeRenewal ? 'Renew' : (
-                                <Tooltip content="Upgrade to Trader">
-                                  <span className="flex items-center gap-1 justify-end">
-                                    Renew <Lock className="w-2.5 h-2.5" />
-                                  </span>
-                                </Tooltip>
-                              )}
-                            </th>
-                            <th className="px-4 py-3 text-right"></th>
-                         </tr>
-                      </thead>
-                      <tbody className="divide-y divide-white/5">
+            <div className="divide-y divide-white/[0.05]">
               {details.registrars.map((registrar, idx) => {
                 const hasRenewalTrap = registrar.renewal_price / registrar.registration_price > 1.5
                 const isBest = idx === 0 && !hasRenewalTrap
 
                 return (
-                               <tr key={registrar.name} className="group hover:bg-white/[0.04] transition-colors">
-                                  <td className="px-4 py-3">
-                                     <div className="font-medium text-white text-sm">{registrar.name}</div>
-                                     {isBest && <span className="text-[10px] text-emerald-400 font-bold uppercase block mt-0.5">Best Value</span>}
-                                     {idx === 0 && hasRenewalTrap && canSeeRenewal && <span className="text-[10px] text-amber-400 font-bold uppercase block mt-0.5">Renewal Trap</span>}
-                                  </td>
-                                  <td className="px-4 py-3 text-right">
-                                     <div className={clsx("font-mono text-sm", isBest ? "text-emerald-400 font-bold" : "text-white")}>
+                  <div key={registrar.name} className="p-4 hover:bg-white/[0.02] transition-colors">
+                    <div className="flex items-center justify-between">
+                      <div>
+                        <div className="text-sm text-white">{registrar.name}</div>
+                        {isBest && <span className="text-[10px] text-accent font-mono">Best Value</span>}
+                        {idx === 0 && hasRenewalTrap && canSeeRenewal && (
+                          <span className="text-[10px] text-amber-400 font-mono">Renewal Trap</span>
+                        )}
+                      </div>
+                      <div className="text-right">
+                        <div className={clsx(
+                          "font-mono text-sm",
+                          isBest ? "text-accent" : "text-white"
+                        )}>
                           ${registrar.registration_price.toFixed(2)}
                         </div>
-                                  </td>
-                                  <td className="px-4 py-3 text-right">
-                                     {canSeeRenewal ? (
-                                       <div className={clsx("font-mono text-sm", hasRenewalTrap ? "text-amber-400" : "text-zinc-500")}>
-                                          ${registrar.renewal_price.toFixed(2)}
+                        {canSeeRenewal && (
+                          <div className={clsx(
+                            "text-[10px] font-mono",
+                            hasRenewalTrap ? "text-amber-400" : "text-white/30"
+                          )}>
+                            ${registrar.renewal_price.toFixed(2)}/yr
                           </div>
-                                     ) : (
-                                       <div className="text-zinc-700 font-mono text-sm">—</div>
                         )}
-                                  </td>
-                                  <td className="px-4 py-3 text-right">
+                      </div>
+                    </div>
                     <a 
                       href={getRegistrarUrl(registrar.name)}
                       target="_blank"
                       rel="noopener noreferrer"
-                                        className="p-1.5 rounded bg-white/5 text-zinc-400 hover:text-white hover:bg-white/10 transition-colors inline-block"
+                      className="mt-3 w-full h-8 bg-white/5 border border-white/10 text-white/50 hover:text-white text-xs font-medium flex items-center justify-center gap-2 transition-colors"
                     >
-                                        <ExternalLink className="w-3.5 h-3.5" />
+                      Visit
+                      <ExternalLink className="w-3 h-3" />
                     </a>
-                                  </td>
-                               </tr>
+                  </div>
                 )
               })}
-                      </tbody>
-                   </table>
             </div>
             
-                {/* Upgrade CTA for Scout users */}
             {userTier === 'scout' && (
-                  <div className="p-4 border-t border-white/5 bg-zinc-900/50">
-                    <Link href="/pricing" className="flex items-center justify-center gap-2 text-sm font-medium text-emerald-400 hover:text-emerald-300 transition-colors">
-                      <Sparkles className="w-4 h-4" />
-                      Upgrade to see renewal prices
+              <div className="p-4 border-t border-white/[0.06]">
+                <Link 
+                  href="/pricing" 
+                  className="flex items-center justify-center gap-2 text-xs font-mono text-accent hover:text-white transition-colors"
+                >
+                  <Sparkles className="w-3 h-3" />
+                  Upgrade for renewal prices
                 </Link>
               </div>
             )}
           </div>
-
         </div>
-
-        </div>
-      </div>
-    </TerminalLayout>
+      </section>
+    </CommandCenterLayout>
   )
 }