import { useState, useEffect } from "react"; const FONTS = `@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=Montserrat:wght@300;400;500;600&display=swap');`; const C = { cream: "#fffbf7", blush: "#fdd5d5", brown: "#6a4b3e", mauve: "#c99e94", charcoal: "#221e1e", white: "#ffffff", }; const CATEGORIES = ["Mindset", "Emotional Regulation", "Nervous System"]; const STATEMENTS = [ // MINDSET (0) { id: 1, cat: 0, text: "I feel more at peace with myself on days when I've been productive or accomplished something." }, { id: 2, cat: 0, text: "When I make a mistake, it takes me a long time to stop mentally replaying it." }, { id: 3, cat: 0, text: "There are parts of myself I feel I need to hide — even from God." }, { id: 4, cat: 0, text: "When someone criticizes me, it feels like evidence that something is fundamentally wrong with me." }, { id: 5, cat: 0, text: "When things go wrong, part of me wonders if God is disappointed in me." }, { id: 6, cat: 0, text: "It's easier for me to extend grace to others than to believe God extends it fully to me." }, // EMOTIONAL REGULATION (1) { id: 7, cat: 1, text: "When I feel anxious or sad, my first instinct is to pray it away rather than sit with it." }, { id: 8, cat: 1, text: "I sometimes feel guilty for having negative emotions — like I should just have more faith." }, { id: 9, cat: 1, text: "Once a strong emotion hits me, it's hard to come back down or think clearly." }, { id: 10, cat: 1, text: "Small things can sometimes trigger a reaction that feels much bigger than the situation warrants." }, { id: 11, cat: 1, text: "I often judge myself for feeling angry, jealous, or resentful." }, { id: 12, cat: 1, text: "I tend to keep my emotional struggles private because I worry what others would think." }, // NERVOUS SYSTEM (2) { id: 13, cat: 2, text: "Even when things are going well, I have a hard time fully relaxing — I'm waiting for something to go wrong." }, { id: 14, cat: 2, text: "My mind stays busy even when I'm trying to rest. The anxiety doesn't fully turn off." }, { id: 15, cat: 2, text: "When things get overwhelming, I tend to go flat — I emotionally check out." }, { id: 16, cat: 2, text: "There are seasons where I feel disconnected — from myself, my emotions, or even from God." }, { id: 17, cat: 2, text: "I find it very hard to disappoint people, even when their requests feel unreasonable." }, { id: 18, cat: 2, text: "Conflict feels physically uncomfortable — something in me needs to resolve it quickly." }, ]; const FREQ = ["Rarely", "Sometimes", "Often", "Always"]; const OUTCOMES = { "0": { title: "The Root Is in What You Believe", subtitle: "Mindset", desc: "The deepest work happening inside you right now is at the level of belief. The stories you're telling yourself — about who you are, what you've done, and how God sees you — are running on default. And they're quietly shaping everything else. This isn't a willpower problem or an emotional problem. It's a root problem. The good news? Roots can be replaced with Truth. Your next step isn't to try harder — it's to go deeper.", verse: "Romans 12:2", verseText: "Be transformed by the renewing of your mind.", color: C.brown, }, "1": { title: "The Root Is in What You Do With the Feeling", subtitle: "Emotional Regulation", desc: "Your emotions aren't the problem — but your relationship with them might be. Whether you've learned to suppress, spiritualize, or feel overwhelmed by what's inside you, the pattern is costing you. You may have been taught — directly or indirectly — that certain feelings are shameful or unspiritual. They're not. They're information. Learning to sit with, name, and process your emotions with God changes everything.", verse: "Psalm 34:18", verseText: "The Lord is close to the brokenhearted.", color: C.mauve, }, "2": { title: "The Root Is in Your Body's Story", subtitle: "Nervous System", desc: "Your body has been keeping score. Whether you're wired for anxiety, shutdown, or keeping the peace at all costs — these aren't character flaws. They're survival responses that made sense at some point. But your nervous system doesn't know the threat has passed. Healing here isn't just about thinking differently — it's about helping your body learn that it's safe. That's deep, important work. And it's exactly what's available to you.", verse: "Isaiah 41:10", verseText: "Do not fear, for I am with you; do not be dismayed, for I am your God.", color: C.brown, }, "0+1": { title: "Your Mind and Heart Are Both Carrying It", subtitle: "Mindset + Emotional Regulation", desc: "The stories you believe about yourself and the emotions those beliefs produce have become deeply intertwined. The shame thought triggers the overwhelming feeling — and the overwhelming feeling confirms the shame thought. It's a loop, and you may have been living in it for a long time without fully realizing it. Breaking free requires addressing both layers: what you believe AND how you process what you feel.", verse: "Proverbs 4:23", verseText: "Above all else, guard your heart, for everything you do flows from it.", color: C.brown, }, "0+2": { title: "Your Beliefs Have Wired Your Body", subtitle: "Mindset + Nervous System", desc: "What you've come to believe about yourself and the world hasn't just stayed in your mind — it's settled into your body. The anxiety, the vigilance, the need to keep everyone okay: these are beliefs that have become biology. The work ahead is about both renewing your mind AND releasing what your body has been holding. This is possible. It just requires going to the root.", verse: "2 Timothy 1:7", verseText: "God has not given us a spirit of fear, but of power, love, and a sound mind.", color: C.mauve, }, "1+2": { title: "Your Body and Emotions Are Speaking the Same Language", subtitle: "Emotional Regulation + Nervous System", desc: "The way your body responds to stress and the way you relate to your emotions are deeply connected — and both are sending the same message: something in you learned it wasn't safe to feel, to rest, or to need. You may feel things intensely and not know what to do with them, or go numb when it gets to be too much. Both are your system protecting you. Learning to work with your body and emotions — rather than against them — is where freedom begins.", verse: "Psalm 139:14", verseText: "I am fearfully and wonderfully made.", color: C.brown, }, "All": { title: "The Roots Run Deep in Every Layer", subtitle: "Mindset + Emotional Regulation + Nervous System", desc: "You're carrying this in your mind, your heart, and your body — and that's not a sign that something is uniquely wrong with you. It's a sign that you've been carrying it for a long time. The healing available to you isn't surface-level, and it won't come from trying harder or knowing more. It comes from being witnessed, guided, and resourced at every layer. You don't have to figure this out alone.", verse: "Matthew 11:28", verseText: "Come to me, all you who are weary and burdened, and I will give you rest.", color: C.brown, }, }; function getOutcomeKey(scores) { const indexed = scores.map((s, i) => ({ s, i })).sort((a, b) => b.s - a.s); const [first, second, third] = indexed; const allClose = first.s - third.s <= 4; if (allClose) return "All"; const blend = first.s - second.s <= 4; if (blend) { const pair = [first.i, second.i].sort((a, b) => a - b).join("+"); return pair; } return String(first.i); } export default function Diagnostic() { const [screen, setScreen] = useState("intro"); // intro | quiz | results const [responses, setResponses] = useState({}); const [result, setResult] = useState(null); const [animIn, setAnimIn] = useState(true); useEffect(() => { const style = document.createElement("style"); style.textContent = FONTS + ` * { box-sizing: border-box; margin: 0; padding: 0; } body { background: ${C.cream}; } @keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @keyframes barFill { from { width: 0%; } to { width: var(--w); } } .fade-up { animation: fadeUp 0.5s ease forwards; } .bar-fill { animation: barFill 1s ease forwards; } `; document.head.appendChild(style); return () => document.head.removeChild(style); }, []); const answered = Object.keys(responses).length; const total = STATEMENTS.length; const progress = (answered / total) * 100; const handleRate = (id, val) => { setResponses(prev => ({ ...prev, [id]: val })); }; const handleSubmit = () => { const scores = [0, 0, 0]; STATEMENTS.forEach(s => { if (responses[s.id]) scores[s.cat] += responses[s.id]; }); const key = getOutcomeKey(scores); setResult({ scores, key, outcome: OUTCOMES[key] }); setScreen("results"); window.scrollTo({ top: 0, behavior: "smooth" }); }; const wrap = { background: C.cream, minHeight: "100vh", fontFamily: "'Montserrat', sans-serif", padding: "0 0 80px", }; // ── INTRO ────────────────────────────────────────────────────────────────── if (screen === "intro") return (