// Hawaiian Style — FAQ page components. // Customer-service hub. Index-card / library register: typewriter labels, // hand-numbered questions, mascot helpers. Reuses Primitives + Nav + Footer. // Source data is verbatim from the brand's official customer-question doc // (FAQ.xlsx). Citations like "(American Academy of Dermatology)" are split // out at render time and rendered as a small source footnote. // ---- helpers -------------------------------------------------------------- // Pull a trailing "( ... )" attribution off an answer (if present) and // return { body, source }. The source string drops the parens. const splitSource = (text) => { const m = text.match(/\s*\(([^()]+)\)\s*$/); if (!m) return { body: text, source: null }; return { body: text.slice(0, m.index).trim(), source: m[1].trim() }; }; // ---- data ----------------------------------------------------------------- const FAQ_DATA = [ { id: 'sun', label: 'Sun & SPF', eyebrow: 'Class 01 · Protection', title: 'Sun & SPF', script: 'the basics.', blurb: 'Everything about sun protection — what SPF means, how often to reapply, who can use it, and where to keep the bottle when you\u2019re not.', mascot: 'assets/mascots/kona-lotion-sunblock.png', accent: 'var(--blue)', pillBg: 'var(--blue)', pillFg: 'var(--paper)', items: [ { q: 'What does SPF mean?', a: 'SPF mainly refers to protection against UVB rays, which are the rays strongly linked with sunburn. SPF 15 filters about 93% of UVB rays, SPF 30 about 97%, and SPF 50 about 98%, when used correctly. (The Skin Cancer Foundation)' }, { q: 'Is SPF50 much stronger than SPF30?', a: 'SPF50 blocks slightly more UVB than SPF30, but the key is applying enough and reapplying regularly. Higher SPF does not mean you can stay in the sun all day without reapplying. AAD states SPF30 blocks 97% of UVB rays, higher SPFs block slightly more, and no sunscreen blocks 100%. (American Academy of Dermatology)' }, { q: 'How often should I reapply sunscreen?', a: 'Reapply sunscreen about every 2 hours when outdoors, and immediately after swimming or sweating. AAD recommends reapplying every two hours and immediately after swimming or sweating. (American Academy of Dermatology)' }, { q: 'How much sunscreen should I apply?', a: 'For most adults, AAD recommends about 1 ounce for exposed body skin, roughly a shot-glass amount. For the face, use at least 1 teaspoon or about two-finger length. (American Academy of Dermatology)' }, { q: 'Should I apply sunscreen before going outside?', a: 'Yes. Apply sunscreen to dry skin before sun exposure. AAD recommends applying sunscreen to dry skin 15 minutes before going outdoors. (American Academy of Dermatology)' }, { q: 'Does sunscreen protect from UVA and UVB?', a: 'Broad-spectrum sunscreen protects against both UVA and UVB. UVA is linked with premature skin aging, while UVB is the primary cause of sunburn. (American Academy of Dermatology)' }, { q: 'Is Hawaiian Style sunscreen waterproof?', a: 'No sunscreen should be described as fully \u201Cwaterproof.\u201D Sunscreens may be water-resistant for a stated time if the product label supports it. AAD notes that no sunscreen is \u201Cwaterproof\u201D or \u201Csweatproof.\u201D (American Academy of Dermatology)' }, { q: 'Is Hawaiian Style Sunblock suitable for face and body?', a: 'For Hawaiian Style Sunblock products, the brand\u2019s product direction is face and body use. Please check the specific label direction before use.' }, { q: 'Is it suitable for all skin types?', a: 'Our sunblock products are designed for general use, but skin reaction can vary by person. If you have sensitive skin, allergies, or a medical skin condition, please check the ingredient list and do a patch test first.' }, { q: 'Can children use it?', a: 'Please check the product label and use as directed. For babies under 6 months, AAD says sunscreen should ideally be avoided unless shade and protective clothing are not available; parents should ask a doctor. (American Academy of Dermatology)' }, { q: 'Can pregnant women use it?', a: 'Please check the ingredient list with your doctor or pharmacist before use, especially during pregnancy or breastfeeding.' }, { q: 'Can I use it around the eyes?', a: 'Avoid direct contact with eyes. If product gets into the eyes, rinse thoroughly with clean water.' }, { q: 'Does sunscreen expire?', a: 'Please check the expiry date printed on the product. AAD notes the FDA requires sunscreens to retain original strength for at least three years, and any obvious change in color or consistency means the product should be replaced.' }, { q: 'How should I store sunscreen?', a: 'Store in a cool, dry place and avoid direct sunlight or high heat. AAD notes that leaving sunscreen in direct sunlight or hot environments, such as inside a car, can speed up ingredient breakdown. (American Academy of Dermatology)' }, ], }, { id: 'tan', label: 'Tanning Oil & Glow', eyebrow: 'Class 02 · The Soul', title: 'Tanning oil & glow', script: 'golden hour.', blurb: 'The brand soul. How tanning oil works, how to pair it with SPF, when to come back inside, and which oil suits which mood.', mascot: 'assets/mascots/kona-lotion-tanning.png', accent: 'var(--orange)', pillBg: 'var(--orange)', pillFg: 'var(--paper)', items: [ { q: 'What is tanning oil for?', a: 'Tanning oil is designed to help create a glowing, sun-kissed tanning experience when used during sun exposure.' }, { q: 'Does tanning oil make skin tan instantly?', a: 'No. Hawaiian Style tanning oil is not an instant self-tanner. It is used while sunbathing to support a golden tan from sun exposure.' }, { q: 'Can I use tanning oil instead of sunscreen?', a: 'We do not recommend replacing sunscreen with tanning oil if your goal is sun protection. Tanning oil is for tanning/glow experience; sunscreen is for UV protection.' }, { q: 'Can I apply SPF50 first, then tanning oil?', a: 'Yes, you may apply sunscreen first for protection, let it absorb, then apply tanning oil on top. However, sunscreen may slow tanning because it reduces UV exposure. Reapply sunscreen regularly as directed.' }, { q: 'Will sunscreen make me unable to tan?', a: 'Sunscreen reduces UV exposure, so tanning may happen more slowly. It does not create a total UV block because no sunscreen blocks 100% of UV rays. AAD states no sunscreen blocks 100% of UVB rays. (American Academy of Dermatology)' }, { q: 'How long should I sunbathe?', a: 'We cannot recommend a fixed tanning time because it depends on UV index, skin type, location, time of day, and product use. Start carefully, avoid intense midday sun, and stop if skin turns red or uncomfortable.' }, { q: 'Is tanning safe?', a: 'UV tanning is a sign of skin reacting to UV radiation. AAD states there is no safe way to tan and that every tan damages skin. (American Academy of Dermatology)' }, { q: 'Can I use tanning oil on my face?', a: 'Please check the product label. If you have acne-prone, sensitive, or oily skin, avoid using oil on the face or patch test first.' }, { q: 'Will tanning oil stain clothes?', a: 'Oil products may transfer to fabric. Allow the product to absorb and avoid direct contact with light-colored clothing or towels.' }, { q: 'Does Coconut Tanning Oil smell like coconut?', a: 'The product direction includes coconut-themed scent/experience. For exact scent notes, check the current product label or product page.' }, { q: 'What is the difference between Coconut Tanning Oil and Classic Tanning Oil?', a: 'Coconut Tanning Oil focuses on a coconut-style tanning experience, while Classic Tanning Oil gives a more classic tanning oil experience. For exact scent, ingredient, and texture differences, please check the latest product label or catalog.' }, ], }, { id: 'shop', label: 'Buying & Shipping', eyebrow: 'Class 03 · Where to find us', title: 'Buying & shipping', script: 'we ship.', blurb: 'Where to grab a bottle locally, what we can do internationally, and what to do if your parcel shows up a little worse for wear.', mascot: 'assets/mascots/kona-run.png', accent: 'var(--aloha)', pillBg: 'var(--aloha)', pillFg: 'var(--paper)', items: [ { q: 'Where can I buy Hawaiian Style?', a: 'You can buy from our official online channels and selected retail stores. Current retail channels include 7-Eleven, Tops, Central, Gourmet Market, Foodland, and local drug stores.' }, { q: 'Is it available in every 7-Eleven?', a: 'Availability may vary by branch and area. Please share your location or preferred branch, and we will help check if possible.' }, { q: 'Do you have retailers in UAE / Malaysia / Singapore / Philippines?', a: 'Retail availability depends on country. Please tell us your country and we will check the latest available channel or official online store for you.' }, { q: 'Can you ship internationally?', a: 'We may be able to arrange international shipping depending on destination, courier availability, and shipping cost. Please share your country, product quantity, and address area so we can check.' }, { q: 'Why is international shipping expensive?', a: 'International shipping cost depends on destination, parcel weight, courier, fuel surcharge, and customs process. We can check the most suitable option for you.' }, { q: 'How long does delivery take?', a: 'Delivery time depends on destination and courier. Please share your order location so we can check the estimated delivery time.' }, { q: 'Can I return or exchange the product?', a: 'Return/exchange depends on where you purchased the product and the condition of the item. Please send your order details, purchase channel, receipt, photos, and issue description so we can check.' }, { q: 'Product arrived damaged. What should I do?', a: 'Please send clear photos/videos of the parcel box, product condition, shipping label, order number, and purchase channel. Our team will check and support according to the case.' }, ], }, ]; // ---- HERO ----------------------------------------------------------------- const FAQHero = ({ totalQs, onJump }) => (
{/* LEFT TEXT */}
Customer Service · Honest Answers · est. 1995

Got questions?
we got you.

Thirty-three plain-English answers about sunscreen, tanning oil, and how to get a bottle to your door — written by the same people who answer Hawaiian Style{'\u2019'}s DMs at 11 PM.

คำถามที่พบบ่อย เรื่องครีมกันแดด น้ำมันมะพร้าวอาบแดด และการจัดส่ง

{ e.preventDefault(); onJump('sun'); }} href="#sun">Sun & SPF { e.preventDefault(); onJump('tan'); }} href="#tan">Tanning oil { e.preventDefault(); onJump('shop'); }} href="#shop">Buying & shipping
{[ { num: totalQs, lbl: 'Questions answered' }, { num: '3', lbl: 'Categories · all bilingual' }, { num: '< 24h', lbl: 'Reply time on DMs' }, ].map(m => (
{m.num}
{m.lbl}
))}
{/* RIGHT VISUAL: index-card stack on warm sun panel */}
{/* The stacked index cards */} {[ { rot: -7, top: 60, left: 60, bg: 'var(--paper)', q: 'How often do I reapply?', a: 'Every 2 hrs, friend.' }, { rot: 4, top: 170, left: 130, bg: 'var(--sun)', q: 'Can I tan with SPF on?', a: 'Yes — just slower.' }, { rot: -3, top: 290, left: 50, bg: 'var(--paper-soft)',q: 'Do you ship to Manila?', a: 'Tell us your zip.' }, ].map((c, i) => (
Q · {String(i + 1).padStart(2, '0')} ?
{c.q}
{c.a}
))} {/* Coco bottom-right peeking */} Coco
); // ---- SEARCH BAR ----------------------------------------------------------- const FAQSearch = ({ query, onChange, resultCount, totalCount }) => (
onChange(e.target.value)} placeholder={'Search the FAQ \u2014 try \u201CSPF\u201D, \u201Cwaterproof\u201D, \u201Cship to Manila\u201D\u2026'} style={{ flex: 1, padding: '14px 0', border: 'none', outline: 'none', background: 'transparent', fontFamily: 'var(--font-body)', fontSize: 16, color: 'var(--brown)', minWidth: 0, }} /> {query && ( )} {query ? `${resultCount} / ${totalCount}` : `${totalCount} total`}
); // ---- CATEGORY GROUP + ACCORDION ------------------------------------------ const FAQItem = ({ index, q, a, accent, defaultOpen }) => { const { useState } = React; const [open, setOpen] = useState(!!defaultOpen); const { body, source } = splitSource(a); return (
A

{body}

{source && (
Source · {source}
)}
); }; const FAQGroup = ({ group, query }) => { const items = group.items; return (
{/* Section head */}
{group.eyebrow}

{group.title} {group.script}

{group.blurb}

{items.length} question{items.length === 1 ? '' : 's'}
{/* Accordion list — wrapped in a "ledger" card */}
{/* Top "ledger" header row */}
No. Customer Question Open
{items.length === 0 ? (
No matches in this section.
) : items.map((it, i) => ( ))}
); }; // ---- CONTACT CTA ---------------------------------------------------------- const FAQContact = () => (
Still curious? · We reply by hand

Didn{'\u2019'}t find your
answer?

Slide into our DMs, ping us on LINE, or send a postcard-length email. Real humans, usually back within a day, Bangkok time.

Email contact@ DM on Instagram Message on Facebook
{[ { lbl: 'Office hours', val: 'Mon \u2013 Fri · 9 \u2013 6 ICT' }, { lbl: 'Reply time', val: 'Under 24 hrs · usually' }, { lbl: 'Wholesale', val: ['sahatavesin@hotmail.com', 'setawut@sahatavesin.co.th'] }, ].map(c => (
{c.lbl}
{Array.isArray(c.val) ? c.val.map((v, i) =>
{v}
) : c.val}
))}
{/* Right: Kona with phone-mascot vibe */}
DM \u00B7 just now
Hey, can you ship to Cebu?
Kona \u00B7 reply
yes, we got you.
Kona
); // ---- TOP-LEVEL PAGE ------------------------------------------------------- const FAQPage = () => { const { useState, useMemo } = React; const [query, setQuery] = useState(''); const total = useMemo(() => FAQ_DATA.reduce((s, g) => s + g.items.length, 0), []); const filtered = useMemo(() => { const q = query.trim().toLowerCase(); if (!q) return FAQ_DATA; return FAQ_DATA.map(g => ({ ...g, items: g.items.filter(it => it.q.toLowerCase().includes(q) || it.a.toLowerCase().includes(q) ), })); }, [query]); const resultCount = filtered.reduce((s, g) => s + g.items.length, 0); const handleJump = (id) => { const el = document.getElementById(id); if (!el) return; const top = el.getBoundingClientRect().top + window.pageYOffset - 80; window.scrollTo({ top, behavior: 'smooth' }); }; return ( <> {filtered.map(g => ( ))} ); }; Object.assign(window, { FAQPage });