const { useState, useEffect, useRef } = window.React;// ─── DATA ─────────────────────────────────────────────────────────────────────
const COMPETENCIES = {
  SA: { name: "Self-Aware & Emotionally Intelligent", short: "Self-Aware", icon: "🔍", color: "#1A2D4A", light: "#E8EEF5" },
  SP: { name: "Systemically & Politically Intelligent", short: "Systemic & Political", icon: "🧠", color: "#1A5276", light: "#E8F4F8" },
  RA: { name: "Resilient & Adaptive", short: "Resilient & Adaptive", icon: "🔄", color: "#7B2D1E", light: "#FAEAE8" },
  EG: { name: "Ethically Grounded", short: "Ethically Grounded", icon: "🧭", color: "#5B2C6F", light: "#F4EEF7" },
  RC: { name: "Relationally & Communicatively Fluent", short: "Relational & Communicative", icon: "🗣️", color: "#1E6B3C", light: "#E8F5EE" },
  SF: { name: "Strategic & Future-Oriented", short: "Strategic & Future", icon: "🔭", color: "#3A1F5C", light: "#F0EBF7" },
};

const scenarios = [
  { id: 1, title: "The Unexpected Mirror", context: "Individual | Self-Awareness",
    situation: "A 360-degree feedback report reveals that your colleagues perceive you as impatient and dismissive in meetings — a pattern you were completely unaware of. You feel genuinely surprised and, privately, defensive.",
    options: [
      { letter: "A", text: "Approach two or three trusted colleagues individually to explore specific examples and better understand the pattern they observed." },
      { letter: "B", text: "Acknowledge the feedback professionally, commit to a behavioral change plan, and share it with your manager." },
      { letter: "C", text: "Review your recent meeting calendar and habits to identify structural or workload factors driving the behavior." },
      { letter: "D", text: "Thank the feedback providers and move forward — perceptions do not always reflect reality, and your intentions were clear." },
    ],
    scoring: { A: { comp: "SA", pts: 4 }, B: { comp: "RC", pts: 3 }, C: { comp: "RA", pts: 2 }, D: { comp: "EG", pts: 1 } } },

  { id: 2, title: "The Hidden Blockage", context: "Cross-Functional | Organizational Politics",
    situation: "A cross-functional project you are leading keeps stalling. Behind the scenes, two senior directors with competing agendas are blocking progress through indirect means — neither has raised concerns openly.",
    options: [
      { letter: "A", text: "Escalate the issue formally through your reporting line and request that executive leadership intervene to clear the blockage." },
      { letter: "B", text: "Schedule individual meetings with each director to genuinely understand their concerns and discover whether any shared interests exist." },
      { letter: "C", text: "Increase the frequency and visibility of cross-functional updates to build transparency and generate accountability pressure." },
      { letter: "D", text: "Reframe the project around a higher-order shared purpose that transcends each director's functional territory." },
    ],
    scoring: { A: { comp: "EG", pts: 1 }, B: { comp: "SP", pts: 4 }, C: { comp: "RC", pts: 2 }, D: { comp: "SF", pts: 3 } } },

  { id: 3, title: "The Failed Program", context: "Project Leadership | Setback Response",
    situation: "A major program you have managed for six months fails to meet its milestones due to factors largely outside your control — a key partner withdraws, budgets are cut mid-project, and market conditions shift against you.",
    options: [
      { letter: "A", text: "Lead a clear and honest post-mortem with your team, focusing explicitly on what you can learn and what you can control going forward." },
      { letter: "B", text: "Prepare a detailed accountability report for leadership that maps each contributing factor and assigns clear ownership." },
      { letter: "C", text: "Identify the two or three most salvageable elements of the program and propose a scaled-down version to leadership." },
      { letter: "D", text: "Personally brief each key stakeholder to manage expectations, preserve the relationship, and restore trust." },
    ],
    scoring: { A: { comp: "RA", pts: 4 }, B: { comp: "EG", pts: 3 }, C: { comp: "SF", pts: 2 }, D: { comp: "RC", pts: 1 } } },

  { id: 4, title: "The Respected Wrongdoer", context: "Integrity | Organizational Accountability",
    situation: "During a routine audit, you discover that a well-liked and respected colleague has been systematically misrepresenting utilization data to meet quarterly KPIs. The impact is currently limited, but the pattern is unmistakable.",
    options: [
      { letter: "A", text: "Speak directly with the colleague first — give them the opportunity to understand the gravity of the situation and self-correct through proper channels." },
      { letter: "B", text: "Report the finding to your compliance officer without informing the colleague first, to protect the integrity of any investigation." },
      { letter: "C", text: "Document your findings thoroughly and monitor the pattern for another cycle before deciding whether and how to act." },
      { letter: "D", text: "Raise it with your manager as a process concern, without naming the individual initially, to test the organization's response." },
    ],
    scoring: { A: { comp: "EG", pts: 4 }, B: { comp: "SP", pts: 2 }, C: { comp: "RA", pts: 1 }, D: { comp: "RC", pts: 3 } } },

  { id: 5, title: "The Senior Peer", context: "Feedback | Cultural Intelligence",
    situation: "You need to deliver difficult performance feedback to a senior colleague — someone older than you, deeply respected, and from a cultural background where direct peer criticism carries significant relational risk.",
    options: [
      { letter: "A", text: "Send a written reflection that raises the performance concerns through questions and observations, giving them space to process before responding." },
      { letter: "B", text: "Frame the conversation around the impact on shared goals and invite their perspective first — make it a dialogue, not a verdict." },
      { letter: "C", text: "Involve HR to ensure the conversation is formally structured and documented, reducing ambiguity for both parties." },
      { letter: "D", text: "Seek advice from a mutual trusted colleague who knows both of you and the cultural context before deciding how to proceed." },
    ],
    scoring: { A: { comp: "RA", pts: 1 }, B: { comp: "RC", pts: 4 }, C: { comp: "EG", pts: 2 }, D: { comp: "SP", pts: 3 } } },

  { id: 6, title: "The Comfortable Organization", context: "Organizational Strategy | Change Leadership",
    situation: "Your organization has performed successfully for a decade in its current model. Industry signals indicate a significant market shift ahead, but the leadership team remains comfortable with the status quo and resistant to change conversations.",
    options: [
      { letter: "A", text: "Commission a market intelligence brief and build a data-driven case for strategic re-evaluation to present at the next leadership forum." },
      { letter: "B", text: "Launch a small, low-risk innovation pilot that demonstrates an alternative direction — show, don't just tell." },
      { letter: "C", text: "Build a coalition of change-oriented leaders inside the organization and shape the strategic narrative from within." },
      { letter: "D", text: "Focus on delivering excellence in the current model — disrupting from within requires the right timing, and you do not yet have the political capital." },
    ],
    scoring: { A: { comp: "SP", pts: 3 }, B: { comp: "SF", pts: 4 }, C: { comp: "RC", pts: 2 }, D: { comp: "EG", pts: 1 } } },

  { id: 7, title: "The Reactive Room", context: "Team Leadership | Emotional Regulation",
    situation: "During a high-pressure executive meeting, you notice mid-session that you have become increasingly short-tempered — cutting people off, being sarcastic, and dominating the conversation in ways you do not normally do.",
    options: [
      { letter: "A", text: "Pause the agenda briefly, acknowledge the tone in the room without blame, and invite a collective reset before continuing." },
      { letter: "B", text: "Continue the meeting and follow up individually with anyone you may have affected, once the pressure has passed." },
      { letter: "C", text: "Redirect your energy toward the task and adjust your tone as best you can without disrupting momentum." },
      { letter: "D", text: "Push through — the pressure is real, the meeting needs to deliver, and self-correction can come later." },
    ],
    scoring: { A: { comp: "SA", pts: 4 }, B: { comp: "RC", pts: 3 }, C: { comp: "RA", pts: 2 }, D: { comp: "SP", pts: 1 } } },

  { id: 8, title: "The Invisible Veto", context: "Organizational Influence | Informal Power",
    situation: "You present a well-evidenced strategic proposal at a leadership forum. It receives polite acknowledgment but no action. You later discover that a senior leader with informal influence blocked it before the meeting even started.",
    options: [
      { letter: "A", text: "Request a direct, private meeting with the senior leader to genuinely understand their concerns and find a path to alignment." },
      { letter: "B", text: "Resubmit the proposal with additional endorsements from influential stakeholders who can shift the political balance." },
      { letter: "C", text: "Accept the outcome for now and look for a different channel or timing to advance the work in the future." },
      { letter: "D", text: "Raise the dynamics of informal decision-making as a systemic governance concern with your manager." },
    ],
    scoring: { A: { comp: "SP", pts: 4 }, B: { comp: "SF", pts: 3 }, C: { comp: "RA", pts: 2 }, D: { comp: "EG", pts: 1 } } },

  { id: 9, title: "The Personal Crisis", context: "Leadership Wellbeing | Organizational Difficulty",
    situation: "After a period of strong performance, your organization enters a serious crisis — restructuring, layoffs, and significant uncertainty about the future. The situation feels deeply personal and you are noticing exhaustion in yourself.",
    options: [
      { letter: "A", text: "Seek professional support — a coach, therapist, or mentor — and temporarily protect your energy by reducing non-essential commitments." },
      { letter: "B", text: "Use the challenge as a deliberate opportunity to model calm, grounded, and visible leadership for your team." },
      { letter: "C", text: "Stay focused on your key deliverables and maintain high output — your team needs stability and you cannot afford to step back." },
      { letter: "D", text: "Create space for honest conversations with trusted peers about how you are all navigating the uncertainty together." },
    ],
    scoring: { A: { comp: "RA", pts: 4 }, B: { comp: "SA", pts: 3 }, C: { comp: "EG", pts: 1 }, D: { comp: "RC", pts: 2 } } },

  { id: 10, title: "The Family Exception", context: "Family Business | Governance Integrity",
    situation: "The owner-founder asks you to fast-track a supplier contract to a firm run by his son — bypassing the standard procurement process. He frames it as trust, loyalty, and 'keeping it in the family.'",
    options: [
      { letter: "A", text: "Agree to accelerate the process and thoroughly document the instruction from the owner to protect yourself." },
      { letter: "B", text: "Decline respectfully but clearly — explain the reputational and operational risks of bypassing procurement, and propose a proper process that can still be expedited." },
      { letter: "C", text: "Propose a time-bounded exception with full documented justification and a parallel review by another senior leader." },
      { letter: "D", text: "Quietly involve another senior leader to share the decision-making responsibility and reduce your personal exposure." },
    ],
    scoring: { A: { comp: "SP", pts: 2 }, B: { comp: "EG", pts: 4 }, C: { comp: "SF", pts: 3 }, D: { comp: "RC", pts: 1 } } },

  { id: 11, title: "The Cultural Friction", context: "Team Diversity | Communication Norms",
    situation: "Cultural tensions are rising between two subgroups in your team — one with Gulf Arab cultural norms and one with Western expatriate working styles. The friction is showing up as passive conflict and growing resentment.",
    options: [
      { letter: "A", text: "Work with the full team to co-create a team charter that names working norms explicitly — without singling out any cultural group as the problem." },
      { letter: "B", text: "Coach individual members from each group separately on cross-cultural communication and its impact on the team." },
      { letter: "C", text: "Bring in an external facilitator with cross-cultural expertise to run a structured team dialogue session." },
      { letter: "D", text: "Give it time — cultural differences in teams often soften naturally as people work through shared goals." },
    ],
    scoring: { A: { comp: "RC", pts: 4 }, B: { comp: "SA", pts: 3 }, C: { comp: "SP", pts: 2 }, D: { comp: "RA", pts: 1 } } },

  { id: 12, title: "The Strategy vs. Operations Trap", context: "Executive Leadership | Strategic Capacity",
    situation: "You have been asked to develop a five-year leadership strategy while simultaneously managing a relentless flow of operational priorities. Every time you sit down to think strategically, something urgent pulls you away.",
    options: [
      { letter: "A", text: "Block and protect two fixed days per quarter exclusively for strategic thinking — non-negotiable in your calendar, regardless of what arises." },
      { letter: "B", text: "Build a small cross-functional working group to co-develop the strategy with you while you manage the operational flow." },
      { letter: "C", text: "Start with the single most pressing strategic question and build from there incrementally — do not wait for protected space that may never come." },
      { letter: "D", text: "Escalate the resource conflict to leadership — the strategic work requires protected organizational time and cannot be delivered under these conditions." },
    ],
    scoring: { A: { comp: "SF", pts: 4 }, B: { comp: "RC", pts: 3 }, C: { comp: "RA", pts: 2 }, D: { comp: "SP", pts: 1 } } },

  { id: 13, title: "The Identity Cliff", context: "Career Transition | Leadership Identity",
    situation: "You have been promoted into a senior leadership role that requires fundamentally different ways of working — less doing, more enabling; less control, more influence. You feel out of your depth and quietly anxious.",
    options: [
      { letter: "A", text: "Invest in a coaching relationship specifically to explore the identity shift and build new leadership behaviors from the inside out." },
      { letter: "B", text: "Immerse yourself in the operational dimensions of the new role first — building early credibility will reduce the anxiety." },
      { letter: "C", text: "Identify two or three senior leaders who made similar transitions successfully and learn directly from their experience." },
      { letter: "D", text: "Set clear 90-day objectives for yourself and measure your progress rigorously — structure will provide the stability you need." },
    ],
    scoring: { A: { comp: "SA", pts: 4 }, B: { comp: "SP", pts: 2 }, C: { comp: "RC", pts: 3 }, D: { comp: "EG", pts: 1 } } },

  { id: 14, title: "The Invisible Org Chart", context: "New Leader Onboarding | Informal Systems",
    situation: "You join a new organization as a senior leader and quickly discover that the org chart does not reflect actual decision-making. A small informal group — without formal authority — appears to shape most key organizational outcomes.",
    options: [
      { letter: "A", text: "Begin systematically building genuine relationships across the informal group — understand how influence flows before attempting to use it." },
      { letter: "B", text: "Operate through formal channels only — informal power structures are unhealthy and reinforcing them is counterproductive." },
      { letter: "C", text: "Observe carefully for 60 to 90 days before engaging — understanding an unfamiliar system takes time and humility." },
      { letter: "D", text: "Raise the governance concern formally with your manager and propose structural clarification of decision rights." },
    ],
    scoring: { A: { comp: "SP", pts: 4 }, B: { comp: "EG", pts: 2 }, C: { comp: "SA", pts: 3 }, D: { comp: "RC", pts: 1 } } },

  { id: 15, title: "The Unwanted Assignment", context: "Organizational Change | Role Disruption",
    situation: "The team structure you spent two years building is eliminated in a broader restructuring. You are asked to lead a very different team — an unfamiliar domain, a different organizational culture, and less seniority than your previous role.",
    options: [
      { letter: "A", text: "Approach the new role with genuine curiosity — commit fully to understanding the team, the domain, and what leadership looks like here." },
      { letter: "B", text: "Negotiate the scope, expectations, and resources of the new role before committing — clarity now will protect you later." },
      { letter: "C", text: "Be transparent with leadership about your genuine concerns while agreeing to give the assignment a full and fair try." },
      { letter: "D", text: "Accept the change with confidence — your leadership capabilities are transferable and this is an opportunity to demonstrate that." },
    ],
    scoring: { A: { comp: "RA", pts: 4 }, B: { comp: "SP", pts: 3 }, C: { comp: "SA", pts: 2 }, D: { comp: "EG", pts: 1 } } },

  { id: 16, title: "The Unintended Harm", context: "Accountability | Policy Impact",
    situation: "Six months after you implemented a policy approved through proper channels, you learn that it has created unintended harm to a specific group of employees — affecting their workload and wellbeing in ways no one anticipated.",
    options: [
      { letter: "A", text: "Acknowledge the impact openly and directly with the affected group, take personal ownership, and initiate a formal review immediately." },
      { letter: "B", text: "Conduct a quiet internal review to understand the full extent of the harm before deciding how and whether to communicate externally." },
      { letter: "C", text: "Reach out personally to those affected, offer interim accommodations, and commission a review to run concurrently." },
      { letter: "D", text: "Brief your manager and await organizational guidance before taking any visible action." },
    ],
    scoring: { A: { comp: "EG", pts: 4 }, B: { comp: "SP", pts: 2 }, C: { comp: "RC", pts: 3 }, D: { comp: "RA", pts: 1 } } },

  { id: 17, title: "The Quiet Withdrawal", context: "Employee Wellbeing | Team Cohesion",
    situation: "A talented team member has progressively disappeared from team meetings, stopped participating in group channels, and appears withdrawn. Their individual output has remained adequate. You do not know what is happening for them.",
    options: [
      { letter: "A", text: "Check in with them in a one-on-one conversation — ask how they are as a person, not how their work is going, and genuinely listen." },
      { letter: "B", text: "Monitor the pattern for two to three more weeks before acting — intervening too early may feel intrusive." },
      { letter: "C", text: "Address the attendance expectations in the next team meeting in a way that applies to everyone, without singling them out." },
      { letter: "D", text: "Talk to a mutual colleague who knows them well to get some context before approaching them directly." },
    ],
    scoring: { A: { comp: "RC", pts: 4 }, B: { comp: "RA", pts: 1 }, C: { comp: "SP", pts: 2 }, D: { comp: "SA", pts: 3 } } },

  { id: 18, title: "The Departing Star", context: "Talent Strategy | Retention",
    situation: "One of your strongest team members has been approached by a competitor and is seriously considering leaving. They mention privately that they feel their potential is not fully utilized and they are looking for a bigger challenge.",
    options: [
      { letter: "A", text: "Create a meaningful, concrete growth opportunity for them within your organization — not a future promise, but something real and significant now." },
      { letter: "B", text: "Have an honest, open conversation about what would make them stay and what you can realistically offer — without over-promising." },
      { letter: "C", text: "Respect their autonomy and their decision — trying to retain them through counter-offers can feel desperate and damage the relationship." },
      { letter: "D", text: "Consult with HR and your manager to understand what flexibility you have before initiating any conversation about retention." },
    ],
    scoring: { A: { comp: "SF", pts: 4 }, B: { comp: "RC", pts: 3 }, C: { comp: "EG", pts: 1 }, D: { comp: "SP", pts: 2 } } },

  { id: 19, title: "The Postponed Conversation", context: "Performance Management | Avoidance",
    situation: "You realize that you have been consistently avoiding a difficult performance conversation with a long-standing team member. You keep telling yourself you are waiting for the right moment — but three months have passed.",
    options: [
      { letter: "A", text: "Name clearly to yourself that you are avoiding this, understand what is underneath that avoidance, and schedule the conversation this week." },
      { letter: "B", text: "Prepare extensively — structure, language, and desired outcome — so that when the conversation happens, you are fully ready." },
      { letter: "C", text: "Begin with a lighter check-in conversation to test the water and build a bridge before raising the performance concern directly." },
      { letter: "D", text: "Involve HR now so that documentation is in place before you have the conversation." },
    ],
    scoring: { A: { comp: "SA", pts: 4 }, B: { comp: "RC", pts: 3 }, C: { comp: "RA", pts: 2 }, D: { comp: "SP", pts: 1 } } },

  { id: 20, title: "The Political Modification", context: "Client Relations | Program Integrity",
    situation: "A government client funding a national leadership program requests modifications that would dilute the evidence-based design — but the modifications genuinely reflect political and cultural sensitivities in their context.",
    options: [
      { letter: "A", text: "Propose a tiered model: a core that preserves design integrity and a peripheral layer that accommodates their political needs without compromising the program's purpose." },
      { letter: "B", text: "Hold firm on the design — any compromise of the evidence base undermines the program's credibility and your professional standing." },
      { letter: "C", text: "Accept the modifications and document your professional reservations formally in writing." },
      { letter: "D", text: "Use the negotiation as an extended opportunity to educate the client on the design principles before reaching any decision." },
    ],
    scoring: { A: { comp: "SP", pts: 4 }, B: { comp: "EG", pts: 3 }, C: { comp: "RA", pts: 2 }, D: { comp: "RC", pts: 1 } } },

  { id: 21, title: "The Cancelled Work", context: "Legacy & Loss | Leadership Transitions",
    situation: "A leadership initiative you personally championed and led for two years is cancelled by incoming leadership with different priorities. You are told to wrap it up efficiently. The work meant a great deal to you personally.",
    options: [
      { letter: "A", text: "Allow yourself honest time to grieve the loss, then close the initiative with care and document its learnings so they are not lost." },
      { letter: "B", text: "Prepare a case for the new leadership to continue a scaled-down version of the most impactful elements before it closes." },
      { letter: "C", text: "Accept the decision cleanly and redirect your energy toward understanding and contributing to the new leadership's direction." },
      { letter: "D", text: "Formally document your professional objection to the cancellation and escalate to the governance body for review." },
    ],
    scoring: { A: { comp: "RA", pts: 4 }, B: { comp: "SF", pts: 3 }, C: { comp: "SA", pts: 2 }, D: { comp: "EG", pts: 1 } } },

  { id: 22, title: "The Thin Evidence", context: "Professional Integrity | Knowledge Claims",
    situation: "Your organization wants to market a leadership program as 'evidence-based' and 'validated.' The evidence is thin — a small internal pilot, no control group, and mixed results. The marketing team wants to proceed with strong public claims.",
    options: [
      { letter: "A", text: "Refuse to endorse claims you cannot professionally stand behind — propose honest language that accurately reflects what was actually done and found." },
      { letter: "B", text: "Offer to redesign the validation process so that more credible claims can be made — delay the marketing until the evidence is stronger." },
      { letter: "C", text: "Agree to 'evidence-informed' as a compromise phrasing — it is close enough to be acceptable while reducing your direct exposure." },
      { letter: "D", text: "Allow the marketing team to make the final call — they own the claims and the risk, not you." },
    ],
    scoring: { A: { comp: "EG", pts: 4 }, B: { comp: "SF", pts: 3 }, C: { comp: "SP", pts: 2 }, D: { comp: "RA", pts: 1 } } },

  { id: 23, title: "The Fractured Team", context: "Trust Rebuilding | Post-Restructuring",
    situation: "Following a difficult organizational restructuring, trust between the leadership team and their direct reports has visibly fractured. People are reluctant to speak openly in meetings, and there is a palpable tension beneath the surface.",
    options: [
      { letter: "A", text: "Name the trust gap directly in a leadership team meeting and invite a co-designed process for rebuilding it — rather than pretending it does not exist." },
      { letter: "B", text: "Commission an anonymous pulse survey to understand the scale and nature of the trust damage before taking any action." },
      { letter: "C", text: "Focus on consistent, transparent behavior over the coming months — trust rebuilds through actions sustained over time, not conversations." },
      { letter: "D", text: "Give the team time — restructurings are always disruptive, and cohesion typically returns as people settle into new rhythms." },
    ],
    scoring: { A: { comp: "RC", pts: 4 }, B: { comp: "SP", pts: 3 }, C: { comp: "EG", pts: 2 }, D: { comp: "RA", pts: 1 } } },

  { id: 24, title: "The Sacred Bottleneck", context: "Organizational Design | Change Management",
    situation: "A well-established process that has always worked is now creating a visible bottleneck as your organization scales. The team is aware of it, but the process is deeply embedded in the culture, and changing it will cause short-term disruption.",
    options: [
      { letter: "A", text: "Build a comprehensive stakeholder map and a full business case before proposing any change — understand the system before moving it." },
      { letter: "B", text: "Design a phased transition plan that names the current cost of the process and the long-term organizational gain of the change." },
      { letter: "C", text: "Pilot the new process with one willing team first — build real evidence before scaling the change organization-wide." },
      { letter: "D", text: "Raise the issue consistently in leadership forums until it reaches the agenda as a formal priority." },
    ],
    scoring: { A: { comp: "SP", pts: 3 }, B: { comp: "SF", pts: 4 }, C: { comp: "RA", pts: 2 }, D: { comp: "EG", pts: 1 } } },

  { id: 25, title: "The Imposter in the Spotlight", context: "Leadership Visibility | Self-Doubt",
    situation: "Your team consistently gives you glowing feedback and your leadership is widely celebrated. Privately, you feel like an imposter — worried that people see a version of you that does not match how you experience yourself.",
    options: [
      { letter: "A", text: "Explore this experience with a coach — imposter feelings often carry information about your edges and growth, not just your inadequacy." },
      { letter: "B", text: "Accept the feedback at face value — your impact is real and consistent, regardless of your internal experience." },
      { letter: "C", text: "Share the experience with a trusted colleague to test whether what you feel privately aligns with what others observe in you." },
      { letter: "D", text: "Commit more deeply to your professional development — the gap you feel internally is pointing to what you still need to build." },
    ],
    scoring: { A: { comp: "SA", pts: 4 }, B: { comp: "RA", pts: 2 }, C: { comp: "RC", pts: 3 }, D: { comp: "EG", pts: 1 } } },

  { id: 26, title: "The Divided Board", context: "Executive Presence | Stakeholder Navigation",
    situation: "You have been asked to present a strategic proposal to a board with members holding known competing agendas. Some want international expansion; others want local consolidation. You have twenty minutes.",
    options: [
      { letter: "A", text: "Tailor your framing to speak to the shared underlying concern that exists beneath both positions — the organization's long-term viability." },
      { letter: "B", text: "Present your facts and recommendation clearly and confidently, and let the board members draw their own conclusions." },
      { letter: "C", text: "Lead with impact stories and human cases rather than data, to activate a shared emotional connection to the proposal." },
      { letter: "D", text: "Open by acknowledging the complexity and invite the board to co-shape the framing of the discussion before presenting." },
    ],
    scoring: { A: { comp: "SP", pts: 4 }, B: { comp: "EG", pts: 3 }, C: { comp: "RC", pts: 2 }, D: { comp: "SF", pts: 1 } } },

  { id: 27, title: "The Invisible Drain", context: "Leadership Sustainability | Energy Management",
    situation: "After months of consistent high performance, you notice something has shifted — your concentration is lower, your enthusiasm has faded, and you are going through the motions in meetings. You cannot identify a clear external cause.",
    options: [
      { letter: "A", text: "Step back deliberately and take stock — what has been depleted across your energy domains (physical, emotional, relational, intellectual, spiritual) and what needs to be renewed?" },
      { letter: "B", text: "Push through the difficult patch — every leader has troughs, and momentum often restores itself once the context shifts." },
      { letter: "C", text: "Seek a conversation with your coach, mentor, or a trusted peer — something has shifted internally and naming it is the first step." },
      { letter: "D", text: "Temporarily reduce your commitments and protect your energy for your most important responsibilities until you stabilize." },
    ],
    scoring: { A: { comp: "RA", pts: 4 }, B: { comp: "SP", pts: 1 }, C: { comp: "SA", pts: 3 }, D: { comp: "EG", pts: 2 } } },

  { id: 28, title: "The Friendly Vendor", context: "Procurement | Conflict of Interest",
    situation: "A vendor selection process is underway. The lead consultant from one of the shortlisted vendors is a personal friend you have known for fifteen years. Their proposal is competitive but not the strongest in the evaluation.",
    options: [
      { letter: "A", text: "Recuse yourself from the entire evaluation process and proactively disclose the relationship to your manager and the selection committee." },
      { letter: "B", text: "Remain in the evaluation process but declare the relationship upfront and clearly to all members of the selection committee." },
      { letter: "C", text: "Score all proposals strictly against the agreed criteria — your professionalism is sufficient safeguard against bias." },
      { letter: "D", text: "Inform your friend privately that you cannot influence the process and ensure they know you will score objectively." },
    ],
    scoring: { A: { comp: "EG", pts: 4 }, B: { comp: "SP", pts: 3 }, C: { comp: "RA", pts: 2 }, D: { comp: "RC", pts: 1 } } },

  { id: 29, title: "The Emotional Client", context: "Client Relations | High-Stakes Communication",
    situation: "You need to request a project timeline extension from a client for whom this project is a personal legacy initiative championed by their CEO. The extension is justified, but the timing and framing matter enormously for the relationship.",
    options: [
      { letter: "A", text: "Submit the request in writing with a detailed rationale, giving the client time to process the information before any conversation." },
      { letter: "B", text: "Meet in person, acknowledge the significance of the project to them, and present the request within the context of shared commitment to making it right." },
      { letter: "C", text: "Frame the extension as a strategic recommendation — a sign of professional care, not a failure — and come with a revised delivery plan." },
      { letter: "D", text: "Ask your manager to make the request — the weight of senior leadership may help the client receive the news more easily." },
    ],
    scoring: { A: { comp: "EG", pts: 2 }, B: { comp: "RC", pts: 4 }, C: { comp: "SF", pts: 3 }, D: { comp: "SP", pts: 1 } } },

  { id: 30, title: "The Blank Canvas", context: "Program Design | Strategic Thinking",
    situation: "You are asked to design a new leadership development initiative from scratch — no established brief, no defined budget, and no precedent in the organization. Leadership wants a proposal within two months.",
    options: [
      { letter: "A", text: "Begin by interviewing key stakeholders to understand the actual organizational need before designing anything — diagnose before prescribing." },
      { letter: "B", text: "Start with the question 'What kind of leaders does this organization need in five years?' and work backwards from there to the program design." },
      { letter: "C", text: "Propose a structured discovery phase first — clarify scope and appetite before committing to a design that may not be what is needed." },
      { letter: "D", text: "Draw on proven models from comparable organizations and adapt them thoughtfully to your context — build on what works." },
    ],
    scoring: { A: { comp: "RC", pts: 3 }, B: { comp: "SF", pts: 4 }, C: { comp: "SP", pts: 2 }, D: { comp: "RA", pts: 1 } } },
];

// ─── SCORING ENGINE ────────────────────────────────────────────────────────────
function computeResults(answers) {
  const dominant = { SA: 0, SP: 0, RA: 0, EG: 0, RC: 0, SF: 0 };
  const avoidance = { SA: 0, SP: 0, RA: 0, EG: 0, RC: 0, SF: 0 };
  const maxDom = { SA: 0, SP: 0, RA: 0, EG: 0, RC: 0, SF: 0 };
  const maxAvoid = { SA: 0, SP: 0, RA: 0, EG: 0, RC: 0, SF: 0 };

  for (const sc of scenarios) {
    for (const opt of sc.options) {
      const s = sc.scoring[opt.letter];
      maxDom[s.comp] += s.pts;
      maxAvoid[s.comp] += 1;
    }
    const ans = answers[sc.id];
    if (ans) {
      if (ans.best) {
        const s = sc.scoring[ans.best];
        dominant[s.comp] += s.pts;
      }
      if (ans.worst) {
        const s = sc.scoring[ans.worst];
        avoidance[s.comp] += 1;
      }
    }
  }

  const results = {};
  for (const comp of Object.keys(COMPETENCIES)) {
    const domPct = Math.round((dominant[comp] / maxDom[comp]) * 100);
    const avoidPct = Math.round((avoidance[comp] / maxAvoid[comp]) * 100);
    const highDom = domPct >= 60;
    const highAvoid = avoidPct >= 40;
    let quadrant;
    if (highDom && !highAvoid) quadrant = "anchor";
    else if (highDom && highAvoid) quadrant = "ambivalent";
    else if (!highDom && highAvoid) quadrant = "gap";
    else quadrant = "latent";
    results[comp] = { domPct, avoidPct, quadrant, domRaw: dominant[comp], avoidRaw: avoidance[comp], maxDom: maxDom[comp], maxAvoid: maxAvoid[comp] };
  }
  return results;
}

const QUADRANT_META = {
  anchor:    { label: "Anchor Strength", emoji: "✅", color: "#1E6B3C", bg: "#E8F5EE", desc: "You consistently reach for this capacity and rarely push it away. It is a stable, reliable resource in your leadership." },
  ambivalent:{ label: "Ambivalent",      emoji: "⚡", color: "#5B2C6F", bg: "#F4EEF7", desc: "You reach for this AND push it away. Something unresolved lives here — explore this tension in coaching." },
  latent:    { label: "Latent Capacity", emoji: "💡", color: "#1A5276", bg: "#E8F4F8", desc: "Not dominant, not avoided. This capacity is accessible and can grow with intentional focus." },
  gap:       { label: "Clear Gap",       emoji: "🔲", color: "#7B2D1E", bg: "#FAEAE8", desc: "Rarely activated and actively avoided. This is a significant development priority." },
};

// ─── COMPONENT ────────────────────────────────────────────────────────────────
window.HLQAssessment = function HLQAssessment() {
  const [screen, setScreen] = useState("welcome"); // welcome | instructions | assessment | results
  const [participantName, setParticipantName] = useState("");
  const [participantRole, setParticipantRole] = useState("");
  const [currentIdx, setCurrentIdx] = useState(0);
  const [answers, setAnswers] = useState({});
  const [results, setResults] = useState(null);
  const [justAnswered, setJustAnswered] = useState(false);
  const topRef = useRef(null);

  const sc = scenarios[currentIdx];
  const currentAnswer = answers[sc?.id] || {};
  const canAdvance = currentAnswer.best && currentAnswer.worst;
  const progress = Math.round((Object.keys(answers).length / scenarios.length) * 100);

  useEffect(() => { topRef.current?.scrollIntoView({ behavior: "smooth" }); }, [currentIdx, screen]);

  function selectOption(type, letter) {
    const other = type === "best" ? "worst" : "best";
    const ans = { ...currentAnswer };
    if (ans[other] === letter) return; // can't select same for both
    ans[type] = ans[type] === letter ? undefined : letter;
    setAnswers(prev => ({ ...prev, [sc.id]: ans }));
  }

  function handleNext() {
    if (!canAdvance) return;
    setJustAnswered(true);
    setTimeout(() => {
      setJustAnswered(false);
      if (currentIdx < scenarios.length - 1) {
        setCurrentIdx(i => i + 1);
      } else {
        const r = computeResults(answers);
        setResults(r);
        setScreen("results");
      }
    }, 300);
  }

  function handlePrev() {
    if (currentIdx > 0) setCurrentIdx(i => i - 1);
  }

  function handleRestart() {
    setScreen("welcome");
    setCurrentIdx(0);
    setAnswers({});
    setResults(null);
    setParticipantName("");
    setParticipantRole("");
  }

  // ── WELCOME ────────────────────────────────────────────────────
  if (screen === "welcome") return (
    <div style={styles.app}>
      <div style={styles.welcomeWrap} ref={topRef}>
        <div style={styles.welcomeCard}>
          <div style={styles.arabicGlyph}>حكمة</div>
          <div style={styles.welcomeTitle}>HIKMA LEADERSHIP QUOTIENT</div>
          <div style={styles.welcomeSub}>HLQ Self-Assessment · Best + Worst Format</div>
          <div style={styles.welcomeDivider} />
          <p style={styles.welcomeDesc}>
            30 leadership scenarios. Two choices each. A profile that reveals not just what you reach for — but what you push away.
          </p>
          <div style={styles.fieldGroup}>
            <input style={styles.input} placeholder="Your name" value={participantName}
              onChange={e => setParticipantName(e.target.value)} />
            <input style={styles.input} placeholder="Your role / organization (optional)" value={participantRole}
              onChange={e => setParticipantRole(e.target.value)} />
          </div>
          <button style={{...styles.btnPrimary, opacity: participantName ? 1 : 0.4}}
            onClick={() => participantName && setScreen("instructions")} disabled={!participantName}>
            Begin Assessment →
          </button>
          <div style={styles.welcomeMeta}>Approximately 35–45 minutes · Developmental use only · Confidential</div>
        </div>
      </div>
    </div>
  );

  // ── INSTRUCTIONS ───────────────────────────────────────────────
  if (screen === "instructions") return (
    <div style={styles.app} ref={topRef}>
      <div style={styles.instrWrap}>
        <div style={styles.instrHeader}>
          <div style={styles.instrTitle}>How This Assessment Works</div>
        </div>
        <div style={styles.instrBody}>
          <div style={styles.instrItem}>
            <div style={styles.instrNum}>01</div>
            <div>
              <div style={styles.instrItemTitle}>Two selections per scenario</div>
              <div style={styles.instrItemDesc}>For each situation you will read four possible responses. Select the ONE that most reflects your natural leadership tendency (<span style={{color:"#1E6B3C",fontWeight:700}}>BEST</span>) and the ONE that least reflects it (<span style={{color:"#7B2D1E",fontWeight:700}}>WORST</span>).</div>
            </div>
          </div>
          <div style={styles.instrItem}>
            <div style={styles.instrNum}>02</div>
            <div>
              <div style={styles.instrItemTitle}>Be honest, not ideal</div>
              <div style={styles.instrItemDesc}>Select what you would actually do — not what you think the correct leadership answer is. All four options represent legitimate approaches. The value of this assessment is in the honest picture it creates.</div>
            </div>
          </div>
          <div style={styles.instrItem}>
            <div style={styles.instrNum}>03</div>
            <div>
              <div style={styles.instrItemTitle}>Trust your first instinct</div>
              <div style={styles.instrItemDesc}>Work at a steady pace. Do not overthink — your immediate response reveals your dominant tendency. If two options feel equal, choose the one that would feel most natural in a moment of genuine pressure.</div>
            </div>
          </div>
          <div style={styles.instrItem}>
            <div style={styles.instrNum}>04</div>
            <div>
              <div style={styles.instrItemTitle}>What you will receive</div>
              <div style={styles.instrItemDesc}>After completing all 30 scenarios, your responses are automatically scored across six Hikma leadership competencies. You will receive a Dominant Profile, an Avoidance Profile, and a Quadrant for each competency.</div>
            </div>
          </div>
        </div>
        <div style={styles.instrActions}>
          <button style={styles.btnSecondary} onClick={() => setScreen("welcome")}>← Back</button>
          <button style={styles.btnPrimary} onClick={() => setScreen("assessment")}>Start Scenarios →</button>
        </div>
      </div>
    </div>
  );

  // ── ASSESSMENT ─────────────────────────────────────────────────
  if (screen === "assessment") return (
    <div style={styles.app}>
      <div style={styles.assessWrap} ref={topRef}>
        {/* Header */}
        <div style={styles.assessHeader}>
          <div style={styles.assessHeaderLeft}>
            <span style={styles.logoSmall}>حكمة</span>
            <span style={styles.hlqLabel}>HLQ Assessment</span>
          </div>
          <div style={styles.progressBox}>
            <div style={styles.progressLabel}>{currentIdx + 1} / {scenarios.length}</div>
            <div style={styles.progressTrack}>
              <div style={{...styles.progressFill, width: `${((currentIdx + (canAdvance ? 1 : 0)) / scenarios.length) * 100}%`}} />
            </div>
          </div>
        </div>

        {/* Scenario Card */}
        <div style={{...styles.scenarioCard, opacity: justAnswered ? 0 : 1, transition: "opacity 0.3s"}}>
          <div style={styles.scMeta}>
            <div style={styles.scNum}>Scenario {sc.id}</div>
            <div style={styles.scContext}>{sc.context}</div>
          </div>
          <div style={styles.scTitle}>{sc.title}</div>
          <div style={styles.scSituation}>{sc.situation}</div>

          {/* Legend */}
          <div style={styles.legend}>
            <div style={styles.legendItem}>
              <div style={{...styles.legendDot, background: "#1E6B3C"}} />
              <span style={{color:"#1E6B3C",fontWeight:600}}>BEST</span>
              <span style={styles.legendDesc}>— most like me</span>
            </div>
            <div style={styles.legendItem}>
              <div style={{...styles.legendDot, background: "#7B2D1E"}} />
              <span style={{color:"#7B2D1E",fontWeight:600}}>WORST</span>
              <span style={styles.legendDesc}>— least like me</span>
            </div>
          </div>

          {/* Options */}
          <div style={styles.optionsList}>
            {sc.options.map(opt => {
              const isBest = currentAnswer.best === opt.letter;
              const isWorst = currentAnswer.worst === opt.letter;
              const isDisabledBest = currentAnswer.worst === opt.letter;
              const isDisabledWorst = currentAnswer.best === opt.letter;
              return (
                <div key={opt.letter} style={{...styles.optionRow, ...(isBest ? styles.optionBest : isWorst ? styles.optionWorst : {})}}>
                  <div style={styles.optionLetter}>{opt.letter}</div>
                  <div style={styles.optionText}>{opt.text}</div>
                  <div style={styles.optionBtns}>
                    <button
                      style={{...styles.tagBtn, ...styles.tagBest,
                        opacity: isBest ? 1 : isDisabledBest ? 0.25 : 0.6,
                        background: isBest ? "#1E6B3C" : "transparent",
                        color: isBest ? "#fff" : "#1E6B3C",
                        fontWeight: isBest ? 700 : 500,
                      }}
                      onClick={() => selectOption("best", opt.letter)}
                    >✅ Best</button>
                    <button
                      style={{...styles.tagBtn, ...styles.tagWorst,
                        opacity: isWorst ? 1 : isDisabledWorst ? 0.25 : 0.6,
                        background: isWorst ? "#7B2D1E" : "transparent",
                        color: isWorst ? "#fff" : "#7B2D1E",
                        fontWeight: isWorst ? 700 : 500,
                      }}
                      onClick={() => selectOption("worst", opt.letter)}
                    >❌ Worst</button>
                  </div>
                </div>
              );
            })}
          </div>

          {/* Validation hint */}
          {!canAdvance && (
            <div style={styles.validationHint}>
              {!currentAnswer.best && !currentAnswer.worst
                ? "Select your Best and Worst response to continue."
                : !currentAnswer.best ? "Select your Best response to continue."
                : "Select your Worst response to continue."}
            </div>
          )}

          {/* Navigation */}
          <div style={styles.navRow}>
            <button style={styles.btnSecondary} onClick={handlePrev} disabled={currentIdx === 0}>
              ← Previous
            </button>
            <button
              style={{...styles.btnPrimary, opacity: canAdvance ? 1 : 0.35}}
              onClick={handleNext} disabled={!canAdvance}
            >
              {currentIdx === scenarios.length - 1 ? "View My Results →" : "Next →"}
            </button>
          </div>
        </div>
      </div>
    </div>
  );

  // ── RESULTS ────────────────────────────────────────────────────
  if (screen === "results" && results) {
    const orderedByDom = Object.entries(results).sort((a,b) => b[1].domPct - a[1].domPct);

    return (
      <div style={styles.app} ref={topRef}>
        <div style={styles.resultsWrap}>
          {/* Results Header */}
          <div style={styles.resultsHeader}>
            <div style={styles.resultsHeaderInner}>
              <div style={styles.arabicGlyphSm}>حكمة</div>
              <div style={styles.resultsTitle}>Your HLQ Profile</div>
              {participantName && <div style={styles.resultsName}>{participantName}{participantRole ? ` · ${participantRole}` : ""}</div>}
              <div style={styles.resultsMeta}>Hikma Leadership Quotient · Best + Worst Format · {new Date().toLocaleDateString("en-GB", {day:"numeric",month:"long",year:"numeric"})}</div>
            </div>
          </div>

          {/* Quadrant Key */}
          <div style={styles.sectionLabel}>PROFILE QUADRANT GUIDE</div>
          <div style={styles.quadrantKey}>
            {Object.entries(QUADRANT_META).map(([key, q]) => (
              <div key={key} style={{...styles.quadrantKeyItem, background: q.bg, borderLeft: `3px solid ${q.color}`}}>
                <div style={{fontSize:18}}>{q.emoji}</div>
                <div>
                  <div style={{...styles.quadrantLabel, color: q.color}}>{q.label}</div>
                  <div style={styles.quadrantDesc}>{q.desc}</div>
                </div>
              </div>
            ))}
          </div>

          {/* Competency Cards */}
          <div style={styles.sectionLabel}>YOUR SIX COMPETENCIES</div>
          <div style={styles.cardsGrid}>
            {orderedByDom.map(([code, r]) => {
              const comp = COMPETENCIES[code];
              const qm = QUADRANT_META[r.quadrant];
              return (
                <div key={code} style={{...styles.compCard, borderTop: `4px solid ${comp.color}`}}>
                  <div style={styles.compCardHeader}>
                    <span style={styles.compIcon}>{comp.icon}</span>
                    <div>
                      <div style={{...styles.compCode, color: comp.color}}>{code}</div>
                      <div style={styles.compName}>{comp.name}</div>
                    </div>
                  </div>

                  {/* Quadrant Badge */}
                  <div style={{...styles.quadBadge, background: qm.bg, color: qm.color}}>
                    {qm.emoji} {qm.label}
                  </div>

                  {/* Dominant bar */}
                  <div style={styles.barSection}>
                    <div style={styles.barLabel}>
                      <span style={{color:"#1E6B3C",fontWeight:600}}>Dominant</span>
                      <span style={{...styles.barPct, color:"#1E6B3C"}}>{r.domPct}%</span>
                    </div>
                    <div style={styles.barTrack}>
                      <div style={{...styles.barFill, width:`${r.domPct}%`, background: comp.color,
                        borderRadius:4}} />
                      <div style={{...styles.barThreshold, left:"60%"}} title="60% threshold" />
                    </div>
                  </div>

                  {/* Avoidance bar */}
                  <div style={styles.barSection}>
                    <div style={styles.barLabel}>
                      <span style={{color:"#7B2D1E",fontWeight:600}}>Avoidance</span>
                      <span style={{...styles.barPct, color:"#7B2D1E"}}>{r.avoidPct}%</span>
                    </div>
                    <div style={styles.barTrack}>
                      <div style={{...styles.barFill, width:`${r.avoidPct}%`, background:"#7B2D1E",
                        borderRadius:4}} />
                      <div style={{...styles.barThreshold, left:"40%"}} title="40% threshold" />
                    </div>
                  </div>

                  <div style={styles.rawScores}>
                    Dom: {r.domRaw}/{r.maxDom} pts · Avoid: {r.avoidRaw}/{r.maxAvoid} selections
                  </div>
                </div>
              );
            })}
          </div>

          {/* Visual Summary Chart */}
          <div style={styles.sectionLabel}>PROFILE AT A GLANCE</div>
          <div style={styles.summaryChart}>
            {orderedByDom.map(([code, r]) => {
              const comp = COMPETENCIES[code];
              const qm = QUADRANT_META[r.quadrant];
              return (
                <div key={code} style={styles.summaryRow}>
                  <div style={styles.summaryCompLabel}>
                    <span style={{marginRight:6}}>{comp.icon}</span>
                    <span style={styles.summaryCompName}>{comp.short}</span>
                  </div>
                  <div style={styles.summaryBars}>
                    <div style={styles.summaryBarWrap}>
                      <div style={{...styles.summaryBar, width:`${r.domPct}%`, background: comp.color}} />
                      <span style={{...styles.summaryPct, color: comp.color}}>{r.domPct}%</span>
                    </div>
                    <div style={styles.summaryBarWrap}>
                      <div style={{...styles.summaryBar, width:`${r.avoidPct}%`, background:"#7B2D1E"}} />
                      <span style={{...styles.summaryPct, color:"#7B2D1E"}}>{r.avoidPct}%</span>
                    </div>
                  </div>
                  <div style={{...styles.summaryQuad, background: qm.bg, color: qm.color}}>{qm.emoji}</div>
                </div>
              );
            })}
            <div style={styles.summaryLegend}>
              <div style={styles.summaryLegendItem}><div style={{width:12,height:12,borderRadius:2,background:"#1A2D4A",display:"inline-block",marginRight:6}} />Dominant %</div>
              <div style={styles.summaryLegendItem}><div style={{width:12,height:12,borderRadius:2,background:"#7B2D1E",display:"inline-block",marginRight:6}} />Avoidance %</div>
              <div style={styles.summaryLegendItem}>Thresholds: Dominant ≥60% = High · Avoidance ≥40% = High</div>
            </div>
          </div>

          {/* Developmental note */}
          <div style={styles.devNote}>
            <div style={styles.devNoteTitle}>A note on these results</div>
            <div style={styles.devNoteText}>
              This assessment is a developmental instrument, not an evaluation. No profile is 'correct.'
              The Ambivalent zone — where you both reach for and push away a capacity — is often the richest territory for coaching conversations.
              The Anchor Strength zone shows where you can consciously mentor others.
              Bring these results into a conversation with your coach, mentor, or learning community.
            </div>
          </div>

          <div style={styles.resultsActions}>
            <button style={styles.btnPrimary} onClick={() => window.print()}>Print Results</button>
            <a 
              style={{...styles.btnPrimary, textDecoration: 'none'}} 
              href="/contact-us/" 
            >
              Contact Us
            </a>
            <button style={styles.btnSecondary} onClick={handleRestart}>Retake Assessment</button>
          </div>
        </div>
      </div>
    );
  }

  return null;
}

// ─── STYLES ───────────────────────────────────────────────────────────────────
const styles = {
  app: { minHeight:"100vh", background:"#F7F4EE", fontFamily:"'Georgia', serif" },

  // Welcome
  welcomeWrap: { display:"flex", alignItems:"center", justifyContent:"center", minHeight:"100vh", padding:"40px 20px" },
  welcomeCard: { background:"#1A2D4A", borderRadius:16, padding:"52px 48px", maxWidth:520, width:"100%",
    textAlign:"center", boxShadow:"0 20px 60px rgba(26,45,74,0.35)" },
  arabicGlyph: { fontSize:64, color:"#B8860B", fontFamily:"Georgia,serif", lineHeight:1.1, marginBottom:8 },
  welcomeTitle: { fontSize:20, fontWeight:700, color:"#FFFFFF", letterSpacing:"0.12em", marginBottom:6, fontFamily:"Arial,sans-serif" },
  welcomeSub: { fontSize:14, color:"#8A9BB0", fontStyle:"italic", marginBottom:24, fontFamily:"Arial,sans-serif" },
  welcomeDivider: { width:60, height:2, background:"#B8860B", margin:"0 auto 28px" },
  welcomeDesc: { fontSize:15, color:"#AABCC8", lineHeight:1.7, marginBottom:32, fontFamily:"Arial,sans-serif" },
  fieldGroup: { display:"flex", flexDirection:"column", gap:12, marginBottom:28 },
  input: { padding:"12px 16px", borderRadius:8, border:"1px solid #2E4A6A", background:"#243D5C",
    color:"#FFFFFF", fontSize:15, fontFamily:"Arial,sans-serif", outline:"none" },
  btnPrimary: { background:"#B8860B", color:"#FFFFFF", border:"none", borderRadius:8, padding:"14px 32px",
    fontSize:15, fontWeight:700, cursor:"pointer", fontFamily:"Arial,sans-serif", letterSpacing:"0.05em", transition:"all 0.2s" },
  btnSecondary: { background:"transparent", color:"#1A2D4A", border:"2px solid #1A2D4A", borderRadius:8,
    padding:"12px 28px", fontSize:14, fontWeight:600, cursor:"pointer", fontFamily:"Arial,sans-serif" },
  welcomeMeta: { marginTop:20, fontSize:12, color:"#5A7080", fontFamily:"Arial,sans-serif" },

  // Instructions
  instrWrap: { maxWidth:680, margin:"0 auto", padding:"40px 24px" },
  instrHeader: { padding:"32px 0 28px", borderBottom:"2px solid #1A2D4A", marginBottom:36 },
  instrTitle: { fontSize:26, fontWeight:700, color:"#1A2D4A", letterSpacing:"0.02em" },
  instrBody: { display:"flex", flexDirection:"column", gap:28, marginBottom:44 },
  instrItem: { display:"flex", gap:20, alignItems:"flex-start" },
  instrNum: { flexShrink:0, width:40, height:40, background:"#1A2D4A", color:"#B8860B",
    borderRadius:"50%", display:"flex", alignItems:"center", justifyContent:"center",
    fontSize:14, fontWeight:700, fontFamily:"Arial,sans-serif" },
  instrItemTitle: { fontSize:16, fontWeight:700, color:"#1A2D4A", marginBottom:6, fontFamily:"Arial,sans-serif" },
  instrItemDesc: { fontSize:14, color:"#555", lineHeight:1.7, fontFamily:"Arial,sans-serif" },
  instrActions: { display:"flex", gap:16, justifyContent:"flex-end" },

  // Assessment
  assessWrap: { maxWidth:760, margin:"0 auto", padding:"0 20px 60px" },
  assessHeader: { position:"sticky", top:0, background:"#1A2D4A", zIndex:10,
    display:"flex", alignItems:"center", justifyContent:"space-between", padding:"14px 24px",
    borderBottom:"2px solid #B8860B" },
  assessHeaderLeft: { display:"flex", alignItems:"center", gap:12 },
  logoSmall: { fontSize:26, color:"#B8860B", fontFamily:"Georgia,serif" },
  hlqLabel: { fontSize:13, color:"#8A9BB0", fontFamily:"Arial,sans-serif", fontWeight:600, letterSpacing:"0.08em" },
  progressBox: { display:"flex", alignItems:"center", gap:12 },
  progressLabel: { fontSize:13, color:"#B8860B", fontFamily:"Arial,sans-serif", fontWeight:700, minWidth:50, textAlign:"right" },
  progressTrack: { width:140, height:4, background:"#2E4A6A", borderRadius:4, overflow:"hidden" },
  progressFill: { height:"100%", background:"#B8860B", borderRadius:4, transition:"width 0.4s ease" },
  scenarioCard: { background:"#FFFFFF", borderRadius:12, marginTop:24, padding:"36px 40px",
    boxShadow:"0 4px 24px rgba(26,45,74,0.10)" },
  scMeta: { display:"flex", alignItems:"center", gap:12, marginBottom:12 },
  scNum: { fontSize:12, fontWeight:700, color:"#B8860B", fontFamily:"Arial,sans-serif", letterSpacing:"0.1em" },
  scContext: { fontSize:12, color:"#888", fontFamily:"Arial,sans-serif", fontStyle:"italic" },
  scTitle: { fontSize:22, fontWeight:700, color:"#1A2D4A", marginBottom:16, fontFamily:"Georgia,serif" },
  scSituation: { fontSize:15, color:"#444", lineHeight:1.75, marginBottom:28, fontFamily:"Arial,sans-serif", background:"#F7F4EE", padding:"16px 20px", borderRadius:8, borderLeft:"3px solid #B8860B" },
  legend: { display:"flex", gap:24, marginBottom:20 },
  legendItem: { display:"flex", alignItems:"center", gap:6, fontSize:13, fontFamily:"Arial,sans-serif" },
  legendDot: { width:10, height:10, borderRadius:"50%" },
  legendDesc: { color:"#888" },
  optionsList: { display:"flex", flexDirection:"column", gap:10, marginBottom:24 },
  optionRow: { display:"flex", alignItems:"center", gap:14, padding:"14px 16px", borderRadius:8,
    border:"1.5px solid #E0DDD5", transition:"all 0.15s", background:"#FAFAF8" },
  optionBest: { border:"2px solid #1E6B3C", background:"#F0FAF4" },
  optionWorst: { border:"2px solid #7B2D1E", background:"#FDF0EE" },
  optionLetter: { width:28, height:28, background:"#1A2D4A", color:"#B8860B", borderRadius:6,
    display:"flex", alignItems:"center", justifyContent:"center", fontSize:13, fontWeight:700,
    flexShrink:0, fontFamily:"Arial,sans-serif" },
  optionText: { flex:1, fontSize:14, color:"#333", lineHeight:1.55, fontFamily:"Arial,sans-serif" },
  optionBtns: { display:"flex", flexDirection:"column", gap:5, flexShrink:0 },
  tagBtn: { padding:"5px 10px", borderRadius:5, fontSize:11, fontWeight:500, cursor:"pointer",
    border:"1.5px solid currentColor", fontFamily:"Arial,sans-serif", transition:"all 0.15s", whiteSpace:"nowrap" },
  tagBest: { borderColor:"#1E6B3C" },
  tagWorst: { borderColor:"#7B2D1E" },
  validationHint: { textAlign:"center", fontSize:13, color:"#888", fontStyle:"italic",
    fontFamily:"Arial,sans-serif", marginBottom:20 },
  navRow: { display:"flex", justifyContent:"space-between", alignItems:"center", marginTop:8 },

  // Results
  resultsWrap: { maxWidth:900, margin:"0 auto", padding:"0 20px 80px" },
  resultsHeader: { background:"#1A2D4A", padding:"48px 40px", marginBottom:40, textAlign:"center" },
  resultsHeaderInner: {},
  arabicGlyphSm: { fontSize:44, color:"#B8860B", fontFamily:"Georgia,serif", marginBottom:8 },
  resultsTitle: { fontSize:24, fontWeight:700, color:"#FFFFFF", letterSpacing:"0.08em",
    fontFamily:"Arial,sans-serif", marginBottom:8 },
  resultsName: { fontSize:16, color:"#B8860B", fontFamily:"Georgia,serif", fontStyle:"italic", marginBottom:6 },
  resultsMeta: { fontSize:12, color:"#8A9BB0", fontFamily:"Arial,sans-serif" },
  sectionLabel: { fontSize:11, fontWeight:700, color:"#B8860B", letterSpacing:"0.14em",
    fontFamily:"Arial,sans-serif", marginBottom:16, marginTop:40, borderBottom:"1px solid #E0DDD5", paddingBottom:8 },
  quadrantKey: { display:"grid", gridTemplateColumns:"1fr 1fr", gap:12, marginBottom:8 },
  quadrantKeyItem: { display:"flex", gap:12, padding:"14px 16px", borderRadius:8, alignItems:"flex-start" },
  quadrantLabel: { fontSize:13, fontWeight:700, fontFamily:"Arial,sans-serif", marginBottom:3 },
  quadrantDesc: { fontSize:12, color:"#666", lineHeight:1.5, fontFamily:"Arial,sans-serif" },
  cardsGrid: { display:"grid", gridTemplateColumns:"1fr 1fr 1fr", gap:16 },
  compCard: { background:"#FFFFFF", borderRadius:10, padding:"20px", boxShadow:"0 2px 12px rgba(26,45,74,0.08)" },
  compCardHeader: { display:"flex", gap:12, alignItems:"flex-start", marginBottom:12 },
  compIcon: { fontSize:22, lineHeight:1 },
  compCode: { fontSize:12, fontWeight:800, fontFamily:"Arial,sans-serif", letterSpacing:"0.1em" },
  compName: { fontSize:12, color:"#444", lineHeight:1.4, fontFamily:"Arial,sans-serif", fontWeight:500 },
  quadBadge: { fontSize:11, fontWeight:700, padding:"4px 10px", borderRadius:20,
    fontFamily:"Arial,sans-serif", display:"inline-block", marginBottom:14 },
  barSection: { marginBottom:10 },
  barLabel: { display:"flex", justifyContent:"space-between", marginBottom:4 },
  barPct: { fontSize:13, fontWeight:700, fontFamily:"Arial,sans-serif" },
  barTrack: { position:"relative", height:6, background:"#F0EDE8", borderRadius:4, overflow:"visible" },
  barFill: { height:"100%", transition:"width 1s ease", maxWidth:"100%" },
  barThreshold: { position:"absolute", top:-3, width:2, height:12, background:"rgba(0,0,0,0.2)", borderRadius:1 },
  rawScores: { fontSize:10, color:"#999", marginTop:10, fontFamily:"Arial,sans-serif" },
  summaryChart: { background:"#FFFFFF", borderRadius:10, padding:"24px 28px", boxShadow:"0 2px 12px rgba(26,45,74,0.08)" },
  summaryRow: { display:"flex", alignItems:"center", gap:16, marginBottom:14 },
  summaryCompLabel: { width:180, flexShrink:0, display:"flex", alignItems:"center" },
  summaryCompName: { fontSize:12, color:"#444", fontFamily:"Arial,sans-serif", fontWeight:600 },
  summaryBars: { flex:1, display:"flex", flexDirection:"column", gap:3 },
  summaryBarWrap: { display:"flex", alignItems:"center", gap:8 },
  summaryBar: { height:6, borderRadius:3, minWidth:2, transition:"width 1s ease" },
  summaryPct: { fontSize:11, fontWeight:700, fontFamily:"Arial,sans-serif", minWidth:30 },
  summaryQuad: { width:28, height:28, borderRadius:6, display:"flex", alignItems:"center",
    justifyContent:"center", fontSize:14, flexShrink:0 },
  summaryLegend: { display:"flex", gap:20, marginTop:16, paddingTop:12, borderTop:"1px solid #F0EDE8",
    fontSize:11, color:"#888", fontFamily:"Arial,sans-serif", alignItems:"center", flexWrap:"wrap" },
  summaryLegendItem: { display:"flex", alignItems:"center" },
  devNote: { background:"#F5EDD6", borderLeft:"3px solid #B8860B", borderRadius:"0 8px 8px 0",
    padding:"20px 24px", marginTop:32, marginBottom:8 },
  devNoteTitle: { fontSize:14, fontWeight:700, color:"#1A2D4A", fontFamily:"Arial,sans-serif", marginBottom:8 },
  devNoteText: { fontSize:13, color:"#555", lineHeight:1.7, fontFamily:"Arial,sans-serif" },
  resultsActions: { display:"flex", gap:14, justifyContent:"center", marginTop:36, flexWrap:"wrap" },
  barLabel: { display:"flex", justifyContent:"space-between", marginBottom:4, fontSize:12, fontFamily:"Arial,sans-serif" },
};