// Landing, Ecosystem constellation section const TOOLS = [ { id: 'carte', name: "Carte de l'écosystème", icon: '🗺', tint: '#cfeee7', desc: 'Tous les profils géolocalisés : pilotes, bâtisseurs, semeurs, avec leur fiche de présentation.', apport: 'Le territoire avant l\'outil : on commence toujours par un lieu réel.', roleDesc: { pilote: "Rendez votre lieu visible des bâtisseurs et financeurs de votre biorégion. Une fiche, des photos, vos quêtes ouvertes.", batisseur: "Trouvez les lieux durables près de chez vous, filtrez par activité (permaculture, low-tech, hébergement) et engagez-vous.", semeur: "Cartographiez les projets à soutenir, filtrez par biorégion, score REGEN ou thématique avant d'engager vos fonds.", }, }, { id: 'reseau', name: 'Réseau social', icon: '💬', tint: '#fde6d8', desc: 'Un réseau pensé pour l\'action collective. Des fils centrés sur les quêtes et les rencontres concrètes entre membres.', apport: 'Les liens humains comme infrastructure : sans relations, pas de durabilité.', roleDesc: { pilote: "Animez votre communauté locale : publiez vos quêtes, partagez l'avancée des chantiers, fédérez vos bâtisseurs réguliers.", batisseur: "Discutez avec les porteurs de lieu, posez vos questions avant de partir, retrouvez d'autres bâtisseurs de votre coin.", semeur: "Suivez l'actualité concrète des projets que vous financez : avancées, photos, témoignages des bâtisseurs.", }, }, { id: 'bdd', name: 'Bibliothèque de solutions', icon: '📚', tint: '#e5e0f0', desc: 'Une bibliothèque vivante où chaque solution trouvée par un lieu devient un savoir partagé pour tous.', apport: 'La mémoire commune : ce qui marche quelque part peut servir partout.', roleDesc: { pilote: "Puisez dans les fiches techniques éprouvées (permaculture, low-tech, gouvernance) et documentez vos propres réussites pour les autres lieux.", batisseur: "Apprenez gratuitement les techniques régénératives, fiche par fiche, et formez-vous avant ou pendant vos quêtes.", semeur: "Identifiez les solutions à fort impact qui méritent d'être financées et essaimées sur d'autres territoires.", }, }, { id: 'marketplace', name: 'Marketplace', icon: '🛖', tint: '#fce8d8', desc: 'Une monnaie locale, les graines, qui circule entre membres et lieux : vous en gagnez en contribuant, vous les dépensez en ateliers, nuits en yourte, formations ou produits du réseau. La valeur reste sur le territoire au lieu de fuir vers l\'extérieur.', apport: 'Une économie circulaire en graines, locale, sans extraction.', roleDesc: { pilote: "Proposez vos ateliers, hébergements et formations contre des graines. Une nouvelle source de revenus, ancrée localement.", batisseur: "Gagnez des graines en accomplissant des quêtes, dépensez-les en ateliers, nuits en yourte ou formations dans le réseau.", semeur: "Soutenez la circulation locale en abondant les pots de graines : votre euro reste sur le territoire au lieu de fuir.", }, }, { id: 'mesure', name: "Mesure d'impact", icon: '📊', tint: '#e0eef6', desc: 'Le score REGEN sur quatre dimensions : écologie, social, gouvernance, économie. Chaque preuve fait monter le score.', apport: 'Mesurer pour rendre crédible : exigeant, vérifiable.', roleDesc: { pilote: "Affichez le score REGEN de votre lieu, rendez vos progrès visibles et crédibles auprès des financeurs et des bâtisseurs.", batisseur: "Voyez l'impact réel des lieux où vous allez agir : leur score, leurs preuves récentes, leur trajectoire.", semeur: "Allouez vos fonds aux lieux qui prouvent leur impact, suivez la progression du REGEN score de votre portefeuille.", }, }, { id: 'cockpit', name: 'Tableau de bord', icon: '📈', tint: '#f4e8d8', desc: 'Un cockpit pour chaque rôle : graines, quêtes en cours, financements, indicateurs d\'impact. Voir son impact en un coup d\'œil et le partager.', apport: 'Piloter à hauteur d\'humain : votre lieu, votre rôle, votre trajectoire.', roleDesc: { pilote: "Pilotez votre lieu en un coup d'œil : quêtes ouvertes, preuves en attente, financements reçus, score REGEN en évolution.", batisseur: "Suivez vos graines, vos quêtes en cours, vos preuves validées et vos contributions à la bibliothèque commune.", semeur: "Visualisez votre portefeuille d'impact : fonds engagés, preuves reçues, score REGEN agrégé de vos projets soutenus.", }, }, { id: 'compte', name: 'Gestion de projet', icon: '👤', tint: '#dcefe7', desc: 'Un compte unique propulsé par Nextcloud : fichiers, agenda, contacts, visio, tâches. Chiffré de bout en bout, hébergé en France, conforme RGPD : vos données et celles de votre projet sont protégées.', apport: 'Souveraineté numérique : vos données restent les vôtres, sur une infrastructure libre.', roleDesc: { pilote: "Gérez tout votre lieu sur un compte souverain : agenda, contacts bâtisseurs, fichiers chantier, visios, tâches d'équipe.", batisseur: "Stockez vos preuves, photos et notes de chantier sur un compte chiffré et libre, en France.", semeur: "Centralisez vos dossiers de financement, conventions et reportings sur une infrastructure souveraine et conforme RGPD.", }, }, { id: 'modelisation', name: 'Modélisation', icon: '⛏', tint: '#d8e8d8', desc: 'Modéliser un lieu dans Minecraft Java avant de poser la première pierre. Co-construire les futurs possibles avec la communauté, bloc par bloc.', apport: 'Projeter avant d\'agir : un jeu sérieux pour rêver le lieu ensemble.', roleDesc: { pilote: "Maquettez votre lieu en voxel avec votre communauté avant les travaux : teste d'aménagements, validation collective, économie d'erreurs.", batisseur: "Plongez dans les futurs possibles, contribuez aux maquettes des lieux que vous rejoindrez, apprenez le design solarpunk.", semeur: "Visualisez en 3D les projets avant d'investir : comprenez l'ambition, le contexte et l'usage prévu d'un lieu avant de financer.", }, }, ]; // ─────────────────── Visuals per tool ─────────────────── const ToolVisual = ({ id }) => { const common = { borderRadius: 24, border: '1px solid rgba(46,102,66,.12)', background: '#fff', height: 460, overflow: 'hidden', position: 'relative', boxShadow: '0 12px 32px rgba(1,130,98,.08)' }; if (id === 'carte') return (
Carte EVAD, communauté autour de Bordeaux, pins lieux/bâtisseurs/semeurs, panneau de la communauté EVAD
); if (id === 'reseau') return (
Réseau social EVAD, fils de quêtes et conversations entre membres
); if (id === 'bdd') return (
Bibliothèque de solutions, fiches Récupération eau, Phytoépuration, filtres thématiques
); if (id === 'marketplace') return (
Marketplace EVAD, fiches produits et services en graines
); if (id === 'mesure') return (
Ferme du Champ Vert
78/100
+12 points sur les 6 derniers mois
{[['Écologie',78,'#4aab8f'],['Social',64,'#c8732a'],['Gouvernance',52,'#7a6ea8'],['Économie',71,'#f0c84a']].map(([l,v,c]) => (
{l}{v}
))}
); if (id === 'cockpit') return (
{/* header */} TABLEAU DE BORD · SARA · BÂTISSEUSE Vue d'ensemble {/* KPI row */} {[ ['#018262', '🌱', '128', 'graines', 28], ['#c8732a', '⚡', '4', 'quêtes en cours', 144], ['#3a6e8c', '✓', '12', 'preuves validées', 260], ['#7a6ea8', '📚', '6', 'contributions BDD', 376], ].map(([c, e, v, l, x], i) => ( {e} {v} {l} ))} {/* chart card */} GRAINES · 6 DERNIERS MOIS +128 graines {/* sparkline area */} {[0,40,80,120,160,200,240,260].map((x, i) => { const y = [70,72,56,60,40,30,16,10][i]; return ; })} {/* x labels */} {['Déc','Jan','Fév','Mar','Avr','Mai'].map((m, i) => ( {m} ))} {/* REGEN gauge */} SCORE REGEN 78 /100 +12 sur 6 mois {/* upcoming quests */} PROCHAINES QUÊTES {[ ['#018262', 'Phytoépuration · samedi', '12 G'], ['#c8732a', 'Atelier permaculture · 23 mai', '50 G'], ['#7a6ea8', 'Récolte miel · juin', '8 G'], ].map(([c, t, p], i) => ( {t} {p} ))}
); if (id === 'compte') return (
{/* Nextcloud-style app grid */} {/* header bar */} Sara · Bâtisseuse · 28 🌱 evad.cloud {/* app tiles */} {[ ['📁','Fichiers','#0082c9'], ['📅','Agenda','#c8732a'], ['👥','Contacts','#7a6ea8'], ['💬','Talk','#018262'], ['✉️','Mail','#3a6e8c'], ['📋','Deck','#b85e38'], ['📝','Notes','#4aab8f'], ['🗂','Office','#f0c84a'], ['🔐','Coffre','#016b52'], ['📊','Forms','#7ec9b0'], ['🗺','Maps','#c8732a'], ['⚙️','Réglages','#3d6b5a'], ].map((a, i) => { const col = i % 4, row = Math.floor(i / 4); return ( {a[0]} {a[1]} ); })} {/* nextcloud badge */} Propulsé par Nextcloud 🇫🇷 Hébergement souverain
); if (id === 'modelisation') return (
Modélisation Minecraft Java, village solarpunk en voxel
); return
; }; // ─────────────────── Per-role tool priorities ─────────────────── // Higher = more relevant. Top 3 get a "Pour vous" badge and float to top. const ROLE_PRIORITIES = { pilote: { carte: 5, cockpit: 4, mesure: 4, modelisation: 3, compte: 3, bdd: 2, reseau: 1, marketplace: 1 }, batisseur: { reseau: 5, marketplace: 5, bdd: 4, cockpit: 3, modelisation: 2, carte: 2, mesure: 1, compte: 1 }, semeur: { mesure: 5, carte: 4, cockpit: 4, bdd: 3, compte: 2, reseau: 1, marketplace: 1, modelisation: 1 }, }; const ROLE_META = { pilote: { emoji: '🏡', short: 'Pilote', color: '#018262', tint: '#dcefe7', focus: 'piloter votre lieu', accent: 'Visualisez votre territoire, mesurez votre impact, suivez vos quêtes.' }, batisseur: { emoji: '🌿', short: 'Bâtisseur', color: '#c8732a', tint: '#fce8d8', focus: 'agir sur le terrain', accent: 'Trouvez vos quêtes, échangez vos graines, apprenez du commun.' }, semeur: { emoji: '🌾', short: 'Semeur', color: '#3a6e8c', tint: '#e0eef6', focus: 'financer avec preuves', accent: 'Mesurez les impacts, cartographiez les projets, suivez votre portefeuille.' }, }; // ─────────────────── Section ─────────────────── const EcosystemSection = ({ role, onChoose }) => { const meta = role && ROLE_META[role]; const priorities = role && ROLE_PRIORITIES[role]; // Reorder tools by priority, default order if no role const orderedTools = React.useMemo(() => { if (!priorities) return TOOLS; return [...TOOLS].sort((a, b) => (priorities[b.id] || 0) - (priorities[a.id] || 0)); }, [priorities]); // Top 3 tools get a "Pour vous" badge const topThreeIds = React.useMemo(() => orderedTools.slice(0, 3).map(t => t.id), [orderedTools]); const [open, setOpen] = React.useState(orderedTools[0].id); // When role changes, auto-open the top-priority tool React.useEffect(() => { setOpen(orderedTools[0].id); }, [role]); // eslint-disable-line react-hooks/exhaustive-deps const current = orderedTools.find(t => t.id === open) || orderedTools[0]; return (
Un écosystème d'outils,
connectés au même compte.} sub={meta ? meta.accent : "Huit solutions, un seul compte. Sélectionnez-en une dans la liste pour comprendre sa contribution au tissu vivant d'EVAD."}>
{/* LEFT, accordion */}
{orderedTools.map(t => { const isOpen = open === t.id; const isTop = meta && topThreeIds.includes(t.id); return (

{t.desc}

{meta && t.roleDesc && t.roleDesc[role] && (
{meta.emoji}
Pour vous, {meta.short}

{t.roleDesc[role]}

)}
); })}
{/* RIGHT, visual + caption */}
Apport à l'écosystème
{current.apport}
); }; window.EcosystemSection = EcosystemSection;