// Hawaiian Style — Sun School page components. // Educational content hub. Reuses Primitives.jsx + Nav + TopBar + Footer. // Per Brand Book §17: Facebook is the educational channel — UV ed, tanning // tips, SPF guidance. Sun School is the on-site equivalent. const SunSchoolHero = () => (
Sun School · est. 1995 · class is in session

Everything we
learned in thirty
summers.

Tanning tips. SPF maths. Aftercare rituals. UV index decoded. Everything we've picked up between Phuket and Pattaya — written down, finally.

เรียนรู้ทุกอย่างเรื่องแสงแดด การเลือก SPF และการดูแลผิวหลังออกแดด

Read the basics Today's UV
{[ { num: '37', lbl: 'Articles in the archive' }, { num: '3 min', lbl: 'Average read time' }, { num: 'Free', lbl: 'Always · forever · no signup' }, ].map(m => (
{m.num}
{m.lbl}
))}
{/* Visual: Kona in classroom / book pose, on bright sun panel */}
{/* Floating "stickers" — fact cards */}
Fact 01
SPF 30 blocks ~97%
of UVB rays.
Fact 02
Reapply every 2 hrs
or after a swim.
Fact 03
Coconut + Aloe = ❤
nature's pair.
{/* Kona reading */} Kona
); // Featured article — full-width card with big imagery + tags + read time. const FeaturedArticle = ({ article }) => ( ); // Article grid — 6 smaller cards organised by category. const ArticleGrid = ({ articles }) => (
Six lessons
before tomorrow's beach. } right="From sun protection basics to the perfect aftercare ritual. Pick one, save the rest for the next rainy afternoon." />
{articles.map((a, i) => ( { e.currentTarget.style.transform = 'translateY(-4px)'; e.currentTarget.style.boxShadow = 'var(--shadow-md)'; }} onMouseOut={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; }} >
{a.tag} {a.read}
{a.category}

{a.title}

{a.excerpt}

By {a.author} Read →
))}
); // UV-index quick reference — fun playground card with current Bangkok UV // and an "if it's X, do Y" lookup table. // // Today's UV reading is fetched live from Open-Meteo (free, no API key) for // Bangkok (lat 13.75, lon 100.52) once per page load. If the fetch fails we // fall back to a sensible "Very High" default so the card always tells a story. const UVIndexCard = () => { const { useState, useEffect } = React; const levels = [ { range: '0–2', name: 'Low', color: '#7D9A5C', advice: 'SPF 15 is plenty. Hat optional.' }, { range: '3–5', name: 'Moderate', color: '#F7DF4D', advice: 'SPF 30. Hat and shades.' }, { range: '6–7', name: 'High', color: '#E89236', advice: 'SPF 50, reapply every 90 min.' }, { range: '8–10',name: 'Very High', color: '#D8721D', advice: 'SPF 50+, seek shade 11–3 PM.' }, { range: '11+', name: 'Extreme', color: '#C8362C', advice: 'SPF 50+, cover up, postpone the beach.' }, ]; // Map a numeric UV value → which level bucket + a friendly tagline. const classify = (uv) => { if (uv <= 2) return { name: 'Low', color: '#7D9A5C', tag: 'SPF 15 will do.' }; if (uv <= 5) return { name: 'Moderate', color: '#F7DF4D', tag: 'SPF 30 today.' }; if (uv <= 7) return { name: 'High', color: '#E89236', tag: 'SPF 50, reapply.' }; if (uv <= 10) return { name: 'Very High', color: '#D8721D', tag: 'full SPF 50, friend.' }; return { name: 'Extreme', color: '#C8362C', tag: 'cover up, postpone the beach.' }; }; // Fallback shown before fetch resolves or if the API is unreachable. const FALLBACK = { uv: 9, ...classify(9), date: null }; const [uvNow, setUvNow] = useState(FALLBACK); useEffect(() => { let cancelled = false; const url = 'https://api.open-meteo.com/v1/forecast' + '?latitude=13.75&longitude=100.52' + '&daily=uv_index_max&timezone=Asia%2FBangkok&forecast_days=1'; fetch(url) .then(r => r.ok ? r.json() : Promise.reject(new Error('UV fetch failed'))) .then(data => { if (cancelled) return; const raw = data?.daily?.uv_index_max?.[0]; const day = data?.daily?.time?.[0]; if (typeof raw !== 'number') return; // keep fallback const uv = Math.round(raw); setUvNow({ uv, ...classify(uv), date: day }); }) .catch(() => { /* keep fallback silently */ }); return () => { cancelled = true; }; }, []); // Format the API date (YYYY-MM-DD) as "15 May"; fall back to today. const dateLabel = (() => { const d = uvNow.date ? new Date(uvNow.date + 'T00:00:00') : new Date(); return d.toLocaleDateString('en-GB', { day: 'numeric', month: 'short' }); })(); return (
Quick Reference · Bangkok

Today's UV.
read it. respect it.

The UV index is just a number — but it tells you exactly how much sunscreen you need today.

Today · {dateLabel} {uvNow.uv} {uvNow.name} {uvNow.tag}
{levels.map((l) => (
{l.range} {l.name} {l.advice}
))}
); }; // Newsletter / Kona Club call-to-action specific to Sun School. const KonaClubEmailCTA = () => (
Kona Club · Sun School Email

One summer-ready
email a month.

One new Sun School lesson, plus members-only discounts and early bottle drops. Twice a month, never more. Free to leave whenever you head home.

{ e.preventDefault(); alert('Aloha! You\'re in.'); }} style={{ marginTop: 24, display: 'flex', gap: 10, flexWrap: 'wrap' }}> Join the class

No spam · unsubscribe in one click · ★ 4.8 from 2,400+ subscribers

Kona
see you in class!
); Object.assign(window, { SunSchoolHero, FeaturedArticle, ArticleGrid, UVIndexCard, KonaClubEmailCTA });