/* global React */
/* ================================================================
   sections-baseline.jsx — Phase 01 · Baseline
   Remote measurement kit delivered to each leader's home.
   Sits immediately after ActionLayer (3-phase overview) and
   before ProgrammeTimeline in the page flow.
   ================================================================ */

/* small line icons — 1.5px round stroke, matching the site's icon set */
function BaselineIcon({ k }) {
  const P = {
    ring: (
      <>
        <circle cx="12" cy="12" r="7.5" />
        <path d="M12 4.5v2M12 17.5v2M4.5 12h2M17.5 12h2" />
        <circle cx="12" cy="12" r="2.5" fill="currentColor" stroke="none" opacity="0.28" />
      </>
    ),
    blood: (
      <>
        <path d="M9 3h6M12 3v7l3.5 6a5 5 0 1 1-7 0L12 10" />
        <path d="M9 15.5h6" />
      </>
    ),
    glucose: (
      <path d="M3 13h3.2l2-5.5 3 9.5 2.3-8 1.7 3.5H21" />
    ),
    gut: (
      <path d="M9.5 3.5C6.5 3.5 5 6 5 8.5c0 2 1 3.5 2.5 4C7 13.5 7 15 7 16c0 2.5 1.5 3.5 3 4 1.5.5 3 .5 3 2.5M14.5 3.5C17.5 3.5 19 6 19 8.5c0 2-1 3.5-2.5 4C17 13.5 17 15 17 16c0 2.5-1.5 3.5-3 4" />
    ),
    survey: (
      <>
        <rect x="5" y="3.5" width="14" height="17" rx="2" />
        <path d="M9 8h6M9 12h6M9 16h3.5" />
      </>
    ),
    brain: (
      <>
        <path d="M9 3.5C6 3.5 4 6 4 8.5c0 1.5.6 3 2 4C5.3 13.7 5 15 5 16c0 2.5 1.5 4 4 4.5" />
        <path d="M15 3.5C18 3.5 20 6 20 8.5c0 1.5-.6 3-2 4 .7 1.2 1 2.5 1 3.5 0 2.5-1.5 4-4 4.5" />
        <path d="M9 20.5c.9.3 1.9.5 3 .5 1.1 0 2.1-.2 3-.5M9 3.5c.9-.3 1.9-.5 3-.5 1.1 0 2.1.2 3 .5" />
      </>
    ),
    call: (
      <path d="M21 16a1.5 1.5 0 0 1-1.5 1.5A14.5 14.5 0 0 1 5 3.5 1.5 1.5 0 0 1 6.5 2H9A1.5 1.5 0 0 1 10.5 3.3c.1.8.4 1.6.7 2.3a1.5 1.5 0 0 1-.4 1.5L9.5 8.4a12 12 0 0 0 6.1 6.1l1.3-1.3a1.5 1.5 0 0 1 1.5-.4c.7.3 1.5.6 2.3.7A1.5 1.5 0 0 1 22 15z" />
    ),
  };
  return (
    <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor"
      strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      {P[k]}
    </svg>
  );
}

const KIT_ITEMS = [
  {
    k: "ring",
    optional: false,
    title: "A wearable ring",
    desc: "Tracks sleep, heart-rate variability and recovery — worn passively for around two weeks. No action required beyond putting it on.",
  },
  {
    k: "blood",
    optional: false,
    title: "An at-home blood panel",
    desc: "A focused clinical panel of the markers that matter most under sustained stress: cardiovascular (ApoB), metabolic (HbA1c), stress and recovery hormones (cortisol, testosterone), and inflammation (hsCRP). Simple finger-prick collection, posted back in prepaid packaging.",
  },
  {
    k: "glucose",
    optional: true,
    title: "Continuous glucose sensor",
    desc: "A two-week read on how your body responds to food, stress and sleep — worn alongside the ring.",
  },
  {
    k: "gut",
    optional: true,
    title: "Gut-health test",
    desc: "A simple at-home sample for a picture of your microbiome and its relationship to recovery and stress.",
  },
];

const ONLINE_STEPS = [
  {
    k: "survey",
    title: "Validated questionnaires",
    desc: "Stress, burnout, resilience and recovery — completed in your own time, at your own pace.",
  },
  {
    k: "brain",
    title: "A short cognitive baseline",
    desc: "Around 15 minutes covering reaction time, working memory and focus. A clear starting point for the year ahead.",
  },
];

function BaselineSection() {
  return (
    <section className="baseline-sec" id="baseline" aria-labelledby="baseline-title">
      <div className="wrap">

        {/* ---- section head ---- */}
        <div className="bl-head">
          <span className="kicker reveal">01 · Baseline</span>
          <h2 className="h2 bl-h2 reveal" id="baseline-title" style={{ transitionDelay: "60ms" }}>
            Before we change anything, <em>we measure everything.</em>
          </h2>
          <p className="lede bl-lede reveal" style={{ transitionDelay: "120ms" }}>
            Before the retreat, each leader receives a kit at home — a complete, objective picture of where
            they stand, gathered quietly over two to three weeks, asking almost nothing of your time.
          </p>
        </div>

        {/* ---- full-width kit image ---- */}
        <figure className="bl-kit-hero reveal" style={{ transitionDelay: "60ms" }}>
          <div className="bl-kit-img">
            <image-slot
              id="baseline-kit"
              shape="rounded"
              radius="20"
              src="pausa/img/baseline-kit.png"
              placeholder="The Pausa Baseline kit — open box showing wearable ring, blood panel, glucose sensor, welcome booklet and return envelope"
            ></image-slot>
          </div>
          <figcaption className="bl-kit-cap">The Pausa Baseline kit</figcaption>
        </figure>

        {/* ---- two-col kit contents ---- */}
        <div className="bl-kit-cols">

          {/* left — what's in the kit */}
          <div className="bl-block reveal" style={{ transitionDelay: "80ms" }}>
            <span className="bl-block-label">What's in the kit</span>
            <ul className="bl-list" role="list" aria-label="Kit contents">
              {KIT_ITEMS.map((item) => (
                <li className={"bl-item" + (item.optional ? " bl-item--opt" : "")} key={item.k}>
                  <span className="bl-item-ico"><BaselineIcon k={item.k} /></span>
                  <div className="bl-item-body">
                    <span className="bl-item-name">
                      {item.title}
                      {item.optional && <span className="bl-opt-badge">Optional</span>}
                    </span>
                    <p className="bl-item-desc">{item.desc}</p>
                  </div>
                </li>
              ))}
            </ul>
          </div>

          {/* right — online + human */}
          <div className="bl-contents-right">

            <div className="bl-block reveal" style={{ transitionDelay: "140ms" }}>
              <span className="bl-block-label">Then two short steps online</span>
              <ul className="bl-list" role="list" aria-label="Online steps">
                {ONLINE_STEPS.map((item) => (
                  <li className="bl-item" key={item.k}>
                    <span className="bl-item-ico"><BaselineIcon k={item.k} /></span>
                    <div className="bl-item-body">
                      <span className="bl-item-name">{item.title}</span>
                      <p className="bl-item-desc">{item.desc}</p>
                    </div>
                  </li>
                ))}
              </ul>
            </div>



          </div>
        </div>

        {/* ---- principle callout ---- */}
        <blockquote className="bl-principle reveal">
          <p className="bl-principle-text">
            Rich data, light touch. Almost all of it happens passively, at home, while we carry the
            logistics — the only thing on your calendar is one short call.
          </p>
        </blockquote>

        {/* ---- lower two-col: window + deliverable ---- */}
        <div className="bl-lower">

          <div className="bl-lower-col reveal" style={{ transitionDelay: "40ms" }}>
            <span className="bl-lower-label">The measurement window</span>
            <p>
              You wear and collect over about two to three weeks, so we capture how you really live —
              not a single snapshot on a single day.
            </p>
          </div>

          <div className="bl-lower-col reveal" style={{ transitionDelay: "110ms" }}>
            <span className="bl-lower-label">What you receive</span>
            <p>
              Your results become a clear personal map across the four dimensions — physical, mental,
              emotional, and purpose &amp; values. Your facilitator studies it beforehand and walks you through
              it in person at the Reset, so the numbers become a conversation and a plan, not a dashboard
              you decode alone.
            </p>
          </div>

        </div>

        {/* ---- transition to Reset ---- */}
        <div className="bl-next reveal">
          <div className="bl-next-line" aria-hidden="true"></div>
          <div className="bl-next-body">
            <span className="bl-next-label">02 · Reset</span>
            <p className="bl-next-text">
              By the time you arrive at the Reset, we already understand you — so the days
              together are spent on change, not paperwork.
            </p>
          </div>
          <div className="bl-next-arrow" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4"
              strokeLinecap="round" strokeLinejoin="round" width="18" height="18">
              <path d="M12 5v14M5 13l7 7 7-7" />
            </svg>
          </div>
        </div>

      </div>
    </section>
  );
}

Object.assign(window, { BaselineSection });