// Insurance enrollment wizard
// Steps: 1) Plan -> 2) Dependents -> 3) Beneficiaries -> 4) Review

const STEPS = [
  { id: 1, label: "Coverage", sub: "Choose plans" },
  { id: 2, label: "Dependents", sub: "Add family" },
  { id: 3, label: "Beneficiaries", sub: "Designate" },
  { id: 4, label: "Review", sub: "Confirm & sign" },
];

function InsurancePage({ persona }) {
  const [step, setStep] = React.useState(1);
  const [submitted, setSubmitted] = React.useState(false);

  // form state
  const [coverage, setCoverage] = React.useState({
    medical: "blue-pref",
    dental: "delta-ppo",
    vision: "vsp",
    medicalCoverage: "self+spouse+children",
  });
  const [dependents, setDependents] = React.useState([
    { id: 1, type: "spouse", first: "Avery", last: "Park", dob: "1995-03-22", gender: "F", ssn: "•••-••-3104", relation: "Spouse", coverage: { med: true, den: true, vis: true } },
    { id: 2, type: "child", first: "Mira", last: "Park", dob: "2021-09-08", gender: "F", ssn: "•••-••-7782", relation: "Daughter", coverage: { med: true, den: true, vis: false } },
    { id: 3, type: "child", first: "Theo", last: "Park", dob: "2024-02-14", gender: "M", ssn: "Pending", relation: "Son", coverage: { med: true, den: false, vis: false } },
  ]);
  const [beneficiaries, setBeneficiaries] = React.useState([
    { id: 1, first: "Avery", last: "Park", relation: "Spouse", percentage: 80, type: "primary", ssn: "•••-••-3104" },
    { id: 2, first: "Mira", last: "Park", relation: "Daughter", percentage: 10, type: "primary", ssn: "•••-••-7782" },
    { id: 3, first: "Theo", last: "Park", relation: "Son", percentage: 10, type: "primary", ssn: "Pending" },
    { id: 4, first: "Jordan", last: "Park", relation: "Sibling", percentage: 100, type: "contingent", ssn: "Not provided" },
  ]);

  if (submitted) return <EnrollmentComplete coverage={coverage} dependents={dependents} onReset={() => { setSubmitted(false); setStep(1); }}/>;

  return (
    <div className="page fade-up">
      <div className="page-head">
        <div>
          <span className="eyebrow">Benefits enrollment</span>
          <h1 className="page-title">Healthcare & insurance</h1>
          <p className="page-sub">Convoso covers up to 88% of your premiums and offers HSA contributions on high-deductible plans. Enrollment closes <strong>Jun 11, 2026</strong>.</p>
        </div>
      </div>

      <Stepper step={step}/>

      <div className="card wizard-body card-pad-lg">
        {step === 1 && <StepCoverage coverage={coverage} setCoverage={setCoverage}/>}
        {step === 2 && <StepDependents dependents={dependents} setDependents={setDependents}/>}
        {step === 3 && <StepBeneficiaries beneficiaries={beneficiaries} setBeneficiaries={setBeneficiaries}/>}
        {step === 4 && <StepReview coverage={coverage} dependents={dependents} beneficiaries={beneficiaries}/>}
      </div>

      <div className="wizard-foot">
        <button className="btn btn-ghost" onClick={() => setStep(s => Math.max(1, s - 1))} disabled={step === 1}>
          <I.arrowL size={13}/> Back
        </button>
        <div className="wizard-cost">
          <div className="muted small">Your monthly cost</div>
          <div className="wc-value t-display">${calculatePremium(coverage)}<span className="muted" style={{ fontSize: 13 }}>/mo</span></div>
        </div>
        {step < 4 ? (
          <button className="btn btn-primary" onClick={() => setStep(s => s + 1)}>
            Continue <I.arrow size={13}/>
          </button>
        ) : (
          <button className="btn btn-primary btn-lg" onClick={() => setSubmitted(true)}>
            <I.pen size={14}/> Sign & enroll
          </button>
        )}
      </div>
    </div>
  );
}

function calculatePremium(coverage) {
  const m = PLANS.find(p => p.id === coverage.medical)?.premium || 0;
  const d = DENTAL_PLANS.find(p => p.id === coverage.dental)?.premium || 0;
  const v = VISION_PLANS.find(p => p.id === coverage.vision)?.premium || 0;
  const mult = coverage.medicalCoverage === "self" ? 1 : coverage.medicalCoverage === "self+spouse" ? 2.1 : coverage.medicalCoverage === "self+children" ? 1.8 : 2.6;
  return Math.round((m * mult) + d + v);
}

function Stepper({ step }) {
  return (
    <div className="stepper">
      {STEPS.map((s, i) => (
        <React.Fragment key={s.id}>
          <div className={"step " + (step > s.id ? "done" : step === s.id ? "active" : "")}>
            <div className="step-num">{step > s.id ? <I.check size={13}/> : s.id}</div>
            <div>
              <div className="step-label">{s.label}</div>
              <div className="step-sub muted">{s.sub}</div>
            </div>
          </div>
          {i < STEPS.length - 1 && <div className={"step-line " + (step > s.id ? "done" : "")}/>}
        </React.Fragment>
      ))}
    </div>
  );
}

// ──────────────── Step 1: Coverage ────────────────
function StepCoverage({ coverage, setCoverage }) {
  return (
    <div className="step-pane">
      <div className="step-head">
        <h2 className="step-title">Choose your medical, dental, and vision plans</h2>
        <p className="muted">Select coverage type first — your plan options and prices update accordingly.</p>
      </div>

      <div className="coverage-toggle">
        {[
          { id: "self", label: "Just me", desc: "Self only" },
          { id: "self+spouse", label: "Me + spouse", desc: "2 people" },
          { id: "self+children", label: "Me + children", desc: "Self + kids" },
          { id: "self+spouse+children", label: "Family", desc: "Self + spouse + kids" },
        ].map(opt => (
          <button
            key={opt.id}
            className={"ct-opt" + (coverage.medicalCoverage === opt.id ? " active" : "")}
            onClick={() => setCoverage(c => ({ ...c, medicalCoverage: opt.id }))}
          >
            <div className="ct-label">{opt.label}</div>
            <div className="ct-desc muted">{opt.desc}</div>
          </button>
        ))}
      </div>

      <div className="coverage-section">
        <div className="cs-head">
          <div className="cs-title-row">
            <I.heart size={18} style={{ color: "#ef4444" }}/>
            <h3>Medical</h3>
            <span className="muted small">3 plans available</span>
          </div>
        </div>
        <div className="plan-grid">
          {PLANS.map(p => (
            <PlanCard key={p.id} plan={p} selected={coverage.medical === p.id} onSelect={() => setCoverage(c => ({ ...c, medical: p.id }))} multiplier={
              coverage.medicalCoverage === "self" ? 1 : coverage.medicalCoverage === "self+spouse" ? 2.1 : coverage.medicalCoverage === "self+children" ? 1.8 : 2.6
            }/>
          ))}
        </div>
      </div>

      <div className="coverage-section">
        <div className="cs-head">
          <div className="cs-title-row">
            <I.tooth size={18} style={{ color: "#0ea5e9" }}/>
            <h3>Dental</h3>
          </div>
        </div>
        <div className="plan-grid plan-grid-3">
          {DENTAL_PLANS.map(p => (
            <SmallPlanCard key={p.id} plan={p} selected={coverage.dental === p.id} onSelect={() => setCoverage(c => ({ ...c, dental: p.id }))}/>
          ))}
        </div>
      </div>

      <div className="coverage-section">
        <div className="cs-head">
          <div className="cs-title-row">
            <I.eye size={18} style={{ color: "#a855f7" }}/>
            <h3>Vision</h3>
          </div>
        </div>
        <div className="plan-grid plan-grid-3">
          {VISION_PLANS.map(p => (
            <SmallPlanCard key={p.id} plan={p} selected={coverage.vision === p.id} onSelect={() => setCoverage(c => ({ ...c, vision: p.id }))}/>
          ))}
        </div>
      </div>
    </div>
  );
}

function PlanCard({ plan, selected, onSelect, multiplier }) {
  const yourCost = Math.round(plan.premium * multiplier);
  return (
    <div className={"plan-card" + (selected ? " selected" : "")} onClick={onSelect}>
      {plan.badge && <div className="plan-badge">{plan.badge}</div>}
      <div className="pc-head">
        <div className="pc-radio">{selected && <div className="pc-radio-dot"/>}</div>
        <div>
          <div className="pc-type subtle small">{plan.type} · {plan.network}</div>
          <div className="pc-name">{plan.name}</div>
          <div className="pc-carrier muted small">{plan.carrier}</div>
        </div>
      </div>

      <div className="pc-cost">
        <div className="pc-cost-main">
          <span className="pc-cost-amt">${yourCost}</span>
          <span className="muted">/mo</span>
        </div>
        <div className="muted small">Convoso pays ${Math.round(plan.employer * multiplier)}/mo</div>
      </div>

      <div className="pc-grid">
        <div><div className="muted small">Deductible</div><div className="pc-stat">${plan.deductible}</div></div>
        <div><div className="muted small">Out-of-pocket max</div><div className="pc-stat">${plan.oop.toLocaleString()}</div></div>
        <div><div className="muted small">Office visit</div><div className="pc-stat">{plan.copay ? "$" + plan.copay : "Ded then 10%"}</div></div>
        <div><div className="muted small">Specialist</div><div className="pc-stat">{plan.specialist ? "$" + plan.specialist : "Ded then 10%"}</div></div>
      </div>

      <ul className="pc-perks">
        {plan.perks.map((p, i) => (
          <li key={i}><I.check size={13} style={{ color: "var(--accent)" }}/> {p}</li>
        ))}
      </ul>
    </div>
  );
}

function SmallPlanCard({ plan, selected, onSelect }) {
  const declined = plan.id.startsWith("decline");
  return (
    <div className={"plan-card small" + (selected ? " selected" : "") + (declined ? " declined" : "")} onClick={onSelect}>
      <div className="pc-head">
        <div className="pc-radio">{selected && <div className="pc-radio-dot"/>}</div>
        <div style={{ flex: 1 }}>
          <div className="pc-name" style={{ fontSize: 15 }}>{plan.name}</div>
          {!declined && (
            <div className="pc-cost-main" style={{ marginTop: 4 }}>
              <span style={{ fontSize: 18, fontWeight: 700 }}>${plan.premium}</span>
              <span className="muted small">/mo · Convoso adds ${plan.employer}</span>
            </div>
          )}
        </div>
      </div>
      {!declined && (
        <ul className="pc-perks">
          {plan.perks.map((p, i) => (
            <li key={i}><I.check size={12} style={{ color: "var(--accent)" }}/> {p}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

// ──────────────── Step 2: Dependents ────────────────
function StepDependents({ dependents, setDependents }) {
  const [editing, setEditing] = React.useState(null); // dep id or 'new'
  return (
    <div className="step-pane">
      <div className="step-head">
        <h2 className="step-title">Add your dependents</h2>
        <p className="muted">Spouse, domestic partner, and children up to age 26 are eligible. SSN is required by the IRS for tax reporting.</p>
      </div>

      <div className="dep-list">
        {dependents.map(d => (
          <DependentRow key={d.id} d={d}
            onEdit={() => setEditing(d.id)}
            onRemove={() => setDependents(ds => ds.filter(x => x.id !== d.id))}
            onToggle={(k) => setDependents(ds => ds.map(x => x.id === d.id ? { ...x, coverage: { ...x.coverage, [k]: !x.coverage[k] } } : x))}
          />
        ))}
        <button className="dep-add" onClick={() => setEditing("new")}>
          <I.plus size={16}/>
          <span>Add another dependent</span>
        </button>
      </div>

      {editing && <DependentDialog
        dep={editing === "new" ? null : dependents.find(d => d.id === editing)}
        onClose={() => setEditing(null)}
        onSave={(data) => {
          if (editing === "new") {
            setDependents(ds => [...ds, { ...data, id: Date.now(), coverage: { med: true, den: true, vis: true } }]);
          } else {
            setDependents(ds => ds.map(x => x.id === editing ? { ...x, ...data } : x));
          }
          setEditing(null);
        }}
      />}
    </div>
  );
}

function DependentRow({ d, onEdit, onRemove, onToggle }) {
  const age = (() => {
    const dob = new Date(d.dob);
    const now = new Date("2026-05-11");
    return Math.floor((now - dob) / (365.25 * 24 * 60 * 60 * 1000));
  })();
  return (
    <div className="dep-row card">
      <div className="dep-info">
        <Avatar name={d.first + " " + d.last} size="md"/>
        <div>
          <div style={{ fontWeight: 600, fontSize: 14.5 }}>{d.first} {d.last}</div>
          <div className="muted small">{d.relation} · age {age} · DOB {d.dob}</div>
        </div>
      </div>
      <div className="dep-cov">
        <CovToggle label="Medical" on={d.coverage.med} icon="heart" color="#ef4444" onClick={() => onToggle("med")}/>
        <CovToggle label="Dental" on={d.coverage.den} icon="tooth" color="#0ea5e9" onClick={() => onToggle("den")}/>
        <CovToggle label="Vision" on={d.coverage.vis} icon="eye" color="#a855f7" onClick={() => onToggle("vis")}/>
      </div>
      <div className="dep-actions">
        <button className="icon-btn" onClick={onEdit}><I.edit size={14}/></button>
        <button className="icon-btn" onClick={onRemove}><I.trash size={14}/></button>
      </div>
    </div>
  );
}

function CovToggle({ label, on, icon, color, onClick }) {
  const C = I[icon];
  return (
    <button className={"cov-tog" + (on ? " on" : "")} onClick={onClick} style={{ "--cov-color": color }}>
      <C size={13}/>
      <span>{label}</span>
    </button>
  );
}

function DependentDialog({ dep, onClose, onSave }) {
  const [f, setF] = React.useState(dep || { type: "child", first: "", last: "Park", dob: "", gender: "", ssn: "", relation: "Son" });
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal dep-modal" onClick={e => e.stopPropagation()}>
        <div className="modal-head">
          <h3 style={{ margin: 0, fontSize: 18, fontWeight: 700, letterSpacing: "-0.018em" }}>{dep ? "Edit dependent" : "Add dependent"}</h3>
          <button className="icon-btn" onClick={onClose}><I.x size={15}/></button>
        </div>
        <div className="modal-body">
          <Field label="Relationship">
            <select className="input" value={f.type} onChange={e => setF({ ...f, type: e.target.value, relation: e.target.value === "spouse" ? "Spouse" : e.target.value === "partner" ? "Domestic partner" : "Son" })}>
              <option value="spouse">Spouse</option>
              <option value="partner">Domestic partner</option>
              <option value="child">Child</option>
            </select>
          </Field>
          <div className="field-row">
            <Field label="First name"><input className="input" value={f.first} onChange={e => setF({ ...f, first: e.target.value })} placeholder="Avery"/></Field>
            <Field label="Last name"><input className="input" value={f.last} onChange={e => setF({ ...f, last: e.target.value })}/></Field>
          </div>
          <div className="field-row">
            <Field label="Date of birth"><input className="input" type="date" value={f.dob} onChange={e => setF({ ...f, dob: e.target.value })}/></Field>
            <Field label="Gender">
              <select className="input" value={f.gender} onChange={e => setF({ ...f, gender: e.target.value })}>
                <option value="">Select…</option>
                <option>Female</option><option>Male</option><option>Non-binary</option><option>Prefer not to say</option>
              </select>
            </Field>
          </div>
          <Field label="Social security number" hint="Required by IRS · stored encrypted">
            <input className="input mono" placeholder="XXX-XX-XXXX" value={f.ssn} onChange={e => setF({ ...f, ssn: e.target.value })}/>
          </Field>
          <div className="callout">
            <I.shield size={16} style={{ color: "var(--accent)" }}/>
            <div>
              <strong>Why we need this</strong>
              <div className="muted small" style={{ marginTop: 2 }}>Dependent SSNs are required for IRS form 1095-C and to verify eligibility with carriers. Data is encrypted at rest.</div>
            </div>
          </div>
        </div>
        <div className="modal-foot">
          <button className="btn btn-ghost" onClick={onClose}>Cancel</button>
          <button className="btn btn-primary" onClick={() => onSave(f)}>Save dependent</button>
        </div>
      </div>
    </div>
  );
}

function Field({ label, hint, children }) {
  return (
    <label className="field">
      <span className="field-label">{label}</span>
      {children}
      {hint && <span className="field-hint subtle">{hint}</span>}
    </label>
  );
}

// ──────────────── Step 3: Beneficiaries ────────────────
function StepBeneficiaries({ beneficiaries, setBeneficiaries }) {
  const primary = beneficiaries.filter(b => b.type === "primary");
  const contingent = beneficiaries.filter(b => b.type === "contingent");
  const primaryTotal = primary.reduce((a, b) => a + b.percentage, 0);
  const contingentTotal = contingent.reduce((a, b) => a + b.percentage, 0);

  const updatePercent = (id, val) => setBeneficiaries(bs => bs.map(b => b.id === id ? { ...b, percentage: parseInt(val) || 0 } : b));

  return (
    <div className="step-pane">
      <div className="step-head">
        <h2 className="step-title">Designate your beneficiaries</h2>
        <p className="muted">For Convoso's company-paid life insurance ($300,000 coverage). Allocations must total 100% per tier.</p>
      </div>

      <BeneficiaryGroup
        title="Primary beneficiaries"
        sub="These people receive the benefit first."
        items={primary}
        total={primaryTotal}
        onUpdate={updatePercent}
      />

      <BeneficiaryGroup
        title="Contingent beneficiaries"
        sub="Receive the benefit only if no primary beneficiary survives."
        items={contingent}
        total={contingentTotal}
        onUpdate={updatePercent}
      />

      <div className="callout callout-info">
        <I.shield2 size={16} style={{ color: "var(--info)" }}/>
        <div>
          <strong>Convoso life insurance · 1× annual salary, up to $300,000</strong>
          <div className="muted small" style={{ marginTop: 2 }}>Coverage is 100% employer-paid. You can purchase additional voluntary coverage during open enrollment.</div>
        </div>
      </div>
    </div>
  );
}

function BeneficiaryGroup({ title, sub, items, total, onUpdate }) {
  const balanced = total === 100;
  return (
    <div className="bene-group">
      <div className="bg-head">
        <div>
          <h3 style={{ margin: 0, fontSize: 15, fontWeight: 700, letterSpacing: "-0.012em" }}>{title}</h3>
          <p className="muted small" style={{ margin: "2px 0 0" }}>{sub}</p>
        </div>
        <div className={"bg-total " + (balanced ? "ok" : "warn")}>
          <span className="t-display tnum" style={{ fontSize: 22, fontWeight: 700 }}>{total}<span style={{ fontSize: 14 }}>%</span></span>
          <span className="small">{balanced ? "Allocated" : "Must equal 100%"}</span>
        </div>
      </div>
      {items.map(b => (
        <div key={b.id} className="bene-row">
          <Avatar name={b.first + " " + b.last} size="md"/>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontWeight: 600, fontSize: 14 }}>{b.first} {b.last}</div>
            <div className="muted small">{b.relation} · SSN {b.ssn}</div>
          </div>
          <div className="bene-slider">
            <input type="range" min="0" max="100" step="5" value={b.percentage} onChange={e => onUpdate(b.id, e.target.value)}/>
            <input type="number" min="0" max="100" className="input bene-num" value={b.percentage} onChange={e => onUpdate(b.id, e.target.value)}/>
            <span className="muted">%</span>
          </div>
          <button className="icon-btn"><I.trash size={14}/></button>
        </div>
      ))}
      <button className="dep-add small">
        <I.plus size={14}/> Add {title.toLowerCase().replace("beneficiaries", "beneficiary")}
      </button>
    </div>
  );
}

// ──────────────── Step 4: Review ────────────────
function StepReview({ coverage, dependents, beneficiaries }) {
  const med = PLANS.find(p => p.id === coverage.medical);
  const den = DENTAL_PLANS.find(p => p.id === coverage.dental);
  const vis = VISION_PLANS.find(p => p.id === coverage.vision);

  return (
    <div className="step-pane">
      <div className="step-head">
        <h2 className="step-title">Review your enrollment</h2>
        <p className="muted">Take a moment to confirm. You can edit any section before signing — coverage starts <strong>May 11, 2026</strong>.</p>
      </div>

      <div className="review-grid">
        <ReviewSection title="Medical" icon="heart" color="#ef4444">
          <div className="rs-line"><strong>{med.name}</strong> <span className="chip chip-accent">{med.type}</span></div>
          <div className="muted small">{med.carrier} · {med.network}</div>
          <div className="rs-stats">
            <div><span className="muted small">Deductible</span><strong>${med.deductible}</strong></div>
            <div><span className="muted small">Out-of-pocket</span><strong>${med.oop.toLocaleString()}</strong></div>
            <div><span className="muted small">Office visit</span><strong>{med.copay ? "$" + med.copay : "10% after ded"}</strong></div>
          </div>
        </ReviewSection>

        <ReviewSection title="Dental" icon="tooth" color="#0ea5e9">
          <div><strong>{den.name}</strong></div>
          <ul className="pc-perks">
            {den.perks.map((p, i) => <li key={i}><I.check size={12} style={{ color: "var(--accent)" }}/> {p}</li>)}
          </ul>
        </ReviewSection>

        <ReviewSection title="Vision" icon="eye" color="#a855f7">
          <div><strong>{vis.name}</strong></div>
          <ul className="pc-perks">
            {vis.perks.map((p, i) => <li key={i}><I.check size={12} style={{ color: "var(--accent)" }}/> {p}</li>)}
          </ul>
        </ReviewSection>
      </div>

      <ReviewSection title={`Dependents (${dependents.length})`} icon="family" color="#f97316" wide>
        {dependents.map(d => (
          <div key={d.id} className="rev-dep">
            <Avatar name={d.first + " " + d.last} size="sm"/>
            <span style={{ fontWeight: 600 }}>{d.first} {d.last}</span>
            <span className="muted small">· {d.relation}</span>
            <span className="spacer"/>
            {d.coverage.med && <span className="chip">Medical</span>}
            {d.coverage.den && <span className="chip">Dental</span>}
            {d.coverage.vis && <span className="chip">Vision</span>}
          </div>
        ))}
      </ReviewSection>

      <ReviewSection title={`Beneficiaries (${beneficiaries.length})`} icon="shield2" color="#16a34a" wide>
        {beneficiaries.map(b => (
          <div key={b.id} className="rev-dep">
            <Avatar name={b.first + " " + b.last} size="sm"/>
            <span style={{ fontWeight: 600 }}>{b.first} {b.last}</span>
            <span className="muted small">· {b.relation}</span>
            <span className="chip" style={{ marginLeft: 6 }}>{b.type === "primary" ? "Primary" : "Contingent"}</span>
            <span className="spacer"/>
            <strong className="t-display tnum">{b.percentage}%</strong>
          </div>
        ))}
      </ReviewSection>

      <div className="cost-breakdown card card-pad">
        <h3 style={{ margin: "0 0 12px", fontSize: 15, fontWeight: 700 }}>Monthly cost breakdown</h3>
        <CostRow label={`${med.name} (${coverage.medicalCoverage.replace("+", " + ")})`} you={calculatePremium({ medical: coverage.medical, dental: "decline-d", vision: "decline-v", medicalCoverage: coverage.medicalCoverage })} convoso={Math.round(med.employer * 2.6)}/>
        <CostRow label={den.name} you={den.premium} convoso={den.employer}/>
        <CostRow label={vis.name} you={vis.premium} convoso={vis.employer}/>
        <div className="cb-total">
          <strong>Your total monthly cost</strong>
          <strong className="t-display tnum" style={{ fontSize: 22 }}>${calculatePremium(coverage)}</strong>
        </div>
        <div className="muted small" style={{ marginTop: 4 }}>Convoso contributes <strong>${med.employer * 2.6 + den.employer + vis.employer}/mo</strong> on top — about 88% of total premiums.</div>
      </div>
    </div>
  );
}

function ReviewSection({ title, icon, color, wide, children }) {
  const C = I[icon];
  return (
    <div className={"review-section card card-pad" + (wide ? " wide" : "")}>
      <div className="rs-head">
        <div className="rs-icon" style={{ background: color + "1f", color }}>
          <C size={16}/>
        </div>
        <h3 style={{ margin: 0, fontSize: 14.5, fontWeight: 700 }}>{title}</h3>
        <span className="spacer"/>
        <button className="btn btn-ghost btn-sm">Edit</button>
      </div>
      <div className="rs-body">{children}</div>
    </div>
  );
}

function CostRow({ label, you, convoso }) {
  return (
    <div className="cb-row">
      <div style={{ flex: 1 }}>{label}</div>
      <div className="muted small" style={{ width: 130, textAlign: "right" }}>Convoso ${convoso}</div>
      <div className="tnum" style={{ width: 80, textAlign: "right", fontWeight: 600 }}>${you}</div>
    </div>
  );
}

function EnrollmentComplete({ coverage, dependents, onReset }) {
  return (
    <div className="page enrollment-complete fade-up">
      <div className="ec-card card card-pad-lg">
        <div className="ec-ring">
          <I.shield2 size={42}/>
        </div>
        <span className="eyebrow">Enrollment complete</span>
        <h1 className="page-title" style={{ margin: "10px 0 6px" }}>You're covered, {NEW_HIRE.first}.</h1>
        <p className="muted" style={{ maxWidth: 540, margin: "0 auto" }}>
          Your benefits start <strong>May 11, 2026</strong>. Insurance cards will arrive in 7–10 business days. A confirmation has been sent to <span className="mono">{PROFILE.email}</span>.
        </p>

        <div className="ec-summary">
          <div className="ec-pill">
            <I.heart size={14} style={{ color: "#ef4444" }}/>
            <span>{PLANS.find(p => p.id === coverage.medical).name}</span>
          </div>
          <div className="ec-pill">
            <I.tooth size={14} style={{ color: "#0ea5e9" }}/>
            <span>{DENTAL_PLANS.find(p => p.id === coverage.dental).name}</span>
          </div>
          <div className="ec-pill">
            <I.eye size={14} style={{ color: "#a855f7" }}/>
            <span>{VISION_PLANS.find(p => p.id === coverage.vision).name}</span>
          </div>
          <div className="ec-pill">
            <I.family size={14} style={{ color: "#f97316" }}/>
            <span>{dependents.length} dependents covered</span>
          </div>
        </div>

        <div className="row" style={{ justifyContent: "center", gap: 8, marginTop: 24 }}>
          <button className="btn btn-ghost" onClick={onReset}>Make changes</button>
          <button className="btn btn-primary"><I.download size={14}/> Download confirmation</button>
        </div>
      </div>
    </div>
  );
}

window.InsurancePage = InsurancePage;