// screen-home.jsx — Catalog landing page
const CAT_ORDER_KEY = 'eurostar.catOrder.v1';
const CAT_THUMB_KEY = 'eurostar-cat-thumbs-v1';
const SHAPE_THUMB_KEY = 'eurostar-shape-thumbs-v1';
// Categories whose card photo sits on a dark background — the card gets a dark
// backing so a navy/black image fills the box with no white bars. Others use
// white (product photos are shot on white).
const DARK_THUMB_CATS = { whitefancy: true };
function loadThumbStore(key) {
try { return JSON.parse(localStorage.getItem(key) || '{}') || {}; } catch (e) { return {}; }
}
// Admin > Content — hero copy and testimonials the office edits. Read from the
// live sync when it has landed, from the mirrored copy on a cold start, and
// falling back to the wording baked in below when neither has anything to say.
function siteContent() {
if (window.EUROSTAR_CONTENT) return window.EUROSTAR_CONTENT;
try { return JSON.parse(localStorage.getItem('eurostar-site-content-v1') || '{}') || {}; } catch (e) { return {}; }
}
function loadCatOrder() {
try { const v = JSON.parse(localStorage.getItem(CAT_ORDER_KEY)); return Array.isArray(v) ? v : null; }
catch (e) { return null; }
}
function saveCatOrder(ids) {
try { localStorage.setItem(CAT_ORDER_KEY, JSON.stringify(ids)); } catch (e) {}
}
// Reconcile a saved id order against the live CATEGORIES list:
// keep saved order, drop ids that no longer exist, append any new categories at the end.
function reconcileCatOrder(ids) {
const byId = {};
CATEGORIES.forEach((c) => { byId[c.id] = c; });
const seen = {};
const out = [];
(ids || []).forEach((id) => { if (byId[id] && !seen[id]) { out.push(id); seen[id] = 1; } });
CATEGORIES.forEach((c) => { if (!seen[c.id]) out.push(c.id); });
return out;
}
function HomeScreen({ persona, setRoute }) {
// Real count for the signed-in customer. This used to read
// persona.deliveredCount + persona.pendingCount — numbers hardcoded on the
// demo personas — so a brand-new account was greeted with "22 lifetime
// orders" it had never placed.
const [myOrderCount, setMyOrderCount] = React.useState(null);
React.useEffect(() => {
var token;
try { token = localStorage.getItem('eurostar_token'); } catch (e) {}
if (!token) { setMyOrderCount(0); return; }
fetch((window.EUROSTAR_API || location.origin) + '/orders', {
headers: { authorization: 'Bearer ' + token },
})
.then(function (r) { return r.ok ? r.json() : []; })
.then(function (rows) { setMyOrderCount(Array.isArray(rows) ? rows.length : 0); })
.catch(function () { setMyOrderCount(0); });
}, []);
// Hero copy and testimonials from Admin > Content. The catalogue sync fires
// an event when it lands, so a first paint from cache still updates itself.
const [content, setContent] = React.useState(siteContent);
React.useEffect(() => {
const onReady = () => setContent(siteContent());
window.addEventListener('eurostar-content-ready', onReady);
return () => window.removeEventListener('eurostar-content-ready', onReady);
}, []);
const [order, setOrder] = React.useState(() => reconcileCatOrder(loadCatOrder()));
const [arrange, setArrange] = React.useState(false);
const [dragId, setDragId] = React.useState(null);
const catById = React.useMemo(() => {
const m = {}; CATEGORIES.forEach((c) => { m[c.id] = c; }); return m;
}, []);
const cats = order.map((id) => catById[id]).filter(Boolean);
const catThumbs = loadThumbStore(CAT_THUMB_KEY);
const shapeThumbs = loadThumbStore(SHAPE_THUMB_KEY);
const onDragStart = (e, id) => { setDragId(id); e.dataTransfer.effectAllowed = 'move'; };
const onDragOver = (e, overId) => {
e.preventDefault();
if (dragId == null || dragId === overId) return;
setOrder((prev) => {
const a = prev.slice();
const from = a.indexOf(dragId), to = a.indexOf(overId);
if (from < 0 || to < 0) return prev;
a.splice(from, 1); a.splice(to, 0, dragId);
return a;
});
};
const onDrop = () => { saveCatOrder(order); setDragId(null); };
const onDragEnd = () => { saveCatOrder(order); setDragId(null); };
const resetOrder = () => { const d = CATEGORIES.map((c) => c.id); setOrder(d); saveCatOrder(d); };
return (
{/* Hero — the headline and sub-text come from Admin > Content when the
office has set them; otherwise the built-in wording stands. */}
WHOLESALE PORTAL · MUMBAI & JAIPUR
{content.heroTitle
?
{content.heroTitle}
:
Makes true beauty, by the lot.
}
{content.heroSub
|| '40 years sourcing moissanite, lab-grown gems, Color Cubic Zirconia, mother of pearl and pearls — calibrated, certified, delivered. Order from our trade catalog.'}
}
{(() => {
// Explicit category thumbnail wins; otherwise auto-use the first
// real product photo uploaded for this category; else the vector art.
const thumb = catThumbs[c.id] || (window.firstProductImageForCat && window.firstProductImageForCat(c.id));
// Whole image, never cropped (contain); white backing so the
// white-background product photos blend in with no visible bars.
return (
{(Array.isArray(content.testimonials) && content.testimonials.length
? content.testimonials
.filter((t) => (t.text || '').trim())
.map((t) => ({
quote: t.text,
name: t.name || '',
org: t.city || '',
// Initials from the name, the same shape the built-in cards use.
initials: (t.name || '?').split(/\s+/).filter(Boolean).slice(0, 2).map((w) => w[0].toUpperCase()).join(''),
tag: 'Trade buyer',
big: false,
}))
: [
{ quote: 'We\u2019ve moved our entire melee moissanite line to Eurostar. The calibration is dead-on \u2014 our casting reject rate dropped noticeably and matched pairs actually match.',
name: 'Procurement Head', org: 'Tanvi Gold Cast', initials: 'TG', tag: 'Bulk · Moissanite & CZ', big: true },
{ quote: 'Consistency at volume is what matters to us. Lot after lot, the colour grades hold. Their GRA-marked stones clear our QC without back-and-forth.',
name: 'Sourcing Team', org: 'Malabar Gold & Diamonds', initials: 'MG', tag: 'Enterprise · Lab-grown', big: true },
{ quote: 'For studded collections we need reliable supply and certificates we can stand behind. Eurostar has been a dependable partner on both.',
name: 'Merchandising', org: 'Tanishq (vendor network)', initials: 'TQ', tag: 'Certified · Lab-grown', big: true },
{ quote: 'I run a small unit in Rajkot \u2014 they still treat my 200-piece orders seriously. Sizes are always in stock and shipped same week.',
name: 'Jignesh P.', org: 'Shree Ganesh Jewellers, Rajkot', initials: 'JP', tag: 'Independent buyer' },
{ quote: 'The packet system makes reordering simple. I know exactly how many pieces I\u2019m getting per size, and pricing is transparent.',
name: 'Farida K.', org: 'Crescent Ornaments, Hyderabad', initials: 'FK', tag: 'Independent buyer' },
{ quote: 'Started with one tray of Color CZ, now I order across six categories. The strips and pearl strings are a real time-saver for my karigars.',
name: 'Anil M.', org: 'Mehta Jewel Works, Surat', initials: 'AM', tag: 'Independent buyer' },
]).map((t, i) => (
“
{t.quote}
{t.initials}
{t.org}
{t.name} · {t.tag}
))}
{/* Trust strip */}
} title="GRA-verified Moissanite"
desc="Every loose stone laser-marked, verifiable on gra-gems.com" />
} title="Calibrated to spec"
desc="Tighter than ±0.05mm tolerance across paired sets" />
} title="Trade-only shipping"
desc="Insured & sealed parcels via BlueDart, DTDC, DHL Export" />
} title="Easy returns"
desc="7-day return on defects, exchange on calibration mismatch" />
: 
: