// Shared components for Split Crew landing page
function HexBg({ density = 1, accent = false }) {
// Hex grid using tiled pattern
const size = 26;
const patternId = `hex-${Math.random().toString(36).slice(2, 8)}`;
return (
{/* Two hexagons offset to tile */}
);
}
function hexPoints(cx, cy, r) {
const pts = [];
for (let i = 0; i < 6; i++) {
const a = (Math.PI / 3) * i + Math.PI / 6;
pts.push(`${(cx + r * Math.cos(a)).toFixed(2)},${(cy + r * Math.sin(a)).toFixed(2)}`);
}
return pts.join(' ');
}
// Small stat/pagination dots like the reference
function Dots({ total = 8, active = 3 }) {
return (
{Array.from({ length: total }).map((_, i) => (
);
}
function BackArrow() {
return (
);
}
// Crew avatar - silhouette style matching the reference, supports optional photo
function CrewAvatar({ color, initial, size = 40, photo = null }) {
if (photo) {
return (
);
}
return (
{initial}
);
}
// Profile store — centralised "Du" identity
const PROFILE_KEY = 'sc-me-profile';
// Stable per-device identifier — generated once, persisted forever.
// Used by Supabase to dedupe members on (crew_id, device_id).
const DEVICE_ID_KEY = 'tt-device-id';
function getDeviceId() {
let id = null;
try { id = localStorage.getItem(DEVICE_ID_KEY); } catch (e) {}
if (id && id.length > 8) return id;
// crypto.randomUUID is widely supported on iOS 14+/modern browsers.
// Fallback: time + random bytes for older runtimes.
if (window.crypto && window.crypto.randomUUID) id = window.crypto.randomUUID();
else id = 'dev-' + Date.now().toString(36) + '-' + Math.random().toString(36).slice(2, 12);
try { localStorage.setItem(DEVICE_ID_KEY, id); } catch (e) {}
return id;
}
function useMe() {
const [me, setMe] = React.useState(() => {
try {
const raw = localStorage.getItem(PROFILE_KEY);
if (raw) return JSON.parse(raw);
} catch(e) {}
return { name: 'Du', photo: null };
});
const save = (next) => {
setMe(next);
try { localStorage.setItem(PROFILE_KEY, JSON.stringify(next)); } catch(e) {}
// Tell other mounted AppFlows to refresh
window.dispatchEvent(new CustomEvent('me-updated'));
};
React.useEffect(() => {
const h = () => {
try { const raw = localStorage.getItem(PROFILE_KEY); if (raw) setMe(JSON.parse(raw)); } catch(e){}
};
window.addEventListener('me-updated', h);
return () => window.removeEventListener('me-updated', h);
}, []);
return [me, save];
}
function MeAvatar({ size = 40 }) {
const [me] = useMe();
const initial = (me.name || 'Du').trim().charAt(0).toUpperCase() || 'D';
return