/* global React */
const { useState, useRef, useEffect } = React;
const EXTERNAL_ROUTES = {
blog: "/blog",
freeColoringPages: "/free-coloring-pages",
};
// ------- Sparkle / star icons (inline SVG) -------
const Sparkle = ({ size = 14, color = "currentColor" }) => (
);
const StarSolid = ({ size = 14, color = "currentColor" }) => (
);
const HeadphonesIcon = ({ size = 18, color = "currentColor" }) => (
);
const CartIcon = ({ size = 18 }) => (
);
const MenuIcon = ({ size = 22 }) => (
);
const ChevronRight = ({ size = 16 }) => (
);
const Close = ({ size = 18 }) => (
);
function useIsNarrow(maxWidth = 720) {
const getMatches = () => (
typeof window !== "undefined"
? window.matchMedia(`(max-width: ${maxWidth}px)`).matches
: false
);
const [matches, setMatches] = useState(getMatches);
useEffect(() => {
if (typeof window === "undefined") return undefined;
const query = window.matchMedia(`(max-width: ${maxWidth}px)`);
const update = () => setMatches(query.matches);
update();
query.addEventListener?.("change", update);
return () => query.removeEventListener?.("change", update);
}, [maxWidth]);
return matches;
}
// ------- Logo (inline SVG so it scales) -------
const Logo = ({ color = "var(--lwc-navy-900)", accent = "var(--lwc-gold-500)", height = 28 }) => (
);
// ------- Button -------
const Button = ({ variant = "primary", size = "md", icon, children, onClick, style, ...rest }) => {
const base = {
display: "inline-flex", alignItems: "center", gap: 8,
fontFamily: "var(--font-sans)", fontWeight: 700, letterSpacing: "0.01em",
borderRadius: 999, border: "none", cursor: "pointer",
maxWidth: "100%", minWidth: 0, whiteSpace: "normal", textAlign: "center",
transition: "background var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out)",
};
const sizes = {
sm: { padding: "8px 16px", fontSize: 13 },
md: { padding: "13px 26px", fontSize: 15 },
lg: { padding: "16px 32px", fontSize: 16 },
};
const variants = {
primary: {
background: "var(--lwc-gold-500)", color: "var(--lwc-navy-900)",
boxShadow: "0 1px 2px rgba(20,33,61,.06), 0 6px 16px rgba(184,134,46,.22)",
},
secondary: {
background: "var(--lwc-navy-700)", color: "var(--lwc-cream-50)",
},
ghost: {
background: "transparent", color: "var(--lwc-navy-900)",
border: "1.5px solid var(--lwc-navy-700)",
},
text: {
background: "transparent", color: "var(--lwc-navy-900)",
textDecoration: "underline", textUnderlineOffset: 4,
padding: "8px 12px",
},
};
return (
);
};
// ------- AnnouncementBar -------
const AnnouncementBar = () => (
Every book pairs with a custom audio adventure — narrated, with music & sound effects.
);
// ------- Header -------
const Header = ({ cartCount, onCart, onLogo, onBrowse, onNavigate }) => {
const isMobile = useIsNarrow();
const [menuOpen, setMenuOpen] = useState(false);
const closeMenu = () => setMenuOpen(false);
const navItems = [
{ label: "Shop books", href: "/books" },
{ label: "How it works", action: () => onNavigate && onNavigate("faq") },
{ label: "The audio", action: () => onNavigate && onNavigate("home") },
{ label: "Blog", href: EXTERNAL_ROUTES.blog },
{ label: "Free coloring pages", href: EXTERNAL_ROUTES.freeColoringPages },
{ label: "Shipping", action: () => onNavigate && onNavigate("delivery") },
];
const navLinkStyle = {
color: "var(--fg-primary)",
cursor: "pointer",
textDecoration: "none",
lineHeight: 1.35,
};
return (
);
};
// ------- Book mock (used in product cards and hero) -------
// Auto-size the script name so it always fits the cover.
// Sizes are in cqi (% of BookMock width) so they shrink proportionally with the card.
// Caveat avg char width ≈ 0.5em, usable inline budget ≈ 70cqi after padding.
function fitNameSize(name) {
const len = Math.max(1, (name || "").trim().length);
// Empirical: aim for total text width ≈ 70cqi. Cap at 34cqi so short names don't blow out.
const cqi = Math.min(34, 145 / len);
return `${cqi.toFixed(2)}cqi`;
}
const NAME_MAX = 14;
function useCoverCrossfade(coverImage) {
const [displayCoverImage, setDisplayCoverImage] = useState(coverImage || "");
const [incomingCoverImage, setIncomingCoverImage] = useState(null);
const [incomingVisible, setIncomingVisible] = useState(false);
useEffect(() => {
if (!coverImage) {
setDisplayCoverImage("");
setIncomingCoverImage(null);
setIncomingVisible(false);
return undefined;
}
if (!displayCoverImage) {
setDisplayCoverImage(coverImage);
return undefined;
}
if (coverImage === displayCoverImage) {
setIncomingCoverImage(null);
setIncomingVisible(false);
return undefined;
}
let cancelled = false;
const image = new window.Image();
image.onload = () => {
if (cancelled) return;
setIncomingCoverImage(coverImage);
window.requestAnimationFrame(() => {
if (!cancelled) setIncomingVisible(true);
});
};
image.src = coverImage;
return () => {
cancelled = true;
};
}, [coverImage, displayCoverImage]);
useEffect(() => {
if (!incomingVisible || !incomingCoverImage) return undefined;
const timer = window.setTimeout(() => {
setDisplayCoverImage(incomingCoverImage);
setIncomingCoverImage(null);
setIncomingVisible(false);
}, 220);
return () => window.clearTimeout(timer);
}, [incomingVisible, incomingCoverImage]);
return {
displayCoverImage,
incomingCoverImage,
incomingVisible,
};
}
const CoverArcText = ({ text, idSuffix, y = 46, curveDepth = 18, fontSize = 24, letterSpacing = "0.18em", color = "var(--lwc-gold-300)", fontStyle = "normal", fontFamily = "var(--font-sans)", fontWeight = 700 }) => {
const pathId = `cover-arc-${idSuffix}`;
return (
);
};
const BookMock = ({ name, title, accent = "var(--lwc-gold-300)", width = "60%", label = "The adventures of", coverImage, coverCallout, ageRange, nameFont }) => {
const display = (name || "").slice(0, NAME_MAX);
const font = nameFont || {};
const {
displayCoverImage,
incomingCoverImage,
incomingVisible,
} = useCoverCrossfade(coverImage);
const activeCoverImage = displayCoverImage || coverImage;
const nameLength = display.trim().length;
let subtitleY = 27.8;
let dividerTop = "23.8%";
if (nameLength <= 4) {
subtitleY = 30.4;
dividerTop = "25.9%";
} else if (nameLength <= 6) {
subtitleY = 29.5;
dividerTop = "25%";
} else if (nameLength <= 8) {
subtitleY = 29.3;
dividerTop = "25.1%";
} else if (nameLength <= 10) {
subtitleY = 28.7;
dividerTop = "24.3%";
}
return (
{activeCoverImage && (
)}
{incomingCoverImage && (
)}
{activeCoverImage && (
)}
{activeCoverImage ? (
<>
) : (
{label}
{display}
{title}
)}
{activeCoverImage && coverCallout && (
)}
{activeCoverImage && ageRange && (
)}
{!(value || "").trim() && (
{placeholder}{dots}
)}
onChange(e.target.value.slice(0, NAME_MAX))}
onFocus={onFocus}
onBlur={onBlur}
style={{
position: "relative", zIndex: 1,
flex: 1, border: "none", outline: "none", background: "transparent",
fontFamily: "var(--font-script)", fontSize: isMobile ? 30 : 36, lineHeight: 1.05,
color: "var(--brand-primary)", padding: "4px 0 0", minWidth: 0,
}}/>
{len}/{NAME_MAX}
{!isMobile && }
);
};
// ------- Category chips -------
const CategoryChips = ({ themes, active, onPick }) => (
{themes.map(t => {
const isActive = active === t.id;
return (
);
})}
);
const CharacterSelector = ({ characters, selectedId, onSelect, name = "Emma", title = "in the fairy glen", nameFont, previewImages, showGenderToggle = true }) => {
const selected = characters.find(c => c.id === selectedId) || characters[0];
const gender = selected.gender;
const visible = characters.filter(c => c.gender === gender);
const displayName = (name || "Emma").slice(0, NAME_MAX);
const font = nameFont || {};
return (
Choose their cover character
{showGenderToggle && (
{["girl", "boy"].map(option => {
const isActive = gender === option;
const firstForGender = characters.find(c => c.gender === option);
return (
);
})}
)}
{visible.map(character => {
const isActive = character.id === selectedId;
const previewImage = previewImages?.[character.id] || character.coverImage;
return (
);
})}
);
};
const NameFontSelector = ({ fonts, selectedId, onSelect, name = "Emma" }) => (
Choose name style
{fonts.map(font => {
const isActive = font.id === selectedId;
return (
);
})}
);
// ------- Product card -------
const ProductCard = ({ book, name = "Ava", onOpen, character, coverImage, nameFont, audioDemo, audioActive, onAudioToggle }) => {
const cs = book.comingSoon;
const resolvedCoverImage = coverImage || book.coverImage || character?.coverImage;
const hasAudio = Boolean(audioDemo && !cs);
const supportingLine = cs
? "Notify me when it launches"
: book.category === "adventure"
? "Optional narrated audio companion available"
: "Personalized printed gift book";
return (
{ if (cs) return; e.currentTarget.style.transform = "translateY(-4px)"; e.currentTarget.style.boxShadow = "var(--shadow-lift)"; }}
onMouseLeave={e => { if (cs) return; e.currentTarget.style.transform = ""; e.currentTarget.style.boxShadow = "var(--shadow-card)"; }}>
{book.badge && (
{book.badge}
)}
{book.title}
${book.price.toFixed(2)}
{book.pages} pages · {book.theme}
{book.category === "adventure" && !cs
?
: }
{supportingLine}
{audioActive && audioDemo && (
"{audioDemo.script}"
)}
{cs && (
)}
);
};
// ------- Audio explainer -------
const AudioExplainer = () => {
const isMobile = useIsNarrow();
return (
The audio adventure
Listen along while you color.
Each book pairs with an immersive audio story — a professional narrator, music,
and sound effects, telling their story scene-by-scene as they color.
{[
"20+ minutes per book, scene-by-scene",
"Headphone-friendly, screen-free",
"Quiet time that builds fine motor skills",
].map(t => (
-
{t}
))}
{[18, 30, 24, 38, 26, 34].map((height, index) => (
))}
Amelia in the Fairy Glen
0:42 / 22:18
);
};
function getDemoForCharacter(demos, character, bookId = "fairy-glen") {
const bookDemos = demos?.[bookId] || demos?.["fairy-glen"] || demos;
return bookDemos?.[character?.gender || "girl"] || bookDemos?.girl;
}
const AudioDemo = ({ character, demos }) => {
const [mode, setMode] = useState(character?.gender || "girl");
const [playing, setPlaying] = useState(false);
const [missing, setMissing] = useState(false);
const audioRef = useRef(null);
const bookDemos = demos?.["fairy-glen"] || demos;
const demo = bookDemos[mode] || bookDemos.girl;
useEffect(() => {
setMode(character?.gender || "girl");
}, [character?.gender]);
useEffect(() => {
setPlaying(false);
setMissing(false);
if (audioRef.current) {
audioRef.current.pause();
audioRef.current.currentTime = 0;
}
}, [mode]);
function toggleAudio() {
const audio = audioRef.current;
if (!audio) return;
if (playing) {
audio.pause();
setPlaying(false);
return;
}
setMissing(false);
audio.play()
.then(() => setPlaying(true))
.catch(() => {
setPlaying(false);
setMissing(true);
if ("speechSynthesis" in window) {
window.speechSynthesis.cancel();
const utterance = new SpeechSynthesisUtterance(demo.script);
utterance.rate = 0.92;
utterance.pitch = mode === "girl" ? 1.08 : 0.92;
window.speechSynthesis.speak(utterance);
}
});
}
return (
Try the audio
Hear the story come alive.
A narrated scene gives children a gentle prompt while they colour the matching page.
{["girl", "boy"].map(option => (
))}
);
};
// ------- Trust bar -------
const TrustBar = ({ items }) => {
const isMobile = useIsNarrow();
return (
{items.map(it => (
{it.label}
{it.sub}
))}
);
};
// ------- Testimonial -------
const TestimonialBlock = ({ reviews }) => {
const isMobile = useIsNarrow();
return (
Loved by parents
The first thing they reach for after breakfast.
{reviews.map((r, i) => (
{Array.from({ length: r.rating }).map((_, n) => )}
"{r.body}"
— {r.name}
))}
);
};
// expose
Object.assign(window, {
Sparkle, StarSolid, HeadphonesIcon, CartIcon, ChevronRight, Close,
Logo, Button, AnnouncementBar, Header, BookMock, NameInput, useIsNarrow,
CategoryChips, CharacterSelector, NameFontSelector, ProductCard, AudioExplainer, AudioDemo, TrustBar,
TestimonialBlock, Footer, AudioUpsell, AudioUpsellPlayer, getDemoForCharacter,
});