import React, { useState, useEffect } from "react"; // ─── ARCHETYPE DEFINITIONS ─────────────────────────────────────────────────── const ARCHETYPES = { THE_CATALYST: { id: "THE_CATALYST", name: "The Catalyst", tagline: "You ignite momentum. Others move because you moved first.", description: "You are the spark. When things stall, you push. When people hesitate, you act. Your team doesn't wait for permission because you've shown them they don't need to. The danger is burning yourself out before the fire catches. Your gift is starting things others only think about.", strengths: [ "Creates momentum from nothing", "Infectious urgency", "Bias for action", ], watchOuts: [ "Can outpace the team", "May move before others are ready", "Burnout risk", ], coreNeed: "Drive", color: "#FF6B35", gradient: "from-orange-500 to-red-600", }, THE_ANCHOR: { id: "THE_ANCHOR", name: "The Anchor", tagline: "You hold the centre when everything else is spinning.", description: "Stability is your currency. When the team gets chaotic, uncertain, or scared, they look to you. You don't panic. You don't flinch. You create the psychological ground that lets everyone else take risks. Your challenge is staying engaged when things feel too settled. Your gift is being the reason people stay.", strengths: ["Psychological safety", "Consistency", "Calm under pressure"], watchOuts: [ "Can resist necessary change", "May absorb others' anxiety at cost to self", "Risk of being overlooked", ], coreNeed: "Safety", color: "#2C7BE5", gradient: "from-blue-500 to-indigo-600", }, THE_CONNECTOR: { id: "THE_CONNECTOR", name: "The Connector", tagline: "You turn a group of people into an actual team.", description: "You see the humans, not just the roles. You notice when someone goes quiet. You remember what matters to people and you use that to bring them together. Teams with a Connector don't just perform, they want to show up. Your challenge is your own needs often go last. Your gift is belonging.", strengths: [ "Builds genuine relationships", "Reads room temperature", "Creates team cohesion", ], watchOuts: [ "Can prioritise harmony over honest feedback", "Susceptible to emotional overload", "May avoid conflict", ], coreNeed: "Connection", color: "#E91E8C", gradient: "from-pink-500 to-rose-600", }, THE_ARCHITECT: { id: "THE_ARCHITECT", name: "The Architect", tagline: "You build systems that outlast you.", description: "Where others see chaos, you see a design problem. You create the structures, processes, and frameworks that let everyone else operate without constantly needing to reinvent the wheel. Your team knows what to do because you made it clear. The risk is over-engineering. The gift is scalability.", strengths: [ "Process design", "Clarity of expectations", "Operational leverage", ], watchOuts: [ "Can prioritise system over people", "May struggle with ambiguity", "Risk of rigidity", ], coreNeed: "Drive", color: "#6C5CE7", gradient: "from-violet-500 to-purple-700", }, THE_ENERGISER: { id: "THE_ENERGISER", name: "The Energiser", tagline: "You raise the room. Full stop.", description: "Your presence changes the temperature. Meetings are better when you're in them. People leave conversations with you feeling more capable than when they arrived. You trade in enthusiasm but it's not performance, it's genuine. Your challenge is that not everyone operates at your frequency. Your gift is making hard things feel possible.", strengths: [ "Lifts morale", "Infectious optimism", "Makes effort feel worthwhile", ], watchOuts: [ "Can minimise real problems", "May come across as dismissive of struggle", "Energy without direction loses its impact", ], coreNeed: "Energy", color: "#F9CA24", gradient: "from-yellow-400 to-orange-500", }, THE_GUARDIAN: { id: "THE_GUARDIAN", name: "The Guardian", tagline: "You protect the people, not just the project.", description: "You are watching. Not in a surveillance sense, in a care sense. You notice who is struggling before they say anything. You advocate for your people in rooms they aren't in. Your team trusts you because you've proven your loyalty isn't conditional. The risk is absorbing too much. The gift is psychological safety that actually holds.", strengths: [ "Deep loyalty", "Proactive support", "Creates real psychological safety", ], watchOuts: [ "Can become overly protective", "May shield people from necessary growth", "Risk of burnout through over-giving", ], coreNeed: "Safety", color: "#00B894", gradient: "from-emerald-500 to-teal-600", }, THE_CHALLENGER: { id: "THE_CHALLENGER", name: "The Challenger", tagline: "You say what everyone else is thinking but won't say.", description: "You push. You question assumptions. You make people defend their thinking and in doing so, you make the thinking better. You are the reason average ideas don't ship as great ideas do. Your challenge is learning when to stop pushing and start supporting. Your gift is the standard you hold everyone to.", strengths: [ "Raises the bar", "Prevents groupthink", "Makes ideas stronger", ], watchOuts: [ "Can feel relentless", "May create defensiveness", "Pushing without trust damages the relationship", ], coreNeed: "Drive", color: "#D63031", gradient: "from-red-500 to-rose-700", }, THE_NAVIGATOR: { id: "THE_NAVIGATOR", name: "The Navigator", tagline: "You always know where north is.", description: "When the team loses the plot, you find it. You hold the vision when others are too deep in the weeds to see it. You create context that makes effort feel meaningful. The risk is getting so focused on direction that you forget the people doing the walking. The gift is clarity when clarity is scarce.", strengths: [ "Strategic clarity", "Keeps team aligned to purpose", "Sees the bigger picture", ], watchOuts: [ "Can be perceived as detached", "May underestimate execution complexity", "Direction without empathy loses people", ], coreNeed: "Drive", color: "#0984E3", gradient: "from-sky-500 to-blue-700", }, THE_CULTIVATOR: { id: "THE_CULTIVATOR", name: "The Cultivator", tagline: "You grow people, not just outcomes.", description: "You are the long game. You invest in people before you need results from them. You notice potential others overlook. You have a patience for development that most leaders don't. Your team doesn't just perform for you, they grow because of you. The challenge is the short term can feel neglected. The gift is the people you leave behind.", strengths: ["Develops talent", "Patient", "Sees potential early"], watchOuts: [ "Can sacrifice short-term results for development", "May enable underperformance too long", "Risk of becoming the crutch", ], coreNeed: "Connection", color: "#55EFC4", gradient: "from-teal-400 to-green-500", }, THE_HARMONISER: { id: "THE_HARMONISER", name: "The Harmoniser", tagline: "You make different people work like one.", description: "You read tension like a map. You know where the friction is, who is carrying it, and how to dissolve it without a big production. You create the conditions where different personalities, working styles, and opinions can coexist productively. The risk is harmony becomes a goal in itself and truth gets smoothed over. The gift is a team that actually functions.", strengths: [ "Conflict resolution", "Creates cohesion across difference", "Reads interpersonal dynamics", ], watchOuts: [ "Can suppress necessary conflict", "May prioritise peace over progress", "Risk of appearing to lack conviction", ], coreNeed: "Connection", color: "#A29BFE", gradient: "from-purple-400 to-indigo-500", }, }; // ─── QUIZ QUESTIONS ─────────────────────────────────────────────────────────── const QUESTIONS = [ // CONNECTION bucket { id: "q1", bucket: "Connection", text: "When you walk into a team meeting, your first instinct is to check in on how people are feeling before getting into the agenda.", scaleLeft: "Rarely true", scaleRight: "Always true", }, { id: "q2", bucket: "Connection", text: "You notice when someone on the team has gone quiet, even if they haven't said anything is wrong.", scaleLeft: "Rarely true", scaleRight: "Always true", }, { id: "q3", bucket: "Connection", text: "Building genuine relationships with the people you work with matters as much to you as the results you create together.", scaleLeft: "Rarely true", scaleRight: "Always true", }, // SAFETY bucket { id: "q4", bucket: "Safety", text: "People come to you when things get uncertain because they know you won't panic.", scaleLeft: "Rarely true", scaleRight: "Always true", }, { id: "q5", bucket: "Safety", text: "You actively advocate for your team members in conversations or rooms they aren't part of.", scaleLeft: "Rarely true", scaleRight: "Always true", }, { id: "q6", bucket: "Safety", text: "You believe a team that feels safe will outperform a team that feels pressured.", scaleLeft: "Disagree strongly", scaleRight: "Agree strongly", }, // DRIVE bucket { id: "q7", bucket: "Drive", text: "When a project stalls, you are usually the one who pushes it back into motion.", scaleLeft: "Rarely true", scaleRight: "Always true", }, { id: "q8", bucket: "Drive", text: "You hold a high standard and find it difficult to stay quiet when work doesn't meet it.", scaleLeft: "Rarely true", scaleRight: "Always true", }, { id: "q9", bucket: "Drive", text: "You think more about what the team could become than what it currently is.", scaleLeft: "Rarely true", scaleRight: "Always true", }, // ENERGY bucket { id: "q10", bucket: "Energy", text: "People leave conversations with you feeling more capable or motivated than when they arrived.", scaleLeft: "Rarely true", scaleRight: "Always true", }, { id: "q11", bucket: "Energy", text: "Your presence in a room noticeably changes the energy of the group.", scaleLeft: "Rarely true", scaleRight: "Always true", }, { id: "q12", bucket: "Energy", text: "You naturally frame hard situations in a way that makes action feel possible rather than overwhelming.", scaleLeft: "Rarely true", scaleRight: "Always true", }, ]; // ─── ARCHETYPE MAPPING LOGIC ────────────────────────────────────────────────── /** * Maps bucket scores to an archetype. * Uses the top two buckets and their relative intensities. * Returns archetype key string. */ function mapToArchetype(scores) { // Sort buckets descending const ranked = Object.entries(scores).sort((a, b) => b[1] - a[1]); const top = ranked[0][0]; const second = ranked[1][0]; const topScore = ranked[0][1]; const secondScore = ranked[1][1]; // High Drive dominant if (top === "Drive") { if (topScore >= 18 && second === "Energy") return "THE_CATALYST"; if (topScore >= 18 && second === "Safety") return "THE_NAVIGATOR"; if (second === "Connection") return "THE_CULTIVATOR"; if (second === "Safety") return "THE_ARCHITECT"; return "THE_CHALLENGER"; } // High Safety dominant if (top === "Safety") { if (second === "Connection") return "THE_GUARDIAN"; if (second === "Drive") return "THE_ANCHOR"; return "THE_ANCHOR"; } // High Connection dominant if (top === "Connection") { if (second === "Energy") return "THE_ENERGISER"; if (second === "Safety") return "THE_HARMONISER"; if (second === "Drive") return "THE_CULTIVATOR"; return "THE_CONNECTOR"; } // High Energy dominant if (top === "Energy") { if (second === "Connection") return "THE_CONNECTOR"; if (second === "Drive") return "THE_CATALYST"; return "THE_ENERGISER"; } // Fallback return "THE_CONNECTOR"; } // ─── HELPER: Calculate bucket scores ───────────────────────────────────────── function calculateScores(answers) { const scores = { Connection: 0, Safety: 0, Drive: 0, Energy: 0 }; QUESTIONS.forEach((q) => { if (answers[q.id] !== undefined) { scores[q.bucket] += answers[q.id]; } }); return scores; } // ─── SLIDER COMPONENT ──────────────────────────────────────────────────────── function RatingSlider({ questionId, value, onChange, scaleLeft, scaleRight }) { return (