// Hawaiian Style — Marketing site composite components. // Depends on Primitives.jsx (Pill, Eyebrow, Headline, etc on window). // Top promo bar — rotates 3 messages on a 4s cycle. // Scrolls away on its own (NOT sticky). The Nav below it stays sticky. const TopBar = () => { const { useState, useEffect } = React; const messages = [ { txt: 'Free shipping on orders over ฿500', script: 'across Thailand' }, { txt: 'Made in Thailand since 1995', script: 'reef-safe formulas' }, { txt: 'Kona Club members get 15% off first bottle', script: "join free" }, { txt: 'Now in 14,000+ stores nationwide', script: 'pick a beach' }, ]; const [i, setI] = useState(0); useEffect(() => { const id = setInterval(() => setI(n => (n + 1) % messages.length), 4000); return () => clearInterval(id); }, []); const m = messages[i]; return (
★ {m.txt} · {m.script} · EST. 1995
); }; const Nav = ({ cartCount = 0, onCartClick }) => { const { useState, useEffect } = React; const [shopOpen, setShopOpen] = useState(false); const [schoolOpen, setSchoolOpen] = useState(false); const [drawerOpen, setDrawerOpen] = useState(false); const [liveCount, setLiveCount] = useState(cartCount); // Close drawer on Esc + on link click + lock body scroll while open. useEffect(() => { if (!drawerOpen) { document.body.style.overflow = ""; return; } document.body.style.overflow = "hidden"; const onKey = (e) => { if (e.key === "Escape") setDrawerOpen(false); }; window.addEventListener("keydown", onKey); return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = ""; }; }, [drawerOpen]); // Keep the badge in sync with localStorage cart across pages. useEffect(() => { const read = () => { try { const raw = localStorage.getItem('hws-cart-v1'); if (!raw) return cartCount; const arr = JSON.parse(raw); return arr.reduce((s, it) => s + (it.qty || 1), 0); } catch { return cartCount; } }; setLiveCount(read()); const onChange = () => setLiveCount(read()); window.addEventListener('hws-cart-changed', onChange); window.addEventListener('storage', onChange); return () => { window.removeEventListener('hws-cart-changed', onChange); window.removeEventListener('storage', onChange); }; }, [cartCount]); const displayCount = Math.max(cartCount, liveCount); const shopItems = [ { label: 'Tanning', href: '/#tanning' }, { label: 'Aftersun', href: '/#aftersun' }, { label: 'Sunblock', href: '/#sunblock' }, { label: 'Merch', href: '/#merch' }, { label: 'Shop All', href: '/#bestsellers' }, ]; const schoolItems = [ { label: 'Sun School', href: '/sun-school' }, { label: 'Postcards from the beach', href: '/#reviews' }, { label: 'FAQ', href: '/faq' }, ]; const links = [ { label: 'Kona Club', href: '/#beachclub' }, { label: 'Our Story', href: '/#our-story' }, { label: 'Where to Buy', href: '/#where-to-buy' }, ]; return ( ); }; const Hero = () => (
{/* TEXT */}
Analog Life · Born for Sunshine · Est. 1995

Embrace the Sun, adventure Unbound.

Golden beach days, island escapes, and every outdoor adventure under the warmest sky. Tropical sun care from Thailand, the way summer's supposed to feel.

โอบรับแสงแดด ปลดปล่อยทุกการผจญภัย — ตั้งแต่ปี 1995

Shop Now Explore Sun Care
{[ { num: '30+', lbl: 'Years on the beach' }, { num: 'SPF 50', lbl: 'Broad spectrum UVA + UVB' }, { num: '14k', lbl: 'Stores nationwide' }, ].map(m => (
{m.num}
{m.lbl}
))}
{/* VISUAL */}
{/* Polaroid lifestyle photos — pinned to corners */}
patong, '24
road trip.
just smile.
golden hr.
the drip.
{/* Mascot — Kona surfing, bottom-right, peeking */} Kona {/* Coco mascot — top-right, smaller sidekick */} Coco
golden hour, always.
); const Ticker = ({ phrases }) => (
{[...phrases, ...phrases, ...phrases].map((p, i) => ( {p.script ? {p.script} : {p.txt}} ))}
); // Three big category cards: tanning, aftersun, sunblock. const CategoryCards = () => { const cards = [ { slug: 'tanning', tone: 'tanning', soul: true, index: 'CATEGORY · 01 — Brand Soul', name: 'Tanning', script: 'a golden ritual', desc: 'Coconut tanning oils and accelerators that deepen your color while keeping skin nourished. Caramel skin, sunset moods, the scent of every beach day you\'ll remember.', meta: '4 PRODUCTS · START ฿245', cta: 'Enhance Your Glow', img: 'assets/products/coconut-tanning-oil.png', bg: 'radial-gradient(circle at 80% 10%, rgba(247, 223, 77, 0.5) 0%, transparent 50%), linear-gradient(160deg, #E78930 0%, #B85C12 100%)', fg: 'var(--paper)', scriptColor: 'var(--sun)', }, { slug: 'aftersun', tone: 'aftersun', index: 'CATEGORY · 02', name: 'After\nsun', script: 'the cool down', desc: 'Aloe and coconut aftersun lotions and gels. Recover overnight, wake up glowing.', meta: '2 PRODUCTS · START ฿245', cta: 'Soothe After Sun', img: 'assets/products/after-sun.png', bg: 'radial-gradient(circle at 10% 90%, rgba(247, 223, 77, 0.3) 0%, transparent 50%), linear-gradient(160deg, #FCD5B6 0%, #F4BE92 100%)', fg: 'var(--brown)', scriptColor: 'var(--orange)', }, { slug: 'sunblock', tone: 'sunblock', index: 'CATEGORY · 03', name: 'Sun\nblock', script: 'the enabler', desc: 'High-performance sunblock from SPF 15 to SPF 50+. Stay out longer, worry less.', meta: '3 PRODUCTS · START ฿285', cta: 'Protect Your Skin', img: 'assets/products/sunblock-spf50.png', bg: 'radial-gradient(circle at 80% 80%, rgba(247, 223, 77, 0.3) 0%, transparent 50%), linear-gradient(160deg, #6E83A0 0%, #465975 100%)', fg: 'var(--paper)', scriptColor: 'var(--sun)', }, ]; return (
{cards.map(c => ( { e.currentTarget.style.transform = 'translateY(-4px)'; e.currentTarget.style.boxShadow = 'var(--shadow-lg)'; }} onMouseOut={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'var(--shadow-md)'; }} > {c.soul &&
the soul ★
}
{c.index}

{c.name} {c.script}

{c.desc}

{c.meta}
{c.cta}
→
 ))}
); }; Object.assign(window, { Nav, TopBar, Hero, Ticker, CategoryCards });