feat: RADAR & WATCHLIST komplett neu designed - Cinematic High-End UI

RADAR PAGE:
- Animated Radar Background mit Blips und Sweeping Line
- Hero Section mit riesiger Typografie (6rem Headlines)
- Search Terminal im 'Target Acquisition' Design
- Live Ticker mit Animation
- Market Feed Grid mit Tech-Corners
- Quick Access Navigation Cards

WATCHLIST PAGE:
- Dramatische Hero Section mit Big Numbers Grid
- Command Line Style Domain Input
- Pill-Filter mit Hover-Animationen
- Daten-Tabelle mit Status-Badges
- Health-Check Integration
- Accent Glows und Tech-Corners überall

Beide Seiten nutzen jetzt exakt den Landing Page Stil:
- #020202 Background
- font-display für Headlines
- font-mono für Labels
- text-[10px] uppercase tracking-widest
- border-white/[0.08] für Linien
- Tech-Corners an wichtigen Boxen
- Accent Glow Effects

frontend/src/app/terminal/radar/page.tsx

@@ -1,107 +1,33 @@
 'use client'
 
-import { useEffect, useState, useMemo, useCallback, useRef, memo } from 'react'
+import { useEffect, useState, useMemo, useCallback, useRef } from 'react'
-import { useSearchParams } from 'next/navigation'
 import { useStore } from '@/lib/store'
 import { api } from '@/lib/api'
-import { CommandCenterLayout } from '@/components/CommandCenterLayout' // Using the new layout
+import { CommandCenterLayout } from '@/components/CommandCenterLayout'
-import { Ticker, useTickerItems } from '@/components/Ticker'
 import { Toast, useToast } from '@/components/Toast'
 import {
   Eye,
   Gavel,
-  Tag,
   Clock,
   ExternalLink,
   Plus,
   Activity,
-  Bell,
   Search,
   ArrowRight,
   CheckCircle2,
   XCircle,
   Loader2,
-  Wifi,
-  ShieldAlert,
-  Command,
-  Building2,
-  Calendar,
-  Server,
-  Radar,
   Crosshair,
+  Radar,
+  Zap,
+  Globe,
+  Target,
   Cpu,
-  Globe
+  Radio
 } from 'lucide-react'
 import clsx from 'clsx'
 import Link from 'next/link'
 
-// ============================================================================
-// HELPER FUNCTIONS
-// ============================================================================
-
-const formatDate = (dateStr: string | null) => {
-  if (!dateStr) return null
-  return new Date(dateStr).toLocaleDateString('en-US', {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric',
-  })
-}
-
-const getDaysUntilExpiration = (dateStr: string | null) => {
-  if (!dateStr) return null
-  const expDate = new Date(dateStr)
-  const now = new Date()
-  const diffTime = expDate.getTime() - now.getTime()
-  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
-  return diffDays
-}
-
-// ============================================================================
-// COMPONENTS - TECHY CHIC
-// ============================================================================
-
-const TechCard = memo(({ 
-  label, 
-  value, 
-  subValue, 
-  icon: Icon, 
-  trend 
-}: { 
-  label: string
-  value: string | number
-  subValue?: string
-  icon: any
-  trend?: 'up' | 'down' | 'neutral' | 'active'
-}) => (
-  <div className="relative group p-6 border border-white/[0.08] bg-white/[0.02] hover:bg-white/[0.04] transition-colors h-full overflow-hidden">
-    {/* Tech Corners */}
-    <div className="absolute top-0 left-0 w-2 h-2 border-l border-t border-white/20" />
-    <div className="absolute top-0 right-0 w-2 h-2 border-r border-t border-white/20" />
-    <div className="absolute bottom-0 left-0 w-2 h-2 border-l border-b border-white/20" />
-    <div className="absolute bottom-0 right-0 w-2 h-2 border-r border-b border-white/20" />
-    
-    <div className="flex justify-between items-start mb-4">
-      <div className="flex items-center gap-2">
-        <Icon className={clsx("w-4 h-4", trend === 'active' || trend === 'up' ? "text-accent" : "text-white/40")} />
-        <span className="font-mono text-[10px] uppercase tracking-widest text-white/40">{label}</span>
-      </div>
-      {trend === 'active' && (
-        <span className="flex h-2 w-2">
-          <span className="animate-ping absolute inline-flex h-2 w-2 rounded-full bg-accent opacity-75"></span>
-          <span className="relative inline-flex rounded-full h-2 w-2 bg-accent"></span>
-        </span>
-      )}
-    </div>
-    
-    <div className="space-y-1">
-      <div className="font-display text-3xl text-white">{value}</div>
-      {subValue && <div className="font-mono text-xs text-white/30">{subValue}</div>}
-    </div>
-  </div>
-))
-TechCard.displayName = 'TechCard'
-
 // ============================================================================
 // TYPES
 // ============================================================================
@@ -121,28 +47,74 @@ interface TrendingTld {
   reason: string
 }
 
-interface ListingStats {
-  active: number
-  sold: number
-  draft: number
-  total: number
-}
-
-interface MarketStats {
-  totalAuctions: number
-  endingSoon: number
-}
-
 interface SearchResult {
   domain: string
   status: string
   is_available: boolean | null
   registrar: string | null
   expiration_date: string | null
-  name_servers: string[] | null
+  loading: boolean
   inAuction: boolean
   auctionData?: HotAuction
-  loading: boolean
+}
+
+// ============================================================================
+// ANIMATED RADAR COMPONENT
+// ============================================================================
+
+function RadarAnimation() {
+  return (
+    <div className="relative w-full h-full flex items-center justify-center">
+      {/* Outer Ring */}
+      <div className="absolute w-full h-full border border-accent/20 rounded-full" />
+      <div className="absolute w-[75%] h-[75%] border border-accent/15 rounded-full" />
+      <div className="absolute w-[50%] h-[50%] border border-accent/10 rounded-full" />
+      <div className="absolute w-[25%] h-[25%] border border-accent/5 rounded-full" />
+      
+      {/* Crosshairs */}
+      <div className="absolute w-full h-px bg-accent/10" />
+      <div className="absolute w-px h-full bg-accent/10" />
+      
+      {/* Sweeping Line */}
+      <div 
+        className="absolute w-1/2 h-px bg-gradient-to-r from-accent to-transparent origin-left animate-[spin_4s_linear_infinite]"
+        style={{ transformOrigin: 'left center' }}
+      />
+      
+      {/* Center Dot */}
+      <div className="w-2 h-2 bg-accent rounded-full shadow-[0_0_20px_rgba(16,185,129,0.8)]" />
+      
+      {/* Blips */}
+      <div className="absolute top-[20%] left-[60%] w-1.5 h-1.5 bg-accent rounded-full animate-ping" />
+      <div className="absolute top-[70%] left-[30%] w-1 h-1 bg-accent/50 rounded-full animate-pulse" />
+      <div className="absolute top-[40%] left-[75%] w-1 h-1 bg-white/30 rounded-full" />
+    </div>
+  )
+}
+
+// ============================================================================
+// LIVE TICKER
+// ============================================================================
+
+function LiveTicker({ items }: { items: { label: string; value: string; highlight?: boolean }[] }) {
+  return (
+    <div className="relative border-y border-white/[0.08] bg-black/40 overflow-hidden">
+      <div className="absolute left-0 top-0 bottom-0 w-24 bg-gradient-to-r from-[#020202] to-transparent z-10" />
+      <div className="absolute right-0 top-0 bottom-0 w-24 bg-gradient-to-l from-[#020202] to-transparent z-10" />
+      
+      <div className="flex animate-[ticker_30s_linear_infinite] py-3" style={{ width: 'max-content' }}>
+        {[...items, ...items, ...items].map((item, i) => (
+          <div key={i} className="flex items-center gap-4 px-8 border-r border-white/[0.08]">
+            <span className="text-[10px] font-mono uppercase tracking-widest text-white/40">{item.label}</span>
+            <span className={clsx(
+              "text-sm font-mono font-medium",
+              item.highlight ? "text-accent" : "text-white"
+            )}>{item.value}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
 }
 
 // ============================================================================
@@ -150,24 +122,13 @@ interface SearchResult {
 // ============================================================================
 
 export default function RadarPage() {
-  const searchParams = useSearchParams()
+  const { isAuthenticated, user, domains, addDomain } = useStore()
-  const { 
-    isAuthenticated, 
-    isLoading, 
-    user, 
-    domains, 
-    subscription,
-    addDomain,
-  } = useStore()
-  
   const { toast, showToast, hideToast } = useToast()
+  
   const [hotAuctions, setHotAuctions] = useState<HotAuction[]>([])
-  const [trendingTlds, setTrendingTlds] = useState<TrendingTld[]>([])
+  const [marketStats, setMarketStats] = useState({ totalAuctions: 0, endingSoon: 0 })
-  const [listingStats, setListingStats] = useState<ListingStats>({ active: 0, sold: 0, draft: 0, total: 0 })
-  const [marketStats, setMarketStats] = useState<MarketStats>({ totalAuctions: 0, endingSoon: 0 })
   const [loadingData, setLoadingData] = useState(true)
   
-  // Universal Search State
   const [searchQuery, setSearchQuery] = useState('')
   const [searchResult, setSearchResult] = useState<SearchResult | null>(null)
   const [addingToWatchlist, setAddingToWatchlist] = useState(false)
@@ -178,15 +139,13 @@ export default function RadarPage() {
   const loadDashboardData = useCallback(async () => {
     try {
       const summary = await api.getDashboardSummary()
-      setHotAuctions((summary.market.ending_soon_preview || []).slice(0, 5))
+      setHotAuctions((summary.market.ending_soon_preview || []).slice(0, 6))
       setMarketStats({
         totalAuctions: summary.market.total_auctions || 0,
         endingSoon: summary.market.ending_soon || 0,
       })
-      setTrendingTlds(summary.tlds?.trending?.slice(0, 6) || [])
-      setListingStats(summary.listings || { active: 0, sold: 0, draft: 0, total: 0 })
     } catch (error) {
-      console.error('Failed to load dashboard data:', error)
+      console.error('Failed to load data:', error)
     } finally {
       setLoadingData(false)
     }
@@ -196,59 +155,30 @@ export default function RadarPage() {
     if (isAuthenticated) loadDashboardData()
   }, [isAuthenticated, loadDashboardData])
 
-  // Search Logic
+  // Search
   const handleSearch = useCallback(async (domainInput: string) => {
-    if (!domainInput.trim()) {
+    if (!domainInput.trim()) { setSearchResult(null); return }
-      setSearchResult(null)
-      return
-    }
-
     const cleanDomain = domainInput.trim().toLowerCase()
-    setSearchResult({ 
+    setSearchResult({ domain: cleanDomain, status: 'checking', is_available: null, registrar: null, expiration_date: null, loading: true, inAuction: false })
-      domain: cleanDomain,
-      status: 'checking',
-      is_available: null, 
-      registrar: null,
-      expiration_date: null,
-      name_servers: null,
-      inAuction: false, 
-      auctionData: undefined,
-      loading: true 
-    })
     
     try {
       const [whoisResult, auctionsResult] = await Promise.all([
         api.checkDomain(cleanDomain).catch(() => null),
         api.getAuctions(cleanDomain).catch(() => ({ auctions: [] })),
       ])
-
+      const auctionMatch = (auctionsResult as any).auctions?.find((a: any) => a.domain.toLowerCase() === cleanDomain)
-      const auctionMatch = (auctionsResult as any).auctions?.find(
-        (a: any) => a.domain.toLowerCase() === cleanDomain
-      )
-
       setSearchResult({
         domain: whoisResult?.domain || cleanDomain,
         status: whoisResult?.status || 'unknown',
         is_available: whoisResult?.is_available ?? null,
         registrar: whoisResult?.registrar || null,
         expiration_date: whoisResult?.expiration_date || null,
-        name_servers: whoisResult?.name_servers || null,
+        loading: false,
         inAuction: !!auctionMatch,
         auctionData: auctionMatch,
-        loading: false,
-      })
-    } catch (error) {
-      setSearchResult({ 
-        domain: cleanDomain,
-        status: 'error',
-        is_available: null, 
-        registrar: null,
-        expiration_date: null,
-        name_servers: null,
-        inAuction: false, 
-        auctionData: undefined,
-        loading: false 
       })
+    } catch {
+      setSearchResult({ domain: cleanDomain, status: 'error', is_available: null, registrar: null, expiration_date: null, loading: false, inAuction: false })
     }
   }, [])
 
@@ -257,11 +187,11 @@ export default function RadarPage() {
     setAddingToWatchlist(true)
     try {
       await addDomain(searchQuery.trim())
-      showToast(`Added ${searchQuery.trim()} to watchlist`, 'success')
+      showToast(`Target acquired: ${searchQuery.trim()}`, 'success')
       setSearchQuery('')
       setSearchResult(null)
     } catch (err: any) {
-      showToast(err.message || 'Failed to add domain', 'error')
+      showToast(err.message || 'Mission failed', 'error')
     } finally {
       setAddingToWatchlist(false)
     }
@@ -269,147 +199,113 @@ export default function RadarPage() {
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      if (searchQuery.length > 3) {
+      if (searchQuery.length > 3) handleSearch(searchQuery)
-        handleSearch(searchQuery)
+      else setSearchResult(null)
-      } else {
-        setSearchResult(null)
-      }
     }, 500)
     return () => clearTimeout(timer)
   }, [searchQuery, handleSearch])
 
-  // Focus shortcut
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.metaKey && e.key === 'k') {
-        e.preventDefault()
-        searchInputRef.current?.focus()
-      }
-    }
-    window.addEventListener('keydown', handleKeyDown)
-    return () => window.removeEventListener('keydown', handleKeyDown)
-  }, [])
-
   // Computed
-  const { availableDomains, expiringDomains, recentAlerts, totalDomains, greeting, subtitle } = useMemo(() => {
+  const availableDomains = domains?.filter(d => d.is_available) || []
-    const available = domains?.filter(d => d.is_available) || []
+  const totalDomains = domains?.length || 0
-    const total = domains?.length || 0
-    const hour = new Date().getHours()
-    const greeting = hour < 12 ? 'Target Acquisition' : hour < 18 ? 'Live Operations' : 'Night Watch'
   
-    const now = new Date()
+  const tickerItems = [
-    const thirtyDaysFromNow = new Date(now.getTime() + 30 * 24 * 60 * 60 * 1000)
+    { label: 'System', value: 'ONLINE', highlight: true },
-    const expiring = domains?.filter(d => {
+    { label: 'Targets', value: totalDomains.toString() },
-      if (!d.expiration_date || d.is_available) return false
+    { label: 'Opportunities', value: availableDomains.length.toString(), highlight: availableDomains.length > 0 },
-      const expDate = new Date(d.expiration_date)
+    { label: 'Market', value: `${marketStats.totalAuctions} Active` },
-      return expDate <= thirtyDaysFromNow && expDate > now
+    { label: 'Latency', value: '12ms' },
-    }) || []
+  ]
-    
-    type AlertItem = {
-      domain: typeof domains[0]
-      type: 'available' | 'expiring' | 'checked'
-      priority: number
-    }
-    
-    const alerts: AlertItem[] = []
-    available.forEach(d => alerts.push({ domain: d, type: 'available', priority: 1 }))
-    expiring.forEach(d => alerts.push({ domain: d, type: 'expiring', priority: 2 }))
-    
-    const oneDayAgo = new Date(now.getTime() - 24 * 60 * 60 * 1000)
-    const recentlyChecked = domains?.filter(d => {
-      if (d.is_available || expiring.includes(d)) return false
-      if (!d.last_checked) return false
-      return new Date(d.last_checked) > oneDayAgo
-    }) || []
-    recentlyChecked.slice(0, 3).forEach(d => alerts.push({ domain: d, type: 'checked', priority: 3 }))
-    
-    alerts.sort((a, b) => a.priority - b.priority)
-    
-    return { 
-      availableDomains: available, 
-      expiringDomains: expiring,
-      recentAlerts: alerts,
-      totalDomains: total, 
-      greeting, 
-      subtitle: `${total} Assets Tracked // ${available.length} Actionable`
-    }
-  }, [domains])
-
-  const tickerItems = useTickerItems(trendingTlds, availableDomains, hotAuctions)
 
   return (
-    <CommandCenterLayout title="RADAR" subtitle="Global Intelligence & Monitoring">
+    <CommandCenterLayout>
       {toast && <Toast message={toast.message} type={toast.type} onClose={hideToast} />}
       
-      <div className="space-y-12 animate-fade-in">
+      <div className="min-h-screen">
         
-        {/* TOP SECTION: METRICS GRID */}
+        {/* ═══════════════════════════════════════════════════════════════════════ */}
-        <div className="grid grid-cols-1 md:grid-cols-4 gap-px bg-white/[0.08] border border-white/[0.08]">
+        {/* HERO SECTION - CINEMATIC */}
-          <div className="bg-[#020202]">
+        {/* ═══════════════════════════════════════════════════════════════════════ */}
-            <Link href="/terminal/watchlist" className="block h-full hover:bg-white/[0.02] transition-colors">
+        <section className="relative min-h-[60vh] flex items-center py-20">
-              <TechCard 
+          <div className="absolute inset-0 pointer-events-none">
-                label="Assets Under Watch" 
+            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] opacity-20">
-                value={totalDomains} 
+              <RadarAnimation />
-                subValue={`${availableDomains.length} Opportunities`}
-                icon={Eye} 
-                trend={availableDomains.length > 0 ? 'up' : 'neutral'}
-              />
-            </Link>
-          </div>
-          <div className="bg-[#020202]">
-            <Link href="/terminal/market" className="block h-full hover:bg-white/[0.02] transition-colors">
-              <TechCard 
-                label="Market Pulse" 
-                value={marketStats.totalAuctions} 
-                subValue="Active Auctions"
-                icon={Gavel} 
-                trend="active"
-              />
-            </Link>
-          </div>
-          <div className="bg-[#020202]">
-            <Link href="/terminal/listing" className="block h-full hover:bg-white/[0.02] transition-colors">
-              <TechCard 
-                label="Portfolio Value" 
-                value={listingStats.active} 
-                subValue="Active Listings"
-                icon={Tag} 
-                trend="neutral"
-              />
-            </Link>
-          </div>
-          <div className="bg-[#020202]">
-            <TechCard 
-              label="System Latency" 
-              value="12ms" 
-              subValue="Region: EU-CENTRAL"
-              icon={Cpu} 
-              trend="up"
-            />
             </div>
           </div>
           
-        {/* CENTER SECTION: SEARCH & COMMAND */}
+          <div className="relative z-10 w-full max-w-[1400px] mx-auto px-6">
+            <div className="grid lg:grid-cols-2 gap-16 items-center">
+              
+              {/* Left: Typography */}
+              <div className="space-y-8">
+                <div className="inline-flex items-center gap-4">
+                  <div className="w-2 h-2 bg-accent rounded-full animate-pulse shadow-[0_0_15px_rgba(16,185,129,0.8)]" />
+                  <span className="text-[10px] font-mono uppercase tracking-[0.3em] text-accent">
+                    Intelligence Hub // Active
+                  </span>
+                </div>
+                
+                <h1 className="font-display text-[4rem] sm:text-[5rem] lg:text-[6rem] leading-[0.9] tracking-[-0.04em]">
+                  <span className="block text-white animate-fade-in">Global</span>
+                  <span className="block text-white animate-fade-in" style={{ animationDelay: '0.1s' }}>Recon.</span>
+                  <span className="block text-white/30 mt-4 animate-fade-in" style={{ animationDelay: '0.2s' }}>
+                    Zero Blind Spots.
+                  </span>
+                </h1>
+                
+                <p className="text-lg text-white/50 max-w-md font-light leading-relaxed">
+                  Scanning {marketStats.totalAuctions.toLocaleString()}+ auction listings across all major platforms. 
+                  <span className="text-white font-medium"> Your targets. Your intel.</span>
+                </p>
+                
+                {/* Stats Row */}
+                <div className="flex gap-12 pt-8 border-t border-white/[0.08]">
+                  <div>
+                    <div className="text-4xl font-display text-white">{totalDomains}</div>
+                    <div className="text-[10px] uppercase tracking-widest text-white/40 font-mono mt-1">Tracking</div>
+                  </div>
+                  <div>
+                    <div className="text-4xl font-display text-accent">{availableDomains.length}</div>
+                    <div className="text-[10px] uppercase tracking-widest text-white/40 font-mono mt-1">Ready</div>
+                  </div>
+                  <div>
+                    <div className="text-4xl font-display text-white">{marketStats.endingSoon}</div>
+                    <div className="text-[10px] uppercase tracking-widest text-white/40 font-mono mt-1">Ending Soon</div>
+                  </div>
+                </div>
+              </div>
+              
+              {/* Right: Search Terminal */}
               <div className="relative">
-          <div className="absolute -inset-1 bg-gradient-to-r from-accent/20 via-transparent to-accent/20 blur-xl opacity-20" />
+                <div className="absolute -inset-4 bg-gradient-to-tr from-accent/10 via-transparent to-accent/5 blur-3xl opacity-50" />
-          <div className={clsx(
-            "relative bg-[#050505] border border-white/[0.08] p-8 md:p-12 transition-all duration-300",
-            searchFocused && "border-accent/30 shadow-[0_0_50px_-20px_rgba(16,185,129,0.1)]"
-          )}>
-            {/* Decorative Crosshairs */}
-            <div className="absolute top-0 left-0 p-2 border-t border-l border-white/10 w-6 h-6" />
-            <div className="absolute top-0 right-0 p-2 border-t border-r border-white/10 w-6 h-6" />
-            <div className="absolute bottom-0 left-0 p-2 border-b border-l border-white/10 w-6 h-6" />
-            <div className="absolute bottom-0 right-0 p-2 border-b border-r border-white/10 w-6 h-6" />
                 
-            <div className="flex flex-col gap-6">
+                <div className="relative bg-[#0A0A0A] border border-white/20 p-2">
-              <div className="flex items-center gap-4 text-white/40 font-mono text-[10px] uppercase tracking-[0.2em]">
+                  {/* Tech Corners */}
-                <Radar className={clsx("w-4 h-4", searchFocused ? "text-accent animate-spin-slow" : "text-white/20")} />
+                  <div className="absolute -top-px -left-px w-6 h-6 border-t-2 border-l-2 border-accent" />
-                <span>Target Acquisition System V2.0</span>
+                  <div className="absolute -top-px -right-px w-6 h-6 border-t-2 border-r-2 border-accent" />
+                  <div className="absolute -bottom-px -left-px w-6 h-6 border-b-2 border-l-2 border-accent" />
+                  <div className="absolute -bottom-px -right-px w-6 h-6 border-b-2 border-r-2 border-accent" />
+                  
+                  <div className="bg-[#050505] p-8 relative overflow-hidden">
+                    {/* Header */}
+                    <div className="flex items-center justify-between mb-8">
+                      <span className="text-[10px] font-mono uppercase tracking-[0.2em] text-accent flex items-center gap-2">
+                        <Crosshair className="w-3 h-3" />
+                        Target Acquisition
+                      </span>
+                      <div className="flex gap-1">
+                        <div className="w-1.5 h-1.5 bg-accent/50" />
+                        <div className="w-1.5 h-1.5 bg-accent/30" />
+                        <div className="w-1.5 h-1.5 bg-accent/10" />
+                      </div>
                     </div>
                     
-              <div className="relative flex items-center">
+                    {/* Input */}
-                <span className="text-2xl text-accent mr-4 font-mono">{'>'}</span>
+                    <div className={clsx(
+                      "relative border transition-all duration-300",
+                      searchFocused ? "border-accent shadow-[0_0_30px_-10px_rgba(16,185,129,0.3)]" : "border-white/10"
+                    )}>
+                      <div className="absolute left-4 top-1/2 -translate-y-1/2 text-accent font-mono">{'>'}</div>
                       <input
                         ref={searchInputRef}
                         type="text"
@@ -417,152 +313,137 @@ export default function RadarPage() {
                         onChange={(e) => setSearchQuery(e.target.value)}
                         onFocus={() => setSearchFocused(true)}
                         onBlur={() => setSearchFocused(false)}
-                  placeholder="ENTER_DOMAIN_TARGET..."
+                        placeholder="ENTER_TARGET..."
-                  className="w-full bg-transparent text-3xl md:text-5xl text-white placeholder:text-white/10 font-display outline-none uppercase tracking-tight"
+                        className="w-full bg-black/50 px-10 py-5 text-2xl text-white placeholder:text-white/20 font-mono uppercase tracking-tight outline-none"
                       />
-              </div>
+                      {searchQuery && (
-            </div>
+                        <button 
-
+                          onClick={() => { setSearchQuery(''); setSearchResult(null) }}
-            {/* SEARCH RESULTS */}
+                          className="absolute right-4 top-1/2 -translate-y-1/2 text-white/30 hover:text-white"
-            {searchResult && (
+                        >
-              <div className="mt-8 border-t border-white/[0.08] pt-8 animate-fade-in">
+                          <XCircle className="w-5 h-5" />
-                {searchResult.loading ? (
+                        </button>
-                  <div className="flex items-center gap-4 text-accent font-mono text-sm">
-                    <Loader2 className="w-4 h-4 animate-spin" />
-                    <span className="uppercase tracking-widest">Scanning Global Registries...</span>
-                  </div>
-                ) : (
-                  <div className="grid md:grid-cols-2 gap-8">
-                    {/* Primary Status */}
-                    <div className="space-y-6">
-                      <div className="flex items-baseline gap-4">
-                        <h3 className="text-2xl font-mono text-white">{searchResult.domain}</h3>
-                        {searchResult.is_available ? (
-                          <span className="px-3 py-1 bg-accent text-black text-[10px] font-bold uppercase tracking-widest">Available</span>
-                        ) : (
-                          <span className="px-3 py-1 bg-white/10 text-white/40 text-[10px] font-bold uppercase tracking-widest">Taken</span>
                       )}
                     </div>
                     
-                      {searchResult.is_available ? (
+                    {/* Results */}
+                    {searchResult && (
+                      <div className="mt-6 border-t border-white/[0.08] pt-6">
+                        {searchResult.loading ? (
+                          <div className="flex items-center gap-3 text-accent">
+                            <Loader2 className="w-4 h-4 animate-spin" />
+                            <span className="text-sm font-mono uppercase tracking-widest">Scanning registries...</span>
+                          </div>
+                        ) : (
                           <div className="space-y-4">
-                          <p className="text-white/60 font-light">Asset identified as available for immediate acquisition.</p>
+                            <div className="flex items-center justify-between">
-                          <div className="flex gap-4">
+                              <div className="flex items-center gap-3">
+                                {searchResult.is_available ? (
+                                  <div className="w-3 h-3 bg-accent shadow-[0_0_10px_rgba(16,185,129,0.8)]" />
+                                ) : (
+                                  <div className="w-3 h-3 bg-white/20" />
+                                )}
+                                <span className="text-xl font-mono text-white">{searchResult.domain}</span>
+                              </div>
+                              <span className={clsx(
+                                "text-[10px] font-mono uppercase tracking-widest px-3 py-1 border",
+                                searchResult.is_available 
+                                  ? "text-accent border-accent/30 bg-accent/5" 
+                                  : "text-white/40 border-white/10"
+                              )}>
+                                {searchResult.is_available ? 'AVAILABLE' : 'REGISTERED'}
+                              </span>
+                            </div>
+                            
+                            {searchResult.is_available && (
+                              <div className="flex gap-3 pt-4">
                                 <button
                                   onClick={handleAddToWatchlist}
                                   disabled={addingToWatchlist}
-                              className="px-6 py-3 bg-white/5 border border-white/10 text-white hover:bg-white/10 transition-colors uppercase text-xs font-bold tracking-widest flex items-center gap-2"
+                                  className="flex-1 py-3 border border-white/20 text-white/80 font-mono text-xs uppercase tracking-widest hover:bg-white/5 transition-colors"
                                 >
-                              {addingToWatchlist ? <Loader2 className="w-3 h-3 animate-spin" /> : <Plus className="w-3 h-3" />}
+                                  {addingToWatchlist ? 'TRACKING...' : '+ TRACK'}
-                              Track Asset
                                 </button>
                                 <a
                                   href={`https://www.namecheap.com/domains/registration/results/?domain=${searchResult.domain}`}
                                   target="_blank"
-                              rel="noopener noreferrer"
+                                  className="flex-1 py-3 bg-accent text-black font-mono text-xs font-bold uppercase tracking-widest hover:bg-white transition-colors flex items-center justify-center gap-2"
-                              className="px-6 py-3 bg-accent text-black hover:bg-white transition-colors uppercase text-xs font-bold tracking-widest flex items-center gap-2"
                                 >
-                              Acquire Now <ArrowRight className="w-3 h-3" />
+                                  ACQUIRE <ArrowRight className="w-3 h-3" />
                                 </a>
                               </div>
+                            )}
                           </div>
-                      ) : (
+                        )}
-                        <div className="space-y-4">
+                      </div>
-                          <div className="grid grid-cols-2 gap-4 text-sm font-mono text-white/40">
+                    )}
+                    
+                    {/* Footer */}
+                    <div className="mt-8 pt-6 border-t border-white/[0.05] flex justify-between items-center text-[10px] text-white/20 font-mono">
+                      <span>SECURE_CONNECTION</span>
+                      <span>V2.1.0</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Ticker */}
+        <LiveTicker items={tickerItems} />
+
+        {/* ═══════════════════════════════════════════════════════════════════════ */}
+        {/* LIVE FEED SECTION */}
+        {/* ═══════════════════════════════════════════════════════════════════════ */}
+        <section className="py-24 px-6">
+          <div className="max-w-[1400px] mx-auto">
+            
+            {/* Section Header */}
+            <div className="flex flex-col lg:flex-row justify-between items-end mb-16 border-b border-white/[0.08] pb-8">
               <div>
-                              <div className="uppercase tracking-widest text-[10px] mb-1">Registrar</div>
+                <span className="text-accent font-mono text-xs uppercase tracking-[0.2em] mb-4 block">Live Feed</span>
-                              <div className="text-white">{searchResult.registrar || 'Unknown'}</div>
+                <h2 className="font-display text-4xl sm:text-5xl text-white leading-none">
+                  Market <br />
+                  <span className="text-white/30">Operations.</span>
+                </h2>
               </div>
-                            <div>
+              <div className="mt-6 lg:mt-0 flex items-center gap-6">
-                              <div className="uppercase tracking-widest text-[10px] mb-1">Expires</div>
+                <div className="flex items-center gap-2">
-                              <div className={clsx(
+                  <div className="w-2 h-2 bg-accent rounded-full animate-pulse" />
-                                getDaysUntilExpiration(searchResult.expiration_date)! <= 90 ? "text-amber-400" : "text-white"
+                  <span className="text-xs font-mono text-white/40 uppercase">Live Updates</span>
-                              )}>
-                                {formatDate(searchResult.expiration_date) || 'Unknown'}
                 </div>
-                            </div>
+                <Link 
-                          </div>
+                  href="/terminal/market" 
-                          <button
+                  className="text-xs font-mono uppercase tracking-widest text-white/40 hover:text-white transition-colors flex items-center gap-2"
-                            onClick={handleAddToWatchlist}
-                            disabled={addingToWatchlist}
-                            className="w-full py-3 bg-white/5 border border-white/10 text-white hover:bg-white/10 transition-colors uppercase text-xs font-bold tracking-widest"
                 >
-                            Monitor for Expiry
+                  Full Feed <ArrowRight className="w-3 h-3" />
-                          </button>
-                        </div>
-                      )}
-                    </div>
-
-                    {/* Secondary Intel */}
-                    <div className="border-l border-white/[0.08] pl-8 space-y-4">
-                      <div className="font-mono text-[10px] uppercase tracking-widest text-white/40 mb-4">Intel Report</div>
-                      
-                      {searchResult.inAuction && searchResult.auctionData && (
-                        <div className="p-4 bg-amber-500/5 border border-amber-500/20 mb-4">
-                          <div className="flex items-center gap-2 text-amber-400 mb-2">
-                            <Gavel className="w-4 h-4" />
-                            <span className="text-xs font-bold uppercase tracking-wider">Live Auction Detected</span>
-                          </div>
-                          <div className="flex justify-between items-end">
-                            <div>
-                              <div className="text-xs text-white/60">Current Bid</div>
-                              <div className="text-xl font-mono text-white">${searchResult.auctionData.current_bid}</div>
-                            </div>
-                            <a
-                              href={searchResult.auctionData.affiliate_url}
-                              target="_blank"
-                              className="text-[10px] uppercase underline text-amber-400 hover:text-white"
-                            >
-                              View Auction
-                            </a>
-                          </div>
-                        </div>
-                      )}
-
-                      <div className="space-y-2 text-xs font-mono text-white/40">
-                        <div className="flex justify-between border-b border-white/5 pb-2">
-                          <span>TLD Valuation</span>
-                          <span className="text-white">Calculating...</span>
-                        </div>
-                        <div className="flex justify-between border-b border-white/5 pb-2">
-                          <span>Est. Traffic</span>
-                          <span className="text-white">Low Volume</span>
-                        </div>
-                        <div className="flex justify-between pb-2">
-                          <span>Spam Score</span>
-                          <span className="text-accent">Clean (0/100)</span>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                )}
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* BOTTOM SECTION: INTEL FEED */}
-        <div className="grid lg:grid-cols-2 gap-px bg-white/[0.08] border border-white/[0.08]">
-          
-          {/* Market Feed */}
-          <div className="bg-[#020202] p-8">
-            <div className="flex items-center justify-between mb-8">
-              <div className="flex items-center gap-3">
-                <div className="w-1.5 h-1.5 bg-accent animate-pulse" />
-                <h3 className="font-mono text-xs uppercase tracking-widest text-white">Live Operations</h3>
-              </div>
-              <Link href="/terminal/market" className="text-[10px] font-mono uppercase text-white/40 hover:text-white transition-colors">
-                View All {'>'}
                 </Link>
               </div>
+            </div>
+
+            {/* Grid */}
+            <div className="grid lg:grid-cols-3 gap-px bg-white/[0.08]">
+              
+              {/* Hot Auctions */}
+              <div className="lg:col-span-2 bg-[#020202] p-8">
+                <div className="flex items-center gap-3 mb-8">
+                  <div className="w-8 h-8 border border-accent/30 flex items-center justify-center bg-accent/5">
+                    <Gavel className="w-4 h-4 text-accent" />
+                  </div>
+                  <div>
+                    <h3 className="text-sm font-bold text-white uppercase tracking-wider">Active Auctions</h3>
+                    <p className="text-[10px] text-white/40 font-mono">Real-time market data</p>
+                  </div>
+                </div>
                 
-            <div className="space-y-px bg-white/[0.05]">
                 {loadingData ? (
-                <div className="bg-[#020202] p-8 text-center text-white/20 font-mono text-xs">
+                  <div className="flex items-center justify-center py-12">
-                  INITIALIZING FEED...
+                    <Loader2 className="w-6 h-6 text-accent animate-spin" />
                   </div>
                 ) : hotAuctions.length > 0 ? (
-                hotAuctions.map((auction, i) => (
+                  <div className="space-y-px bg-white/[0.05]">
+                    {hotAuctions.map((auction, i) => (
                       <a
                         key={i}
                         href={auction.affiliate_url || '#'}
@@ -570,79 +451,86 @@ export default function RadarPage() {
                         className="flex items-center justify-between p-4 bg-[#020202] hover:bg-white/[0.02] transition-colors group"
                       >
                         <div className="flex items-center gap-4">
-                      <span className="font-mono text-[10px] text-white/30 w-8">{auction.platform.substring(0, 2).toUpperCase()}</span>
+                          <div className="w-8 h-8 border border-white/10 flex items-center justify-center text-[10px] font-mono text-white/30 group-hover:border-accent/30 group-hover:text-accent transition-colors">
+                            {auction.platform.substring(0, 2).toUpperCase()}
+                          </div>
                           <div>
-                        <div className="text-sm text-white group-hover:text-accent transition-colors font-medium">
+                            <div className="font-mono text-white group-hover:text-accent transition-colors">{auction.domain}</div>
-                          {auction.domain}
+                            <div className="text-[10px] text-white/30 font-mono uppercase">{auction.time_remaining} LEFT</div>
-                        </div>
-                        <div className="text-[10px] text-white/30 font-mono mt-1">
-                          {auction.time_remaining} REMAINING
-                        </div>
                           </div>
                         </div>
                         <div className="text-right">
-                      <div className="font-mono text-sm text-accent">${auction.current_bid}</div>
+                          <div className="font-mono text-accent font-bold">${auction.current_bid.toLocaleString()}</div>
+                          <div className="text-[10px] text-white/20 uppercase">Current</div>
                         </div>
                       </a>
-                ))
+                    ))}
+                  </div>
                 ) : (
-                <div className="bg-[#020202] p-8 text-center text-white/20 font-mono text-xs">
+                  <div className="text-center py-12 text-white/20 font-mono text-xs uppercase">
-                  NO ACTIVE SIGNALS
+                    No active auctions
                   </div>
                 )}
               </div>
-          </div>
               
-          {/* Alerts Feed */}
+              {/* Quick Actions */}
-          <div className="bg-[#020202] p-8">
+              <div className="bg-[#020202] p-8 flex flex-col">
-            <div className="flex items-center justify-between mb-8">
+                <div className="flex items-center gap-3 mb-8">
-              <div className="flex items-center gap-3">
+                  <div className="w-8 h-8 border border-white/20 flex items-center justify-center bg-white/5">
-                <div className="w-1.5 h-1.5 bg-amber-500" />
+                    <Zap className="w-4 h-4 text-white" />
-                <h3 className="font-mono text-xs uppercase tracking-widest text-white">Watchlist Intel</h3>
                   </div>
-              <Link href="/terminal/watchlist" className="text-[10px] font-mono uppercase text-white/40 hover:text-white transition-colors">
-                Manage {'>'}
-              </Link>
-            </div>
-
-            <div className="space-y-px bg-white/[0.05]">
-              {recentAlerts.length > 0 ? (
-                recentAlerts.slice(0, 5).map((alert, idx) => (
-                  <div key={`${alert.domain.id}-${idx}`} className="flex items-center justify-between p-4 bg-[#020202] hover:bg-white/[0.02] transition-colors">
-                    <div className="flex items-center gap-4">
-                      {alert.type === 'available' ? (
-                        <CheckCircle2 className="w-4 h-4 text-accent" />
-                      ) : alert.type === 'expiring' ? (
-                        <Clock className="w-4 h-4 text-amber-500" />
-                      ) : (
-                        <Activity className="w-4 h-4 text-white/20" />
-                      )}
                   <div>
-                        <div className="text-sm text-white font-medium">{alert.domain.name}</div>
+                    <h3 className="text-sm font-bold text-white uppercase tracking-wider">Quick Access</h3>
-                        <div className="text-[10px] text-white/30 font-mono mt-1 uppercase">
+                    <p className="text-[10px] text-white/40 font-mono">Navigation</p>
-                          {alert.type === 'available' && "Status: Available"}
-                          {alert.type === 'expiring' && `Expiring: ${new Date(alert.domain.expiration_date!).toLocaleDateString()}`}
-                          {alert.type === 'checked' && "Regular Scan Completed"}
                   </div>
                 </div>
+                
+                <div className="space-y-3 flex-1">
+                  {[
+                    { label: 'Watchlist', desc: 'Your targets', href: '/terminal/watchlist', icon: Eye },
+                    { label: 'Market', desc: 'All auctions', href: '/terminal/market', icon: Gavel },
+                    { label: 'Intel', desc: 'TLD pricing', href: '/terminal/intel', icon: Globe },
+                  ].map((item) => (
+                    <Link
+                      key={item.href}
+                      href={item.href}
+                      className="flex items-center gap-4 p-4 border border-white/[0.08] hover:border-accent/30 hover:bg-accent/5 transition-all group"
+                    >
+                      <item.icon className="w-5 h-5 text-white/40 group-hover:text-accent transition-colors" />
+                      <div className="flex-1">
+                        <div className="text-sm text-white font-medium group-hover:text-accent transition-colors">{item.label}</div>
+                        <div className="text-[10px] text-white/30 font-mono uppercase">{item.desc}</div>
                       </div>
-                    {alert.type === 'available' && (
+                      <ArrowRight className="w-4 h-4 text-white/20 group-hover:text-accent group-hover:translate-x-1 transition-all" />
-                      <span className="text-[10px] font-mono text-accent uppercase tracking-wider border border-accent/20 px-2 py-1">
+                    </Link>
-                        Action Req
+                  ))}
-                      </span>
-                    )}
                 </div>
-                ))
+                
-              ) : (
+                {/* System Status */}
-                <div className="bg-[#020202] p-8 text-center text-white/20 font-mono text-xs">
+                <div className="mt-8 pt-6 border-t border-white/[0.08]">
-                  WATCHLIST EMPTY
+                  <div className="text-[10px] font-mono uppercase text-white/30 mb-3">System Status</div>
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                      <div className="w-1.5 h-1.5 bg-accent rounded-full animate-pulse" />
+                      <span className="text-xs text-white/60 font-mono">All Systems Operational</span>
+                    </div>
+                    <span className="text-[10px] text-white/20 font-mono">99.9%</span>
                   </div>
-              )}
                 </div>
               </div>
               
             </div>
           </div>
+        </section>
+
+      </div>
+      
+      <style jsx global>{`
+        @keyframes ticker {
+          0% { transform: translateX(0); }
+          100% { transform: translateX(-33.33%); }
+        }
+      `}</style>
     </CommandCenterLayout>
   )
 }