/* ============================================================ Bizia — Social kit (/app/social-kit) [add-on] ============================================================ */ (function () { const { useState, useEffect } = React; const { Card, Badge, Button, Icon, PageHeader, Toggle } = window; function SocialPage() { const data = window.DATA; // Never seed from window.DATA's AmazeBites fixture — a real user must // never see fabricated handles/posts/bio for their own business. Empty // until the real per-project fetch below resolves (or stays empty). const [handles, setHandles] = useState([]); const [postIdeas, setPostIdeas] = useState([]); const [bios, setBios] = useState([]); const [bioIdx, setBioIdx] = useState(0); const [claimed, setClaimed] = useState({}); // Hash-routed SPA — the ?project= query string lives inside // window.location.hash, not window.location.search (which is always // empty here). Reading .search silently fell back to a mock project. const projectId = new URLSearchParams(window.location.hash.split('?')[1] || '').get('project') || data.projects?.[0]?.id; const [businessName, setBusinessName] = useState(''); useEffect(() => { if (!projectId) return; window.API.projects.get(projectId).then(p => { if (p?.name) setBusinessName(p.name); }).catch(() => {}); window.API.social.handles(projectId).then(r => { if (r?.length) setHandles(r); }).catch(() => {}); window.API.social.postIdeas(projectId).then(r => { if (r?.length) setPostIdeas(r); }).catch(() => {}); window.API.social.bios(projectId).then(r => { if (r?.length) setBios(r); }).catch(() => {}); }, [projectId]); return React.createElement('div', { className: 'bz-anim-up' }, React.createElement(PageHeader, { icon: 'megaphone', title: 'Social kit', badge: React.createElement(Badge, { tone: 'neutral', size: 'sm' }, 'Add-on'), sub: 'Optional: claim your handles, generate bios and get your first posts ready — so your socials match your new website.', }), React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'minmax(0,1.4fr) minmax(0,1fr)', gap: 16, alignItems: 'start' }, className: 'bz-social-grid' }, React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 16 } }, // handles React.createElement(Card, { pad: 22 }, React.createElement('h3', { style: { fontSize: 15.5, fontWeight: 650, marginBottom: 4 } }, 'Suggested handles'), React.createElement('p', { style: { fontSize: 13, color: 'var(--muted)', marginBottom: 16 } }, 'Reserve a consistent name across platforms.'), React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 10 } }, handles.map(s => React.createElement('div', { key: s.platform, style: { display: 'flex', alignItems: 'center', gap: 12, padding: '11px 14px', borderRadius: 'var(--r-md)', background: 'var(--surface-2)', border: '1px solid var(--border-soft)' } }, React.createElement('div', { style: { width: 36, height: 36, borderRadius: 9, background: s.color + '18', color: s.color, display: 'flex', alignItems: 'center', justifyContent: 'center' } }, React.createElement(Icon, { name: s.icon, size: 18 })), React.createElement('div', { style: { flex: 1, minWidth: 0 } }, React.createElement('div', { style: { fontSize: 13.5, fontWeight: 600 } }, s.platform), React.createElement('div', { style: { fontSize: 12.5, color: 'var(--muted)', fontFamily: 'var(--font-mono)' } }, s.handle)), s.available ? (claimed[s.platform] ? React.createElement(Badge, { tone: 'success', icon: 'check' }, 'Claimed') : React.createElement(Button, { variant: 'soft', size: 'sm', onClick: () => { setClaimed(p => ({ ...p, [s.platform]: true })); window.toast({ title: 'Handle reserved', desc: s.handle, tone: 'success' }); } }, 'Claim')) : React.createElement(Badge, { tone: 'danger', size: 'sm' }, 'Taken'))), ), ), // post ideas React.createElement(Card, { pad: 22 }, React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 } }, React.createElement('h3', { style: { fontSize: 15.5, fontWeight: 650 } }, 'Your first 10 posts'), React.createElement(Button, { variant: 'ghost', size: 'sm', icon: 'refresh', onClick: () => window.toast({ title: 'New ideas generated', tone: 'primary' }) }, 'Regenerate')), React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(220px,1fr))', gap: 10 } }, postIdeas.map((p, i) => React.createElement('div', { key: i, style: { display: 'flex', gap: 10, padding: 12, borderRadius: 'var(--r-md)', background: 'var(--surface-2)', border: '1px solid var(--border-soft)' } }, React.createElement('span', { style: { fontSize: 12, fontWeight: 700, color: 'var(--primary)', fontFamily: 'var(--font-mono)' } }, (i + 1).toString().padStart(2, '0')), React.createElement('span', { style: { fontSize: 13, lineHeight: 1.4 } }, p)))), ), ), React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 16 } }, // bio generator React.createElement(Card, { pad: 22 }, React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 } }, React.createElement(window.BiziaMark, { size: 20 }), React.createElement('h4', { style: { fontSize: 15, fontWeight: 650 } }, 'Bio generator')), React.createElement('div', { style: { padding: 14, borderRadius: 'var(--r-md)', background: 'var(--surface-2)', fontSize: 13.5, lineHeight: 1.5, minHeight: 72 } }, bios[bioIdx]), React.createElement('div', { style: { display: 'flex', gap: 8, marginTop: 12 } }, React.createElement(Button, { variant: 'soft', size: 'sm', icon: 'refresh', onClick: () => setBioIdx((bioIdx + 1) % bios.length) }, 'Try another'), React.createElement(Button, { variant: 'outline', size: 'sm', icon: 'copy', onClick: () => window.toast({ title: 'Bio copied', tone: 'success' }) }, 'Copy')), ), // link in bio React.createElement(Card, { pad: 22 }, React.createElement('h4', { style: { fontSize: 15, fontWeight: 650, marginBottom: 4 } }, 'Link-in-bio preview'), React.createElement('p', { style: { fontSize: 12.5, color: 'var(--muted)', marginBottom: 14 } }, 'A simple landing page for your social profiles.'), React.createElement('div', { style: { maxWidth: 240, margin: '0 auto', borderRadius: 20, padding: 18, background: 'linear-gradient(160deg,#FF8A5B,#FFB454)', textAlign: 'center' } }, React.createElement('div', { style: { width: 56, height: 56, borderRadius: '32%', background: '#fff', margin: '0 auto', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 24 } }, '☕'), React.createElement('div', { style: { fontSize: 15, fontWeight: 700, color: '#fff', marginTop: 10 } }, businessName || 'Your business'), React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 7, marginTop: 14 } }, ['Book a table', 'View menu', 'Order catering', 'Find us'].map(l => React.createElement('div', { key: l, style: { padding: '9px', borderRadius: 10, background: 'rgba(255,255,255,0.95)', fontSize: 12.5, fontWeight: 650, color: '#C2410C' } }, l)))), ), // checklist React.createElement(Card, { pad: 20 }, React.createElement('h4', { style: { fontSize: 14.5, fontWeight: 650, marginBottom: 12 } }, 'Social setup checklist'), [['Claim handles', true], ['Add profile & cover image', true], ['Set bio', false], ['Schedule first posts', false], ['Link socials on website', true]].map((c, i) => React.createElement('div', { key: i, style: { display: 'flex', alignItems: 'center', gap: 10, padding: '8px 0' } }, React.createElement('div', { style: { width: 20, height: 20, borderRadius: 999, background: c[1] ? 'var(--secondary)' : 'var(--surface-3)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' } }, c[1] ? React.createElement(Icon, { name: 'check', size: 12 }) : null), React.createElement('span', { style: { fontSize: 13.5, color: c[1] ? 'var(--muted)' : 'var(--text)', textDecoration: c[1] ? 'line-through' : 'none' } }, c[0]))), ), ), ), React.createElement('style', null, '@media(max-width:900px){.bz-social-grid{grid-template-columns:1fr !important}}'), ); } window.SocialPage = SocialPage; })();