// Certo — Shop Page + Product Detail Page const ConditionBadge = ({ condition }) => ( {condition} ); const ProductCard = ({ product, navigate }) => { const [hovered, setHovered] = React.useState(false); return (
navigate('product', product.id)} onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)} style={{ background: 'var(--bg)', border: '1px solid var(--border)', borderRadius: 20, overflow: 'hidden', cursor: 'pointer', transition: 'all 0.25s', transform: hovered ? 'translateY(-4px)' : 'none', boxShadow: hovered ? '0 16px 40px rgba(0,0,0,0.08)' : '0 2px 8px rgba(0,0,0,0.03)', opacity: product.inStock ? 1 : 0.55, }} >
{!product.inStock && (
OUT OF STOCK
)} {product.featured && product.inStock && (
Popular
)}
{product.badge}

{product.name}

{product.subtitle}

{fmt(product.usdPrice)}
US: ${product.usdPrice.toLocaleString()}
); }; const ShopPage = ({ navigate, addToCart, initialType }) => { const { isMobile } = useResponsive(); const [typeFilter, setTypeFilter] = React.useState(initialType || 'All'); const [condFilter, setCondFilter] = React.useState('All'); const [sort, setSort] = React.useState('featured'); React.useEffect(() => { setTypeFilter(initialType || 'All'); }, [initialType]); const types = ['All', 'iPhone', 'MacBook', 'iPad', 'AirPods', 'Watch', 'Apple TV', 'HomePod', 'Accessories']; const conds = ['All', 'New', 'Refurbished']; let filtered = PRODUCTS .filter(p => typeFilter === 'All' || p.type === typeFilter) .filter(p => condFilter === 'All' || p.condition === condFilter); if (sort === 'price-asc') filtered = [...filtered].sort((a, b) => a.usdPrice - b.usdPrice); if (sort === 'price-desc') filtered = [...filtered].sort((a, b) => b.usdPrice - a.usdPrice); if (sort === 'featured') filtered = [...filtered].sort((a, b) => (b.featured ? 1 : 0) - (a.featured ? 1 : 0)); const FilterBtn = ({ label, active, onClick }) => ( ); return (

Shop Apple

Every product sourced directly from Apple US. {PRODUCTS.filter(p => p.inStock).length} in stock today.

{types.map(t => setTypeFilter(t)} />)}
{conds.map(c => setCondFilter(c)} />)}
{filtered.length === 0 ? (
No products match your filters.
) : (
{filtered.map(p => )}
)}
Naira prices update with the exchange rate
Prices shown are calculated at today's buying rate of ₦{CERTO_RATE.toLocaleString()}/USD. If you pay in naira, the rate at the time of payment applies. We explain this fully at checkout and you confirm it before paying.
); }; // ─── Product Detail ──────────────────────────────────────────────────────────── const ProductDetailPage = ({ productId, navigate, addToCart }) => { const { isMobile } = useResponsive(); const product = PRODUCTS.find(p => p.id === productId) || PRODUCTS[0]; const [selectedCare, setSelectedCare] = React.useState('plus'); const [careBilling, setCareBilling] = React.useState('annual'); const [added, setAdded] = React.useState(false); const [openSections, setOpenSections] = React.useState(new Set()); const [selectedImg, setSelectedImg] = React.useState(0); const realImages = (product.images || []).filter(img => img && (img.startsWith('http') || img.startsWith('/'))); const toggleSection = (key) => setOpenSections(prev => { const next = new Set(prev); next.has(key) ? next.delete(key) : next.add(key); return next; }); const related = PRODUCTS.filter(p => p.id !== product.id && p.inStock).slice(0, isMobile ? 2 : 3); const care = APPLECARE_OPTIONS.find(o => o.id === selectedCare); const careUsd = selectedCare === 'none' ? 0 : careBilling === 'monthly' ? (care.monthlyUsd || 0) : (care.annualUsd || 0); const totalUsd = product.usdPrice + careUsd; const handleAdd = () => { addToCart({ product, applecare: care, billing: selectedCare === 'none' ? null : careBilling }); setAdded(true); setTimeout(() => setAdded(false), 2500); }; const AccordionRow = ({ sectionKey, title, children }) => { const isOpen = openSections.has(sectionKey); return (
{isOpen &&
{children}
}
); }; return (
{/* Left: product display */}
1 ? 12 : 20, overflow: 'hidden', }}> {realImages.length > 0 ? ( {product.name} { e.target.style.display = 'none'; }} /> ) : ( )}
{/* Thumbnail strip — only when multiple images */} {realImages.length > 1 && (
{realImages.map((url, i) => ( ))}
)}
Specs
{product.specs.map(s => (
· {s}
))}
{/* Right: purchase panel */}
{product.badge}

{product.name}

{product.subtitle}

{product.conditionNote}

Certo price
{fmt(product.usdPrice)}
US retail
${product.usdPrice.toLocaleString()}
Rate: ₦{CERTO_RATE.toLocaleString()}/USD ·
{/* AppleCare */}
Coverage with this device
{APPLECARE_OPTIONS.map(opt => { const isSelected = selectedCare === opt.id; const hasAnnual = opt.id === 'plus'; const priceLabel = opt.id === 'none' ? 'Included' : isSelected ? (careBilling === 'monthly' ? `+$${opt.monthlyUsd}/mo` : `+$${opt.annualUsd}/yr`) : hasAnnual ? `from $${opt.monthlyUsd}/mo` : `+$${opt.monthlyUsd}/mo`; return (
{ setSelectedCare(opt.id); if (opt.id === 'one') setCareBilling('monthly'); }} style={{ border: `2px solid ${isSelected ? opt.color : 'var(--border)'}`, borderRadius: 14, padding: 16, cursor: 'pointer', background: isSelected ? `${opt.color}08` : 'var(--bg)', transition: 'all 0.15s', position: 'relative', }}> {opt.recommended && ( RECOMMENDED )} {/* Row: radio + name + price */}
{isSelected &&
}
{opt.name} {opt.tagline}
{priceLabel}
{isSelected && (
{/* Billing toggle — only for AppleCare+ */} {opt.id === 'plus' && (
e.stopPropagation()}> {[{ key: 'monthly', label: `Monthly — $${opt.monthlyUsd}/mo` }, { key: 'annual', label: `Annual — $${opt.annualUsd}/yr` }].map(b => ( ))}
)} {/* Monthly-only label for AppleCare One */} {opt.id === 'one' && (
Monthly subscription · cancel anytime
)}
{opt.benefits.map(b => ( ✓ {b} ))}
How to activate: {opt.activation}
)}
); })}
{/* What's included */}
What's included
{product.includes.map(item => ( {item} ))}
{/* Delivery */}
📦 Estimated delivery: {product.deliveryDays} from payment
{/* Total + CTA */}
Device {fmt(product.usdPrice)}
{careUsd > 0 && (
{care.name} ({careBilling === 'monthly' ? 'monthly' : 'annual'}) {fmt(careUsd)}
)}
Total {fmt(totalUsd)}
{/* ── Accordion sections ─────────────────────────────────────── */}
{/* Product Information */}
Overview
{(product.overview || []).map((line, i) => (
· {line}
))}
What's in the Box
{(product.includes || []).map((item, i) => (
✓ {item}
))}
{/* Features */} {(product.features || []).length > 0 && (
{(product.features || []).map((f, i) => (
{f.title}

{f.body}

))}
)} {/* Tech Specs */} {(product.techSpecs || []).length > 0 && (
{(product.techSpecs || []).map((sec, i) => (
{sec.section}
{(sec.items || []).map((item, j) => (
— {item}
))}
))}
)}
{/* ── You may also like ───────────────────────────────────────── */} {related.length > 0 && (

You may also like

{related.map(p => )}
)}
); }; Object.assign(window, { ShopPage, ProductDetailPage, ConditionBadge });