import { useState } from “react”; const VALUES = [ “Acceptance”, “Authenticity”, “Awakening”, “Balance”, “Belonging”, “Boundaries”, “Clarity”, “Compassion”, “Connection”, “Courage”, “Creativity”, “Devotion”, “Ease”, “Embodiment”, “Empathy”, “Expression”, “Faith”, “Flow”, “Forgiveness”, “Freedom”, “Generosity”, “Grace”, “Gratitude”, “Growth”, “Healing”, “Hope”, “Humility”, “Integrity”, “Intuition”, “Joy”, “Kindness”, “Love”, “Magic”, “Nourishment”, “Openness”, “Patience”, “Peace”, “Play”, “Presence”, “Protection”, “Purpose”, “Receptivity”, “Resilience”, “Rest”, “Sacredness”, “Safety”, “Self-Love”, “Sensitivity”, “Service”, “Softness”, “Sovereignty”, “Stillness”, “Surrender”, “Transformation”, “Trust”, “Truth”, “Vision”, “Vitality”, “Wholeness”, “Wonder” ]; const MAX = 20; // ── tiny helpers ────────────────────────────────────────────────────────────── const Label = ({ children, style = {} }) => ( ); export default function SoulMission() { const [selected, setSelected] = useState([]); const [phase, setPhase] = useState(“select”); // select | email | result const [name, setName] = useState(””); const [email, setEmail] = useState(””); const [emailError, setEmailError] = useState(””); const [missionText, setMissionText] = useState(””); const [loading, setLoading] = useState(false); const [copied, setCopied] = useState(false); // ── value toggling ────────────────────────────────────────────────────────── const toggle = (v) => { if (selected.includes(v)) setSelected(selected.filter(x => x !== v)); else if (selected.length < MAX) setSelected([…selected, v]); }; // ── email gate ────────────────────────────────────────────────────────────── const handleEmailSubmit = async () => { if (!name.trim()) { setEmailError(“Please enter your name.”); return; } if (!/\S+@\S+.\S+/.test(email)) { setEmailError(“Please enter a valid email.”); return; } setEmailError(””); await generate(); }; // ── AI generation ─────────────────────────────────────────────────────────── const generate = async () => { setLoading(true); setMissionText(””); setPhase(“result”); ``` const prompt = `You are a warm, nurturing guide who helps people reconnect with their soul's deepest truth. ``` A person named ${name || “this person”} has chosen these 20 values as the core of who they are: ${selected.join(”, “)}. Write a soul mission statement addressed to them personally. It should: - Open by addressing them by first name warmly (e.g. “${name || “Dear one”},”) - Be 3–5 sentences, written in first person (“I am…”, “I choose…”, “I trust…”) - Feel like a warm embrace — loving, grounding, and deeply affirming - Weave in the spirit of their values naturally (don’t list them all literally) - Have a gentle, flowing rhythm — like something read aloud by candlelight - End with a single short power mantra on its own line, beginning with “I am” — something they can whisper to themselves each morning Output only the greeting, mission statement, and mantra. No titles, no extra commentary.`; ``` try { const response = await fetch("https://api.anthropic.com/v1/messages", { method: "POST", headers: { "Content-Type": "application/json", "x-api-key": "", "anthropic-version": "2023-06-01", "anthropic-dangerous-direct-browser-access": "true" }, body: JSON.stringify({ model: "claude-sonnet-4-20250514", max_tokens: 1000, messages: [{ role: "user", content: prompt }] }) }); const data = await response.json(); const text = data?.content?.[0]?.text || "Something tender got interrupted. Please try again."; setMissionText(text); } catch (e) { setMissionText("Something tender got interrupted. Please try again."); } setLoading(false); ``` }; const reset = () => { setSelected([]); setName(””); setEmail(””); setMissionText(””); setEmailError(””); setPhase(“select”); }; const copyMantra = () => { const lines = missionText.split(”\n”).filter(Boolean); const mantra = lines[lines.length - 1]; navigator.clipboard.writeText(mantra).then(() => { setCopied(true); setTimeout(() => setCopied(false), 2000); }); }; // ── parse mission text ────────────────────────────────────────────────────── const paragraphs = missionText.split(”\n”).filter(Boolean); const mantraLine = paragraphs[paragraphs.length - 1]; const bodyLines = paragraphs.slice(0, -1); const isReady = !loading && missionText && mantraLine?.toLowerCase().startsWith(“i am”); return (