"use client"; import React, { useState } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { ChevronDown, HelpCircle, Coffee, ShieldCheck, Sparkles, Sprout } from "lucide-react"; interface FAQItem { id: string; question: string; answer: string; icon: React.ElementType; } const FAQ_DATA: FAQItem[] = [ { id: "coffe-diff", question: "What makes Lounge Coffe different from ordinary coffee?", answer: "Lounge Coffe is a precision-engineered experience. We begin with exceptionally high-altitude, single-origin organic beans, which are slowly custom-roasted to match the four distinct bio-rhythms of your day. It's not just caffeine; it's a sensory calibration designed for deep focus.", icon: Coffee, }, { id: "temp-retention", question: "What is the secret behind the multi-hour temperature retention?", answer: "Our specialized cups employ a dual-wall high-vacuum copper barrier. This state-of-the-art construction locks in aroma and heat for up to 8 hours, and preserves refreshing cold brews for up to 18 hours, without transmitting any heat or sweat to your hands.", icon: Sparkles, }, { id: "eco-materials", question: "Are your cups completely organic and biodegradable?", answer: "Absolutely. Environmental responsibility is baked into our design. Our modern paper-feel cups are interior-lined with plant-derived PLA (polylactic acid) rather than conventional petroleum plastic. They are 100% compostable, ocean-safe, and free from microplastics.", icon: Sprout, }, { id: "interactive-timeline", question: "How does the interactive timeline map to actual brewing times?", answer: "The Lounge Coffee timeline transitions in sync with daylight cycles: from Canyon Crimson morning espressos, to Forest Green midday matchas, Amber Gold afternoon lattes, and deep Midnight Espresso, offering a customized sensory landscape for every hour.", icon: ShieldCheck, }, ]; export default function Faq({ className }: { className?: string }) { const [openId, setOpenId] = useState("coffe-diff"); const [_hoveredId, setHoveredId] = useState(null); const toggleItem = (id: string) => { setOpenId(openId === id ? null : id); }; return ( <>

{/* Dynamic atmospheric ambient glow */}

{/* Top: Bold Aesthetic Centered Header Block */}

Lounge Knowledge Base

FREQUENTLY BREWED QUESTIONS

Everything you need to know about our organic sourcing, thermoregulation mechanics, and customized design offerings. Can't find your answer? Drop us an inquiry anytime.

{/* Bottom: Sleek Centered Accordion Interface */}

{FAQ_DATA.map((item) => { const isOpen = openId === item.id; const IconComponent = item.icon; return (

setHoveredId(item.id)} onMouseLeave={() => setHoveredId(null)} > {/* Accordion Trigger Header */} {/* Animated Collapsible Expand Content */} {isOpen && (

{/* Divider */}

{item.answer}

)}

); })}

); }