// Static info pages — Shipping & Returns, FAQ, Size Guide const { useState: useStateI, useEffect: useEffectI, useRef: useRefI } = React; // ─── shared ───────────────────────────────────────────── function InfoSection({ title, children }) { return (
{title}
{children}
); } function FaqRow({ q, a }) { const [open, setOpen] = useStateI(false); return (

{a}

); } const DELIVERY_REGIONS = [ { label: 'EU / UK', est: '3–7 business days' }, { label: 'United States', est: '5–10 business days' }, { label: 'Australia', est: '7–14 business days' }, { label: 'Rest of world', est: '7–21 business days' }, ]; const FAQ_ITEMS = [ { q: 'Where are products made?', a: 'Everything is made to order by our production partner in Portugal, via Fourthwall. Each piece is cut, printed or embroidered, and finished after your order is placed — nothing sits in a warehouse.' }, { q: 'How long will my order take?', a: 'Production takes 3–5 business days. After dispatch, EU and UK orders typically arrive in 3–7 days; US orders in 5–10 days; international in 7–21 days depending on destination and customs. You\'ll receive tracking when your order ships.' }, { q: 'How does sizing work?', a: 'Everything is cut oversized with a dropped shoulder — think boxy, relaxed fit. If you want something closer to a standard fit, size down one. Detailed flat measurements are on every product page.' }, { q: "What's the difference between Print and Embroidered?", a: "Print pieces carry the main Peripheral design large across the back of the garment, with a clean front. Embroidered pieces have a small embroidered Peripheral mark on the chest, with nothing on the back. Same garment, two very different ways to wear it." }, { q: 'Can I return or exchange my order?', a: 'Because everything is printed or embroidered to order specifically for you, we can\'t accept returns for sizing preference or change of mind. If your order arrives with a quality issue — wrong size, damaged, or misprinted — contact us within 30 days and we\'ll sort it.' }, { q: 'What if my item has a defect?', a: 'Contact us at music.peripheral@gmail.com within 30 days of delivery with your order number and clear photos of the issue. We\'ll send a replacement at no cost to you.' }, { q: 'Do you ship internationally?', a: 'Yes, we ship worldwide. International orders may be subject to import duties and customs fees on arrival — these are set by your country and are the buyer\'s responsibility. We don\'t collect them at checkout.' }, { q: 'Can I cancel my order?', a: 'Orders are sent to production quickly, so cancellation isn\'t always possible. Email us as soon as possible after placing your order and we\'ll do our best. Once production has started, we can\'t halt the order.' }, { q: 'Where does the money go?', a: 'Everything goes back into the channel — studio time, mastering, equipment, and buying the music I play. Every order keeps the platter spinning. Thank you.' }, ]; // ─── sub-pages ────────────────────────────────────────── function ShippingPage() { return ( <>

All products are made to order in Portugal. Once you place your order, production takes 3–5 business days before your order is dispatched. Production times do not include weekends or public holidays.
Destination
After dispatch
{DELIVERY_REGIONS.map(r => (
{r.label}
{r.est}
 ))}

Delivery estimates run from dispatch date and exclude customs processing time. We ship via DHL, with handoff to your local carrier for final delivery — tracking may pause briefly during this handoff, which is normal.

International orders may incur import duties or customs fees on arrival. These are set by your country's customs authority and are the buyer's responsibility. We do not collect them at checkout.

Because everything is made to order specifically for you, we can't accept returns for sizing preference or change of mind.

If your order arrives damaged, misprinted, or with a production defect, contact us within 30 days of delivery with your order number and clear photos of the issue. We'll arrange a replacement at no cost to you — the replacement is covered by the production partner.

Size exchanges are only possible when the production partner shipped the wrong size. Preference-based size changes don't qualify as items are made to your specification.

Reach us at music.peripheral@gmail.com

If your tracking hasn't updated for several days, give it a little more time — packages sometimes pause during carrier handoffs. If your order appears genuinely lost, contact us with your order number and we'll investigate and arrange a replacement.

Please allow at least 2 weeks from the dispatch date for domestic orders and 3 weeks for international orders before reporting a lost package.

 ); } function FAQPage() { return ( <>
{FAQ_ITEMS.map(item => ( ))}
); } function SizeTable({ label, rows, hideSleeve = false, fmtVal }) { const fmt = fmtVal || (cm => `${cm} cm`); return (
{label &&
{label}
} {!hideSleeve && } {rows.map(r => ( {!hideSleeve && } ))}
Size Chest LengthSleeve
{r.size} {fmt(r.chest)} {fmt(r.length)}{fmt(r.sleeve)}
); } function GarmentAccordion({ label, rows, hideSleeve = false, garmentKey, initialOpen = false, measureNotes }) { const [open, setOpen] = useStateI(initialOpen); const [unit, setUnit] = useStateI('cm'); const fmtVal = (cm) => unit === 'cm' ? `${cm} cm` : `${(cm / 2.54).toFixed(1)}"`; const divRef = useRefI(null); useEffectI(() => { if (initialOpen && divRef.current) { const t = setTimeout(() => { const y = divRef.current.getBoundingClientRect().top + window.scrollY - 100; window.scrollTo({ top: y, behavior: 'smooth' }); }, 150); return () => clearTimeout(t); } }, []); return (
{['cm', 'in'].map(u => ( ))}
{measureNotes && (
{measureNotes.map((n, i) => (
{n.label && {n.label} — } {n.text}
))}
)}
); } const SHARED_DISCLAIMER = { text: 'Measurements are provided by our suppliers and may vary by up to 5 cm. Pro tip: measure a similar item you own at home and compare it with the sizes listed here.' }; const TEE_NOTES = [ SHARED_DISCLAIMER, { text: 'US customers: the EU sizes for this supplier run smaller than US sizes — order a size up.' }, { label: 'Length', text: 'Place the end of the tape beside the collar at the top of the tee (Highest Point Shoulder). Pull the tape measure to the bottom of the shirt.' }, { label: 'Width', text: 'Place the end of the tape at the seam under the sleeve and pull the tape measure across the shirt to the seam under the opposite sleeve.' }, { label: 'Sleeve', text: 'Place one end of the tape at the top of the set-in sleeve, then pull the tape down to the hem of the sleeve.' }, ]; const CROP_TOP_NOTES = [ SHARED_DISCLAIMER, { label: 'Length', text: 'Start at the collar\'s edge at the top of the tee (Highest Point Shoulder) and extend the measuring tape to the bottom of the tee.' }, { label: 'Width', text: 'From the seam beneath one sleeve, stretching the tape across to the seam beneath the opposite sleeve.' }, ]; const TANK_NOTES = [ SHARED_DISCLAIMER, { label: 'Length', text: 'Place the end of the tape beside the collar at the top of the tee (Highest Point Shoulder). Pull the tape measure to the bottom of the shirt.' }, { label: 'Width', text: 'Place the end of the tape at the seam under the sleeve and pull the tape measure across the shirt to the seam under the opposite sleeve.' }, ]; const HOODIE_NOTES = [ SHARED_DISCLAIMER, { label: 'Length', text: 'Place the end of a measuring tape beside the collar at the top of the garment (high point shoulder). Pull the tape to the bottom of the item.' }, { label: 'Width', text: 'Place the end of the tape at the seam under the sleeve and pull the tape measure across to the seam under the opposite sleeve.' }, ]; const PULLOVER_NOTES = [ { text: 'This product runs small — for the best fit, order one size larger than you usually would.' }, SHARED_DISCLAIMER, { label: 'Length', text: 'Place the end of a measuring tape beside the collar at the top of the garment (high point shoulder). Pull the tape to the bottom of the item.' }, { label: 'Width', text: 'Place the end of the tape at the seam under the sleeve and pull the tape measure across to the seam under the opposite sleeve.' }, { label: 'Sleeve', text: 'Place one end of the tape at the top of the set-in sleeve, then pull the tape down to the hem of the sleeve.' }, ]; function SizeGuidePage() { const openKey = window.location.hash.slice(1); return ( <>
{[ { k: 'Length', v: 'From the collar\'s edge at the top of the garment (Highest Point Shoulder) to the bottom hem.' }, { k: 'Chest / Width', v: 'From the seam beneath one sleeve, across to the seam beneath the opposite sleeve. This is a flat (half-chest) measurement.' }, { k: 'Sleeve', v: 'From the shoulder seam to the end of the cuff.' }, ].map(({ k, v }) => (
{k}

{v}

))}

All garments are cut with an oversized, boxy silhouette and a dropped shoulder. If you prefer a closer fit, size down one. When in doubt, size up. The relaxed look is intentional.
); } // ─── main export ──────────────────────────────────────── function InfoPage({ id, navigate }) { const defaultLabels = { 'shipping': 'Shipping & Returns', 'faq': 'FAQ', 'size-guide': 'Size Guide', 'contact': 'Contact', 'privacy': 'Privacy Policy', 'terms': 'Terms', }; const params = new URLSearchParams(window.location.search); const urlSent = id === 'contact' && params.get('sent') === '1'; const urlError = id === 'contact' && params.get('error') === '1'; const [contactSuccess, setContactSuccess] = useStateI(urlSent); const [contactError, setContactError] = useStateI(urlError); useEffectI(() => { if (urlSent || urlError) { history.replaceState(null, '', '/merch/contact'); window.scrollTo(0, 0); } }, []); const label = defaultLabels[id] || 'Info'; if (id === 'contact' && contactSuccess) { return (
Message sent

Thanks for
reaching out.

We'll get back to you within 1–2 business days.

); } return (
navigate({ name: 'home' }, '/merch')} onMouseEnter={() => onCursor('hover')} onMouseLeave={() => onCursor('default')}>Shop / {label}

{label}

{id === 'shipping' && } {id === 'faq' && } {id === 'size-guide' && } {id === 'contact' && } {id === 'privacy' && } {id === 'terms' && }
); } function ContactPage({ showError }) { const [files, setFiles] = useStateI([]); const [fileError, setFileError] = useStateI(''); const [uploadHover, setUploadHover] = useStateI(false); const [removeHover, setRemoveHover] = useStateI(null); const [faqHover, setFaqHover] = useStateI(false); const fileInputRef = useRefI(null); const fileErrTimer = useRefI(null); const MAX_FILES = 3; const textOn = () => document.body.classList.add('cursor-text-mode'); const textOff = () => { document.body.classList.remove('cursor-text-mode'); onCursor('default'); }; const showFileError = msg => { setFileError(msg); clearTimeout(fileErrTimer.current); fileErrTimer.current = setTimeout(() => setFileError(''), 3000); }; const handleFileChange = e => { const existing = new Set(files.map(f => f.name)); const all = Array.from(e.target.files); const dupes = all.filter(f => existing.has(f.name)); const incoming = all.filter(f => !existing.has(f.name)); const merged = [...files, ...incoming].slice(0, MAX_FILES); if (dupes.length > 0) showFileError(`Already added: ${dupes.map(f => f.name).join(', ')}`); setFiles(merged); const dt = new DataTransfer(); merged.forEach(f => dt.items.add(f)); fileInputRef.current.files = dt.files; }; const removeFile = idx => { const updated = files.filter((_, i) => i !== idx); setFiles(updated); const dt = new DataTransfer(); updated.forEach(f => dt.items.add(f)); if (fileInputRef.current) fileInputRef.current.files = dt.files; }; const lbl = { display: 'block', fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--fg-mute)', marginBottom: 8, }; const inp = { width: '100%', fontFamily: 'var(--sans)', fontSize: 14, color: 'var(--fg)', background: 'var(--bg-elev)', border: '1px solid var(--line)', borderRadius: 6, padding: '12px 14px', outline: 'none', boxSizing: 'border-box', }; return (
{showError && (
Something went wrong sending your message. Please try again or email music.peripheral@gmail.com directly.
)}

Fill in the form below and we'll get back to you within 1–2 business days.

For common questions, check the{' '} { setFaqHover(true); onCursor('hover'); }} onMouseLeave={() => { setFaqHover(false); onCursor('default'); }}>FAQ {' '}first. You might find an instant answer.