← back to Wine Finder Next
components/BestDealHero.tsx
195 lines
'use client'
import { useState, useEffect } from 'react'
import Image from 'next/image'
interface PriceStats {
name: string
winery: string
vintage: number
image: string
url: string
source: string
region: string
currentPrice: number
lowestPrice: number
highestPrice: number
discount: number
savings: number
priceHistory: Array<{timestamp: string, price: number}>
trackingSince: string
lastUpdated: string
}
interface BestDealData {
bestDeal: PriceStats | null
mostExpensive: PriceStats | null
totalWinesTracked: number
totalPricePoints: number
trackingStarted: string
}
export default function BestDealHero() {
const [data, setData] = useState<BestDealData | null>(null)
const [loading, setLoading] = useState(true)
useEffect(() => {
loadBestDeal()
// Refresh every 30 seconds to catch flash deals
const interval = setInterval(loadBestDeal, 30000)
return () => clearInterval(interval)
}, [])
const loadBestDeal = async () => {
try {
const response = await fetch('/api/best-deal')
const result = await response.json()
setData(result)
} catch (error) {
console.error('Error loading best deal:', error)
} finally {
setLoading(false)
}
}
if (loading) {
return (
<div className="bg-gradient-to-r from-amber-500 via-orange-500 to-red-500 text-white py-4">
<div className="container mx-auto px-4 text-center">
<div className="inline-block animate-spin rounded-full h-6 w-6 border-t-2 border-b-2 border-white"></div>
<span className="ml-3">Loading best deals...</span>
</div>
</div>
)
}
if (!data?.bestDeal) {
return null
}
const deal = data.bestDeal
const timeSince = new Date(deal.trackingSince).toLocaleString()
return (
<div className="bg-gradient-to-r from-red-600 via-rose-600 to-pink-600 text-white relative overflow-hidden shadow-2xl">
{/* Animated Background */}
<div className="absolute inset-0 opacity-10">
<div className="absolute top-0 left-0 w-96 h-96 bg-white rounded-full blur-3xl animate-pulse" />
<div className="absolute bottom-0 right-0 w-96 h-96 bg-yellow-200 rounded-full blur-3xl animate-pulse delay-1000" />
</div>
<div className="container mx-auto px-4 py-6 sm:py-8 relative z-10">
{/* Flash Deal Badge */}
<div className="text-center mb-4">
<div className="inline-flex items-center gap-3 bg-white text-red-600 px-8 py-3 rounded-full border-4 border-white shadow-2xl animate-bounce-subtle">
<span className="text-3xl">🔥</span>
<span className="font-black text-xl sm:text-2xl tracking-wide">BEST DEAL - HIGHEST $ SAVED</span>
<span className="text-3xl">🔥</span>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-12 gap-6 items-center">
{/* Wine Image */}
<div className="md:col-span-3 flex justify-center">
<div className="relative w-48 h-64 rounded-2xl overflow-hidden shadow-2xl ring-4 ring-white/30 hover:ring-white/60 transition-all duration-300 hover:scale-105">
<Image
src={deal.image}
alt={deal.name}
fill
className="object-contain bg-white/10 backdrop-blur"
unoptimized
/>
</div>
</div>
{/* Deal Info */}
<div className="md:col-span-6 text-center md:text-left">
<h2 className="text-3xl sm:text-5xl font-black mb-3 drop-shadow-2xl text-white">
{deal.name}
</h2>
<p className="text-2xl sm:text-3xl font-bold text-yellow-100 mb-2 drop-shadow-lg">
{deal.winery} • {deal.vintage}
</p>
<p className="text-base sm:text-xl text-white font-semibold mb-4 drop-shadow-md">
📍 {deal.region}
</p>
{/* Price History Mini Chart */}
<div className="bg-white/10 backdrop-blur rounded-xl p-4 mb-4">
<div className="flex justify-between text-sm mb-2">
<span className="text-white/80">Tracking since {timeSince}</span>
<span className="text-white/80">{deal.priceHistory.length} price points</span>
</div>
<div className="h-2 bg-white/20 rounded-full overflow-hidden">
<div
className="h-full bg-gradient-to-r from-green-400 to-emerald-500 rounded-full animate-pulse"
style={{ width: `${100 - deal.discount}%` }}
/>
</div>
</div>
<div className="flex flex-wrap gap-2 justify-center md:justify-start">
<span className="bg-white/20 backdrop-blur px-3 py-1 rounded-full text-sm">
💎 {data.totalWinesTracked} wines tracked
</span>
<span className="bg-white/20 backdrop-blur px-3 py-1 rounded-full text-sm">
📊 {data.totalPricePoints.toLocaleString()} data points
</span>
</div>
</div>
{/* Price Details */}
<div className="md:col-span-3 text-center">
<div className="bg-white/10 backdrop-blur rounded-2xl p-6 border-2 border-white/30">
{/* Discount Badge */}
<div className="bg-gradient-to-r from-green-500 to-emerald-600 text-white font-black text-5xl sm:text-6xl py-4 px-6 rounded-2xl mb-4 shadow-2xl animate-pulse border-4 border-white">
{deal.discount}% OFF
</div>
{/* Price Breakdown */}
<div className="space-y-3 mb-4 bg-black/20 p-4 rounded-xl backdrop-blur">
<div className="flex justify-between items-center">
<span className="text-white font-bold text-lg">Was:</span>
<span className="text-gray-300 line-through text-2xl font-semibold">${deal.highestPrice.toFixed(2)}</span>
</div>
<div className="flex justify-between items-center">
<span className="text-white font-bold text-lg">Now:</span>
<span className="text-yellow-300 font-black text-4xl drop-shadow-lg">${deal.currentPrice.toFixed(2)}</span>
</div>
<div className="border-t-2 border-white/40 pt-3">
<div className="flex justify-between items-center">
<span className="text-green-300 font-black text-xl">💰 You Save:</span>
<span className="text-green-300 font-black text-3xl drop-shadow-lg">${deal.savings.toFixed(2)}</span>
</div>
</div>
</div>
{/* CTA Button */}
<a
href={deal.url}
target="_blank"
rel="noopener noreferrer"
className="block w-full bg-white text-orange-600 font-bold py-3 px-6 rounded-xl hover:bg-orange-50 transition-all duration-300 shadow-lg hover:shadow-xl hover:scale-105"
>
🛒 View Deal on {deal.source}
</a>
<p className="text-xs text-white/60 mt-3">
Last updated: {new Date(deal.lastUpdated).toLocaleTimeString()}
</p>
</div>
</div>
</div>
{/* Live Tracking Indicator */}
<div className="text-center mt-6">
<div className="inline-flex items-center gap-2 bg-white/10 backdrop-blur px-4 py-2 rounded-full text-sm">
<div className="w-2 h-2 bg-green-400 rounded-full animate-pulse" />
<span className="text-white/90">Live price tracking every 5 seconds</span>
</div>
</div>
</div>
</div>
)
}