/* ───────────────────────────────────────────────────────────────────────────
   Surface 3 — My Health Story
   Editorial, written-to-you. The synthesis as narrative. A live depth control
   demonstrates personal tailoring (Observation 5): same synthesis, different
   delivery. Carries editorial provenance — it was reviewed before it shipped.
   ─────────────────────────────────────────────────────────────────────────── */

const DEPTHS = [['plain', 'Plain language'], ['standard', 'Standard'], ['deep', 'In depth']];
const LIT_TO_DEPTH = { Plain: 'plain', Standard: 'standard', Deep: 'deep' };

function StorySurface({ persona, go }) {
  const initial = LIT_TO_DEPTH[persona.calibration.literacy.value] || 'standard';
  const [depth, setDepth] = React.useState(initial);
  React.useEffect(() => { setDepth(LIT_TO_DEPTH[persona.calibration.literacy.value] || 'standard'); }, [persona.id]);

  return (
    <div className="surface story-surface">
      <SurfaceHead
        eyebrow="My Health Story · for the individual"
        title={<>Written for {persona.name}. <em>Not a template.</em></>}
        sub="One template, tailored — not split into versions. The same synthesis is delivered at the reading level, framing, and depth this person calibrated for. Move the control and watch the delivery change while the underlying synthesis holds." />

      <div className="calib-banner">
        <div className="cb-left">
          <div className="cb-eyebrow">Calibrated for {persona.name}</div>
          <div className="cb-row">
            <span className="cb-pill">Reads: {persona.calibration.literacy.value.toLowerCase()}</span>
            <span className="cb-pill">{persona.calibration.comms.value}</span>
            <span className="cb-pill">{persona.calibration.readiness.value.toLowerCase()}</span>
          </div>
        </div>
        <div className="cb-right">
          <span className="cb-label">Delivery depth</span>
          <div className="seg">
            {DEPTHS.map(([k, l]) => (
              <button key={k} className={'seg-btn' + (depth === k ? ' on' : '')} onClick={() => setDepth(k)}>{l}</button>
            ))}
          </div>
        </div>
      </div>

      <article className={'story story-' + depth}>
        <header className="story-header">
          <div className="story-kicker">My Health Story</div>
          <h2 className="story-h">{persona.name}, {persona.age} <span className="story-sub">· {persona.tagline}</span></h2>
          <div className="story-conditions">
            {persona.conditions.map((c, i) => <span className="story-cond" key={i}>{c}</span>)}
          </div>
        </header>

        {persona.story.map((p, i) => (
          <section className="story-passage" key={p.id}>
            <h3 className="passage-h">{p.heading}</h3>
            {p.drivers && p.drivers.length > 0 && (
              <div className="passage-drivers">{p.drivers.map((c) => <DriverChip key={c} code={c} label />)}</div>
            )}
            <p className={'passage-body' + (i === 0 ? ' lead-para' : '')}>{p[depth]}</p>
          </section>
        ))}

        <footer className="story-foot">
          <div className="story-review">
            <Avatar who="lena" size={32} />
            <div>
              <div className="sr-name">Reviewed by Lena Maren, NBC-HWC</div>
              <div className="sr-note">Every Health Story is read by a certified health educator before it reaches you. This one was approved on May 28.</div>
            </div>
            <span className="sr-stamp">✓ Approved</span>
          </div>
        </footer>
      </article>

      <FlowFooter current="story" go={go} />
    </div>
  );
}

window.StorySurface = StorySurface;