188 lines
9.7 KiB
TypeScript
188 lines
9.7 KiB
TypeScript
import { useState, useEffect } from 'react'
|
||
import Navbar from '../components/Navbar'
|
||
import Footer from '../components/Footer'
|
||
import DynamicPageRenderer from '../components/DynamicPageRenderer'
|
||
import { API_BASE, type Category, type PageSection } from '../types'
|
||
|
||
const FAQS = [
|
||
{
|
||
category: 'Products',
|
||
icon: '🌿',
|
||
items: [
|
||
{ q: 'What are the ingredients in your aroma products?', a: 'All HomAroma products are crafted from 100% natural botanical extracts, pure essential oils, and pharmaceutical-grade carrier bases. We never use synthetic fragrances, parabens, or harmful chemicals. Each product label lists full ingredient transparency.' },
|
||
{ q: 'How long does each product last?', a: 'Our Reed Diffusers last 4–8 weeks depending on room size and airflow. Aroma Oils (30ml) last approximately 3–4 months with normal use. Room Sprays (100ml) provide 60–80 uses. Car Diffusers cartridges last up to 45 days.' },
|
||
{ q: 'Are your products suitable for sensitive skin or allergies?', a: 'We recommend patch testing before topical use. Our Aroma Oils are formulated for diffuser use primarily. If you have known fragrance allergies, consult our scent guide or contact us with your specific concerns — we are happy to help identify suitable options.' },
|
||
{ q: 'What is the difference between Aroma Oil and Oil Ozone?', a: 'Aroma Oils are pure essential oil blends designed for aromatherapy diffusers and therapeutic use. Oil Ozone is our premium line featuring ozone-infused botanical extracts — designed for air purification and deeper space transformation, ideal for large rooms and commercial spaces.' },
|
||
],
|
||
},
|
||
{
|
||
category: 'Usage',
|
||
icon: '💡',
|
||
items: [
|
||
{ q: 'How do I use a Reed Diffuser?', a: 'Remove the stopper, place the reeds into the bottle, and let them absorb the oil for 1 hour before flipping. For optimal fragrance, flip the reeds every 2–3 days. Keep away from direct sunlight and air conditioning vents for longest lasting performance.' },
|
||
{ q: 'Can I mix different scents?', a: 'Yes! Blending scents is an art form we encourage. A general rule: combine no more than 3 scents at a time, using one dominant (60%), one supporting (30%), and one accent (10%). Our Scent Guide can help you find complementary combinations.' },
|
||
{ q: 'How long should I run my aroma diffuser?', a: 'For best results and to avoid olfactory fatigue, we recommend 30–60 minute sessions with 30-minute breaks in between. This also extends product life and prevents overwhelming fragrance build-up in small spaces.' },
|
||
],
|
||
},
|
||
{
|
||
category: 'Shipping & Orders',
|
||
icon: '📦',
|
||
items: [
|
||
{ q: 'How long does shipping take?', a: 'Standard delivery within Bangkok takes 1–2 business days. Provincial orders take 2–4 business days. Express same-day delivery is available in Bangkok for orders placed before 12:00 PM.' },
|
||
{ q: 'Do you ship internationally?', a: 'Currently we ship within Thailand only. International shipping is planned for late 2025. Sign up for our newsletter to be notified when we expand to your region.' },
|
||
{ q: 'What is your return policy?', a: 'We accept returns within 14 days of purchase for unopened, undamaged products in original packaging. For defective or damaged products, we offer full replacement at no cost. Contact us at hello@homaroma.shop with your order number.' },
|
||
],
|
||
},
|
||
{
|
||
category: 'Scent Guide',
|
||
icon: '🧪',
|
||
items: [
|
||
{ q: 'How do I choose the right scent for my space?', a: 'Consider the function of the space first. Bedrooms benefit from calming scents like lavender and chamomile. Living rooms work well with warm, welcoming notes like sandalwood and vanilla. Home offices pair best with focus-enhancing eucalyptus and citrus. Use our interactive Scent Guide for personalized recommendations.' },
|
||
{ q: 'Can I request custom scent blending?', a: 'Yes! Our bespoke blending service is available for orders of 6 units or more. Contact us at least 10 business days before your desired delivery date. Custom blending fees start at ฿500 per unique formula.' },
|
||
],
|
||
},
|
||
]
|
||
|
||
export default function FaqPage() {
|
||
const [categories, setCategories] = useState<Category[]>([])
|
||
const [openItems, setOpenItems] = useState<Record<string, boolean>>({})
|
||
const [activeCategory, setActiveCategory] = useState<string>('Products')
|
||
const [cmsSections, setCmsSections] = useState<PageSection[]>([])
|
||
|
||
useEffect(() => {
|
||
fetch(`${API_BASE}/categories`).then(r => r.json()).then(setCategories).catch(console.error)
|
||
}, [])
|
||
|
||
useEffect(() => {
|
||
fetch(`${API_BASE}/pages/faq-layout`)
|
||
.then((r) => {
|
||
if (!r.ok) throw new Error('Page not found');
|
||
return r.json();
|
||
})
|
||
.then((data) => {
|
||
if (data && data.sections) {
|
||
setCmsSections(data.sections);
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
console.log('FAQ dynamic layout sections not loaded:', err.message);
|
||
});
|
||
}, [])
|
||
|
||
const toggle = (key: string) => setOpenItems(prev => ({ ...prev, [key]: !prev[key] }))
|
||
|
||
const activeFaqs = FAQS.find(f => f.category === activeCategory)
|
||
|
||
const announcementSections = cmsSections.filter(s => s.isActive && s.type.toUpperCase() === 'ANNOUNCEMENT_BAR');
|
||
const heroSections = cmsSections.filter(s => s.isActive && (s.type.toUpperCase() === 'HERO' || s.type.toUpperCase() === 'BANNER'));
|
||
const bottomSections = cmsSections.filter(s => s.isActive && s.type.toUpperCase() !== 'ANNOUNCEMENT_BAR' && s.type.toUpperCase() !== 'HERO' && s.type.toUpperCase() !== 'BANNER');
|
||
|
||
return (
|
||
<div className="min-h-screen">
|
||
{announcementSections.length > 0 && (
|
||
<DynamicPageRenderer
|
||
sections={announcementSections}
|
||
categories={categories}
|
||
categoriesLoading={false}
|
||
/>
|
||
)}
|
||
|
||
<Navbar categories={categories} />
|
||
|
||
{/* Header */}
|
||
{heroSections.length > 0 ? (
|
||
<div className="pt-20">
|
||
<DynamicPageRenderer
|
||
sections={heroSections}
|
||
categories={categories}
|
||
categoriesLoading={false}
|
||
/>
|
||
</div>
|
||
) : (
|
||
<div className="pt-32 pb-16 px-6 text-center space-y-4 border-b border-spa-stone/10 bg-white">
|
||
<p className="text-spa-forest uppercase tracking-[0.4em] text-xs font-semibold opacity-70">Support</p>
|
||
<h1 className="text-5xl font-bold">Frequently Asked Questions</h1>
|
||
<p className="text-slate-400 max-w-lg mx-auto">
|
||
Everything you need to know about HomAroma products, shipping, and care.
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
<div className="max-w-4xl mx-auto px-6 py-16 space-y-10">
|
||
{/* Category tabs */}
|
||
<div className="flex flex-wrap gap-3">
|
||
{FAQS.map(({ category, icon }) => (
|
||
<button
|
||
key={category}
|
||
onClick={() => setActiveCategory(category)}
|
||
className={`px-5 py-2 rounded-full text-xs font-bold uppercase tracking-widest transition-all duration-300 flex items-center gap-2 ${
|
||
activeCategory === category
|
||
? 'bg-spa-forest text-white text-spa-forest shadow-[0_0_15px_rgba(102,252,241,0.3)]'
|
||
: 'bg-white shadow-sm border border-spa-stone/10 hover:bg-white/10'
|
||
}`}
|
||
>
|
||
<span>{icon}</span> {category}
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
{/* FAQ Accordion */}
|
||
<div className="space-y-3">
|
||
{activeFaqs?.items.map((item, i) => {
|
||
const key = `${activeCategory}-${i}`
|
||
const isOpen = openItems[key]
|
||
return (
|
||
<div
|
||
key={key}
|
||
className={`bg-white shadow-sm border border-spa-stone/10 rounded-xl overflow-hidden border transition-all duration-300 ${isOpen ? 'border-spa-forest' : 'border-spa-stone/10'}`}
|
||
>
|
||
<button
|
||
onClick={() => toggle(key)}
|
||
className="w-full text-left px-6 py-5 flex justify-between items-start gap-4"
|
||
>
|
||
<span className="font-semibold text-sm md:text-base leading-snug">{item.q}</span>
|
||
<svg
|
||
className={`w-5 h-5 text-spa-forest shrink-0 transition-transform duration-300 ${isOpen ? 'rotate-45' : ''}`}
|
||
fill="none" viewBox="0 0 24 24" stroke="currentColor"
|
||
>
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
||
</svg>
|
||
</button>
|
||
{isOpen && (
|
||
<div className="px-6 pb-6">
|
||
<div className="w-full h-px bg-white/5 mb-4" />
|
||
<p className="text-slate-300 leading-relaxed text-sm">{item.a}</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
|
||
{/* Still have questions? */}
|
||
<div className="bg-white shadow-sm border border-spa-stone/10 rounded-2xl p-8 text-center space-y-4 border border-spa-stone/10 mt-12">
|
||
<div className="text-3xl">💬</div>
|
||
<h3 className="font-bold text-xl">Still have questions?</h3>
|
||
<p className="text-slate-400 text-sm">Our team is here to help — usually responds within 2 hours.</p>
|
||
<a
|
||
href="/contact"
|
||
className="inline-block px-8 py-3 bg-white text-spa-forest font-bold rounded-lg uppercase tracking-widest text-xs hover:bg-spa-forest text-white transition-colors duration-300"
|
||
>
|
||
Contact Us
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
{bottomSections.length > 0 && (
|
||
<DynamicPageRenderer
|
||
sections={bottomSections}
|
||
categories={categories}
|
||
categoriesLoading={false}
|
||
/>
|
||
)}
|
||
|
||
<Footer categories={categories} />
|
||
</div>
|
||
)
|
||
}
|