/* ───────────────────────────────────────────────────────────────────────────
   Surface 4 — My Action Plan
   Three tiers: Start here · Build toward · Keep on the radar. Built from the six
   lifestyle levers, each tied to the drivers that justify it. How many appear at
   the top is itself a calibration decision (readiness).
   ─────────────────────────────────────────────────────────────────────────── */

const TIERS = [
  { key: 'start', label: 'Start here', when: 'this week', cls: 'tier-start' },
  { key: 'build', label: 'Build toward', when: 'coming weeks', cls: 'tier-build' },
  { key: 'radar', label: 'Keep on the radar', when: 'when the foundation is steady', cls: 'tier-radar' },
];

function PlanSurface({ persona, go }) {
  return (
    <div className="surface plan-surface">
      <SurfaceHead
        eyebrow="My Action Plan · for the individual"
        title={<>Two things to start. <em>Not twelve.</em></>}
        sub={`Built from six lifestyle levers, each chosen because it moves a specific driver. We surfaced ${persona.plan.start.length} to start because ${persona.name} is ${persona.calibration.readiness.value.toLowerCase()} and told us there's room for that — the rest is sequenced, not hidden.`} />

      <div className="plan-tiers">
        {TIERS.map((t) => (
          <section className={'plan-col ' + t.cls} key={t.key}>
            <div className="plan-col-head">
              <span className="plan-col-label">{t.label}</span>
              <span className="plan-col-when">{t.when}</span>
            </div>
            <div className="plan-cards">
              {persona.plan[t.key].map((item, i) => (
                <PlanCard key={i} item={item} />
              ))}
            </div>
          </section>
        ))}
      </div>

      <div className="plan-note">
        <span className="pn-eyebrow">Why these, in this order</span>
        <p>{persona.lead}</p>
      </div>

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

function PlanCard({ item }) {
  const lever = window.LEVERS[item.lever];
  return (
    <div className="plan-card">
      <div className="pc-top">
        <span className="pc-lever">{lever ? lever.name : item.lever}</span>
        {item.phase && <span className="pc-phase">{item.phase}</span>}
        {item.tier && <TierChip tier={item.tier} />}
      </div>
      <div className="pc-title">{item.title}</div>
      <p className="pc-copy">{item.copy}</p>
      {item.why && item.why.length > 0 && (
        <div className="pc-why"><span className="pc-why-lab">moves</span>{item.why.map((c) => <DriverChip key={c} code={c} />)}</div>
      )}
    </div>
  );
}

window.PlanSurface = PlanSurface;