/* global React */
/* Pausa-branded product dashboard mockups — built to match the
   Energy Load Index card language (cream card, serif headline, moss bars,
   mono micro-labels). No external screenshots. */

function DashTop({ label }) {
  return (
    <div className="dash-top">
      <span className="dash-brand"><img src="pausa/pausa-mark-moss.png" alt="" />pausa</span>
      <span className="dash-url">{label}</span>
    </div>
  );
}

/* segmented progress bar à la Energy Load Index */
function Segments({ filled, total = 12, tone = "moss" }) {
  return (
    <div className={"dash-seg tone-" + tone}>
      {Array.from({ length: total }).map((_, i) => (
        <span key={i} className={"seg" + (i < filled ? " on" : "")}></span>
      ))}
    </div>
  );
}

/* ---------- A · Full-body biomarkers (blood · urine · saliva) ---------- */
const SYSTEMS = [
  { name: "Cardiometabolic", v: 88, tone: "good", s: "Optimal" },
  { name: "Inflammation", v: 61, tone: "watch", s: "Monitor" },
  { name: "Hormonal · cortisol", v: 44, tone: "act", s: "Act" },
  { name: "Micronutrients", v: 82, tone: "good", s: "Optimal" },
  { name: "Liver & kidney", v: 79, tone: "good", s: "Good" },
];

function BiomarkerCard() {
  return (
    <figure className="dash dash-primary reveal">
      <DashTop label="Full-body check" />
      <div className="dash-grid">
        <div className="dash-score-col">
          <span className="dash-klabel">Pausa full-body check</span>
          <div className="dash-big">84<span className="u">/100</span></div>
          <p className="dash-state good">Composite biomarker score · optimised</p>
          <Segments filled={10} total={12} tone="moss" />
          <div className="dash-samples">
            <span className="samp">Blood</span>
            <span className="samp">Urine</span>
            <span className="samp">Saliva</span>
          </div>
          <p className="dash-foot">11 body systems · tested twice a year</p>
        </div>

        <div className="dash-systems">
          {SYSTEMS.map((s) => (
            <div className="sys" key={s.name}>
              <div className="sys-row">
                <span className="sys-name">{s.name}</span>
                <span className={"sys-pill is-" + s.tone}>{s.s}</span>
              </div>
              <div className="sys-bar"><span className={"sys-fill is-" + s.tone} style={{ width: s.v + "%" }}></span></div>
            </div>
          ))}
        </div>
      </div>
    </figure>
  );
}

/* ---------- B · Four dimensions of wellbeing (vitality) ---------- */
const DIMENSIONS = [
  { name: "Physical health", v: 68 },
  { name: "Emotional health", v: 74 },
  { name: "Mental health", v: 70 },
  { name: "Purpose & values", v: 81 },
];

function WellbeingCard() {
  return (
    <figure className="dash reveal">
      <DashTop label="Vitality index" />
      <span className="dash-klabel">Pausa vitality index</span>
      <div className="dash-big sm">72<span className="u"> · balanced</span></div>
      <p className="dash-state good">Four dimensions of wellbeing</p>
      <div className="dims">
        {DIMENSIONS.map((d, i) => (
          <div className="dim" key={d.name}>
            <div className="dim-top"><span>{d.name}</span><span className="dim-v">{d.v}</span></div>
            <div className="dim-bar"><span className="dim-fill" style={{ width: d.v + "%", transitionDelay: i * 80 + "ms" }}></span></div>
          </div>
        ))}
      </div>
      <p className="dash-foot">Self-report · 4 minutes · immediate results</p>
    </figure>
  );
}

/* ---------- C · Mirror · 360° feedback ---------- */
const MIRROR = [
  { name: "Clarity of direction", self: 58, peers: 79 },
  { name: "Steadiness under pressure", self: 50, peers: 72 },
  { name: "Presence with the team", self: 66, peers: 70 },
  { name: "Sustainable energy", self: 47, peers: 44 },
];

function MirrorCard() {
  return (
    <figure className="dash reveal" style={{ transitionDelay: "100ms" }}>
      <DashTop label="360° feedback" />
      <span className="dash-klabel">Pausa mirror · 360° feedback</span>
      <div className="dash-big sm">Aligned<span className="u"> · self vs peers</span></div>
      <div className="mirror">
        {MIRROR.map((m) => (
          <div className="mirror-row" key={m.name}>
            <div className="dim-top"><span>{m.name}</span></div>
            <div className="mirror-track">
              <span className="mirror-peer" style={{ left: m.peers + "%" }}></span>
              <span className="mirror-self" style={{ left: m.self + "%" }}></span>
            </div>
          </div>
        ))}
      </div>
      <div className="mirror-legend">
        <span><i className="dot-self"></i> You</span>
        <span><i className="dot-peer"></i> Your peers</span>
      </div>
      <p className="dash-foot">Blind spot · peers rate your steadiness higher than you do</p>
    </figure>
  );
}

/* ---------- D · Energy drains ---------- */
const DRAINS = [
  { name: "Decision fatigue", v: 86, tone: "act", s: "High" },
  { name: "Context-switching", v: 78, tone: "act", s: "High" },
  { name: "Sleep debt", v: 58, tone: "watch", s: "Moderate" },
  { name: "Interpersonal load", v: 52, tone: "watch", s: "Moderate" },
  { name: "Recovery time", v: 34, tone: "good", s: "Protected" },
];

function DrainsCard() {
  return (
    <figure className="dash reveal" style={{ transitionDelay: "60ms" }}>
      <DashTop label="Energy drains" />
      <span className="dash-klabel">Pausa energy drains</span>
      <div className="dash-big sm">Elevated<span className="u"> · drawing on reserves</span></div>
      <p className="dash-state act-text">Ranked by impact on your energy system</p>
      <div className="dash-systems">
        {DRAINS.map((s) => (
          <div className="sys" key={s.name}>
            <div className="sys-row">
              <span className="sys-name">{s.name}</span>
              <span className={"sys-pill is-" + s.tone}>{s.s}</span>
            </div>
            <div className="sys-bar"><span className={"sys-fill is-" + s.tone} style={{ width: s.v + "%" }}></span></div>
          </div>
        ))}
      </div>
      <p className="dash-foot">A clear map of what to protect first</p>
    </figure>
  );
}

Object.assign(window, { BiomarkerCard, WellbeingCard, MirrorCard, DrainsCard });