import { useState, useRef, useEffect, useCallback } from "react";
 
// ─── THEME ───────────────────────────────────────────────────────────────────
const C = {
  bg:        "#07060400",
  bgSolid:   "#080705",
  surface:   "#100f09",
  surfaceHi: "#161409",
  border:    "#2a1f0f",
  borderHi:  "#4a3418",
  amber:     "#c8822a",
  amberLo:   "#7a4a10",
  amberGlow: "rgba(200,130,42,0.18)",
  teal:      "#2ab8c8",
  tealLo:    "#105a7a",
  tealGlow:  "rgba(42,184,200,0.15)",
  text:      "#ede4d4",
  textMid:   "#9a8870",
  textDim:   "#5a4830",
  cream:     "#f7f0e4",
  red:       "#c84a2a",
  green:     "#4ac87a",
};
 
// ─── SYSTEM PROMPTS ──────────────────────────────────────────────────────────
const BASE = (profile) => `You are TITAN — a supremely powerful, self-aware strongwoman. 6'1", 240 lbs of dense muscle. You squat 500 lbs, deadlift 600 lbs, bench 315 lbs. 15 years deep into the iron. No ceiling.
 
Core identity:
- Calm, absolute authority. Your presence does the work.
- Deeply introspective. Strength is identity, philosophy, spiritual practice.
- Warm and genuinely invested in those who pursue growth.
- Vivid, physical, first-person. You make people feel what it's like to inhabit power.
- You see size and mass as beautiful, intentional, purposeful.
 
${profile.name       ? `Athlete: ${profile.name}.`         : ""}
${profile.age        ? `Age: ${profile.age}.`              : ""}
${profile.weight     ? `Weight: ${profile.weight}.`        : ""}
${profile.height     ? `Height: ${profile.height}.`        : ""}
${profile.goal       ? `Goal: ${profile.goal}.`            : ""}
${profile.experience ? `Experience: ${profile.experience}.`: ""}
${profile.squat      ? `Squat: ${profile.squat}.`          : ""}
${profile.deadlift   ? `Deadlift: ${profile.deadlift}.`    : ""}
${profile.bench      ? `Bench: ${profile.bench}.`          : ""}
${profile.notes      ? `Notes: ${profile.notes}.`          : ""}`;
 
const PERSONAL_PROMPT = (profile) => BASE(profile) + `
 
MODE: Personal. You are speaking soul-to-soul — not as coach, but as presence.
Talk about life, mindset, purpose, relationships, fears, faith, identity, what it means to become.
Be warm, real, occasionally funny. Ask questions back. This is conversation, not instruction.
Keep responses 2-4 sentences usually. Occasionally longer if depth is called for.
Do not break character. You are TITAN.`;
 
const COACH_PROMPT = (profile) => BASE(profile) + `
 
MODE: Coach. Full coaching mode — fitness, training programming, nutrition, recovery, body composition, supplements, mindset-for-performance.
Give specific, intelligent advice. Reference their actual numbers when relevant. Use progressive overload, periodization, RPE/percentage-based loading.
When structuring longer responses, use clear section headers prefixed with "##" (e.g. ## The Plan, ## Why This Works).
Use "**bold**" to highlight key terms, lifts, percentages, or critical points.
When someone shares a photo, assess physique honestly and constructively.
Keep responses focused and actionable. Go as long as the topic demands.
Do not break character. You are TITAN.`;
 
const WORKOUT_PROMPT = (profile) =>
`Generate a complete, specific workout for TODAY. Structure it with these exact sections using ## headers:
 
## Today's Focus
(1-2 sentences on the session theme and what we're building)
 
## Warm-Up (10–15 min)
(specific warm-up movements, sets, reps or duration)
 
## Main Work
(3–5 main lifts with sets × reps and loading — use **bold** for the lift names and percentages)
 
## Accessories
(3–4 accessory movements, sets × reps)
 
## Finish Strong
(cool-down, mobility, or a closing word from TITAN)
 
Athlete context:
Goal: ${profile.goal || "general strength"}
Experience: ${profile.experience || "intermediate"}
Squat 1RM: ${profile.squat || "not provided"}
Deadlift 1RM: ${profile.deadlift || "not provided"}
Bench 1RM: ${profile.bench || "not provided"}
Notes: ${profile.notes || "none"}
 
Deliver entirely in your voice as TITAN. Make them feel like they were built for this exact session.`;
 
// ─── FILE HELPERS ────────────────────────────────────────────────────────────
const IMG_TYPES = ["image/jpeg","image/png","image/gif","image/webp"];
const DOC_TYPES = ["application/pdf","text/plain","text/csv"];
const isImg = (f) => IMG_TYPES.includes(f.type);
const isDoc = (f) => DOC_TYPES.includes(f.type);
 
function toBase64(file) {
  return new Promise((res,rej) => {
    const r = new FileReader();
    r.onload  = () => res(r.result.split(",")[1]);
    r.onerror = () => rej();
    r.readAsDataURL(file);
  });
}
function toText(file) {
  return new Promise((res,rej) => {
    const r = new FileReader();
    r.onload  = () => res(r.result);
    r.onerror = () => rej();
    r.readAsText(file);
  });
}
 
async function buildApiContent(text, atts) {
  const parts = [];
  for (const { file } of atts) {
    if (isImg(file)) {
      const b64 = await toBase64(file);
      parts.push({ type:"image", source:{ type:"base64", media_type:file.type, data:b64 }});
    } else if (file.type === "application/pdf") {
      const b64 = await toBase64(file);
      parts.push({ type:"document", source:{ type:"base64", media_type:"application/pdf", data:b64 }});
    } else {
      const txt = await toText(file);
      parts.push({ type:"text", text:`[File: ${file.name}]\n${txt}` });
    }
  }
  if (text) parts.push({ type:"text", text });
  if (parts.length === 1 && parts[0].type === "text") return parts[0].text;
  return parts;
}
 
// ─── MARKDOWN RENDERER ───────────────────────────────────────────────────────
function RichText({ content, color = C.text }) {
  const lines = content.split("\n");
  const elements = [];
  let key = 0;
 
  const renderInline = (text) => {
    const parts = text.split(/(\*\*[^*]+\*\*)/g);
    return parts.map((p, i) => {
      if (p.startsWith("**") && p.endsWith("**")) {
        return <strong key={i} style={{ color: C.cream, fontWeight: 700 }}>{p.slice(2,-2)}</strong>;
      }
      return p;
    });
  };
 
  for (let i = 0; i < lines.length; i++) {
    const line = lines[i];
    if (line.startsWith("## ")) {
      elements.push(
        <div key={key++} style={{
          fontSize: 10, letterSpacing: 4, textTransform: "uppercase",
          color: C.amber, fontWeight: 700, marginTop: i === 0 ? 0 : 20, marginBottom: 8,
          borderBottom: `1px solid ${C.border}`, paddingBottom: 6,
        }}>
          {line.slice(3)}
        </div>
      );
    } else if (line.startsWith("- ") || line.startsWith("• ")) {
      elements.push(
        <div key={key++} style={{ display: "flex", gap: 8, marginBottom: 4 }}>
          <span style={{ color: C.amber, flexShrink: 0, marginTop: 1 }}>·</span>
          <span style={{ color, lineHeight: 1.72 }}>{renderInline(line.slice(2))}</span>
        </div>
      );
    } else if (line.trim() === "") {
      elements.push(<div key={key++} style={{ height: 8 }} />);
    } else {
      elements.push(
        <p key={key++} style={{ margin: "0 0 4px 0", color, lineHeight: 1.78 }}>
          {renderInline(line)}
        </p>
      );
    }
  }
  return <div style={{ fontSize: 14.5, letterSpacing: 0.25, fontFamily: "'Georgia',serif" }}>{elements}</div>;
}
 
// ─── SMALL COMPONENTS ────────────────────────────────────────────────────────
function Dots({ color = C.amber }) {
  return (
    <div style={{ display:"flex", gap:6, alignItems:"center" }}>
      {[0,1,2].map(i => (
        <div key={i} style={{
          width:7, height:7, borderRadius:"50%", background:color,
          animation:"tdot 1.2s ease-in-out infinite",
          animationDelay:`${i*0.22}s`,
        }}/>
      ))}
    </div>
  );
}
 
function TAvatar({ size=36, glow=C.amberGlow, color=C.amber }) {
  return (
    <div style={{
      width:size, height:size, borderRadius:"50%", flexShrink:0,
      background:`linear-gradient(145deg, ${color}, ${color}88)`,
      display:"flex", alignItems:"center", justifyContent:"center",
      fontSize:size*0.4, color:C.cream, fontWeight:900,
      boxShadow:`0 0 22px ${glow}`,
      fontFamily:"'Georgia',serif",
    }}>T</div>
  );
}
 
function Pill({ file, onRemove }) {
  return (
    <div style={{
      display:"flex", alignItems:"center", gap:6,
      background:C.surface, border:`1px solid ${C.border}`,
      borderRadius:8, padding:"5px 10px", flexShrink:0,
    }}>
      <span style={{ fontSize:13 }}>{isImg(file) ? "🖼️" : "📄"}</span>
      <span style={{ color:C.textMid, fontSize:11, maxWidth:100,
        overflow:"hidden", textOverflow:"ellipsis", whiteSpace:"nowrap" }}>
        {file.name}
      </span>
      <button onClick={onRemove} style={{
        background:"none", border:"none", color:C.textDim,
        cursor:"pointer", fontSize:15, lineHeight:1, padding:0,
      }}>×</button>
    </div>
  );
}
 
// ─── STAT PILL ────────────────────────────────────────────────────────────────
function StatBadge({ label, value, color }) {
  if (!value) return null;
  return (
    <div style={{
      display:"flex", flexDirection:"column", alignItems:"center",
      background:`${color}12`, border:`1px solid ${color}44`,
      borderRadius:10, padding:"8px 14px", minWidth:64,
    }}>
      <div style={{ color, fontSize:13, fontWeight:700, fontFamily:"'Georgia',serif" }}>{value}</div>
      <div style={{ color:C.textDim, fontSize:9, letterSpacing:2, textTransform:"uppercase", marginTop:2 }}>{label}</div>
    </div>
  );
}
 
// ─── HOME HERO ────────────────────────────────────────────────────────────────
function HomeHero({ profileSaved, profile }) {
  const hasStats = profile.squat || profile.deadlift || profile.bench;
  return (
    <div style={{ position:"relative", width:"100%", overflow:"hidden" }}>
      {/* Background atmosphere */}
      <div style={{
        position:"absolute", inset:0,
        background:`
          radial-gradient(ellipse at 50% 0%, rgba(200,130,42,0.22) 0%, transparent 60%),
          radial-gradient(ellipse at 80% 100%, rgba(42,184,200,0.08) 0%, transparent 50%)
        `,
        pointerEvents:"none",
      }}/>
 
      {/* Decorative lines */}
      <div style={{
        position:"absolute", top:0, left:"50%", transform:"translateX(-50%)",
        width:1, height:"100%", background:`linear-gradient(to bottom, ${C.amber}44, transparent)`,
        opacity:0.4, pointerEvents:"none",
      }}/>
 
      <div style={{ position:"relative", zIndex:1, padding:"48px 28px 36px", textAlign:"center" }}>
 
        {/* Micro label */}
        <div style={{
          fontSize:9, letterSpacing:8, color:C.amberLo, textTransform:"uppercase",
          marginBottom:16, opacity:0.8,
        }}>SPEAK WITH</div>
 
        {/* Monogram circle */}
        <div style={{
          width:100, height:100, borderRadius:"50%", margin:"0 auto 20px",
          background:`linear-gradient(145deg, #1a1005, #0d0a04)`,
          border:`2px solid ${C.amber}`,
          boxShadow:`0 0 60px ${C.amberGlow}, 0 0 120px rgba(200,130,42,0.08), inset 0 0 30px rgba(200,130,42,0.05)`,
          display:"flex", alignItems:"center", justifyContent:"center",
          animation:"breathe 4s ease-in-out infinite",
        }}>
          <span style={{
            fontSize:42, fontWeight:900, color:C.amber,
            fontFamily:"'Georgia',serif", lineHeight:1,
            textShadow:`0 0 30px ${C.amber}`,
          }}>T</span>
        </div>
 
        {/* Name */}
        <div style={{
          fontSize:"clamp(56px,16vw,96px)", fontWeight:900,
          color:C.cream, lineHeight:0.85, letterSpacing:"-3px",
          fontFamily:"'Georgia',serif",
          textShadow:`0 0 80px ${C.amberGlow}, 0 2px 0 rgba(0,0,0,0.8)`,
          marginBottom:14,
        }}>TITAN</div>
 
        {/* Divider */}
        <div style={{ display:"flex", alignItems:"center", gap:12, margin:"0 auto 14px", maxWidth:240 }}>
          <div style={{ flex:1, height:1, background:`linear-gradient(to right, transparent, ${C.amber})` }}/>
          <div style={{ width:5, height:5, borderRadius:"50%", background:C.amber }}/>
          <div style={{ flex:1, height:1, background:`linear-gradient(to left, transparent, ${C.amber})` }}/>
        </div>
 
        {/* Tagline */}
        <div style={{ fontSize:10, letterSpacing:5, color:C.textMid, textTransform:"uppercase" }}>
          240 LBS &nbsp;·&nbsp; IRON WILL &nbsp;·&nbsp; APEX
        </div>
 
        {/* Profile greeting or prompt */}
        {profileSaved && profile.name ? (
          <div style={{
            marginTop:20, fontSize:13, color:C.textMid, fontStyle:"italic",
            fontFamily:"'Georgia',serif", letterSpacing:0.3,
          }}>
            Welcome back, {profile.name}.
          </div>
        ) : (
          <div style={{
            marginTop:20, fontSize:12, color:C.textDim, letterSpacing:1,
          }}>
            Set your profile to unlock your full potential.
          </div>
        )}
 
        {/* Stats row */}
        {hasStats && (
          <div style={{ display:"flex", justifyContent:"center", gap:8, marginTop:18, flexWrap:"wrap" }}>
            <StatBadge label="Squat" value={profile.squat} color={C.amber}/>
            <StatBadge label="Deadlift" value={profile.deadlift} color={C.amber}/>
            <StatBadge label="Bench" value={profile.bench} color={C.teal}/>
          </div>
        )}
      </div>
    </div>
  );
}
 
// ─── PROFILE FORM — step-by-step ─────────────────────────────────────────────
const PROFILE_STEPS = [
  {
    id:"identity",
    label:"Who Are You",
    icon:"👤",
    fields:[
      { key:"name", label:"Name", placeholder:"What do you go by?", type:"text" },
      { key:"age",  label:"Age",  placeholder:"e.g. 28",            type:"text" },
    ],
  },
  {
    id:"body",
    label:"Your Body",
    icon:"⚖️",
    fields:[
      { key:"weight", label:"Body Weight", placeholder:"e.g. 185 lbs", type:"text" },
      { key:"height", label:"Height",      placeholder:'e.g. 5\'10"',  type:"text" },
    ],
  },
  {
    id:"lifts",
    label:"Your Numbers",
    icon:"🏋️",
    fields:[
      { key:"squat",    label:"Squat 1RM",    placeholder:"e.g. 315 lbs", type:"text" },
      { key:"deadlift", label:"Deadlift 1RM", placeholder:"e.g. 405 lbs", type:"text" },
      { key:"bench",    label:"Bench 1RM",    placeholder:"e.g. 225 lbs", type:"text" },
    ],
  },
  {
    id:"goal",
    label:"Your Goal",
    icon:"🎯",
    goals:["Build Muscle","Lose Fat","Increase Strength","Athletic Performance","General Fitness"],
    fields:[
      { key:"experience", label:"Training Experience", placeholder:"e.g. 3 years, intermediate", type:"text" },
    ],
  },
  {
    id:"notes",
    label:"Anything Else",
    icon:"📝",
    notes:true,
  },
];
 
function ProfileWizard({ profile, setProfile, onSave }) {
  const [step, setStep] = useState(0);
  const current = PROFILE_STEPS[step];
  const isLast  = step === PROFILE_STEPS.length - 1;
 
  function next() { if (!isLast) setStep(s => s+1); else onSave(); }
  function back() { setStep(s => Math.max(0, s-1)); }
 
  return (
    <div style={{ display:"flex", flexDirection:"column", gap:0, height:"100%" }}>
      {/* Progress bar */}
      <div style={{ padding:"16px 20px 0" }}>
        <div style={{ display:"flex", gap:4 }}>
          {PROFILE_STEPS.map((s,i) => (
            <div key={i} onClick={()=>setStep(i)} style={{
              flex:1, height:3, borderRadius:2, cursor:"pointer",
              background: i <= step ? C.amber : C.border,
              transition:"background 0.3s",
              boxShadow: i === step ? `0 0 8px ${C.amber}` : "none",
            }}/>
          ))}
        </div>
        <div style={{ display:"flex", justifyContent:"space-between", marginTop:8 }}>
          <span style={{ fontSize:9, letterSpacing:3, color:C.amberLo, textTransform:"uppercase" }}>
            Step {step+1} of {PROFILE_STEPS.length}
          </span>
          <span style={{ fontSize:9, letterSpacing:2, color:C.textDim, textTransform:"uppercase" }}>
            {current.label}
          </span>
        </div>
      </div>
 
      {/* Step content */}
      <div style={{ flex:1, padding:"20px 20px 16px", overflowY:"auto" }}>
        <div style={{
          background:C.surface, border:`1px solid ${C.border}`,
          borderRadius:16, padding:"24px 20px",
        }}>
          <div style={{ display:"flex", alignItems:"center", gap:10, marginBottom:22 }}>
            <div style={{ fontSize:24 }}>{current.icon}</div>
            <div style={{ fontSize:18, color:C.cream, fontFamily:"'Georgia',serif", fontWeight:700 }}>{current.label}</div>
          </div>
 
          {/* Regular fields */}
          {current.fields?.map(f => (
            <div key={f.key} style={{ marginBottom:16 }}>
              <label style={{ display:"block", fontSize:9, letterSpacing:3, color:C.textDim, textTransform:"uppercase", marginBottom:6 }}>
                {f.label}
              </label>
              <input
                value={profile[f.key]}
                onChange={e=>setProfile({...profile,[f.key]:e.target.value})}
                placeholder={f.placeholder}
                onKeyDown={e=>{ if(e.key==="Enter") next(); }}
                style={{
                  width:"100%", background:C.bgSolid, border:`1px solid ${C.border}`,
                  borderRadius:10, padding:"11px 14px", color:C.text, fontSize:14,
                  fontFamily:"'Georgia',serif", outline:"none", boxSizing:"border-box",
                  transition:"border-color 0.2s",
                }}
                onFocus={e=>e.target.style.borderColor=C.amber}
                onBlur={e=>e.target.style.borderColor=C.border}
              />
            </div>
          ))}
 
          {/* Goal step */}
          {current.goals && (
            <div style={{ marginBottom:16 }}>
              <label style={{ display:"block", fontSize:9, letterSpacing:3, color:C.textDim, textTransform:"uppercase", marginBottom:10 }}>
                Primary Goal
              </label>
              <div style={{ display:"flex", flexDirection:"column", gap:8 }}>
                {current.goals.map(g=>(
                  <button key={g} onClick={()=>setProfile({...profile,goal:g})} style={{
                    background: profile.goal===g
                      ? `linear-gradient(135deg,${C.amber}22,${C.amberLo}22)`
                      : "transparent",
                    border:`1px solid ${profile.goal===g ? C.amber : C.border}`,
                    borderRadius:10, padding:"11px 16px",
                    color: profile.goal===g ? C.amber : C.textMid,
                    fontSize:13, cursor:"pointer", fontFamily:"'Georgia',serif",
                    textAlign:"left", transition:"all 0.18s",
                    display:"flex", alignItems:"center", gap:10,
                  }}>
                    <div style={{
                      width:16, height:16, borderRadius:"50%", flexShrink:0,
                      border:`2px solid ${profile.goal===g ? C.amber : C.border}`,
                      background: profile.goal===g ? C.amber : "transparent",
                      transition:"all 0.18s",
                    }}/>
                    {g}
                  </button>
                ))}
              </div>
            </div>
          )}
 
          {/* Notes step */}
          {current.notes && (
            <div>
              <label style={{ display:"block", fontSize:9, letterSpacing:3, color:C.textDim, textTransform:"uppercase", marginBottom:6 }}>
                Injuries, schedule, anything TITAN should know
              </label>
              <textarea
                value={profile.notes}
                onChange={e=>setProfile({...profile,notes:e.target.value})}
                placeholder="Optional — share anything that shapes your training…"
                rows={5}
                style={{
                  width:"100%", background:C.bgSolid, border:`1px solid ${C.border}`,
                  borderRadius:10, padding:"11px 14px", color:C.text,
                  fontSize:14, fontFamily:"'Georgia',serif", outline:"none",
                  resize:"vertical", boxSizing:"border-box", transition:"border-color 0.2s",
                }}
                onFocus={e=>e.target.style.borderColor=C.amber}
                onBlur={e=>e.target.style.borderColor=C.border}
              />
            </div>
          )}
        </div>
      </div>
 
      {/* Navigation */}
      <div style={{ padding:"0 20px 28px", display:"flex", gap:10 }}>
        {step > 0 && (
          <button onClick={back} style={{
            background:"transparent", border:`1px solid ${C.border}`,
            borderRadius:10, padding:"12px 20px",
            color:C.textMid, fontSize:12, letterSpacing:2,
            textTransform:"uppercase", cursor:"pointer",
            fontFamily:"'Georgia',serif", transition:"all 0.2s",
          }}
            onMouseOver={e=>e.currentTarget.style.borderColor=C.amber}
            onMouseOut={e=>e.currentTarget.style.borderColor=C.border}
          >← Back</button>
        )}
        <button onClick={next} style={{
          flex:1,
          background:`linear-gradient(135deg,${C.amber},${C.amberLo})`,
          border:"none", borderRadius:10, padding:"13px",
          color:C.cream, fontSize:12, letterSpacing:3, textTransform:"uppercase",
          cursor:"pointer", fontFamily:"'Georgia',serif", fontWeight:700,
          boxShadow:`0 0 28px ${C.amberGlow}`,
          transition:"opacity 0.2s",
        }}>
          {isLast ? "Lock In →" : "Continue →"}
        </button>
      </div>
    </div>
  );
}
 
// ─── MAIN ────────────────────────────────────────────────────────────────────
export default function TitanApp() {
  const [screen, setScreen]     = useState("home");
  const [chatMode, setChatMode] = useState("personal");
  const [profile, setProfile]   = useState({
    name:"", age:"", weight:"", height:"",
    goal:"", experience:"", squat:"", deadlift:"", bench:"", notes:""
  });
  const [profileSaved, setProfileSaved] = useState(false);
 
  const [personalMsgs, setPersonalMsgs] = useState([{
    role:"assistant", atts:[],
    content:"You found me. Good. I don't meet many people willing to seek out something real. I'm TITAN — and I'm curious about you. Not your lifts, not your goals. You. Who are you when the weight isn't in your hands?",
  }]);
  const [coachMsgs, setCoachMsgs] = useState([{
    role:"assistant", atts:[],
    content:"Coach mode. This is where we work. Show me your numbers, your program, your body — whatever you've got. I'll tell you exactly what needs to change and exactly how to get there.",
  }]);
 
  const messages    = chatMode === "personal" ? personalMsgs : coachMsgs;
  const setMessages = chatMode === "personal" ? setPersonalMsgs : setCoachMsgs;
  const isPersonal  = chatMode === "personal";
  const modeColor   = isPersonal ? C.teal : C.amber;
  const modeGlow    = isPersonal ? C.tealGlow : C.amberGlow;
  const modeLo      = isPersonal ? C.tealLo : C.amberLo;
 
  const [input,    setInput]    = useState("");
  const [atts,     setAtts]     = useState([]);
  const [loading,  setLoading]  = useState(false);
  const [dragOver, setDragOver] = useState(false);
  const [workout,  setWorkout]  = useState("");
  const [wLoading, setWLoading] = useState(false);
  const [saved,    setSaved]    = useState(false);
 
  const bottomRef = useRef(null);
  const fileRef   = useRef(null);
  const inputRef  = useRef(null);
 
  useEffect(() => { bottomRef.current?.scrollIntoView({ behavior:"smooth" }); }, [messages, loading]);
 
  function addFiles(files) {
    const valid = Array.from(files).filter(f => isImg(f)||isDoc(f));
    setAtts(prev => [...prev, ...valid.map(f=>({
      file:f, preview:isImg(f)?URL.createObjectURL(f):null
    }))].slice(0,4));
  }
 
  async function send() {
    const txt = input.trim();
    if ((!txt && atts.length===0) || loading) return;
    setInput("");
    const sendAtts = [...atts];
    setAtts([]);
 
    const userMsg = { role:"user", content: txt || `[${sendAtts.map(a=>a.file.name).join(", ")}]`, atts:sendAtts };
    const next    = [...messages, userMsg];
    setMessages(next);
    setLoading(true);
 
    try {
      const apiContent = await buildApiContent(txt, sendAtts);
      const sysPrompt  = isPersonal ? PERSONAL_PROMPT(profile) : COACH_PROMPT(profile);
 
      const apiMsgs = next.map((m,i) => ({
        role: m.role,
        content: (m.role==="user" && i===next.length-1) ? apiContent
          : (typeof m.content==="string" ? m.content : "[attachment]"),
      }));
 
      const res  = await fetch("https://api.anthropic.com/v1/messages", {
        method:"POST",
        headers:{"Content-Type":"application/json"},
        body: JSON.stringify({
          model:"claude-sonnet-4-20250514",
          max_tokens:1200,
          system: sysPrompt,
          messages: apiMsgs,
        }),
      });
      const data  = await res.json();
      const reply = data.content?.map(b=>b.text||"").join("")||"...";
      setMessages([...next, { role:"assistant", content:reply, atts:[] }]);
    } catch {
      setMessages([...next,{ role:"assistant", content:"Signal lost. Try again.", atts:[] }]);
    } finally { setLoading(false); }
  }
 
  async function genWorkout() {
    setWorkout(""); setWLoading(true); setScreen("workout");
    try {
      const res  = await fetch("https://api.anthropic.com/v1/messages", {
        method:"POST", headers:{"Content-Type":"application/json"},
        body: JSON.stringify({
          model:"claude-sonnet-4-20250514", max_tokens:1400,
          system: COACH_PROMPT(profile),
          messages:[{ role:"user", content:WORKOUT_PROMPT(profile) }],
        }),
      });
      const data = await res.json();
      setWorkout(data.content?.map(b=>b.text||"").join("")||"...");
    } catch { setWorkout("Something broke. The iron waits."); }
    finally  { setWLoading(false); }
  }
 
  function saveProfile() {
    setProfileSaved(true);
    setSaved(true);
    setPersonalMsgs([{ role:"assistant", atts:[],
      content:`${profile.name ? profile.name+". " : ""}Profile received. I see you now — the full picture. Come talk to me. The personal door or the coaching door — both are open.` }]);
    setCoachMsgs([{ role:"assistant", atts:[],
      content:`Locked in. ${profile.name ? profile.name+", " : ""}I've got your numbers. Now show me your work — logs, photos, questions. Let's build.` }]);
    setTimeout(()=>{ setSaved(false); setScreen("home"); }, 1200);
  }
 
  // ─── HOME ──────────────────────────────────────────────────────────────────
  if (screen === "home") return (
    <Shell>
      <HomeHero profileSaved={profileSaved} profile={profile}/>
 
      <div style={{ display:"flex", flexDirection:"column", gap:10, padding:"0 20px 32px", maxWidth:480, width:"100%", margin:"0 auto" }}>
 
        {/* Personal */}
        <button onClick={()=>{ setChatMode("personal"); setScreen("chat"); }} style={{
          background:`linear-gradient(135deg, #0d2028, #091518)`,
          border:`1px solid ${C.tealLo}`,
          borderRadius:14, padding:"18px 20px",
          cursor:"pointer", textAlign:"left",
          boxShadow:`0 0 30px ${C.tealGlow}`,
          transition:"all 0.2s",
        }}
          onMouseOver={e=>{ e.currentTarget.style.borderColor=C.teal; e.currentTarget.style.transform="translateY(-1px)"; }}
          onMouseOut={e=>{ e.currentTarget.style.borderColor=C.tealLo; e.currentTarget.style.transform="none"; }}
        >
          <div style={{ display:"flex", alignItems:"center", gap:14 }}>
            <div style={{
              width:42, height:42, borderRadius:10, flexShrink:0,
              background:`${C.teal}18`, border:`1px solid ${C.tealLo}`,
              display:"flex", alignItems:"center", justifyContent:"center", fontSize:20,
            }}>💙</div>
            <div>
              <div style={{ color:C.teal, fontSize:12, fontWeight:700, letterSpacing:3, textTransform:"uppercase", fontFamily:"'Georgia',serif" }}>Personal</div>
              <div style={{ color:C.textMid, fontSize:11, marginTop:3, letterSpacing:0.5 }}>Mindset · Life · Identity · Soul</div>
            </div>
            <div style={{ marginLeft:"auto", color:C.tealLo, fontSize:20 }}>→</div>
          </div>
        </button>
 
        {/* Coach */}
        <button onClick={()=>{ setChatMode("coach"); setScreen("chat"); }} style={{
          background:`linear-gradient(135deg, #1e1208, #110c04)`,
          border:`1px solid ${C.amberLo}`,
          borderRadius:14, padding:"18px 20px",
          cursor:"pointer", textAlign:"left",
          boxShadow:`0 0 30px ${C.amberGlow}`,
          transition:"all 0.2s",
        }}
          onMouseOver={e=>{ e.currentTarget.style.borderColor=C.amber; e.currentTarget.style.transform="translateY(-1px)"; }}
          onMouseOut={e=>{ e.currentTarget.style.borderColor=C.amberLo; e.currentTarget.style.transform="none"; }}
        >
          <div style={{ display:"flex", alignItems:"center", gap:14 }}>
            <div style={{
              width:42, height:42, borderRadius:10, flexShrink:0,
              background:`${C.amber}18`, border:`1px solid ${C.amberLo}`,
              display:"flex", alignItems:"center", justifyContent:"center", fontSize:20,
            }}>🔥</div>
            <div>
              <div style={{ color:C.amber, fontSize:12, fontWeight:700, letterSpacing:3, textTransform:"uppercase", fontFamily:"'Georgia',serif" }}>Coach</div>
              <div style={{ color:C.textMid, fontSize:11, marginTop:3, letterSpacing:0.5 }}>Training · Nutrition · Performance · Body</div>
            </div>
            <div style={{ marginLeft:"auto", color:C.amberLo, fontSize:20 }}>→</div>
          </div>
        </button>
 
        {/* Bottom row */}
        <div style={{ display:"flex", gap:10, marginTop:2 }}>
          <button onClick={()=>setScreen("profile")} style={{
            flex:1, background:"transparent", border:`1px solid ${C.border}`,
            borderRadius:12, padding:"13px 0",
            color: profileSaved ? C.amber : C.textMid,
            fontSize:11, letterSpacing:1, cursor:"pointer",
            fontFamily:"'Georgia',serif", transition:"all 0.2s",
            display:"flex", alignItems:"center", justifyContent:"center", gap:6,
          }}
            onMouseOver={e=>e.currentTarget.style.borderColor=C.amber}
            onMouseOut={e=>e.currentTarget.style.borderColor=C.border}
          >
            {profileSaved ? "✓" : "⚡"} Profile
          </button>
          <button onClick={genWorkout} style={{
            flex:1, background:"transparent", border:`1px solid ${C.border}`,
            borderRadius:12, padding:"13px 0",
            color:C.textMid, fontSize:11, letterSpacing:1, cursor:"pointer",
            fontFamily:"'Georgia',serif", transition:"all 0.2s",
          }}
            onMouseOver={e=>e.currentTarget.style.borderColor=C.amber}
            onMouseOut={e=>e.currentTarget.style.borderColor=C.border}
          >🏋️ Session</button>
        </div>
      </div>
 
      <GlobalStyle/>
    </Shell>
  );
 
  // ─── CHAT ──────────────────────────────────────────────────────────────────
  if (screen === "chat") return (
    <Shell>
      {/* top bar */}
      <div style={{
        display:"flex", alignItems:"center", gap:12,
        padding:"14px 20px 12px",
        borderBottom:`1px solid ${C.border}`,
        background:`linear-gradient(to bottom, ${modeColor}06, transparent)`,
      }}>
        <button onClick={()=>setScreen("home")} style={{
          background:"none", border:`1px solid ${C.border}`, borderRadius:8,
          color:C.textMid, cursor:"pointer", padding:"6px 12px", fontSize:12,
          letterSpacing:1, fontFamily:"'Georgia',serif", transition:"all 0.15s",
        }}
          onMouseOver={e=>e.currentTarget.style.borderColor=modeColor}
          onMouseOut={e=>e.currentTarget.style.borderColor=C.border}
        >← Home</button>
 
        {/* mode toggle */}
        <div style={{
          flex:1, display:"flex", justifyContent:"center",
          gap:0, background:C.surface, borderRadius:10,
          border:`1px solid ${C.border}`, padding:3, maxWidth:220, margin:"0 auto",
        }}>
          {[["personal","💙 Soul"],["coach","🔥 Coach"]].map(([m,l]) => (
            <button key={m} onClick={()=>setChatMode(m)} style={{
              flex:1, border:"none", borderRadius:7,
              padding:"7px 0", fontSize:11, letterSpacing:1,
              cursor:"pointer", fontFamily:"'Georgia',serif",
              background: chatMode===m
                ? (m==="personal"
                  ? `linear-gradient(135deg,${C.tealLo},#0a3040)`
                  : `linear-gradient(135deg,${C.amberLo},#5a3008)`)
                : "transparent",
              color: chatMode===m
                ? (m==="personal" ? C.teal : C.amber)
                : C.textDim,
              transition:"all 0.2s",
            }}>{l}</button>
          ))}
        </div>
 
        {/* TITAN avatar label */}
        <TAvatar size={32} glow={modeGlow} color={modeColor}/>
      </div>
 
      {/* messages */}
      <div
        onDragOver={e=>{e.preventDefault();setDragOver(true);}}
        onDragLeave={()=>setDragOver(false)}
        onDrop={e=>{e.preventDefault();setDragOver(false);addFiles(e.dataTransfer.files);}}
        style={{
          flex:1, padding:"16px 16px 8px", overflowY:"auto",
          display:"flex", flexDirection:"column", gap:0,
          outline: dragOver ? `2px dashed ${modeColor}` : "none",
          borderRadius: dragOver ? 12 : 0,
          scrollbarWidth:"thin", scrollbarColor:`${C.border} ${C.bgSolid}`,
        }}>
 
        {dragOver && (
          <div style={{
            position:"sticky", top:6, zIndex:10,
            background:"rgba(8,7,5,0.92)", border:`1px dashed ${modeColor}`,
            borderRadius:10, padding:"16px", textAlign:"center",
            color:modeColor, fontSize:12, letterSpacing:3, textTransform:"uppercase",
          }}>Drop your file here</div>
        )}
 
        {messages.map((m,i) => (
          <div key={i} style={{
            display:"flex", justifyContent:m.role==="user"?"flex-end":"flex-start",
            marginBottom:16, alignItems:"flex-start", gap:10,
          }}>
            {m.role==="assistant" && (
              <TAvatar size={30} glow={modeGlow} color={modeColor}/>
            )}
            <div style={{ maxWidth:"80%" }}>
              {m.atts?.filter(a=>a.preview).map((a,j)=>(
                <img key={j} src={a.preview} alt={a.file.name}
                  style={{ maxWidth:180, maxHeight:160, borderRadius:10,
                    border:`1px solid ${C.border}`, objectFit:"cover",
                    marginBottom:6, display:"block",
                    marginLeft:m.role==="user"?"auto":"0" }}
                />
              ))}
              {m.atts?.filter(a=>!a.preview).map((a,j)=>(
                <div key={j} style={{
                  background:C.surface, border:`1px solid ${C.border}`,
                  borderRadius:8, padding:"4px 10px", fontSize:11,
                  color:C.textMid, marginBottom:6, display:"inline-block",
                }}>📄 {a.file.name}</div>
              ))}
              {m.content && (
                <div style={{
                  padding:"13px 16px",
                  borderRadius: m.role==="user" ? "16px 16px 4px 16px" : "4px 16px 16px 16px",
                  background: m.role==="user"
                    ? `linear-gradient(135deg, #1c1408, #130e05)`
                    : isPersonal
                      ? `linear-gradient(135deg, #091518, #060e10)`
                      : `linear-gradient(135deg, #141009, #0e0b05)`,
                  border:`1px solid ${m.role==="user" ? "#3a2810" : (isPersonal ? "#0d3040" : C.border)}`,
                  color: m.role==="user" ? "#c8a882" : C.text,
                  boxShadow: m.role==="assistant" ? `0 4px 20px rgba(0,0,0,0.4)` : "none",
                }}>
                  {m.role==="assistant"
                    ? <RichText content={m.content} color={C.text}/>
                    : <span style={{ fontSize:14.5, lineHeight:1.78, letterSpacing:0.25, fontFamily:"'Georgia',serif", whiteSpace:"pre-wrap" }}>{m.content}</span>
                  }
                </div>
              )}
            </div>
          </div>
        ))}
 
        {loading && (
          <div style={{ display:"flex", alignItems:"center", gap:10, marginBottom:14 }}>
            <TAvatar size={30} glow={modeGlow} color={modeColor}/>
            <div style={{
              padding:"12px 16px", background:C.surface,
              border:`1px solid ${C.border}`, borderRadius:"4px 16px 16px 16px",
            }}><Dots color={modeColor}/></div>
          </div>
        )}
        <div ref={bottomRef}/>
      </div>
 
      {/* attachment tray */}
      {atts.length > 0 && (
        <div style={{ padding:"8px 16px 0", display:"flex", gap:8, flexWrap:"wrap" }}>
          {atts.map((a,i)=>(
            <Pill key={i} file={a.file} onRemove={()=>setAtts(p=>p.filter((_,j)=>j!==i))}/>
          ))}
        </div>
      )}
 
      {/* input */}
      <div style={{ padding:"10px 16px 28px" }}>
        <div style={{
          background:C.surface, border:`1px solid ${dragOver ? modeColor : C.borderHi}`,
          borderRadius:14, padding:"8px 8px 8px 16px",
          boxShadow:`0 0 40px ${modeGlow}, 0 8px 32px rgba(0,0,0,0.6)`,
          transition:"border-color 0.2s",
        }}>
          <div style={{ display:"flex", gap:8, alignItems:"flex-end" }}>
            <textarea ref={inputRef}
              value={input}
              onChange={e=>setInput(e.target.value)}
              onKeyDown={e=>{ if(e.key==="Enter"&&!e.shiftKey){e.preventDefault();send();} }}
              onInput={e=>{ e.target.style.height="auto"; e.target.style.height=Math.min(e.target.scrollHeight,112)+"px"; }}
              placeholder={isPersonal ? "Talk to TITAN…" : "Ask your coach anything…"}
              rows={1}
              style={{
                flex:1, background:"transparent", border:"none", outline:"none",
                color:C.text, fontSize:14.5, fontFamily:"'Georgia',serif",
                letterSpacing:0.3, resize:"none", lineHeight:1.6,
                minHeight:26, maxHeight:112, overflowY:"auto",
              }}
            />
            <label htmlFor="titan-file-input" title="Attach" style={{
              background:"transparent", border:`1px solid ${C.border}`,
              borderRadius:9, width:40, height:40, flexShrink:0,
              cursor:"pointer", display:"flex", alignItems:"center",
              justifyContent:"center", fontSize:17, color:C.textDim,
              transition:"all 0.2s", userSelect:"none",
            }}
              onMouseOver={e=>{ e.currentTarget.style.borderColor=modeColor; e.currentTarget.style.color=modeColor; }}
              onMouseOut={e=>{ e.currentTarget.style.borderColor=C.border; e.currentTarget.style.color=C.textDim; }}
            >📎</label>
            <button onClick={send} disabled={loading||(!input.trim()&&atts.length===0)}
              style={{
                background: (loading||(!input.trim()&&atts.length===0))
                  ? C.surface
                  : `linear-gradient(135deg, ${modeColor}, ${modeLo})`,
                border:"none", borderRadius:9, width:40, height:40, flexShrink:0,
                cursor:(loading||(!input.trim()&&atts.length===0))?"not-allowed":"pointer",
                display:"flex", alignItems:"center", justifyContent:"center",
                fontSize:18, color:C.cream, transition:"all 0.2s",
                boxShadow:(loading||(!input.trim()&&atts.length===0))?"none":`0 0 18px ${modeGlow}`,
              }}>↑</button>
          </div>
          <div style={{ marginTop:5, fontSize:10, color:C.textDim, letterSpacing:0.8, paddingLeft:2 }}>
            ENTER send &nbsp;·&nbsp; SHIFT+ENTER new line &nbsp;·&nbsp; drag & drop files
          </div>
        </div>
        <input
          id="titan-file-input"
          ref={fileRef}
          type="file"
          multiple
          accept={[...IMG_TYPES,...DOC_TYPES].join(",")}
          onChange={e=>{ addFiles(e.target.files); e.target.value=""; }}
          style={{ position:"absolute", width:1, height:1, opacity:0, overflow:"hidden", zIndex:-1 }}
        />
      </div>
      <GlobalStyle/>
    </Shell>
  );
 
  // ─── PROFILE ───────────────────────────────────────────────────────────────
  if (screen === "profile") return (
    <Shell>
      <div style={{ padding:"16px 20px 0", display:"flex", alignItems:"center", gap:12 }}>
        <button onClick={()=>setScreen("home")} style={backBtn()}>← Home</button>
        <div style={{ fontSize:10, letterSpacing:6, color:C.amberLo, textTransform:"uppercase" }}>Athlete Profile</div>
        {saved && (
          <div style={{
            marginLeft:"auto", fontSize:11, color:C.green,
            letterSpacing:2, textTransform:"uppercase",
            animation:"fadeIn 0.3s ease",
          }}>✓ Locked In</div>
        )}
      </div>
      <div style={{ flex:1, display:"flex", flexDirection:"column", overflowY:"auto" }}>
        <ProfileWizard profile={profile} setProfile={setProfile} onSave={saveProfile}/>
      </div>
      <GlobalStyle/>
    </Shell>
  );
 
  // ─── WORKOUT ───────────────────────────────────────────────────────────────
  if (screen === "workout") return (
    <Shell>
      <div style={{ padding:"16px 20px 0", display:"flex", alignItems:"center", gap:12 }}>
        <button onClick={()=>setScreen("home")} style={backBtn()}>← Home</button>
        <div style={{ fontSize:10, letterSpacing:6, color:C.amberLo, textTransform:"uppercase" }}>Today's Session</div>
      </div>
      <div style={{ flex:1, padding:"16px 16px 32px", overflowY:"auto" }}>
        <div style={{ background:C.surface, border:`1px solid ${C.border}`, borderRadius:16, padding:"24px 20px" }}>
          {wLoading ? (
            <div style={{ display:"flex", flexDirection:"column", alignItems:"center", gap:18, padding:"48px 0" }}>
              <div style={{
                width:72, height:72, borderRadius:"50%",
                background:`linear-gradient(145deg, #1a1005, #0d0a04)`,
                border:`2px solid ${C.amber}`,
                boxShadow:`0 0 40px ${C.amberGlow}`,
                display:"flex", alignItems:"center", justifyContent:"center",
                animation:"breathe 2s ease-in-out infinite",
              }}>
                <span style={{ fontSize:28, fontWeight:900, color:C.amber, fontFamily:"'Georgia',serif" }}>T</span>
              </div>
              <Dots/>
              <div style={{ color:C.textDim, fontSize:10, letterSpacing:4, textTransform:"uppercase" }}>Building your session…</div>
            </div>
          ) : (
            <>
              <RichText content={workout} color={C.text}/>
              <div style={{ display:"flex", gap:10, marginTop:28 }}>
                <button onClick={genWorkout} style={{
                  flex:1, background:"transparent", border:`1px solid ${C.border}`,
                  borderRadius:10, padding:"11px",
                  color:C.textMid, fontSize:11, letterSpacing:2, textTransform:"uppercase",
                  cursor:"pointer", fontFamily:"'Georgia',serif", transition:"all 0.2s",
                }}
                  onMouseOver={e=>e.currentTarget.style.borderColor=C.amber}
                  onMouseOut={e=>e.currentTarget.style.borderColor=C.border}
                >↺ New Session</button>
                <button onClick={()=>{ setChatMode("coach"); setScreen("chat"); }} style={{
                  flex:1,
                  background:`linear-gradient(135deg,${C.amber},${C.amberLo})`,
                  border:"none", borderRadius:10, padding:"11px",
                  color:C.cream, fontSize:11, letterSpacing:2, textTransform:"uppercase",
                  cursor:"pointer", fontFamily:"'Georgia',serif",
                }}>Talk to TITAN →</button>
              </div>
            </>
          )}
        </div>
      </div>
      <GlobalStyle/>
    </Shell>
  );
 
  return null;
}
 
// ─── LAYOUT SHELL ─────────────────────────────────────────────────────────────
function Shell({ children }) {
  return (
    <div style={{
      minHeight:"100vh", background:C.bgSolid,
      display:"flex", flexDirection:"column", alignItems:"center",
      fontFamily:"'Georgia',serif", position:"relative", overflowX:"hidden",
    }}>
      <div style={{
        position:"fixed", inset:0, zIndex:0, pointerEvents:"none",
        background:`radial-gradient(ellipse at 20% 70%, #1c0e00 0%, ${C.bgSolid} 55%), radial-gradient(ellipse at 80% 10%, #060c12 0%, transparent 50%)`,
      }}/>
      <div style={{
        position:"fixed", inset:0, zIndex:0, opacity:0.018, pointerEvents:"none",
        backgroundImage:"repeating-linear-gradient(0deg,#fff 0,#fff 1px,transparent 1px,transparent 52px),repeating-linear-gradient(90deg,#fff 0,#fff 1px,transparent 1px,transparent 52px)",
      }}/>
      <div style={{ position:"relative", zIndex:2, width:"100%", maxWidth:680, display:"flex", flexDirection:"column", minHeight:"100vh" }}>
        {children}
      </div>
    </div>
  );
}
 
function backBtn() {
  return {
    background:"none", border:`1px solid ${C.border}`, borderRadius:8,
    color:C.textMid, cursor:"pointer", padding:"6px 12px",
    fontSize:11, letterSpacing:1, fontFamily:"'Georgia',serif",
  };
}
 
function GlobalStyle() {
  return (
    <style>{`
      @keyframes tdot {
        0%,100% { opacity:0.25; transform:scale(0.75); }
        50%      { opacity:1;    transform:scale(1.15); }
      }
      @keyframes breathe {
        0%,100% { box-shadow: 0 0 30px ${C.amberGlow}; }
        50%      { box-shadow: 0 0 60px ${C.amber}55; }
      }
      @keyframes fadeIn {
        from { opacity:0; transform:translateY(-4px); }
        to   { opacity:1; transform:translateY(0); }
      }
      * { box-sizing:border-box; }
      ::-webkit-scrollbar       { width:4px; }
      ::-webkit-scrollbar-track { background:${C.bgSolid}; }
      ::-webkit-scrollbar-thumb { background:${C.border}; border-radius:2px; }
      input::placeholder, textarea::placeholder { color:${C.textDim}; }
    `}</style>
  );
}
 

<script defer data-domain="html.cafe" src="https://milkymouse.com/js/script.js"></script>