// D_full_shared.jsx — Direction D · "La Maison" // Pure white + bordeaux. Heraldic, axial, gallery-editorial. // Namespace: D (tokens), DBtn, DChip, DEyebrow, DRule, DNav, DFooter, DTicket, etc. const D = { // surfaces paper: '#FFFFFF', // primary white paperAlt: '#FAF7F2', // warm paper for alt sections paperDim: '#F3EEE5', // rare deeper paper for ledgers / cards inkDeep: '#0E0A08', // near-black for reverse blocks // ink ink: '#1A1512', // body inkSoft: '#2B2320', // secondary stone: '#7F756D', // tertiary stoneSoft:'#B5AEA7', // accents bord: '#6B1220', // primary — bordeaux (deeper than Option C) bordDeep: '#4A0C18', // hover / headings bordInk: '#2B0810', // darkest, only for base gold: '#A8864A', // very rare — only hairline, seals goldSoft: '#C9A961', // lines line: 'rgba(26,21,18,.14)', lineSoft: 'rgba(26,21,18,.07)', lineBord: 'rgba(107,18,32,.22)', lineGold: 'rgba(168,134,74,.28)', // type serif: "'Cormorant Garamond', 'EB Garamond', Georgia, serif", body: "'EB Garamond', Georgia, serif", sans: "'Commissioner', -apple-system, sans-serif", // all-caps labels — tighter than IBM Plex // image treatments — duotone bordeaux tint for gallery feel imgCard: 'grayscale(.35) sepia(.18) brightness(.98) contrast(1.04) saturate(.85)', imgEd: 'grayscale(.55) sepia(.25) brightness(.94) contrast(1.06) saturate(.78)', imgHero: 'grayscale(.65) sepia(.3) brightness(.88) contrast(1.08) saturate(.72)', imgDeep: 'grayscale(.82) sepia(.45) brightness(.78) contrast(1.12)', }; // ── Roman numeral helper ───────────────────────────────────────────────── function toRoman(n) { const map = [[1000,'M'],[900,'CM'],[500,'D'],[400,'CD'],[100,'C'],[90,'XC'], [50,'L'],[40,'XL'],[10,'X'],[9,'IX'],[5,'V'],[4,'IV'],[1,'I']]; let r=''; for (const [v,s] of map) while(n>=v){ r+=s; n-=v; } return r; } // ── Small atoms ────────────────────────────────────────────────────────── function DEyebrow({ children, style, tone }) { const col = tone==='gold' ? D.gold : tone==='ivory' ? 'rgba(255,255,255,.72)' : D.bord; return (
{children}
); } function DLabel({ children, style, tone }) { // small-caps serif-like label, quieter than eyebrow const col = tone==='ivory' ? 'rgba(255,255,255,.6)' : D.stone; return (
{children}
); } // Hairline rule with fleuron center-mark — the signature divider function DRule({ tone, mark='✦', style, wide=false }) { const isDark = tone==='dark'; const col = isDark ? 'rgba(255,255,255,.35)' : D.lineBord; const markCol = isDark ? 'rgba(255,255,255,.85)' : D.bord; return (
{mark}
); } // Simple divider function DDivider({ tone, style }) { return
; } // ── Wax seal / heraldic F·2·F monogram — used in nav + seal moments ─────── function DSeal({ size=56, style, tone='bord' }) { const col = tone==='ivory' ? '#FFFFFF' : tone==='gold' ? D.gold : D.bord; return ( {/* outer ring */} {/* cardinal ticks */} {[0,90,180,270].map(a=>( ))} {/* monogram F·2·F */} F·2·F {/* bottom arc label */} · FABRIC TO FIT · MMXIX · ); } // ── Buttons ────────────────────────────────────────────────────────────── function DBtn({ kind='bord', size='md', children, onClick, style, fullWidth }) { const base = { fontFamily: D.sans, fontWeight: 600, cursor: 'pointer', fontSize: size==='sm'?10:size==='lg'?12:11, letterSpacing: '.26em', textTransform: 'uppercase', padding: size==='sm'?'10px 18px':size==='lg'?'18px 36px':'13px 26px', display: 'inline-flex', alignItems: 'center', justifyContent:'center', gap: 12, transition: 'all .35s cubic-bezier(0.2,0.8,0.2,1)', border:'1px solid', borderRadius:0, width: fullWidth ? '100%' : 'auto', }; const kinds = { bord: { background: D.bord, color: '#fff', borderColor: D.bord }, ink: { background: 'transparent', color: D.ink, borderColor: D.ink }, hair: { background: 'transparent', color: D.bord, borderColor: D.bord }, ghost: { background: 'transparent', color: '#fff', borderColor: 'rgba(255,255,255,.45)' }, gold: { background: 'transparent', color: D.bordDeep, borderColor: D.gold }, link: { background: 'transparent', color: D.bord, borderColor: 'transparent', padding:0 }, }; return ( {children} ); } function DChip({ children, active, onClick, tone='light', style }) { return ( {children} ); } function formatVND(n) { return n.toLocaleString('vi-VN') + '₫'; } // ── Occasion model ──────────────────────────────────────────────────────── const OCCASIONS = [ { id:'engagement', t:'Lễ hỏi', s:'Của bạn, của em, hoặc của chính anh', img:'assets/photos/editorial_02.jpg', tone:D.bord, n:34 }, { id:'gala', t:'Gala', s:'Nơi máy quay sẽ tìm anh', img:'assets/photos/editorial_04.jpg', tone:D.inkSoft, n:22 }, { id:'boardroom', t:'Hội nghị', s:'Nơi quý này được đặt trên bàn', img:'assets/photos/editorial_05.jpg', tone:'#2A3D2E', n:18 }, { id:'wedding', t:'Lễ cưới', s:'Của chính bạn — tại bàn thờ', img:'assets/photos/editorial_06.jpg', tone:D.bordDeep,n:12 }, { id:'premiere', t:'Khai mạc', s:'Cocktail. Một buổi ra mắt. Một lời chúc.', img:'assets/photos/editorial_07.jpg', tone:'#3E1318', n:28 }, { id:'dinner', t:'Bữa tối', s:'Nhỏ. Quan trọng. Không biên bản.', img:'assets/photos/editorial_01.jpg', tone:'#8B6E4A', n:41 }, ]; // ── Products ────────────────────────────────────────────────────────────── const GARMENTS = [ { id:'berkeley', name:'Berkeley', sub:'Xám than', mill:'Holland & Sherry · 240gr', occ:['engagement','boardroom','gala'], events:['le-hoi','phong-van','tot-nghiep','gala'], price:2800000, days:4, next:'3 Thg 5', img:'assets/photos/product_01.jpg', images:['assets/photos/product_01.jpg','assets/photos/product_02.jpg'], sizes:['M','L','XL'], badge:null, desc:'Worsted ba mảnh, cho căn phòng nơi sự chú ý lặng lẽ là tiền tệ.' }, { id:'mayfair', name:'Mayfair', sub:'Đen đêm', mill:'Scabal · 260gr', occ:['gala','premiere','wedding'], events:['gala','dam-cuoi','da-tiec','ky-niem'], price:3200000, days:4, next:'11 Thg 5', img:'assets/photos/product_03.jpg', images:['assets/photos/product_03.jpg','assets/photos/product_04.jpg'], sizes:['S','M','L'], badge:'ĐƯỢC ƯA CHUỘNG', desc:'Tuxedo cắt sắc đủ để máy quay tìm bạn.' }, { id:'bordeaux', name:'Bordeaux', sub:'Nhung rượu', mill:'Dormeuil · 340gr', occ:['gala','premiere'], events:['gala','ky-niem','dam-cuoi','da-tiec'], price:3600000, days:4, next:'9 Thg 5', img:'assets/photos/product_04.jpg', images:['assets/photos/product_04.jpg','assets/photos/product_05.jpg'], sizes:['M','L'], badge:'MỚI', desc:'Dinner jacket, cho căn phòng ngoảnh lại khi bạn bước vào.' }, { id:'saigon', name:'Saigon', sub:'Linen ngà', mill:'Loro Piana · 190gr', occ:['dinner','premiere'], events:['da-tiec','tiec-cong-ty','ky-niem'], price:2400000, days:4, next:'7 Thg 5', img:'assets/photos/product_02.jpg', images:['assets/photos/product_02.jpg','assets/photos/product_01.jpg'], sizes:['S','M','L','XL'],badge:null, desc:'Áo khoác mùa hè cho buổi tối ngoài vườn.' }, { id:'hanoi', name:'Hanoi', sub:'Tweed thông', mill:'VBC · 310gr', occ:['boardroom','dinner'], events:['phong-van','tot-nghiep','tiec-cong-ty','le-hoi'], price:2600000, days:4, next:'15 Thg 5', img:'assets/photos/product_05.jpg', images:['assets/photos/product_05.jpg','assets/photos/product_06.jpg'], sizes:['M','L'], badge:null, desc:'Đường may thôn quê, cho căn phòng có lò sưởi.' }, { id:'cannes', name:'Cannes', sub:'Camel cashmere', mill:'Loro Piana · 220gr', occ:['premiere','dinner'], events:['ky-niem','da-tiec','tot-nghiep'], price:2900000, days:4, next:'6 Thg 5', img:'assets/photos/product_06.jpg', images:['assets/photos/product_06.jpg','assets/photos/product_03.jpg'], sizes:['S','M'], badge:'CÒN 2 BỘ', desc:'Áo khoác cashmere cho đoạn dạo đầu.' }, ]; // ── Active occasion session state ───────────────────────────────────────── const OCC_KEY_D = 'f2f-d-active-occ'; function readActiveOccD() { try { return localStorage.getItem(OCC_KEY_D) || null; } catch { return null; } } function setActiveOccD(id) { try { if (id) localStorage.setItem(OCC_KEY_D, id); else localStorage.removeItem(OCC_KEY_D); } catch {} window.dispatchEvent(new CustomEvent('f2f:d-occ-change', { detail:{ id } })); } // ── Nav — axial, heraldic lockup centered ──────────────────────────────── function DNav({ page, go }) { const tabs = [ ['occasions', 'Sự kiện'], ['collection','Tủ đồ'], ['story', 'Câu chuyện 87%'], ['account', 'Tủ của tôi'], ]; return (
{/* Top strip — bordeaux, very thin */}
· Một sự kiện, một bộ vest — không cần cả tủ đồ · VI EN · go('showroom')}>Ghé 142 Lê Thánh Tôn →
{/* Main row — three columns, centered heraldic lockup */}
{/* Left tabs */}
{tabs.slice(0,3).map(([k,l])=>( go(k)} style={{ cursor:'pointer', color: page===k ? D.bord : D.ink, paddingBottom:4, borderBottom: page===k ? `1px solid ${D.bord}` : '1px solid transparent', transition:'color .2s', }}>{l} ))}
{/* Center — F·2·F serif monogram flanked by hairlines */}
go('home')} style={{ cursor:'pointer', display:'flex', alignItems:'center', gap:14 }}>
F·2·F
{/* Right — account + CTA */}
go('account')} style={{ cursor:'pointer', color: page==='account' ? D.bord : D.ink }}> Tủ của tôi go('occasions')}>Chọn bộ vest
); } // ── Sticky breadcrumb ──────────────────────────────────────────────────── function DStickyBreadcrumb({ page, go }) { const [occId, setOccId] = React.useState(readActiveOccD()); const [open, setOpen] = React.useState(false); const [visible, setVisible] = React.useState(false); React.useEffect(() => { const h = (e) => setOccId(e.detail?.id || readActiveOccD()); window.addEventListener('f2f:d-occ-change', h); return () => window.removeEventListener('f2f:d-occ-change', h); }, []); const suppressed = page === 'home' || page === 'occasions' || page === 'story' || page === 'confirm'; const shouldShow = !!occId && !suppressed; React.useEffect(() => { if (shouldShow) { const t = setTimeout(() => setVisible(true), 40); return () => clearTimeout(t); } setVisible(false); }, [shouldShow]); React.useEffect(() => { if (!open) return; const h = () => setOpen(false); window.addEventListener('click', h); return () => window.removeEventListener('click', h); }, [open]); if (!shouldShow) return null; const occ = OCCASIONS.find(o => o.id === occId); if (!occ) return null; return (
Phiên của bạn · đang xem đồ cho {occ.t} · {occ.n} BỘ — {occ.s.toLowerCase()}
e.stopPropagation()}> {open && (
Đổi sang sự kiện khác
{OCCASIONS.map(o=>(
{ setActiveOccD(o.id); setOpen(false); if (page==='collection') go('collection', { occ:o.id }); }} style={{ padding:'12px 16px', cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'space-between', gap:12, background: o.id===occId ? D.paperAlt : 'transparent', borderBottom:`1px solid ${D.lineSoft}` }} onMouseEnter={(e)=>{ if (o.id!==occId) e.currentTarget.style.background=D.paperAlt; }} onMouseLeave={(e)=>{ if (o.id!==occId) e.currentTarget.style.background='transparent'; }}>
{o.t}
{o.s}
{o.n}
))}
{ setActiveOccD(null); setOpen(false); go('home'); }} style={{ padding:'12px 16px', cursor:'pointer', background:D.paperAlt, fontFamily:D.sans, fontSize:10, letterSpacing:'.26em', color:D.bord, fontWeight:700, textTransform:'uppercase' }}> ← Bỏ chọn, về trang chủ
)}
go('booking', { occ:occId })}> Giữ chỗ thử →
); } // ── Ticket — heraldic frame, bordeaux line ──────────────────────────────── function DTicket({ code='F2F·MMXXVI·AQ·81', garment='Berkeley · Xám than', mill='Holland & Sherry · 240gr · Size 52', wear='3 – 6 Thg 5, 2026', fitting='2 Thg 5 · 15:30 · Phòng vest', total='4.300.000₫', status='confirmed', ghost }) { const stamps = { confirmed: { t:'ĐÃ XÁC NHẬN', c:D.bord }, fitting: { t:'CHỜ THỬ ĐỒ', c:D.gold }, worn: { t:'ĐÃ MẶC', c:D.stone }, returned: { t:'ĐÃ TRẢ', c:D.stone }, }[status] || {t:status,c:D.bord}; return (
{/* inner hairline frame */}
{/* perforation notches */}
Un billet · F · 2 · F
{garment}
{mill}
{stamps.t}
Ngày mặc
{wear}
Thử đồ
{fitting}
Mã
{code}
Tổng
{total}
); } // ── Footer — gallery/colophon, white primary ───────────────────────────── function DFooter({ go }) { return ( ); } Object.assign(window, { D, toRoman, DEyebrow, DLabel, DRule, DDivider, DSeal, DBtn, DChip, DNav, DFooter, DTicket, DStickyBreadcrumb, setActiveOccD, readActiveOccD, OCCASIONS, GARMENTS, formatVND, });