// Handoff.jsx — the compact block that lives at the end of each diagnostic
// site's results page. Two shapes:
//
//   variant="to-burnout"  — shown on PressureIQ results when burnout isn't done.
//   variant="to-pressure" — shown on BurnoutIQ results when pressure isn't done.
//   variant="to-hub"      — shown on either site when both are done; routes to
//                            pulse.pivottraining.us/p/{code}.
//
// This is a *replacement* for the interactive PulseBlock in burnoutiq/Flow.jsx.
// It does one thing: send the user to the next right place.

function Handoff({ variant = "to-burnout", code = "PLS-7K2M-9F4P" }) {
  const BASE = "https://pulse.pivottraining.us/p/";
  const copy = {
    "to-burnout": {
      eyebrow: "The Pivot Pulse",
      title:   <>You've got one half. <em style={{fontFamily:"'Fraunces',serif",fontStyle:"italic",color:"#FCD34D"}}>Take BurnoutIQ to complete the Pulse.</em></>,
      body:    "PressureIQ shows who you become. BurnoutIQ shows what's running you down. Together they plot your position on the Workload-to-Wellness Continuum.",
      cta:     "Take BurnoutIQ (7 min)",
      href:    `https://burnoutiqtest.com/?pulse=${code}`
    },
    "to-pressure": {
      eyebrow: "The Pivot Pulse",
      title:   <>You've got one half. <em style={{fontFamily:"'Fraunces',serif",fontStyle:"italic",color:"#FCD34D"}}>Take PressureIQ to complete the Pulse.</em></>,
      body:    "BurnoutIQ shows what's running you down. PressureIQ shows who you become when the heat is on. Together they plot your position on the Workload-to-Wellness Continuum.",
      cta:     "Take PressureIQ (7 min)",
      href:    `https://pressureiqtest.com/?pulse=${code}`
    },
    "to-hub": {
      eyebrow: "The Pivot Pulse is ready",
      title:   <>Both halves are in. <em style={{fontFamily:"'Fraunces',serif",fontStyle:"italic",color:"#FCD34D"}}>See them on the map.</em></>,
      body:    "Your combined coordinate on the Workload-to-Wellness Continuum — both archetypes side-by-side, one joint reading, one next move.",
      cta:     "Open your Pulse",
      href:    `${BASE}${code}`
    }
  }[variant];

  return (
    <div style={{background:"linear-gradient(135deg,#0B1220,#1E293B)",color:"#fff",borderRadius:24,padding:"32px 36px",display:"grid",gridTemplateColumns:"1fr auto",gap:24,alignItems:"center",border:"1px solid #1E293B",boxShadow:"0 1px 2px rgba(0,0,0,0.2), 0 8px 24px rgba(0,0,0,0.25)"}}>
      <div>
        <span style={{display:"inline-flex",alignItems:"center",gap:6,padding:"5px 12px",borderRadius:999,background:"rgba(252,211,77,0.15)",color:"#FCD34D",fontFamily:"'Space Grotesk',sans-serif",fontWeight:600,fontSize:11,textTransform:"uppercase",letterSpacing:"0.2em"}}>
          <Icon name="flame" size={12} color="#FCD34D"/>{copy.eyebrow}
        </span>
        <h3 style={{fontFamily:"'Fraunces',serif",fontWeight:500,fontSize:28,letterSpacing:"-0.02em",margin:"10px 0 10px",color:"#fff",lineHeight:1.15,maxWidth:620}}>{copy.title}</h3>
        <p style={{fontFamily:"'Inter',sans-serif",fontSize:14,color:"#CBD5E1",margin:0,lineHeight:1.55,maxWidth:520}}>{copy.body}</p>
        <div style={{marginTop:14,fontFamily:"'JetBrains Mono',monospace",fontSize:11,letterSpacing:"0.05em",color:"#8A93A2"}}>Pulse code · {code}</div>
      </div>
      <a href={copy.href} style={{textDecoration:"none"}}>
        <Button variant="amber" size="lg" iconRight="arrow">{copy.cta}</Button>
      </a>
    </div>
  );
}

Object.assign(window, { Handoff });
