"use client"; import React, { useState, useEffect } from "react"; // Coffee Cups configuration const CLOCK_CUPS = [ { id: "red", name: "Canyon Crimson", src: "https://cdn.jiro.build/Laounge%20Coffe/images/Cap1.png", accent: "#8F382C", timeLabel: "08:00 AM", labelText: "morning brew", left: "50%", top: "-7%", targetHour: 8, targetMinute: 0, quote: "Bold, intense, and revitalizing. Fueling the start of your day with premium beans." }, { id: "black", name: "Obsidian Black", src: "https://cdn.jiro.build/Laounge%20Coffe/images/Cap4.png", accent: "#262524", timeLabel: "09:00 PM", labelText: "espresso o'clock", left: "107%", top: "50%", targetHour: 21, targetMinute: 0, quote: "Rich, mysterious, and deeply aromatic. For the dreamers and night thinkers." }, { id: "orange", name: "Amber Gold", src: "https://cdn.jiro.build/Laounge%20Coffe/images/Cap3.png", accent: "#D68C45", timeLabel: "04:00 PM", labelText: "golden hour", left: "50%", top: "107%", targetHour: 16, targetMinute: 0, quote: "Sweet, warm caramel undertones to carry you through the soft afternoon light." }, { id: "green", name: "Forest Matcha", src: "https://cdn.jiro.build/Laounge%20Coffe/images/Cap2.png", accent: "#4D6B54", timeLabel: "12:00 PM", labelText: "matcha o'clock", left: "-7%", top: "50%", targetHour: 12, targetMinute: 0, quote: "A perfect balance of earthy matcha and velvet cream to ground your midday focus." } ]; export default function CoffeeTime({ className }: { className?: string }) { const [time, setTime] = useState(new Date()); const [isInteractive, setIsInteractive] = useState(false); const [selectedCupId, setSelectedCupId] = useState(null); useEffect(() => { if (isInteractive) return; const interval = setInterval(() => { setTime(new Date()); }, 1000); return () => clearInterval(interval); }, [isInteractive]); const handleCupHover = (cupId: string | null) => { if (cupId) { setIsInteractive(true); setSelectedCupId(cupId); const cup = CLOCK_CUPS.find((c) => c.id === cupId); if (cup) { const demoTime = new Date(); demoTime.setHours(cup.targetHour, cup.targetMinute, 0); setTime(demoTime); } } else { setIsInteractive(false); setSelectedCupId(null); setTime(new Date()); } }; const currentHour = time.getHours(); const currentMinute = time.getMinutes(); const currentSecond = time.getSeconds(); const hourDegrees = ((currentHour % 12) * 30) + (currentMinute * 0.5); const minuteDegrees = (currentMinute * 6) + (currentSecond * 0.1); const secondDegrees = isInteractive ? 0 : currentSecond * 6; const getActivePreset = () => { if (selectedCupId) { return CLOCK_CUPS.find((c) => c.id === selectedCupId)!; } if (currentHour >= 5 && currentHour < 11) { return CLOCK_CUPS.find((c) => c.id === "red")!; } else if (currentHour >= 11 && currentHour < 15) { return CLOCK_CUPS.find((c) => c.id === "green")!; } else if (currentHour >= 15 && currentHour < 19) { return CLOCK_CUPS.find((c) => c.id === "orange")!; } else { return CLOCK_CUPS.find((c) => c.id === "black")!; } }; const currentTheme = getActivePreset(); const leftCups = [CLOCK_CUPS[0], CLOCK_CUPS[3]]; const rightCups = [CLOCK_CUPS[1], CLOCK_CUPS[2]]; const beans = [ { angle: 60, id: "bean-2" }, { angle: 120, id: "bean-4" }, { angle: 240, id: "bean-8" }, { angle: 300, id: "bean-10" }, ]; const dots = [ { angle: 30, id: "dot-1" }, { angle: 150, id: "dot-5" }, { angle: 210, id: "dot-7" }, { angle: 330, id: "dot-11" }, ]; const renderCup = (cup: typeof CLOCK_CUPS[number]) => { const isSelected = selectedCupId === cup.id; return (

handleCupHover(cup.id)} onMouseLeave={() => handleCupHover(null)} onClick={() => handleCupHover(cup.id)} >

); }; return ( <>

Brewing Every Second

Experience our organic timeline. Watch the lounge landscape transition gracefully through distinct coffee moments of the day.

{leftCups.map((cup) => renderCup(cup))}

{beans.map((bean) => { const angleRad = (bean.angle * Math.PI) / 180; const leftPos = "calc(50% + 50% * " + Math.sin(angleRad).toFixed(4) + ")"; const topPos = "calc(50% - 50% * " + Math.cos(angleRad).toFixed(4) + ")"; return (

); })} {dots.map((dot) => { const angleRad = (dot.angle * Math.PI) / 180; const leftPos = "calc(50% + 50% * " + Math.sin(angleRad).toFixed(4) + ")"; const topPos = "calc(50% - 50% * " + Math.cos(angleRad).toFixed(4) + ")"; return (

); })}

{currentTheme.labelText}

Lounge Coffe

{rightCups.map((cup) => renderCup(cup))}

); }