/* Shared chrome: Header, Footer, StickyCTA, brand atoms */ const { useState, useEffect, useRef, useMemo } = React; /* ---- Wordmark ---- */ const Wordmark = ({ size = 'md', onClick }) => { const s = { sm: 'text-base', md: 'text-[17px]', lg: 'text-xl' }[size] || 'text-[17px]'; return ( { e.preventDefault(); onClick && onClick(); }}> SpecEagle ); }; /* ---- Theme context-ish (just a hook reading ) ---- */ const useTheme = () => { const [dark, setDark] = useState(() => document.documentElement.classList.contains('dark')); useEffect(() => { const obs = new MutationObserver(() => setDark(document.documentElement.classList.contains('dark'))); obs.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] }); return () => obs.disconnect(); }, []); const toggle = () => document.documentElement.classList.toggle('dark'); return [dark, toggle]; }; /* ---- Tag chip ---- */ const Chip = ({ children, tone = 'default', icon = null, className = '' }) => { const tones = { default: 'bg-paper-soft dark:bg-d-surface text-ink-soft dark:text-d-muted border-line dark:border-d-border', amber: 'bg-amber-brand/[0.08] dark:bg-amber-warm/[0.1] text-amber-brand dark:text-amber-warm border-amber-brand/20 dark:border-amber-warm/20', ink: 'bg-ink text-white border-ink dark:bg-white dark:text-ink dark:border-white', win: 'bg-win/10 text-win dark:text-win-dark border-win/20', }; return ( {icon} {children} ); }; /* ---- Header ---- */ const Header = ({ page, setPage, onOpenLang }) => { const [dark, toggleDark] = useTheme(); const { lang, t } = useLang(); const [scrolled, setScrolled] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 4); onScroll(); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); const nav = [ { label: t('nav.phones'), key: 'phones' }, { label: t('nav.compare'), key: 'compare' }, { label: t('nav.best'), key: 'best' }, { label: t('nav.brands'), key: 'brands' }, { label: t('nav.news'), key: 'news' }, ]; return (
setPage('home')} />
); }; /* ---- StickyCTA ---- */ const StickyCTA = ({ onCompare }) => { const { t } = useLang(); const [expanded, setExpanded] = useState(false); return (
{!expanded ? ( ) : (
A
vs
B
)}
); }; /* ---- Footer ---- */ const Footer = ({ setPage, onOpenLang }) => { const { lang, t } = useLang(); const cols = [ { h: 'Phones', links: [ { label: 'All phones', to: 'list.all' }, { label: 'Latest releases', to: 'list.latest' }, { label: 'Upcoming', to: 'list.upcoming' }, { label: 'Rumors', to: 'list.rumors' }, { label: 'Discontinued', to: 'list.discontinued' }, ], }, { h: 'Compare', links: [ { label: 'Phone vs Phone', to: 'compare' }, { label: 'Best for camera', to: 'best.camera' }, { label: 'Best for gaming', to: 'best.gaming' }, { label: 'Best for battery', to: 'best.battery' }, { label: 'By price', to: 'best.value' }, ], }, { h: 'Best Of', links: [ { label: 'Best 2026', to: 'best' }, { label: 'Best under $500', to: 'best.budget' }, { label: 'Best foldables', to: 'best.foldable' }, { label: 'Best small phones', to: 'best.small' }, { label: 'Best cameras', to: 'best.camera' }, ], }, { h: 'About', links: [ { label: 'Methodology', to: 'content.methodology' }, { label: 'AI Verdict engine', to: 'content.ai-engine' }, { label: 'Editorial standards', to: 'content.editorial' }, { label: 'Press', to: 'content.press' }, { label: 'Careers', to: 'content.careers' }, ], }, ]; return ( ); }; /* ---- PhoneRender placeholder ---- Captioned striped box — explicit "render placeholder" per brief. Optional tint with brand color. */ const PhoneRender = ({ label, size = 'md', tint = 'neutral' }) => { const sizes = { xs: 'h-14 w-10', sm: 'h-20 w-14', md: 'h-44 w-28', lg: 'h-72 w-44', xl: 'h-[360px] w-56', }; const tints = { neutral: 'bg-paper-soft dark:bg-d-surface', amber: 'bg-amber-brand/[0.06] dark:bg-amber-warm/[0.06]', navy: 'bg-navy/[0.06] dark:bg-white/[0.04]', }; return (
{/* camera bar */}
{/* screen */}
{label && (
{label}
)}
); }; /* ---- BrandLogo placeholder (stylized monospace marks) ---- */ const BrandLogo = ({ name, onClick }) => { // Just render the brand name in mono — monochrome — per "logos in monochrome, colorize on hover". // We tint on hover via a simple class swap. return ( ); }; Object.assign(window, { Wordmark, useTheme, Chip, Header, StickyCTA, Footer, PhoneRender, BrandLogo, });