// Hub.jsx — the full Pivot Pulse surface. Rendered at
// pulse.pivottraining.us/p/{code} when both halves are in.
//
// Composition:
//   PulseHeader — eyebrow, hero title, code + dates
//   PulseMap    — the 2×2, plotted dot, quadrant labels, simulated-stress moment
//   QuadrantRead — joint reading: quadrant name, description, single next move
//   ArchetypeDuo — both archetype cards side-by-side
//   Engage       — terminal CTA into a Pivot engagement (placeholder copy)

function PulseHeader({ pulse }) {
  const pDate = pulse.pressure?.completedAt;
  const bDate = pulse.burnout?.completedAt;
  return (
    <div style={{maxWidth:960,margin:"0 auto",padding:"48px 24px 16px"}}>
      <Eyebrow tone="ember">The Pivot Pulse · Your combined 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"}}>
        PressureIQ <span style={{color:"#8A93A2",fontStyle:"italic",fontWeight:400}}>×</span> BurnoutIQ.
        <br/><em style={{fontFamily:"'Fraunces',serif",fontStyle:"italic",color:"#B45309",fontVariationSettings:"'opsz' 144"}}>One reading.</em>
      </h1>
      <p style={{fontFamily:"'Inter',sans-serif",fontSize:"1.125rem",lineHeight:1.6,color:"#4B5563",margin:0,maxWidth:640}}>
        Where you sit on the Workload-to-Wellness Continuum, plotted from your two assessments.
        Both archetypes, the quadrant reading, and the one next move.
      </p>
      <div style={{marginTop:22,display:"flex",gap:22,flexWrap:"wrap",fontFamily:"'JetBrains Mono',monospace",fontSize:12,color:"#8A93A2"}}>
        <span>Pulse · <span style={{color:"#0B1220",fontWeight:600}}>{pulse.code}</span></span>
        {pDate && <span>PressureIQ taken · {pDate}</span>}
        {bDate && <span>BurnoutIQ taken · {bDate}</span>}
      </div>
    </div>
  );
}

// The 2×2 itself. Plotted dot arrives from top with a gentle bounce on mount.
function PulseMap({ pressure, burnout, quadrant }) {
  // SVG canvas 520×440 with a 40px inset so labels don't clip.
  const W = 520, H = 440, INSET = 40;
  const plotX = INSET + (pressure/100) * (W - INSET*2);
  const plotYRest = INSET + ((100 - burnout)/100) * (H - INSET*2); // high burnout = top
  const [y, setY] = React.useState(INSET - 40); // start above canvas
  React.useEffect(() => {
    const t = setTimeout(() => setY(plotYRest), 260);
    return () => clearTimeout(t);
  }, [plotYRest]);

  const Q = window.PULSE_QUADRANTS;
  const quadLabels = [
    { q: Q.CHECKED_OUT, x: INSET + 12,            y: INSET + 26,           align: "start" },
    { q: Q.CRITICAL,    x: W - INSET - 12,        y: INSET + 26,           align: "end"   },
    { q: Q.HEALTHY,     x: INSET + 12,            y: H - INSET - 16,       align: "start" },
    { q: Q.RESILIENT,   x: W - INSET - 12,        y: H - INSET - 16,       align: "end"   }
  ];
  const active = quadrant.key;

  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}}>The 2 × 2</span>
      </div>
      <h3 style={{fontFamily:"'Space Grotesk',sans-serif",fontWeight:700,fontSize:24,letterSpacing:"-0.01em",margin:"0 0 6px"}}>Your position on the Workload-to-Wellness Continuum.</h3>
      <p style={{fontFamily:"'Inter',sans-serif",fontSize:14,color:"#CBD5E1",margin:"0 0 22px",maxWidth:540}}>
        Pressure on the horizontal axis. Burnout on the vertical. The dot is you, right now.
      </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"}} role="img" aria-label={`Your Pulse on a 2×2: pressure ${pressure}, burnout ${burnout}, quadrant ${quadrant.name}`}>
          {/* active-quadrant wash */}
          {(() => {
            const q = quadrant;
            const x0 = q.x === "low"  ? INSET : W/2;
            const x1 = q.x === "low"  ? W/2   : W - INSET;
            const y0 = q.y === "high" ? INSET : H/2;
            const y1 = q.y === "high" ? H/2   : H - INSET;
            const fill = q.key === "CRITICAL" ? "rgba(220,38,38,0.14)"
                        : q.key === "RESILIENT" ? "rgba(217,119,6,0.12)"
                        : q.key === "CHECKED_OUT" ? "rgba(139,105,20,0.12)"
                        : "rgba(13,148,136,0.12)";
            return <rect x={x0} y={y0} width={x1-x0} height={y1-y0} fill={fill} rx="2"/>;
          })()}

          {/* outer frame */}
          <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"/>

          {/* crosshairs */}
          <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"/>

          {/* axis labels */}
          <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>

          {/* quadrant labels */}
          {quadLabels.map((ql,i)=>{
            const isActive = ql.q.key === active;
            const color = isActive
              ? (ql.q.key === "CRITICAL" ? "#FCA5A5" : ql.q.key === "RESILIENT" ? "#FCD34D" : ql.q.key === "CHECKED_OUT" ? "#FCD34D" : "#5EEAD4")
              : "#94A3B8";
            return (
              <text key={i} x={ql.x} y={ql.y}
                fontFamily="'Space Grotesk',sans-serif"
                fontSize={isActive ? 13 : 11}
                fontWeight={isActive ? 700 : 600}
                fill={color}
                textAnchor={ql.align}
                letterSpacing={isActive ? "-0.005em" : "0.02em"}>
                {ql.q.name}
              </text>
            );
          })}

          {/* dot with pulse ring */}
          <circle cx={plotX} cy={y} r="26" fill="none" stroke="rgba(245,158,11,0.28)" strokeWidth="2" style={{transition:"cy 900ms cubic-bezier(0.22,1,0.36,1)"}}/>
          <circle cx={plotX} cy={y} r="11" fill="#F59E0B" stroke="#FEF3C7" strokeWidth="3" style={{transition:"cy 900ms cubic-bezier(0.22,1,0.36,1)",filter:"drop-shadow(0 4px 10px rgba(245,158,11,0.5))"}}/>

          {/* dot label */}
          <text x={plotX + 20} y={y + 4} fontFamily="'Space Grotesk',sans-serif" fontSize="12" fontWeight="700" fill="#FEF3C7" textAnchor="start" style={{transition:"y 900ms cubic-bezier(0.22,1,0.36,1)"}}>You are here</text>
        </svg>
      </div>

      {/* score row */}
      <div style={{marginTop:22,display:"grid",gridTemplateColumns:"1fr 1fr",gap:18,fontFamily:"'JetBrains Mono',monospace",fontSize:13}}>
        <div style={{background:"rgba(15,23,42,0.5)",borderRadius:12,padding:"14px 18px"}}>
          <div style={{fontFamily:"'Space Grotesk',sans-serif",fontSize:10,textTransform:"uppercase",letterSpacing:"0.2em",color:"#8A93A2",fontWeight:600,marginBottom:4}}>PressureIQ score</div>
          <div style={{fontSize:28,fontWeight:700,color:"#fff",letterSpacing:"-0.02em"}}>{pressure}<span style={{fontSize:14,color:"#8A93A2",fontWeight:500,marginLeft:4}}>/100</span></div>
        </div>
        <div style={{background:"rgba(15,23,42,0.5)",borderRadius:12,padding:"14px 18px"}}>
          <div style={{fontFamily:"'Space Grotesk',sans-serif",fontSize:10,textTransform:"uppercase",letterSpacing:"0.2em",color:"#8A93A2",fontWeight:600,marginBottom:4}}>BurnoutIQ score</div>
          <div style={{fontSize:28,fontWeight:700,color:"#fff",letterSpacing:"-0.02em"}}>{burnout}<span style={{fontSize:14,color:"#8A93A2",fontWeight:500,marginLeft:4}}>/100</span></div>
        </div>
      </div>
    </div>
  );
}

function QuadrantRead({ quadrant }) {
  const toneBg = quadrant.key === "CRITICAL" ? "#FDE7E7"
               : quadrant.key === "RESILIENT" ? "#FEF0DE"
               : quadrant.key === "CHECKED_OUT" ? "#FAF3DE"
               : "#E8F7F4";
  const toneFg = quadrant.key === "CRITICAL" ? "#B91C1C"
               : quadrant.key === "RESILIENT" ? "#B45309"
               : quadrant.key === "CHECKED_OUT" ? "#8B6914"
               : "#0F766E";
  return (
    <Card padding={32}>
      <PillTag bg={toneBg} color={toneFg}>Your quadrant</PillTag>
      <h2 style={{fontFamily:"'Fraunces',serif",fontWeight:600,fontSize:"clamp(2rem, 3.5vw, 2.75rem)",letterSpacing:"-0.02em",lineHeight:1.1,margin:"14px 0 12px",color:"#0B1220"}}>{quadrant.name}</h2>
      <p style={{fontFamily:"'Inter',sans-serif",fontSize:16,lineHeight:1.6,color:"#4B5563",margin:0,maxWidth:640}}>{quadrant.desc}</p>
      <div style={{marginTop:22,paddingTop:22,borderTop:"1px solid #F0EDE5"}}>
        <Eyebrow tone="ember">The next move</Eyebrow>
        <p style={{fontFamily:"'Inter',sans-serif",fontSize:16,lineHeight:1.6,color:"#0B1220",margin:"10px 0 0",maxWidth:640}}>{quadrant.move}</p>
      </div>
    </Card>
  );
}

function ArchetypeCard({ title, arch, hue, source }) {
  return (
    <Card padding={28} style={{display:"flex",flexDirection:"column",gap:10,borderTop:`3px solid ${hue}`,borderTopLeftRadius:18,borderTopRightRadius:18}}>
      <Eyebrow>{title}</Eyebrow>
      <h3 style={{fontFamily:"'Fraunces',serif",fontWeight:600,fontSize:32,letterSpacing:"-0.02em",lineHeight:1.05,color:"#0B1220",margin:"2px 0 4px"}}>{arch.name}</h3>
      <div style={{fontFamily:"'Space Grotesk',sans-serif",fontSize:13,color:hue,fontWeight:600}}>{arch.tag}</div>
      <p style={{fontFamily:"'Inter',sans-serif",fontSize:14.5,lineHeight:1.6,color:"#4B5563",margin:"6px 0 0"}}>{arch.blurb}</p>
      <div style={{marginTop:12,fontFamily:"'Space Grotesk',sans-serif",fontSize:10,textTransform:"uppercase",letterSpacing:"0.2em",color:"#8A93A2",fontWeight:600}}>{source}</div>
    </Card>
  );
}

function ArchetypeDuo({ pressureArch, burnoutArch }) {
  const piq = window.PIQ_ARCHETYPES[pressureArch];
  const biq = window.BIQ_ARCHETYPES_MIRROR[burnoutArch];
  const biqHue = "#D97706"; // ember — BurnoutIQ's primary accent
  return (
    <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:18}}>
      <ArchetypeCard title="Under pressure, you are" arch={piq} hue={piq.hue} source="PressureIQ · SJT"/>
      <ArchetypeCard title="Your burnout shape is"    arch={biq} hue={biqHue} source="BurnoutIQ · MBI · BAT · OLBI"/>
    </div>
  );
}

function Engage({ pulseCode }) {
  return (
    <Card padding={40} style={{background:"#FAFAF7",borderColor:"#E6E2D9",display:"grid",gridTemplateColumns:"1fr auto",gap:28,alignItems:"center"}}>
      <div>
        <Eyebrow>Work with Pivot</Eyebrow>
        <h3 style={{fontFamily:"'Fraunces',serif",fontWeight:500,fontSize:30,letterSpacing:"-0.02em",lineHeight:1.15,margin:"12px 0 10px",color:"#0B1220"}}>
          You've got the read. The next step is the work.
        </h3>
        <p style={{fontFamily:"'Inter',sans-serif",fontSize:15,color:"#4B5563",margin:0,lineHeight:1.6,maxWidth:560}}>
          Pivot Training &amp; Development runs workshops, executive engagements, and clinical-grade recovery programs keyed to exactly this reading.
        </p>
      </div>
      <div style={{display:"flex",flexDirection:"column",gap:12,alignItems:"flex-end"}}>
        <a href="https://pivottraining.us/book" style={{textDecoration:"none"}}>
          <Button variant="primary" size="lg" iconRight="arrow" icon="calendar">Book a 20-min call</Button>
        </a>
        <a href="https://pivottraining.us/engagements" style={{textDecoration:"none"}}>
          <Button variant="ghost" size="md" iconRight="arrow">See engagements &amp; workshops</Button>
        </a>
        <a href={`https://pulse.pivottraining.us/p/${pulseCode}.pdf`} style={{fontFamily:"'Space Grotesk',sans-serif",fontSize:13,color:"#4B5563",textDecoration:"underline",textUnderlineOffset:3,display:"inline-flex",alignItems:"center",gap:6,fontWeight:600,marginTop:2}}>
          <Icon name="share" size={13} color="#4B5563"/> Download your Pulse report (PDF)
        </a>
      </div>
    </Card>
  );
}

function Hub({ pulseCode, pulse: pulseProp }) {
  const pulse = pulseProp || (window.SAMPLE_PULSES && window.SAMPLE_PULSES[pulseCode]);
  const quadrant = window.computeQuadrant(pulse.pressure.score, pulse.burnout.score);
  return (
    <div data-screen-label="Pivot Pulse — Hub">
      <PulseHeader pulse={pulse}/>
      <div style={{maxWidth:960,margin:"0 auto",padding:"16px 24px 24px"}}>
        <PulseMap pressure={pulse.pressure.score} burnout={pulse.burnout.score} quadrant={quadrant}/>
      </div>
      <div style={{maxWidth:960,margin:"0 auto",padding:"8px 24px 24px"}}>
        <QuadrantRead quadrant={quadrant}/>
      </div>
      <div style={{maxWidth:960,margin:"0 auto",padding:"0 24px 24px"}}>
        <ArchetypeDuo pressureArch={pulse.pressure.archetype} burnoutArch={pulse.burnout.archetype}/>
      </div>
      <div style={{maxWidth:960,margin:"0 auto",padding:"8px 24px 56px"}}>
        <Engage pulseCode={pulse.code}/>
      </div>
    </div>
  );
}

Object.assign(window, { Hub });