// PartialPulse.jsx — the hub surface when only one diagnostic is in.
// Per strategy §5/J3: show the axis as a *line*, not a point, and render the
// missing half as an inviting card (same size/shape as the real one), never
// as a locked placeholder.

function PartialMap({ pressure, burnout }) {
  const W = 520, H = 440, INSET = 40;
  const hasPressure = pressure != null;
  const hasBurnout  = burnout  != null;

  // If pressure is known, burnout unknown: draw a vertical line at plotX.
  // If burnout is known, pressure unknown: draw a horizontal line at plotY.
  const plotX = hasPressure ? INSET + (pressure/100) * (W - INSET*2) : null;
  const plotY = hasBurnout  ? INSET + ((100 - burnout)/100) * (H - INSET*2) : null;

  return (
    <div style={{background:"linear-gradient(135deg,#0B1220,#1E293B)",borderRadius:24,padding:"32px 32px 28px",color:"#fff",border:"1px solid #1E293B",boxShadow:"0 1px 2px rgba(0,0,0,0.2), 0 8px 24px rgba(0,0,0,0.25)"}}>
      <div style={{display:"flex",alignItems:"center",gap:8,marginBottom:8}}>
        <Icon name="flame" size={14} color="#FCD34D"/>
        <span style={{fontFamily:"'Space Grotesk',sans-serif",fontSize:11,textTransform:"uppercase",letterSpacing:"0.2em",color:"#FCD34D",fontWeight:600}}>Partial Pulse · one half in</span>
      </div>
      <h3 style={{fontFamily:"'Space Grotesk',sans-serif",fontWeight:700,fontSize:24,letterSpacing:"-0.01em",margin:"0 0 6px"}}>You're somewhere on this line.</h3>
      <p style={{fontFamily:"'Inter',sans-serif",fontSize:14,color:"#CBD5E1",margin:"0 0 22px",maxWidth:540}}>
        Take the other diagnostic (7 minutes) to turn the line into a point — and get the quadrant reading.
      </p>

      <div style={{background:"rgba(15,23,42,0.6)",borderRadius:18,padding:18,position:"relative"}}>
        <svg viewBox={`0 0 ${W} ${H}`} style={{width:"100%",height:"auto",display:"block"}}>
          <rect x={INSET} y={INSET} width={W-INSET*2} height={H-INSET*2} fill="none" stroke="rgba(255,255,255,0.08)" strokeWidth="1" rx="2"/>
          <line x1={W/2} y1={INSET} x2={W/2} y2={H-INSET} stroke="#475569" strokeDasharray="3 4"/>
          <line x1={INSET} y1={H/2} x2={W-INSET} y2={H/2} stroke="#475569" strokeDasharray="3 4"/>

          <text x={INSET} y={H - 12} fontFamily="'JetBrains Mono',monospace" fontSize="10" fill="#8A93A2" textAnchor="start" letterSpacing="0.15em">← LOW PRESSURE</text>
          <text x={W - INSET} y={H - 12} fontFamily="'JetBrains Mono',monospace" fontSize="10" fill="#8A93A2" textAnchor="end" letterSpacing="0.15em">HIGH PRESSURE →</text>
          <text x={12} y={INSET + 6} fontFamily="'JetBrains Mono',monospace" fontSize="10" fill="#8A93A2" textAnchor="start" letterSpacing="0.15em">HIGH BURNOUT ↑</text>
          <text x={12} y={H - INSET + 4} fontFamily="'JetBrains Mono',monospace" fontSize="10" fill="#8A93A2" textAnchor="start" letterSpacing="0.15em">↓ LOW BURNOUT</text>

          <text x={INSET + 12} y={INSET + 26}           fontFamily="'Space Grotesk',sans-serif" fontSize="11" fontWeight="600" fill="#94A3B8" letterSpacing="0.02em">Quiet Quitting</text>
          <text x={W - INSET - 12} y={INSET + 26}       fontFamily="'Space Grotesk',sans-serif" fontSize="11" fontWeight="600" fill="#94A3B8" textAnchor="end" letterSpacing="0.02em">Critical</text>
          <text x={INSET + 12} y={H - INSET - 16}       fontFamily="'Space Grotesk',sans-serif" fontSize="11" fontWeight="600" fill="#94A3B8" letterSpacing="0.02em">Healthy Baseline</text>
          <text x={W - INSET - 12} y={H - INSET - 16}   fontFamily="'Space Grotesk',sans-serif" fontSize="11" fontWeight="600" fill="#94A3B8" textAnchor="end" letterSpacing="0.02em">Resilient Performer</text>

          {/* draw the user's line */}
          {hasPressure && (
            <line x1={plotX} y1={INSET} x2={plotX} y2={H-INSET}
              stroke="#F59E0B" strokeWidth="2.5" strokeLinecap="round" strokeDasharray="6 8"/>
          )}
          {hasBurnout && (
            <line x1={INSET} y1={plotY} x2={W-INSET} y2={plotY}
              stroke="#F59E0B" strokeWidth="2.5" strokeLinecap="round" strokeDasharray="6 8"/>
          )}
          {/* label */}
          {hasPressure && (
            <text x={plotX + 10} y={INSET + 16} fontFamily="'Space Grotesk',sans-serif" fontSize="12" fontWeight="700" fill="#FEF3C7">you're somewhere on this line</text>
          )}
          {hasBurnout && (
            <text x={W - INSET - 10} y={plotY - 10} fontFamily="'Space Grotesk',sans-serif" fontSize="12" fontWeight="700" fill="#FEF3C7" textAnchor="end">you're somewhere on this line</text>
          )}
        </svg>
      </div>
    </div>
  );
}

function InvitationCard({ kind, pulseCode }) {
  // kind = "pressure" or "burnout"
  const copy = kind === "pressure"
    ? {
        title:  "Your PressureIQ archetype",
        status: "Not yet taken",
        lead:   "Take PressureIQ to see who you become when the heat is on — and turn your line into a point.",
        cta:    "Take PressureIQ (7 min)",
        href:   `https://pressureiqtest.com/?pulse=${pulseCode}`,
        source: "PressureIQ · SJT"
      }
    : {
        title:  "Your BurnoutIQ archetype",
        status: "Not yet taken",
        lead:   "Take BurnoutIQ to see what's running you down across six validated dimensions — and complete the Pulse.",
        cta:    "Take BurnoutIQ (7 min)",
        href:   `https://burnoutiqtest.com/?pulse=${pulseCode}`,
        source: "BurnoutIQ · MBI · BAT · OLBI"
      };
  return (
    <Card padding={28} style={{display:"flex",flexDirection:"column",gap:12,borderTop:"3px dashed #D6D1C3",borderTopLeftRadius:18,borderTopRightRadius:18,background:"#FBFAF4"}}>
      <Eyebrow>{copy.title}</Eyebrow>
      <div style={{fontFamily:"'Space Grotesk',sans-serif",fontSize:13,color:"#8A93A2",fontWeight:600,textTransform:"uppercase",letterSpacing:"0.17em"}}>{copy.status}</div>
      <h3 style={{fontFamily:"'Fraunces',serif",fontWeight:500,fontStyle:"italic",fontSize:24,letterSpacing:"-0.01em",lineHeight:1.25,color:"#0B1220",margin:"4px 0 0"}}>{copy.lead}</h3>
      <div style={{marginTop:14}}>
        <a href={copy.href} style={{textDecoration:"none"}}>
          <Button variant="primary" size="md" iconRight="arrow">{copy.cta}</Button>
        </a>
      </div>
      <div style={{marginTop:"auto",paddingTop:14,fontFamily:"'Space Grotesk',sans-serif",fontSize:10,textTransform:"uppercase",letterSpacing:"0.2em",color:"#8A93A2",fontWeight:600}}>{copy.source}</div>
    </Card>
  );
}

function PartialArchetypeDuo({ pulse }) {
  const hasPressure = !!pulse.pressure;
  const hasBurnout  = !!pulse.burnout;
  return (
    <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:18}}>
      {hasPressure
        ? (() => {
            const piq = window.PIQ_ARCHETYPES[pulse.pressure.archetype];
            return <ArchetypeCard title="Under pressure, you are" arch={piq} hue={piq.hue} source="PressureIQ · SJT"/>;
          })()
        : <InvitationCard kind="pressure" pulseCode={pulse.code}/>}
      {hasBurnout
        ? (() => {
            const biq = window.BIQ_ARCHETYPES_MIRROR[pulse.burnout.archetype];
            return <ArchetypeCard title="Your burnout shape is" arch={biq} hue="#D97706" source="BurnoutIQ · MBI · BAT · OLBI"/>;
          })()
        : <InvitationCard kind="burnout" pulseCode={pulse.code}/>}
    </div>
  );
}

function PartialPulse({ pulseCode, pulse: pulseProp }) {
  const pulse = pulseProp || (window.SAMPLE_PULSES && window.SAMPLE_PULSES[pulseCode]);
  return (
    <div data-screen-label="Pivot Pulse — Partial (one half in)">
      <div style={{maxWidth:960,margin:"0 auto",padding:"48px 24px 16px"}}>
        <Eyebrow tone="ember">The Pivot Pulse · Partial reading</Eyebrow>
        <h1 style={{fontFamily:"'Fraunces',serif",fontWeight:500,fontSize:"clamp(2.5rem, 5vw, 3.75rem)",lineHeight:1.02,letterSpacing:"-0.025em",margin:"18px 0 14px",color:"#0B1220"}}>
          Half the map is in. <em style={{fontFamily:"'Fraunces',serif",fontStyle:"italic",color:"#B45309",fontVariationSettings:"'opsz' 144"}}>Take the other half.</em>
        </h1>
        <p style={{fontFamily:"'Inter',sans-serif",fontSize:"1.125rem",lineHeight:1.6,color:"#4B5563",margin:0,maxWidth:640}}>
          One diagnostic places you on an axis. Two place you on a point — which is where the quadrant reading and the next move actually live.
        </p>
        <div style={{marginTop:22,fontFamily:"'JetBrains Mono',monospace",fontSize:12,color:"#8A93A2"}}>
          Pulse · <span style={{color:"#0B1220",fontWeight:600}}>{pulse.code}</span>
        </div>
      </div>
      <div style={{maxWidth:960,margin:"0 auto",padding:"16px 24px 24px"}}>
        <PartialMap pressure={pulse.pressure?.score} burnout={pulse.burnout?.score}/>
      </div>
      <div style={{maxWidth:960,margin:"0 auto",padding:"0 24px 56px"}}>
        <PartialArchetypeDuo pulse={pulse}/>
      </div>
    </div>
  );
}

Object.assign(window, { PartialPulse });