// myci-screens-intro.jsx — Landing + Onboarding (the "give first" sequence)
// Animated mycelium that grows outward from a central node.
function MyceliumBloom({ play = true }) {
const branches = useMemo(() => {
const out = [];
const cx = 50, cy = 50;
const N = 9;
for (let i = 0; i < N; i++) {
const a = (i / N) * Math.PI * 2 + (i % 2) * 0.3;
const r = 30 + (i % 3) * 9;
const ex = cx + Math.cos(a) * r, ey = cy + Math.sin(a) * r;
out.push({ d: threadPath(cx, cy, ex, ey, i + 1), ex, ey, delay: i * 0.13 });
// sub-branch
const a2 = a + (i % 2 ? 0.5 : -0.5);
const r2 = r * 0.55;
const sx = ex, sy = ey;
const e2x = sx + Math.cos(a2) * r2, e2y = sy + Math.sin(a2) * r2;
out.push({ d: threadPath(sx, sy, e2x, e2y, i + 11), ex: e2x, ey: e2y, delay: 0.7 + i * 0.1, thin: true });
}
return out;
}, []);
return (
{branches.map((b, i) => (
))}
);
}
// Interconnected mycelium mesh that idles alive: flowing threads, pulsing nodes,
// and a couple of threads that slowly draw themselves in.
function MyceliumNet() {
const { nodes, edges } = useMemo(() => {
const nodes = [
[12, 9], [34, 6], [55, 11], [78, 7], [92, 15],
[6, 25], [27, 23], [47, 27], [67, 21], [87, 29],
[15, 41], [38, 44], [58, 39], [80, 45], [95, 39],
[9, 57], [30, 60], [50, 55], [72, 59], [90, 57],
[19, 73], [42, 76], [62, 71], [83, 75],
[12, 89], [34, 92], [55, 87], [76, 91], [93, 85],
];
const edges = [];
const TH = 25;
for (let i = 0; i < nodes.length; i++) {
const cand = [];
for (let j = i + 1; j < nodes.length; j++) {
const d = Math.hypot(nodes[i][0] - nodes[j][0], nodes[i][1] - nodes[j][1]);
if (d < TH) cand.push([j, d]);
}
cand.sort((a, b) => a[1] - b[1]);
cand.slice(0, 3).forEach(([j]) => edges.push([i, j]));
}
return { nodes, edges };
}, []);
return (
{edges.map(([a, b], i) => {
const d = threadPath(nodes[a][0], nodes[a][1], nodes[b][0], nodes[b][1], i + 1);
const grow = i % 9 === 4;
const flow = !grow && i % 3 === 0;
if (grow) return
{nodes.map((n, i) => {
const lit = i % 3 === 1;
return (
);
})}
);
}
// Brand logo mark — four colored mycelium threads meeting at a seed.
// Faithful port of the lockup mark on the landing page (index.html).
function LogoMark({ size = 54 }) {
return (
);
}
// Landing fonts — the same faces the public landing page (index.html) uses,
// so the in-app landing reads as one brand.
const LF = {
wordmark: "'Super Mellow', 'Fraunces', Georgia, serif",
display: "'Fraunces', Georgia, serif",
body: "'Hanken Grotesk', system-ui, sans-serif",
mono: "'Space Mono', ui-monospace, monospace",
};
function LandingScreen({ onJoin, onSignIn, onGuest }) {
const { t } = useI18n();
return (
{/* interconnected living network */}
{/* brown radial under the title for separation */}
{/* top bar — the guest path lives up here now, centered clear of the notch */}
{onGuest && (
)}
{/* centered hero — logo, eyebrow, wordmark, tagline, subline (mirrors index.html) */}
{t("landing.eyebrow")}
Myci
{t("landing.tagline1")}
{t("landing.subline")}
{t("landing.join")}
{onSignIn && (
{t("landing.signin")}
)}
{t("landing.note")}
{t("legal.agreePre")}{t("legal.terms")} {" "}
{t("legal.and")}{" "}
{t("legal.privacy")} .
);
}
// ---- Onboarding: Location → What can you give? → What you'd learn / could use help with ----
const GIVE_CHIPS = ["Cooking", "Gardening", "Tools to lend", "Repairs", "Childcare", "Rides", "Teaching", "Spare produce", "Carpentry", "A spare hour", "Music", "Sewing"];
const CURIOUS_CHIPS = ["Woodworking", "Bread baking", "Bike repair", "Painting", "Composting", "A new language", "Foraging", "Pottery", "Beekeeping", "Knitting"];
const NEED_CHIPS = ["Groceries", "Rides", "Repairs", "Tech help", "Yard work", "Company", "Heavy lifting", "A warm meal", "Childcare", "Paperwork"];
function OnboardingScreen({ onDone, onBack }) {
const { t } = useI18n();
const [step, setStep] = useState(0);
const [loc, setLoc] = useState(null); // { lat, lng, neighborhood, city } — coords are already fuzzed
const [give, setGive] = useState(["Spare produce", "A spare hour"]);
const [curious, setCurious] = useState(["Woodworking"]);
const [needs, setNeeds] = useState(["Rides"]);
const steps = ["Where", "Give", "Curious"];
const toggle = (arr, set, v) => set(arr.includes(v) ? arr.filter((x) => x !== v) : [...arr, v]);
return (
{/* progress */}
{steps.map((s, i) => (
))}
{step === 0 && (
{t("ob.step1")}
{t("ob.where")}
{t("ob.whereSub")}
)}
{step === 1 && (
{t("ob.step2")}
{t("ob.give")}
{t("ob.giveSub")}
toggle(give, setGive, v)} tone="var(--accent)" />
)}
{step === 2 && (
{t("ob.step3")}
{t("ob.curious")}
{t("ob.curiousSub")}
{t("ob.learnLabel")}
toggle(curious, setCurious, v)} tone="#8CA679" />
{t("ob.needLabel")}
toggle(needs, setNeeds, v)} tone="#C08457" />
)}
(step === 0 ? onBack && onBack() : setStep(step - 1))} style={{
background: "none", border: "none", cursor: "pointer", color: "#b79a6e",
fontFamily: "'Cutive', serif", fontSize: 15, padding: "10px 4px",
display: "flex", alignItems: "center", gap: 6,
}}>
(step === 2 ? onDone({ location: loc, give, curious, needs }) : setStep(step + 1))}>
{step === 2 ? t("ob.enter") : t("common.next")}
);
}
// onboarding bits
function Eyebrow({ children }) {
return {children}
;
}
function Headline({ children }) {
return {children} ;
}
// Small caption that separates the two intents on the "curious / need" step.
function GroupLabel({ children, icon }) {
return (
{icon && {children}
);
}
function Sub({ children }) {
return {children}
;
}
// Read-only field showing a value the location flow filled in (no caret — it's
// derived from your spot, not a manual picker).
function ResultField({ icon, label, value, placeholder }) {
const filled = !!value;
return (
{label}
{value || placeholder}
{filled &&
}
);
}
function ChipField({ options, selected, onToggle, tone }) {
return (
{options.map((o) => {
const on = selected.includes(o);
return (
onToggle(o)} style={{
fontFamily: "'Cutive', serif", fontSize: 14, cursor: "pointer",
padding: "9px 15px", borderRadius: 20,
background: on ? tone : "#FEF4D60d",
color: on ? "#2A1A0E" : "#E8DCC8",
border: "1px solid",
borderColor: on ? tone : "#ffffff22",
boxShadow: on ? "0 2px 6px rgba(30,16,6,.3)" : "none",
transition: "background .12s, color .12s, border-color .12s, box-shadow .12s",
}}>{o}
);
})}
);
}
// ── Geocoding (OpenStreetMap Nominatim — free, no API key) ───────────────────
const NOMINATIM = "https://nominatim.openstreetmap.org";
const DEFAULT_CENTER = [48.4277, -123.3568]; // Fernwood, Victoria BC — matches the Map tab
// Pull a neighborhood + city out of a Nominatim address object, walking the most
// specific tag down to the broadest so sparse rural results still fill in.
function pickPlace(addr = {}) {
return {
neighborhood: addr.neighbourhood || addr.suburb || addr.quarter || addr.city_district ||
addr.residential || addr.hamlet || addr.village || addr.town || "",
city: addr.city || addr.town || addr.municipality || addr.village || addr.county || addr.state || "",
};
}
// Privacy fuzz: shift the real point by up to ~300m in a random direction so the
// circle we store and show is never centered on the exact home.
function fuzzCoords(lat, lng) {
const r = 0.0008 + Math.random() * 0.0019; // ~90m..300m
const a = Math.random() * Math.PI * 2;
const dLat = r * Math.cos(a);
const dLng = (r * Math.sin(a)) / Math.max(0.2, Math.cos((lat * Math.PI) / 180));
return { lat: lat + dLat, lng: lng + dLng };
}
// Build the fuzzed location object the rest of onboarding carries.
function toLoc(lat, lng, addr) {
const f = fuzzCoords(lat, lng);
return { lat: f.lat, lng: f.lng, ...pickPlace(addr) };
}
// The "Where you are" step: real OSM map + use-my-location + a country-scoped
// city / postcode search. Scoping to a country is what lets a bare postcode
// (e.g. "V8W") actually resolve — worldwide it's ambiguous and returns nothing.
function LocationStep({ loc, onSet }) {
const { t, lang } = useI18n();
const elRef = useRef(null);
const mapRef = useRef(null);
const circleRef = useRef(null);
const [status, setStatus] = useState("idle"); // idle | locating | error
const [country, setCountry] = useState(""); // ISO alpha-2, "" until chosen
const [query, setQuery] = useState("");
const [results, setResults] = useState([]);
const [searching, setSearching] = useState(false);
const countries = useMemo(() => countryList(lang), [lang]);
const countryName = useMemo(() => {
const c = countries.find((x) => x.code === country);
return c ? c.name : "";
}, [countries, country]);
// ── Build the map once ──────────────────────────────────────────────────────
useEffect(() => {
if (!elRef.current || !window.L) return;
const map = L.map(elRef.current, {
zoomControl: false, attributionControl: true,
scrollWheelZoom: false, doubleClickZoom: false, dragging: true,
minZoom: 10, maxZoom: 17,
}).setView(loc ? [loc.lat, loc.lng] : DEFAULT_CENTER, loc ? 14 : 12);
mapRef.current = map;
map.attributionControl.setPrefix(false);
L.tileLayer("https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png", {
attribution: "© OpenStreetMap contributors © CARTO", subdomains: "abcd", maxZoom: 19,
}).addTo(map);
// settle size inside the transform-scaled, animating device frame
const t1 = setTimeout(() => map.invalidateSize(), 60);
const t2 = setTimeout(() => map.invalidateSize(), 400);
return () => { clearTimeout(t1); clearTimeout(t2); map.remove(); mapRef.current = null; circleRef.current = null; };
}, []);
// ── Draw / move the ±500m fuzz ring when the chosen spot changes ─────────────
useEffect(() => {
const map = mapRef.current;
if (!map || !loc) return;
if (circleRef.current) circleRef.current.remove();
circleRef.current = L.circle([loc.lat, loc.lng], {
radius: 500, color: "#D6AD08", weight: 1.5, opacity: 0.95,
fillColor: "#D6AD08", fillOpacity: 0.16, dashArray: "4 6",
}).addTo(map);
map.flyTo([loc.lat, loc.lng], 14, { duration: 0.7 });
}, [loc]);
// ── Frame the map on the chosen country until a precise spot is picked ───────
useEffect(() => {
const map = mapRef.current;
if (!map || !country || loc) return;
fetch(`${NOMINATIM}/search?format=jsonv2&limit=1&countrycodes=${country}&q=${encodeURIComponent(countryName || country)}`)
.then((r) => r.json())
.then((list) => {
const bb = list && list[0] && list[0].boundingbox;
if (!bb || !mapRef.current || loc) return;
const s = parseFloat(bb[0]), n = parseFloat(bb[1]), w = parseFloat(bb[2]), e = parseFloat(bb[3]);
mapRef.current.fitBounds([[s, w], [n, e]]);
})
.catch(() => {});
}, [country]);
// ── Geolocation → reverse geocode (also fills in the country) ────────────────
const useMyLocation = () => {
if (!navigator.geolocation) { setStatus("error"); return; }
setStatus("locating");
navigator.geolocation.getCurrentPosition(
(pos) => {
const { latitude, longitude } = pos.coords;
fetch(`${NOMINATIM}/reverse?format=jsonv2&zoom=14&addressdetails=1&lat=${latitude}&lon=${longitude}`)
.then((r) => r.json())
.then((d) => {
const cc = d.address && d.address.country_code;
if (cc) setCountry(cc.toUpperCase());
onSet(toLoc(latitude, longitude, d.address));
setStatus("idle"); setResults([]); setQuery("");
})
.catch(() => setStatus("error"));
},
() => setStatus("error"),
{ enableHighAccuracy: false, timeout: 10000, maximumAge: 60000 }
);
};
// ── Country-scoped city / postcode search (debounced) ────────────────────────
useEffect(() => {
if (!country || query.trim().length < 3) { setResults([]); setSearching(false); return; }
setSearching(true);
const id = setTimeout(() => {
fetch(`${NOMINATIM}/search?format=jsonv2&addressdetails=1&limit=6&countrycodes=${country}&q=${encodeURIComponent(query)}`)
.then((r) => r.json())
.then((list) => { setResults(Array.isArray(list) ? list : []); setSearching(false); })
.catch(() => { setResults([]); setSearching(false); });
}, 600);
return () => clearTimeout(id);
}, [query, country]);
const pick = (item) => {
onSet(toLoc(parseFloat(item.lat), parseFloat(item.lon), item.address));
setResults([]); setQuery("");
setStatus("idle");
};
const onCountry = (e) => { setCountry(e.target.value); setQuery(""); setResults([]); setStatus("idle"); };
const searchEnabled = !!country;
return (
{/* Use my location */}
{status === "locating" ? t("ob.locating") : t("ob.useLocation")}
{/* divider */}
{/* Country first — scopes the search so postcodes resolve */}
{t("ob.selectCountry")}
{countries.map((c) => (
{c.name}
))}
{/* City / postcode search (scoped to the chosen country) */}
{/* results dropdown */}
{searchEnabled && query.trim().length >= 3 && (results.length > 0 || !searching) && (
{results.length === 0 && !searching ? (
{t("ob.noResults")}
) : (
results.map((r, i) => (
pick(r)} style={{
display: "flex", alignItems: "center", gap: 10, width: "100%", textAlign: "left",
background: "none", border: "none", cursor: "pointer",
padding: "11px 14px", borderTop: i ? "1px solid #ffffff12" : "none",
}}>
{r.display_name}
))
)}
)}
{status === "error" && (
)}
{/* resolved place */}
{/* real map with the fuzz ring */}
{loc ? t("ob.fuzzCaption") : t("ob.youRoughly")}
{/* privacy reassurance */}