components/dashboard/PeakHours.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import { useState, useEffect, useMemo } from 'react'
+import { useState, useEffect, useMemo, useRef } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
 import { logger } from '@/lib/utils/logger'
 import { getDailyStats } from '@/lib/api/stats'
 import type { DailyStat } from '@/lib/api/stats'
@@ -13,10 +14,19 @@ interface PeakHoursProps {
 const DAYS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
 const HOUR_LABELS: Record<number, string> = { 0: '12am', 6: '6am', 12: '12pm', 18: '6pm' }
 
+function formatHour(hour: number): string {
+  if (hour === 0) return '12am'
+  if (hour === 12) return '12pm'
+  return hour < 12 ? `${hour}am` : `${hour - 12}pm`
+}
+
 export default function PeakHours({ siteId, dateRange }: PeakHoursProps) {
   const [data, setData] = useState<DailyStat[]>([])
   const [isLoading, setIsLoading] = useState(true)
-  const [tooltip, setTooltip] = useState<{ day: number; hour: number; value: number } | null>(null)
+  const [animKey, setAnimKey] = useState(0)
+  const [hovered, setHovered] = useState<{ day: number; hour: number } | null>(null)
+  const [tooltipPos, setTooltipPos] = useState<{ x: number; y: number } | null>(null)
+  const gridRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
     const fetchData = async () => {
@@ -24,6 +34,7 @@ export default function PeakHours({ siteId, dateRange }: PeakHoursProps) {
       try {
         const result = await getDailyStats(siteId, dateRange.start, dateRange.end, 'hour')
         setData(result)
+        setAnimKey(k => k + 1)
       } catch (e) {
         logger.error(e)
       } finally {
@@ -33,22 +44,65 @@ export default function PeakHours({ siteId, dateRange }: PeakHoursProps) {
     fetchData()
   }, [siteId, dateRange])
 
-  const { grid, max } = useMemo(() => {
+  const { grid, max, dayTotals, hourTotals, weekTotal } = useMemo(() => {
-    // grid[adjustedDay][hour] where Mon=0 ... Sun=6
     const grid: number[][] = Array.from({ length: 7 }, () => Array(24).fill(0))
     for (const d of data) {
       const date = new Date(d.date)
-      const day = date.getDay() // 0=Sun
+      const day = date.getDay()
       const hour = date.getHours()
-      const adjustedDay = day === 0 ? 6 : day - 1 // Mon=0 ... Sun=6
+      const adjustedDay = day === 0 ? 6 : day - 1
       grid[adjustedDay][hour] += d.pageviews
     }
     const max = Math.max(...grid.flat(), 1)
-    return { grid, max }
+    const dayTotals = grid.map(hours => hours.reduce((a, b) => a + b, 0))
+    const hourTotals = Array.from({ length: 24 }, (_, h) => grid.reduce((a, row) => a + row[h], 0))
+    const weekTotal = dayTotals.reduce((a, b) => a + b, 0)
+    return { grid, max, dayTotals, hourTotals, weekTotal }
   }, [data])
 
   const hasData = data.some(d => d.pageviews > 0)
 
+  const bestTime = useMemo(() => {
+    if (!hasData) return null
+    let bestDay = 0, bestHour = 0, bestVal = 0
+    for (let d = 0; d < 7; d++) {
+      for (let h = 0; h < 24; h++) {
+        if (grid[d][h] > bestVal) {
+          bestVal = grid[d][h]
+          bestDay = d
+          bestHour = h
+        }
+      }
+    }
+    return { day: bestDay, hour: bestHour }
+  }, [grid, hasData])
+
+  const tooltipData = useMemo(() => {
+    if (!hovered) return null
+    const { day, hour } = hovered
+    const value = grid[day][hour]
+    const dayTotal = dayTotals[day]
+    const hourTotal = hourTotals[hour]
+    const pct = weekTotal > 0 ? Math.round((value / weekTotal) * 100) : 0
+    return { value, dayTotal, hourTotal, pct }
+  }, [hovered, grid, dayTotals, hourTotals, weekTotal])
+
+  const handleCellMouseEnter = (
+    e: React.MouseEvent<HTMLDivElement>,
+    dayIdx: number,
+    hour: number
+  ) => {
+    setHovered({ day: dayIdx, hour })
+    if (gridRef.current) {
+      const gridRect = gridRef.current.getBoundingClientRect()
+      const cellRect = (e.currentTarget as HTMLDivElement).getBoundingClientRect()
+      setTooltipPos({
+        x: cellRect.left - gridRect.left + cellRect.width / 2,
+        y: cellRect.top - gridRect.top,
+      })
+    }
+  }
+
   return (
     <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 h-full flex flex-col">
       <div className="flex items-center justify-between mb-1">
@@ -68,27 +122,50 @@ export default function PeakHours({ siteId, dateRange }: PeakHoursProps) {
           ))}
         </div>
       ) : hasData ? (
-        <div className="flex-1 min-h-[270px] flex flex-col justify-center gap-1 relative">
+        <>
+          <div className="flex-1 min-h-[270px] flex flex-col justify-center gap-1 relative" ref={gridRef}>
             {grid.map((hours, dayIdx) => (
               <div key={dayIdx} className="flex items-center gap-1.5">
                 <span className="text-[11px] text-neutral-400 dark:text-neutral-500 w-7 flex-shrink-0 text-right leading-none">
                   {DAYS[dayIdx]}
                 </span>
                 <div className="flex flex-1 gap-[2px]">
-                {hours.map((value, hour) => (
+                  {hours.map((value, hour) => {
-                  <div
+                    const isHoveredCell = hovered?.day === dayIdx && hovered?.hour === hour
-                    key={hour}
+                    const inRow = hovered?.day === dayIdx
-                    className="flex-1 rounded-[2px] cursor-default relative"
+                    const inCol = hovered?.hour === hour
+                    const highlight = inRow || inCol
+                    const dimmed = hovered !== null && !highlight
+
+                    return (
+                      <motion.div
+                        key={`${animKey}-${dayIdx}-${hour}`}
+                        className="flex-1 rounded-[2px] cursor-default"
+                        initial={{ opacity: 0, scale: 0.5 }}
+                        animate={{
+                          opacity: dimmed ? 0.3 : 1,
+                          scale: isHoveredCell ? 1.3 : 1,
+                        }}
+                        transition={
+                          dimmed || isHoveredCell || highlight
+                            ? { duration: 0.12 }
+                            : {
+                                opacity: { duration: 0.3, delay: (dayIdx * 24 + hour) * 0.003 },
+                                scale: { duration: 0.3, delay: (dayIdx * 24 + hour) * 0.003, type: 'spring', stiffness: 300 },
+                              }
+                        }
                         style={{
                           aspectRatio: '1',
                           backgroundColor: value === 0
                             ? 'rgba(253,94,15,0.07)'
                             : `rgba(253,94,15,${Math.max(0.15, (value / max) * 0.92)})`,
+                          zIndex: isHoveredCell ? 2 : 'auto',
                         }}
-                    onMouseEnter={() => setTooltip({ day: dayIdx, hour, value })}
+                        onMouseEnter={(e) => handleCellMouseEnter(e, dayIdx, hour)}
-                    onMouseLeave={() => setTooltip(null)}
+                        onMouseLeave={() => { setHovered(null); setTooltipPos(null) }}
                       />
-                ))}
+                    )
+                  })}
                 </div>
               </div>
             ))}
@@ -112,13 +189,54 @@ export default function PeakHours({ siteId, dateRange }: PeakHoursProps) {
               </div>
             </div>
 
-          {/* Tooltip */}
+            {/* Cell-anchored tooltip */}
-          {tooltip && (
+            <AnimatePresence>
-            <div className="absolute -top-8 left-1/2 -translate-x-1/2 bg-neutral-900 dark:bg-neutral-800 border border-neutral-700 text-white text-xs px-2 py-1 rounded-lg pointer-events-none whitespace-nowrap z-10">
+              {hovered && tooltipData && tooltipPos && (
-              {DAYS[tooltip.day]} {tooltip.hour}:00 — {tooltip.value} pageviews
+                <motion.div
+                  key="tooltip"
+                  initial={{ opacity: 0, y: 4, scale: 0.95 }}
+                  animate={{ opacity: 1, y: 0, scale: 1 }}
+                  exit={{ opacity: 0, y: 4, scale: 0.95 }}
+                  transition={{ duration: 0.12 }}
+                  className="absolute pointer-events-none z-20"
+                  style={{
+                    left: tooltipPos.x,
+                    top: tooltipPos.y - 8,
+                    transform: 'translate(-50%, -100%)',
+                  }}
+                >
+                  <div className="bg-neutral-900 dark:bg-neutral-800 border border-neutral-700 text-white text-xs px-3 py-2 rounded-lg shadow-xl whitespace-nowrap">
+                    <div className="font-semibold mb-1">
+                      {DAYS[hovered.day]} {formatHour(hovered.hour)}
                     </div>
+                    <div className="flex flex-col gap-0.5 text-neutral-300">
+                      <span>{tooltipData.value.toLocaleString()} pageviews</span>
+                      <span>{tooltipData.pct}% of week&apos;s traffic</span>
+                    </div>
+                  </div>
+                  {/* Arrow */}
+                  <div className="absolute left-1/2 -translate-x-1/2 bottom-0 translate-y-full w-0 h-0"
+                    style={{ borderLeft: '5px solid transparent', borderRight: '5px solid transparent', borderTop: '5px solid #404040' }} />
+                </motion.div>
               )}
+            </AnimatePresence>
           </div>
+
+          {/* Best time callout */}
+          {bestTime && (
+            <motion.p
+              initial={{ opacity: 0, y: 4 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.4, delay: 0.5 }}
+              className="mt-4 text-xs text-neutral-500 dark:text-neutral-400 text-center"
+            >
+              Your busiest time is{' '}
+              <span className="text-brand-orange font-medium">
+                {DAYS[bestTime.day]}s at {formatHour(bestTime.hour)}
+              </span>
+            </motion.p>
+          )}
+        </>
       ) : (
         <div className="flex-1 min-h-[270px] flex flex-col items-center justify-center text-center gap-3">
           <p className="text-sm text-neutral-500 dark:text-neutral-400">