// pages.jsx — sub-page content components.
// Catalog data (PRODUCTS, COLLECTIONS) is loaded from Firestore at runtime
// by window.loadCatalog() in src/firebase.js. The empty arrays below are
// captured-by-reference so loadCatalog can mutate them in place.
window.PRODUCTS = window.PRODUCTS || [];
window.COLLECTIONS = window.COLLECTIONS || [];
window.UNRELEASED_PRODUCTS = window.UNRELEASED_PRODUCTS || [];
window.ARCHIVED_PRODUCTS = window.ARCHIVED_PRODUCTS || [];
const PRODUCTS = window.PRODUCTS;
const COLLECTIONS = window.COLLECTIONS;
const UNRELEASED_PRODUCTS = window.UNRELEASED_PRODUCTS;
const ARCHIVED_PRODUCTS = window.ARCHIVED_PRODUCTS;
// Win95 hourglass — pixel-art SVG that the .ap-hourglass CSS rule rotates.
function Hourglass({ size = 24 }) {
return (
{/* outer frame */}
);
}
//
)}
{showImage ? (
setErrored(true)}
fallback={
IMG_{(product.id || '').slice(-3).toUpperCase() || '001'}
);
if (kind === 'pants') return (
);
if (kind === 'hoodie') return (
);
// tee default
return (
);
}
function HeartButton({ active, onClick, size = 18, style }) {
return (
{ e.stopPropagation(); onClick && onClick(); }}
title={active ? 'Remove from wishlist' : 'Save to wishlist'}
aria-label={active ? 'Remove from wishlist' : 'Save to wishlist'}
aria-pressed={!!active}
className="ap-wishlist-heart"
style={{
width: size + 6, height: size + 6, padding: 0,
background: active ? '#ff3eb5' : 'rgba(255,255,255,0.85)',
color: active ? '#fff' : '#888',
border: '1px solid #000', cursor: 'pointer',
fontSize: size - 2, lineHeight: 1, fontFamily: 'inherit',
display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
...(style || {}),
}}>
♥
);
}
function ShopGridContent({ collection, onAdd, onView, products = PRODUCTS, wishlist = [], onToggleWish }) {
const base = collection
? products.filter(p => (p.cols || []).includes(collection.id))
: products;
const [q, setQ] = React.useState('');
const open = (p) => onView ? onView(p) : onAdd && onAdd(p);
const query = q.trim().toLowerCase();
const filtered = query
? base.filter(p => (p.name || '').toLowerCase().includes(query)
|| (p.slug || '').toLowerCase().includes(query))
: base;
// Track view_search_results once the user pauses typing for 600ms. Skipped
// when the query is empty (that's just the default catalog view) or when
// there are zero matches (the empty-state component handles that visual).
React.useEffect(() => {
if (!query || typeof window.apTrack !== 'function') return;
const t = setTimeout(() => {
window.apTrack('view_search_results', {
search_term: query,
results_count: filtered.length,
});
}, 600);
return () => clearTimeout(t);
}, [query, filtered.length]);
return (
{collection && (
{collection.name}
{filtered.length} items
)}
setQ('')}>×
)}
{filtered.length === 0 ? (
(╯°□°)╯
no signal for "{q}"
try a different frequency
{['tee', 'hoodie', 'vapor', 'art', 'music'].map(tag => (
setQ(tag)}
style={{ fontSize: 9, padding: '2px 6px' }}>#{tag}
))}
) : (
{filtered.map(p => {
const wished = wishlist.includes(p.slug);
return (
open(p)} style={{ position: 'relative' }}>
{onToggleWish && (
onToggleWish(p.slug)} size={16} />
)}
{(() => {
const s = stockInfo(p);
if (s.level === 'normal') return null;
return (
);
})()}
{p.name}
{(() => {
const r = reviewsFor(p);
if (!r.count) return null;
return (
);
})()}
{(() => {
const u = upsellInfo(p);
if (!u) return
₹{p.price}
;
return (
₹{u.sale}
₹{u.original}
−{u.percent}%
);
})()}
{stockInfo(p).level === 'restock' ? (
sold out
) : (
{ e.stopPropagation(); onAdd && onAdd(p); }}>
Add to cart ★
)}
);
})}
)}
{half ? '✬' : '★'}
);
}
return (
{stars}
{showCount && (
({count})
)}
);
}
window.Stars = Stars;
// Stock badge component — small inline pill with colour per level.
function StockBadge({ product, compact = false }) {
const info = stockInfo(product);
if (info.level === 'normal') return null;
const isLow = info.level === 'low';
const text = isLow
? (compact ? `${info.count} left` : `★ only ${info.count} left ★`)
: (compact ? 'sold out' : '◯ restocking soon');
return (
{text}
);
}
window.StockBadge = StockBadge;
function ProductDetailContent({ product, onAdd, onBack, wishlist = [], onToggleWish, onView }) {
const wished = wishlist.includes(product.slug);
const details = (typeof PRODUCT_DETAILS !== 'undefined' && PRODUCT_DETAILS[product.slug]) || {};
const gallery = (details.gallery && details.gallery.length) ? details.gallery : (product.image ? [product.image] : []);
const options = details.options || [];
const [imgIdx, setImgIdx] = React.useState(0);
const [selected, setSelected] = React.useState(() =>
Object.fromEntries(options.map(o => [o.name, (o.choices && o.choices[0] && o.choices[0].label) || '']))
);
const [qty, setQty] = React.useState(1);
const [tab, setTab] = React.useState('info');
const main = gallery[imgIdx] || '';
const upsell = upsellInfo(product);
return (
{onBack && (
← Back to shop
)}
{gallery.length > 1 && (
{gallery.map((g, i) => (
setImgIdx(i)} style={{
width: 44, height: 44, padding: 0, flexShrink: 0,
background: '#fff', cursor: 'pointer', position: 'relative', overflow: 'hidden',
border: '2px solid', borderColor: i === imgIdx ? '#ff3eb5' : '#888',
}}>
))}
)}
{product.name}
{(() => {
const r = reviewsFor(product);
if (!r.count) return null;
return (
setTab('reviews')}
style={{
display: 'inline-flex', alignItems: 'center', gap: 4,
background: 'transparent', border: 0, cursor: 'pointer',
padding: 0, marginBottom: 4, color: '#444',
}}>
{r.rating.toFixed(1)} · {r.count} reviews
);
})()}
{(() => {
const s = stockInfo(product);
if (s.level === 'normal') return null;
return
;
})()}
{upsell ? (
₹{upsell.sale}
₹{upsell.original}
−{upsell.percent}% OFF
★ you save ₹{upsell.original - upsell.sale} ★
) : (
₹{product.price}
)}
{onToggleWish && (
onToggleWish(product.slug)} size={20} />
)}
{details.desc && (
{details.desc}
)}
{options.map(opt => (
{opt.name}: {selected[opt.name]}
{opt.choices.map(c => {
const isSel = selected[opt.name] === c.label;
if (opt.type === 'color' && c.hex) {
return (
setSelected(s => ({ ...s, [opt.name]: c.label }))}
title={c.label}
style={{
width: 24, height: 24, padding: 0, cursor: 'pointer',
background: c.hex,
border: '2px solid', borderColor: isSel ? '#ff3eb5' : '#888',
}} />
);
}
return (
setSelected(s => ({ ...s, [opt.name]: c.label }))}
style={{
padding: '3px 8px', fontSize: 10, cursor: 'pointer',
background: isSel ? '#ff3eb5' : '#fff',
color: isSel ? '#fff' : '#000',
border: '1px solid #000', fontFamily: 'inherit',
}}>
{c.label}
);
})}
))}
QTY
setQty(q => Math.max(1, q - 1))}>−
{qty}
setQty(q => q + 1)}>+
{stockInfo(product).level === 'restock' ? (
SOLD OUT — restocking soon
) : (
{
const variant = Object.keys(selected).length
? ' (' + Object.entries(selected).map(([k,v]) => `${k}: ${v}`).join(', ') + ')'
: '';
for (let i = 0; i < qty; i++) onAdd && onAdd({ ...product, name: product.name + variant });
}} style={{
width: '100%', background: '#ff3eb5', color: '#fff',
fontWeight: 'bold', padding: '6px', marginBottom: 8,
}}>
ADD TO CART · ₹{product.price * qty}
)}
{[['info','Info'], ['reviews','Reviews'], ['shipping','Shipping'], ['returns','Returns'], ['size','Sizes']].map(([k, l]) => (
setTab(k)} style={{
flex: 1, padding: '4px 2px', fontSize: 9, cursor: 'pointer',
background: tab === k ? '#fff' : '#c0c0c0',
border: '1px solid', borderColor: tab === k ? '#fff #888 #fff #fff' : '#fff #888 #888 #fff',
borderBottom: tab === k ? 'none' : '1px solid #888',
fontFamily: 'inherit', fontWeight: tab === k ? 'bold' : 'normal',
}}>
{l}
))}
{tab === 'info' && (typeof SHARED_INFO !== 'undefined' ? SHARED_INFO.fabric : '180GSM · 100% Cotton · Pre-Shrunk · Unisex Regular Fit')}
{tab === 'reviews' && (() => {
const r = reviewsFor(product);
return (
{r.rating.toFixed(1)}
{r.count} verified reviews
{r.items.map((rev, i) => (
✓ verified
"{rev.text}"
— {rev.by}
))}
);
})()}
{tab === 'shipping' && (typeof SHARED_INFO !== 'undefined' ? SHARED_INFO.shipping : 'Ships in 3-5 days, delivery 7-9 days.')}
{tab === 'returns' && (typeof SHARED_INFO !== 'undefined' ? SHARED_INFO.returns : '5-day returns. Reverse pick-up ₹100.')}
{tab === 'size' && typeof SHARED_INFO !== 'undefined' && (
{SHARED_INFO.sizeChart.map((row, ri) => (
{row.map((cell, ci) => (
{cell}
))}
))}
)}
{/* "More from this collection" — pulls up to 4 sibling products from
the first collection this product belongs to. Skips the current
product and respects sold-out state via stockInfo. */}
{(() => {
const colId = (product.cols || []).find((c) => c !== 'all');
if (!colId) return null;
const siblings = PRODUCTS
.filter((p) => p.slug !== product.slug && (p.cols || []).includes(colId))
.slice(0, 4);
if (siblings.length === 0) return null;
const col = COLLECTIONS.find((c) => c.id === colId);
const colName = col ? col.name : 'this collection';
return (
// `minWidth: 0` on the wrapper + `minmax(0, 1fr)` on the grid
// prevents the cells' min-content (the product name with
// `white-space: nowrap`) from blowing the column widths and
// pushing the parent window beyond its 360px frame.
━━ more from {colName} ━━
{siblings.map((p) => (
onView && onView(p)}
style={{
cursor: 'pointer', background: '#fff', border: '1px solid #888',
padding: 2, display: 'flex', flexDirection: 'column',
minWidth: 0, overflow: 'hidden',
}}>
{p.image ? (
) : (
)}
{p.name}
₹{p.price}
))}
);
})()}
Browse by collection — click a folder to enter
{COLLECTIONS.map(c => (
onOpen(c)} style={{
display: 'flex', alignItems: 'center', gap: 8, padding: 6,
background: '#fff', border: '1px solid', borderColor: '#fff #888 #888 #fff',
cursor: 'pointer', fontFamily: 'inherit', textAlign: 'left',
}}>
{c.name}
{c.count} items · synced from astralproject.in
›
))}
);
}
function AboutContent() {
return (
★ ABOUT.txt ★
ＡＳＴＲＡＬ ＰＲＯＪＥＣＴ is a small-batch streetwear studio operating since 2024.
We make wearable software — graphic tees, sneakers and accessories that look like screenshots from a half-remembered operating system.
> CATALOG (149 products, 10 collections)
© 2024-2026 Astral Project. astralproject.in ▍
);
}
// CHAT.EXE — BBS/IRC-styled wrapper around the same submitContact callable.
// The conversation collects the user's question first, then their email,
// and submits once both are in hand. The backend payload is identical to
// what ContactContent sends: { name, email, subject, message }. The "name"
// is auto-pulled from the auth user when present; otherwise inferred from
// the email local-part.
function ChatExeContent({ user, onToast }) {
// Each entry is { who: 'sys'|'them'|'me', text }. 'sys' = grey announce
// line, 'them' = astralprojectco, 'me' = the user.
const initialMessages = React.useMemo(() => ([
{ who: 'sys', text: '* connecting to ASTRAL.NET BBS …' },
{ who: 'sys', text: '* astralprojectco joined #help' },
{ who: 'them', text: "what's up — got a question, wholesale, press, or just saying hi?" },
]), []);
const [msgs, setMsgs] = React.useState(initialMessages);
const [draft, setDraft] = React.useState('');
const [stage, setStage] = React.useState('question'); // question → email → done
const [question, setQuestion] = React.useState('');
const [email, setEmail] = React.useState((user && user.email) || '');
const [busy, setBusy] = React.useState(false);
const [typing, setTyping] = React.useState(false);
const scrollRef = React.useRef(null);
React.useEffect(() => {
if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
}, [msgs, typing]);
// If we already have an email from auth, skip the second prompt.
const hasAuthEmail = !!(user && user.email);
const pushThem = (text, delay = 800) => {
setTyping(true);
setTimeout(() => {
setTyping(false);
setMsgs(m => [...m, { who: 'them', text }]);
}, delay);
};
const submitContact = async (q, e) => {
if (typeof window.callFn !== 'function') {
pushThem('⚠ backend offline — try again in a moment');
setBusy(false); return;
}
setBusy(true);
try {
const name = (user && user.displayName) || (e.split('@')[0] || 'Guest');
await window.callFn('submitContact', {
name, email: e, subject: 'chat.exe', message: q,
});
pushThem("got it ★ logged your message — we'll DM you within 24h", 600);
setStage('done');
onToast && onToast('★ message transmitted');
} catch (err) {
console.error('[chat.exe]', err);
pushThem('⚠ could not send — try once more?', 400);
} finally {
setBusy(false);
}
};
const send = () => {
const text = draft.trim();
if (!text || busy || typing) return;
setMsgs(m => [...m, { who: 'me', text }]);
setDraft('');
if (stage === 'question') {
setQuestion(text);
if (hasAuthEmail) {
// skip the email step
pushThem('thanks — sending now ☆', 500);
setTimeout(() => submitContact(text, email), 1100);
setStage('done');
} else {
pushThem('cool — drop your email so we can reply', 700);
setStage('email');
}
} else if (stage === 'email') {
if (!/^\S+@\S+\.\S+$/.test(text)) {
pushThem("that doesn't look like an email — try again?", 500);
return;
}
setEmail(text);
pushThem('locked in. sending …', 500);
setTimeout(() => submitContact(question, text), 1100);
setStage('done');
} else {
// already done — just acknowledge
pushThem('we got it — anything else? close the window when you\'re done', 600);
}
};
const onKey = (e) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
send();
}
};
const placeholder = stage === 'email'
? 'your.email@domain.com'
: (stage === 'done' ? 'say something else …' : 'type your message …');
return (
#help · 2 users online · /topic = ask anything
{msgs.map((m, i) => {
if (m.who === 'sys') {
return
{m.text}
;
}
const isMe = m.who === 'me';
return (
<{isMe ? 'you' : 'astralprojectco'}>
{m.text}
);
})}
{typing && (
astralprojectco is typing…
)}
SEND
);
}
// Trust strip — vintage software-box claim styling. Four hard-bordered
// stickers sit above the primary CTA on the cart and checkout. Labels
// kept short so the 4-across grid doesn't truncate at the smallest
// window width (~260px content).
function TrustBadges() {
const badges = [
{ glyph: '🔒', label: 'SSL\nRAZORPAY' },
{ glyph: '↩', label: '5-DAY\nRETURNS' },
{ glyph: '✦', label: 'MUMBAI\n3–5 DAYS' },
{ glyph: '♥', label: 'HAND-CUT\nSTICKER' },
];
return (
{badges.map((b, i) => (
))}
Free 5-day returns · Ships 3–5d from Mumbai · ★ Razorpay-secured
);
}
window.PolicyLine = PolicyLine;
function CartContent({ items, onRemove, onUpdateQty, threshold, onCheckout, onShop }) {
const subtotal = items.reduce((s, it) => s + it.price * it.qty, 0);
const remaining = Math.max(0, threshold - subtotal);
return (
{items.length === 0 ? (
{`┌──────────┐
│ ░░░░░░ │
│ ░EMPTY░ │
│ ░░░░░░ │
└─┬──────┬─┘`}
EMPTY_FOLDER.EXE
no items found in this dimension
{onShop && (
Browse Shop →
)}
) : (
<>
{items.map((it, i) => (
{it.name}
₹{it.price} × {it.qty} = ₹{it.price * it.qty}
{onUpdateQty && (
onUpdateQty(it.id, -1)}>−
onUpdateQty(it.id, +1)}>+
)}
onRemove(it.id)}>×
))}
Subtotal:
₹{subtotal}
Shipping:
{remaining > 0 ? `₹100` : 'FREE ★'}
Total:
₹{subtotal + (remaining > 0 ? 100 : 0)}
{remaining > 0 ? (
★ Add ₹{remaining} more for FREE shipping ★
) : (
✓ Free shipping unlocked!
)}
CHECKOUT →
)}
✓
Payment received!
Order {orderId}
copy
₹{total}
Save your order id — use it to track delivery.
{onTrack && Track → }
Close
);
}
const TRACK_TIMELINE = [
{ key: 'created', label: 'Order received' },
{ key: 'paid', label: 'Payment confirmed' },
{ key: 'packed', label: 'Picked & packed' },
{ key: 'shipped', label: 'Handed to courier' },
{ key: 'transit', label: 'In transit' },
{ key: 'out', label: 'Out for delivery' },
{ key: 'delivered',label: 'Delivered' },
];
function trackProgressFor(status) {
// Map a Razorpay/Astral order status to a timeline cursor.
const s = (status || '').toLowerCase();
if (s === 'created') return 1;
if (s === 'paid') return 2;
if (s === 'packed') return 3;
if (s === 'shipped') return 4;
if (s === 'transit') return 5;
if (s === 'out') return 6;
if (s === 'delivered') return 7;
if (s === 'failed') return 0;
return 1;
}
function TrackOrderContent({ user }) {
const [orderId, setOrderId] = React.useState('');
const [email, setEmail] = React.useState((user && user.email) || '');
const [busy, setBusy] = React.useState(false);
const [err, setErr] = React.useState('');
const [result, setResult] = React.useState(null);
const lookup = async () => {
setErr(''); setResult(null);
if (!orderId.trim()) { setErr('Enter your order id.'); return; }
if (typeof window.callFn !== 'function') { setErr('Backend not ready.'); return; }
setBusy(true);
try {
const r = await window.callFn('trackOrder', { orderId: orderId.trim(), email: email.trim() });
setResult(r);
} catch (e) {
console.error('[track]', e);
setErr((e && (e.message || e.code)) || 'Could not find that order.');
} finally {
setBusy(false);
}
};
const cursor = result ? trackProgressFor(result.status) : 0;
return (
Enter your order id (from the confirmation screen / email):
setOrderId(e.target.value)}
placeholder="order_xxxxxxxxxxxxxx or AP-xxxxxx"
style={{ width: '100%', marginBottom: 4, fontSize: 11 }} />
setEmail(e.target.value)}
placeholder="email used at checkout"
inputMode="email" autoComplete="email" autoCapitalize="none" spellCheck={false}
style={{ width: '100%', marginBottom: 4, fontSize: 11 }} />
{busy ? 'Looking up…' : 'Track →'}
{err && (
⚠ {err}
)}
{result && (
ORDER: {result.receipt || result.id}
STATUS: {(result.status || '').toUpperCase()}
TOTAL: ₹{result.total} · {result.itemCount} item(s)
{result.shipTo && (
SHIP TO: {result.shipTo.name}, {result.shipTo.city} {result.shipTo.pincode}
)}
━━━━━━━━━━━━━━━━━━━━
{TRACK_TIMELINE.map((step, i) => {
const done = i < cursor;
const active = i === cursor - 1;
const mark = done ? '✓' : (active ? '▸' : '○');
const color = active ? '#ff7ad9' : (done ? '#5fff5f' : '#666');
return (
{mark}
);
})}
)}
);
}
// Knowledge base. Organized as five tabs: how-to, FAQ, shipping zones,
// returns policy, and a size chart. Each panel sits on a white inset
// surface for readability; folder-tab metaphor follows design.md §6.4.
const HELP_TABS = [
{ id: 'help', label: 'HELP' },
{ id: 'faq', label: 'FAQ.TXT' },
{ id: 'shipping', label: 'SHIPPING' },
{ id: 'returns', label: 'RETURNS' },
{ id: 'sizes', label: 'SIZES' },
];
const FAQ_ENTRIES = [
{
q: 'How long does delivery take?',
a: 'We dispatch from a small studio in Mumbai within 3–5 business days. Metro pincodes (DEL/MUM/BLR/HYD/CHN/PNQ) usually arrive in 4–6 days; rest of India in 7–10 days. Delhi-NCR is fastest in our experience.',
},
{
q: 'How do I track my order?',
a: 'Open Track Order from the desktop and paste your order id (it’s in the confirmation email and the order-success window). Status updates every time we hand off to the courier.',
},
{
q: 'What payment methods are accepted?',
a: 'All Indian cards (Visa / Mastercard / RuPay), UPI (PhonePe / GPay / Paytm), net banking from 50+ banks, and major wallets. Razorpay handles the actual transaction — we never see your card details.',
},
{
q: 'Is COD available?',
a: 'Not yet. Returns + COD don’t play well at our scale. We may turn it on for select pincodes once volume justifies the reverse-logistics overhead.',
},
{
q: 'How do the tees fit?',
a: 'Cut intentionally oversized — drop shoulders, slightly cropped torso, boxy fit. If you’re between sizes, stay true to size for the intended look or bump up one for extra room. Size chart is the SIZES tab.',
},
{
q: 'What\'s the fabric?',
a: '180GSM 100% cotton, pre-shrunk, garment-dyed where the shade calls for it. Heavy enough to drape well, light enough for Indian summers.',
},
{
q: 'How do I wash these?',
a: 'Cold-water machine wash, inside out. Mild detergent, no bleach. Hang dry in shade — direct sun fades graphic prints over time. Iron inside out on low if needed.',
},
{
q: 'Can I exchange a size?',
a: 'Yes — within 5 days of delivery, unworn with tags. Mail us at hello@astralproject.in with your order id and we’ll arrange a reverse pickup. Reverse pickup costs ₹100 (waived for first-time exchanges).',
},
{
q: 'When is the next drop?',
a: 'Open coming_soon.exe on the desktop — it shows a live countdown to the soonest unreleased product. Hit ★ notify me on any teaser tile to be alerted when it drops.',
},
{
q: 'Do you ship internationally?',
a: 'Currently India only. International shipping is on the roadmap once we sort out duties and reverse logistics.',
},
{
q: 'I see a struck-out price. What\'s the actual cost?',
a: 'The pink number is what you pay. The grey strike-through is the original list price for products we’re running a deal on. The cart and Razorpay total always reflect the live price.',
},
{
q: 'How do I earn Star Points?',
a: '1 point for every ₹10 you spend, awarded after payment is captured. Open Account → Rewards to redeem. Tier perks (free shipping, early access) unlock automatically as your lifetime spend climbs.',
},
{
q: 'Do these prices include GST?',
a: 'Yes. Every price you see on the site is GST-inclusive. No surprises at checkout.',
},
{
q: 'I have a code from somewhere — where do I enter it?',
a: 'Promo code field is right at the top of the Checkout window, above the form. Apply before paying — server validates and rejects invalid or expired codes.',
},
{
q: 'Why does this look like Windows 95?',
a: 'Because the future was supposed to look like this. Also because every other streetwear store looks identical and we got bored.',
},
];
const SHIPPING_ZONES = [
{ zone: 'METRO', pincodes: 'DEL · MUM · BLR · HYD · CHN · PNQ', eta: '4–6 business days' },
{ zone: 'TIER 2', pincodes: 'JAI · LKO · CHD · IND · BPL · NAG', eta: '6–8 business days' },
{ zone: 'REST OF IN', pincodes: 'all other Indian pincodes', eta: '7–10 business days' },
{ zone: 'NORTH-EAST', pincodes: 'AS · MN · MZ · NL · TR · ML · AR', eta: '8–12 business days' },
];
function HelpContent({ defaultTab = 'help' } = {}) {
const [tab, setTab] = React.useState(defaultTab);
const tabBtn = (id, label) => (
setTab(id)} style={{
padding: '4px 6px',
fontSize: 9, fontWeight: tab === id ? 'bold' : 'normal',
background: tab === id ? '#dfdfdf' : '#a8a8a8',
color: tab === id ? '#000' : '#222',
border: '1px solid',
borderColor: '#fff #000 transparent #fff',
borderBottom: tab === id ? '1px solid #dfdfdf' : '1px solid #888',
marginBottom: tab === id ? '-1px' : 0,
marginRight: 1,
cursor: 'pointer',
letterSpacing: '0.05em',
}}>{label}
);
return (
{HELP_TABS.map(t => tabBtn(t.id, t.label))}
{tab === 'help' && (
> ASTRAL.95 user manual · last modified 2026-05-03
)}
{tab === 'faq' && (
> FREQUENTLY ASKED · {FAQ_ENTRIES.length} entries
{FAQ_ENTRIES.map((e, i) => (
))}
)}
{tab === 'shipping' && (
> SHIPPING.TXT · india · ₹100 / FREE over ₹200
Dispatch
Orders ship from our studio in Mumbai within 3–5 business days of payment. Every package is hand-packed with a sticker.
Delivery times by zone
ZONE
PINCODES
ETA
{SHIPPING_ZONES.map((z, i) => (
{z.zone}
{z.pincodes}
{z.eta}
))}
ETAs are business days from dispatch. Add 1–2 days during sale or drop weeks.
Tracking
Tracking number lands in your email when the package leaves us. You can also paste your order id into Track Order on the desktop for live status.
)}
{tab === 'returns' && (
> RETURNS.TXT · 5-day window · reverse pickup
Window
5 days from delivery. Item must be unworn, unwashed, and with original tags + sticker pack intact.
How to return
Email hello@astralproject.in with your order id + photo of the item.
We schedule a reverse pickup with our courier (₹100 fee, waived for first-time exchanges).
Once we receive + inspect (1–2 business days), refund hits your original payment method.
Refund timeline
Cards / UPI / wallets: 5–7 business days . Net banking: 7–10 days. We have no control over the bank's last leg.
What we can't take back
Worn / washed pieces, items without tags, sticker packs (sealed for hygiene), final-sale drops marked "no return".
)}
{tab === 'sizes' && (
> SIZE_GUIDE.EXE · oversized fit · cm / in
{typeof SHARED_INFO !== 'undefined' && Array.isArray(SHARED_INFO.sizeChart) && SHARED_INFO.sizeChart.length > 0 ? (
{SHARED_INFO.sizeChart.map((row, ri) => (
{row.map((cell, ci) => (
{cell}
))}
))}
) : (
Size chart not loaded yet.
)}
Cut oversized — drop shoulders + boxy. Between sizes? True to size for the intended look, one up for roomier.
)}
);
}
const shipTh = {
border: '1px solid #888', padding: '3px 5px', textAlign: 'left',
fontSize: 9, letterSpacing: '0.05em',
};
const shipTd = { border: '1px solid #888', padding: '3px 5px', fontSize: 10 };
// Q/A row used in HELP and FAQ tabs. Bold question, indented answer,
// thin divider between rows so the panel reads as a structured list.
function FaqRow({ q, a, last }) {
return (
);
}
// Height-based size recommender. Oversized cut → bias one size up.
// Returns the suggested size letter (S/M/L/XL/XXL).
function sizeFromHeight(cm) {
if (!cm || cm < 140) return null;
if (cm < 162) return 'S';
if (cm < 170) return 'M';
if (cm < 178) return 'L';
if (cm < 186) return 'XL';
return 'XXL';
}
function SizeFinder() {
const [cm, setCm] = React.useState('');
const [fit, setFit] = React.useState('regular'); // 'regular' | 'roomier'
const num = parseInt(cm, 10);
const base = sizeFromHeight(num);
const sizes = ['S', 'M', 'L', 'XL', 'XXL'];
const idx = base ? sizes.indexOf(base) : -1;
const recommended = idx === -1 ? null : sizes[Math.min(sizes.length - 1, idx + (fit === 'roomier' ? 1 : 0))];
return (
★ find my size
height (cm)
fit
setFit(e.target.value)} style={{ fontSize: 10 }}>
regular
roomier
{recommended ? (
<>recommended → {recommended}
) : num ? (
height looks off — enter 140-220 cm
) : (
enter your height to see a recommendation
)}
);
}
// Fallback drop date when no products carry a `releasesAt` yet (e.g. fresh
// install). 2026-08-01 IST. Once the admin marks at least one product as
// `status: 'unreleased'` with a real `releasesAt`, this fallback isn't used.
const FALLBACK_NEXT_DROP_AT = Date.UTC(2026, 7, 1, 0, 0, 0) - (5 * 60 + 30) * 60 * 1000;
function ComingSoonContent({ user, onToast }) {
// Re-read UNRELEASED_PRODUCTS each render — it's mutated in place
// by loadCatalog and may not be populated when this component first
// mounts. The 1s `now` interval also forces a re-evaluation.
const [now, setNow] = React.useState(() => Date.now());
const [notified, setNotified] = React.useState(() => {
try { return JSON.parse(localStorage.getItem('ap-drop-notify') || '{}'); } catch { return {}; }
});
React.useEffect(() => {
const id = setInterval(() => setNow(Date.now()), 1000);
return () => clearInterval(id);
}, []);
// Pull the next-up unreleased product (if any) for the headline countdown.
const unreleased = UNRELEASED_PRODUCTS;
const nextDrop = unreleased.find((p) => p.releasesAtMs && p.releasesAtMs > now);
const targetMs = nextDrop ? nextDrop.releasesAtMs : FALLBACK_NEXT_DROP_AT;
const dropName = nextDrop ? (nextDrop.name || 'Untitled drop') : 'HELLENIC';
const dropLabel = nextDrop ? `Next: ${nextDrop.name}` : 'Drop 02 — HELLENIC';
const ms = Math.max(0, targetMs - now);
const s = Math.floor(ms / 1000);
const days = Math.floor(s / 86400);
const hrs = Math.floor((s % 86400) / 3600);
const mins = Math.floor((s % 3600) / 60);
const secs = s % 60;
const pad = (n, w = 2) => String(n).padStart(w, '0');
const persistNotified = (next) => {
setNotified(next);
try { localStorage.setItem('ap-drop-notify', JSON.stringify(next)); } catch {}
if (user && !user.isAnonymous && typeof window.saveUserPrefs === 'function') {
window.saveUserPrefs(user.uid, { dropNotify: next });
}
};
const toggleNotify = (slug) => {
const next = { ...notified, [slug]: !notified[slug] };
if (!next[slug]) delete next[slug];
persistNotified(next);
if (window.apSound) window.apSound.click();
onToast && onToast(next[slug] ? `★ you'll be alerted when ${slug} drops` : '✗ alert removed');
};
const fmtRelative = (target) => {
const dms = Math.max(0, target - now);
const ds = Math.floor(dms / 1000);
const dd = Math.floor(ds / 86400);
const dh = Math.floor((ds % 86400) / 3600);
if (dd > 0) return `in ${dd}d ${dh}h`;
const dm = Math.floor((ds % 3600) / 60);
if (dh > 0) return `in ${dh}h ${dm}m`;
return `in ${dm}m`;
};
return (
SOON™
{dropLabel}
{ms === 0 ? 'LIVE NOW ★' : `${pad(days, 3)}:${pad(hrs)}:${pad(mins)}:${pad(secs)}`}
days : hrs : min : sec
{!nextDrop && (
Drops 01 Aug 2026, 00:00 IST. Subscribe to get the link first.
)}
{/* Silhouette teasers — one tile per unreleased product. */}
{unreleased.length > 0 && (
━━ unreleased ━━
{unreleased.slice(0, 6).map((p) => {
const isNotified = !!notified[p.slug];
return (
{/* Silhouette: solid black overlay over the actual image so
the shape teases without revealing detail. */}
{p.image && (
)}
?
{p.name || '???'}
{p.releasesAtMs && (
{fmtRelative(p.releasesAtMs)}
)}
toggleNotify(p.slug)}
style={{
fontSize: 9, padding: '2px 4px', width: '100%',
background: isNotified ? 'var(--ap-cyan)' : undefined,
fontWeight: 'bold',
}}>
{isNotified ? '✓ alert set' : '★ notify me'}
);
})}
)}
);
}
const LOOKBOOK_ASSETS = {
video: 'Lookbook/MainPage1 - Made with Clipchamp.mp4',
shots: [
{ src: 'Lookbook/oversized-tee-mockup-of-a-man-walking-in-the-city-holding-his-coffee-m25218.png', caption: 'morning walk' },
{ src: 'Lookbook/mockup-featuring-a-man-wearing-a-blinkstore-t-shirt-and-sunglasses-on-the-street-m39313.png', caption: 'street / shades' },
{ src: 'Lookbook/oversized-t-shirt-mockup-of-a-man-posing-with-a-serious-look-in-a-new-pop-wave-themed-setting-m38763.png', caption: 'pop wave' },
{ src: 'Lookbook/back-view-mockup-featuring-a-man-wearing-an-oversized-tee-in-a-new-pop-wave-inspired-aesthetic-m38765_edited_edited.jpg', caption: 'back view' },
{ src: 'Lookbook/stanley-stella-t-shirt-mockup-featuring-a-man-walking-by-the-street-m36226.png', caption: 'stanley / street' },
{ src: 'Lookbook/stanley-stella-tee-mockup-of-a-tattooed-man-posing-in-front-of-a-muscle-car-m36828.png', caption: 'muscle car' },
{ src: 'Lookbook/athleisure-mockup-featuring-a-serious-man-wearing-a-stanley-stella-t-shirt-m36231.png', caption: 'athleisure' },
{ src: 'Lookbook/mockup-of-a-man-wearing-a-round-neck-blinkstore-t-shirt-for-a-pride-month-event-m39064.png', caption: 'pride' },
{ src: 'Lookbook/unisex-t-shirt-mockup-featuring-a-woman-out-and-about-with-a-casual-look-22786.png', caption: 'casual day' },
{ src: 'Lookbook/mockup-of-a-woman-with-colorful-hair-wearing-an-oversized-t-shirt-43020-r-el2.png', caption: 'colorful' },
{ src: 'Lookbook/oversized-t-shirt-mockup-of-a-happy-woman-with-silver-hair-43087-r-el2.png', caption: 'silver' },
{ src: 'Lookbook/unisex-t-shirt-mockup-of-a-woman-with-colored-hair-and-a-big-flower-bouquet-43019-r-el2.png', caption: 'bouquet' },
].map(s => ({ ...s, src: s.src.split('/').map(encodeURIComponent).join('/') })),
};
LOOKBOOK_ASSETS.video = LOOKBOOK_ASSETS.video.split('/').map(encodeURIComponent).join('/');
function LookbookContent({ onViewImage }) {
return (
✦ ASTRAL.LOOKBOOK / VOL.01 ✦
{LOOKBOOK_ASSETS.shots.map((s, i) => (
onViewImage && onViewImage({ ...s, index: i })}
style={{
aspectRatio: '4/5',
background: '#fff',
border: '1px solid #000',
position: 'relative',
overflow: 'hidden',
cursor: 'pointer',
}}
>
{String(i+1).padStart(2,'0')} — {s.caption}
))}
);
}
function LookbookImageContent({ image }) {
return (
{typeof image.index === 'number' ? `${String(image.index+1).padStart(2,'0')} — ` : ''}{image.caption}
);
}
// FileManagerContent — fake "My Computer" file browser. Treats the live
// catalog as a filesystem: collections are folders, products are .txt
// files inside them. View modes mirror Win95 (Icons / List / Details).
// Double-clicking a product file opens the product detail window via the
// onView prop. SYSTEM/ contains a couple flavor entries that route to
// existing windows (about, help).
function FileManagerContent({ onView, onOpen }) {
const [path, setPath] = React.useState(['C:']);
const [view, setView] = React.useState('icons'); // icons | list | details
const [selected, setSelected] = React.useState(null);
const lastTap = React.useRef({ key: null, t: 0 });
// Build the tree once. C:\ contains COLLECTIONS\ and SYSTEM\. Each
// collection folder lists its products as .txt files.
const tree = React.useMemo(() => {
const root = { type: 'folder', name: 'C:', children: {} };
const collections = { type: 'folder', name: 'COLLECTIONS', children: {} };
COLLECTIONS.forEach((c) => {
const folder = { type: 'folder', name: c.name.toUpperCase(), children: {}, color: c.color };
const inCol = PRODUCTS.filter((p) => (p.cols || []).includes(c.id));
inCol.forEach((p) => {
folder.children[`${p.slug}.txt`] = { type: 'file', name: `${p.slug}.txt`, product: p };
});
collections.children[c.name.toUpperCase()] = folder;
});
const system = { type: 'folder', name: 'SYSTEM', children: {
'README.TXT': { type: 'shortcut', name: 'README.TXT', target: 'about' },
'HELP.TXT': { type: 'shortcut', name: 'HELP.TXT', target: 'help' },
'CONTACT.EXE': { type: 'shortcut', name: 'CONTACT.EXE', target: 'contact' },
'CHANGELOG.TXT': { type: 'shortcut', name: 'CHANGELOG.TXT', target: 'soon' },
} };
root.children['COLLECTIONS'] = collections;
root.children['SYSTEM'] = system;
return root;
}, []);
// Walk the tree to the current path and return the entries to render.
const node = React.useMemo(() => {
let n = tree;
for (let i = 1; i < path.length; i++) {
n = n.children[path[i]];
if (!n) return tree;
}
return n;
}, [path, tree]);
const entries = node.children
? Object.values(node.children).sort((a, b) => {
if (a.type !== b.type) return a.type === 'folder' ? -1 : 1;
return a.name.localeCompare(b.name);
})
: [];
const open = (entry) => {
if (entry.type === 'folder') {
setPath((p) => [...p, entry.name]);
setSelected(null);
} else if (entry.type === 'file' && entry.product) {
onView && onView(entry.product);
} else if (entry.type === 'shortcut' && entry.target) {
onOpen && onOpen(entry.target);
}
};
const tapEntry = (entry) => {
const key = entry.name;
const t = Date.now();
if (lastTap.current.key === key && t - lastTap.current.t < 400) {
open(entry);
} else {
setSelected(key);
}
lastTap.current = { key, t };
};
const goUp = () => setPath((p) => p.length > 1 ? p.slice(0, -1) : p);
const iconFor = (entry) => {
if (entry.type === 'folder') return '📁';
if (entry.type === 'shortcut') return '⚡';
return '📄';
};
const sizeFor = (entry) => {
if (entry.type === 'folder') {
const n = entry.children ? Object.keys(entry.children).length : 0;
return `${n} item${n === 1 ? '' : 's'}`;
}
if (entry.product) return `₹${entry.product.price}`;
return '—';
};
return (
{/* Toolbar */}
↑ Up
{path.join('\\') + '\\'}
{[['icons', '◫'], ['list', '☰'], ['details', '☷']].map(([k, ic]) => (
setView(k)}
style={{
padding: '2px 6px', fontSize: 11,
background: view === k ? '#888' : undefined,
color: view === k ? '#fff' : undefined,
}}>{ic}
))}
{/* Body */}
{view === 'icons' ? (
{entries.map((entry) => (
tapEntry(entry)}
style={{
display: 'flex', flexDirection: 'column', alignItems: 'center',
padding: 4, cursor: 'pointer',
background: selected === entry.name ? '#000080' : 'transparent',
color: selected === entry.name ? '#fff' : '#000',
}}>
{iconFor(entry)}
{entry.name}
))}
) : view === 'list' ? (
{entries.map((entry) => (
tapEntry(entry)}
style={{
padding: '2px 4px', cursor: 'pointer',
background: selected === entry.name ? '#000080' : 'transparent',
color: selected === entry.name ? '#fff' : '#000',
display: 'flex', gap: 4, alignItems: 'center',
overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
}}>
{iconFor(entry)}
{entry.name}
))}
) : (
Name Size Type
{entries.map((entry) => (
tapEntry(entry)}
style={{
display: 'grid', gridTemplateColumns: '1fr 80px 60px', gap: 4,
padding: '2px 4px', cursor: 'pointer', fontSize: 10,
background: selected === entry.name ? '#000080' : 'transparent',
color: selected === entry.name ? '#fff' : '#000',
}}>
{iconFor(entry)} {entry.name}
{sizeFor(entry)}
{entry.type}
))}
)}
{entries.length === 0 && (
this folder is empty
)}
{/* Status bar */}
{entries.length} object(s)
{selected || 'Select an item to view properties'}
) : (