// ============================================
// Parent — Multi-Child Management
// ============================================

// Family overview — side-by-side comparison
function FamilyOverview({ onPickChild, onManage, onLive, onAddChild }) {
  const competing = CHILDREN.filter(c => c.competing);
  const racingNow = competing.length; // pretend all competing kids could be racing
  const totalMonthly = CHILDREN.reduce((a, c) => a + c.monthly, 0);
  const totalBadges = CHILDREN.reduce((a, c) => a + Object.values(c.badges).reduce((x, y) => x + y, 0), 0);

  return (
    <div className="col" style={{ gap: 16 }}>
      <Card style={{ background: "linear-gradient(135deg, var(--c-parent), #5b1f8f)", color: "white", padding: 24 }}>
        <div className="between" style={{ flexWrap: "wrap", gap: 16 }}>
          <div style={{ minWidth: 0 }}>
            <span style={{ display: "inline-flex", alignItems: "center", height: 26, padding: "0 12px", background: "rgba(255,255,255,0.18)", color: "white", borderRadius: 999, fontSize: 11, fontWeight: 700, letterSpacing: 1, textTransform: "uppercase", whiteSpace: "nowrap" }}>Family account</span>
            <div className="t-h1" style={{ color: "white", marginTop: 10 }}>The Tanaka family</div>
            <div style={{ color: "rgba(255,255,255,0.7)" }}>{CHILDREN.length} swimmers · {competing.length} competing · ${totalMonthly}/mo total</div>
          </div>
          <div className="row" style={{ gap: 8, flexWrap: "wrap" }}>
            <Button variant="secondary" style={{ background: "rgba(255,255,255,0.95)" }} icon="plus" onClick={onAddChild}>Add swimmer</Button>
            <Button variant="mint" icon="settings" onClick={onManage}>Manage family</Button>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(140px, 1fr))", gap: 16, marginTop: 22 }}>
          {[
            { label: "Swimmers",  value: CHILDREN.length, color: "white" },
            { label: "Competing", value: competing.length, color: "var(--gold)" },
            { label: "Badges",    value: totalBadges, color: "var(--mint)" },
            { label: "Weekly sessions", value: CHILDREN.reduce((a, c) => a + c.weekly, 0), color: "white" },
          ].map(s => (
            <div key={s.label} style={{ minWidth: 0 }}>
              <div style={{ fontSize: 10, color: "rgba(255,255,255,0.55)", letterSpacing: 1, textTransform: "uppercase", fontWeight: 700, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{s.label}</div>
              <div className="t-mono-stat" style={{ color: s.color, marginTop: 4 }}>{s.value}</div>
            </div>
          ))}
          {racingNow > 0 && (
            <button onClick={onLive} style={{ background: "rgba(255,255,255,0.95)", color: "var(--navy)", padding: "12px 16px", borderRadius: 12, fontWeight: 700, display: "flex", alignItems: "center", gap: 8, gridColumn: "1 / -1", justifyContent: "center" }}>
              <span style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--red)", animation: "pulse-ring 1.2s infinite" }}/>
              <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: 1.5, color: "var(--red)" }}>LIVE</span>
              {racingNow} {racingNow === 1 ? "swimmer" : "swimmers"} racing now
              <Icon name="chev-right" size={14}/>
            </button>
          )}
        </div>
      </Card>

      {/* Comparison grid */}
      <div style={{ display: "grid", gridTemplateColumns: `repeat(${CHILDREN.length}, 1fr)`, gap: 14 }} className="family-grid">
        {CHILDREN.map(c => (
          <Card key={c.id} onClick={() => onPickChild(c.id)} style={{ cursor: "pointer", padding: 0, overflow: "hidden", borderTop: `4px solid ${c.color}` }}>
            <div style={{ padding: 18 }}>
              <div className="row" style={{ gap: 12 }}>
                <Avatar name={c.name} color={c.color} size="lg"/>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontWeight: 700, fontSize: 16 }}>{c.name}</div>
                  <div className="t-caption">Age {c.age} · {c.program}</div>
                </div>
                <button className="btn-icon" onClick={(e) => { e.stopPropagation(); onManage(c.id); }} title="Manage"><Icon name="more" size={16}/></button>
              </div>
              <div style={{ marginTop: 10 }}>
                <ChildAgeBadge child={c}/>
              </div>

              <hr className="hr"/>

              <div className="col" style={{ gap: 10 }}>
                <div>
                  <div className="t-caption">Next session</div>
                  <div style={{ fontSize: 13, fontWeight: 600, marginTop: 2 }}>{c.nextClass}</div>
                </div>

                <div>
                  <div className="t-caption">Latest PB</div>
                  {c.lastPB ? (
                    <div className="row" style={{ gap: 8, marginTop: 4 }}>
                      <span style={{ fontWeight: 600, fontSize: 13 }}>{c.lastPB.event}</span>
                      <span className="t-mono-sm" style={{ fontWeight: 700, color: "var(--navy)" }}>{c.lastPB.time}</span>
                      {(() => {
                        const ev = evaluateStandard(c.lastPB.sec, c.lastPB.std);
                        return ev?.earned ? <StandardBadge tier={ev.earned} size="sm"/> : null;
                      })()}
                    </div>
                  ) : <div className="t-caption" style={{ marginTop: 4, fontStyle: "italic" }}>Not yet competing</div>}
                </div>

                <div>
                  <div className="between" style={{ marginBottom: 6 }}>
                    <span className="t-caption">USA Swimming standards</span>
                    <span className="t-mono-sm" style={{ fontWeight: 700 }}>{Object.values(c.badges).reduce((a, b) => a + b, 0)} earned</span>
                  </div>
                  <BadgeSummary counts={c.badges}/>
                </div>

                <div>
                  <div className="between">
                    <span className="t-caption">Attendance</span>
                    <span className="t-mono-sm" style={{ fontWeight: 700, color: c.attendance >= 90 ? "var(--mint)" : "var(--amber)" }}>{c.attendance}%</span>
                  </div>
                  <ProgressBar pct={c.attendance} color={c.attendance >= 90 ? "var(--mint)" : "var(--amber)"} height={4}/>
                </div>

                <div className="between">
                  <span className="t-caption">Monthly tuition</span>
                  <span className="t-mono-sm" style={{ fontWeight: 700 }}>${c.monthly}</span>
                </div>
              </div>
            </div>
            <div style={{ padding: "10px 16px", background: "var(--gray-50)", borderTop: "1px solid var(--gray-200)", display: "flex", gap: 6, flexWrap: "wrap" }}>
              <Button variant="ghost" size="sm" onClick={(e) => { e.stopPropagation(); onPickChild(c.id); }}>Dashboard</Button>
              <Button variant="ghost" size="sm" icon="msg" onClick={(e) => { e.stopPropagation(); window.dispatchEvent(new CustomEvent("parent-go", { detail: { route: "messages", classId: c.id } })); }}>Class parents</Button>
              <Button variant="ghost" size="sm" onClick={(e) => { e.stopPropagation(); onManage(c.id); }}>Settings</Button>
            </div>
          </Card>
        ))}
        {/* Add new card */}
        <button onClick={onAddChild} className="card" style={{ cursor: "pointer", padding: 24, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", textAlign: "center", border: "2px dashed var(--gray-300)", background: "var(--gray-50)", color: "var(--gray-600)", minHeight: 200 }}>
          <div style={{ width: 48, height: 48, borderRadius: 14, background: "var(--c-parent)", display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 12 }}>
            <Icon name="plus" size={22} color="white"/>
          </div>
          <div style={{ fontWeight: 700, fontSize: 15, color: "var(--gray-900)" }}>Add a swimmer</div>
          <div className="t-caption" style={{ marginTop: 4 }}>Register another child under this account</div>
        </button>
      </div>

      {/* Combined upcoming sessions */}
      <Card>
        <div className="between" style={{ marginBottom: 14 }}>
          <div>
            <div className="t-h2">This week — all kids</div>
            <div className="t-caption">Combined schedule across the family</div>
          </div>
          <Button variant="ghost" size="sm" icon="upload">Sync to calendar</Button>
        </div>
        <div className="col" style={{ gap: 6 }}>
          {[
            { time: "Today 11:00", who: "Mia Tanaka",  what: "Stingrays L3",    coach: "Maria", color: "#0099CC", clash: false },
            { time: "Today 16:30", who: "Sophie Chen", what: "Sharks Pre-Comp", coach: "Maria", color: "#00C9A7", clash: true },
            { time: "Today 16:30", who: "Kai Tanaka",  what: "Sharks Pre-Comp", coach: "Maria", color: "#F97316", clash: true },
            { time: "Wed 11:00",   who: "Mia Tanaka",  what: "Stingrays L3",    coach: "Maria", color: "#0099CC" },
            { time: "Wed 16:30",   who: "Kai Tanaka",  what: "Sharks Pre-Comp", coach: "Maria", color: "#F97316" },
            { time: "Fri 06:00",   who: "Sophie Chen", what: "Senior squad AM", coach: "Maria", color: "#00C9A7" },
          ].map((s, i) => (
            <div key={i} className="row" style={{ padding: 12, background: s.clash ? "var(--amber-50)" : "var(--gray-50)", borderRadius: 10, gap: 12 }}>
              <div className="t-mono-sm" style={{ fontWeight: 700, minWidth: 110 }}>{s.time}</div>
              <Avatar name={s.who} color={s.color} size="sm"/>
              <div style={{ flex: 1 }}>
                <div style={{ fontWeight: 600, fontSize: 13 }}>{s.who} <span style={{ color: "var(--gray-500)", fontWeight: 400 }}>· {s.what}</span></div>
                <div className="t-caption">{s.coach}</div>
              </div>
              {s.clash && <Pill tone="amber" icon="alert">Same time</Pill>}
            </div>
          ))}
        </div>
      </Card>

      {/* Combined billing */}
      <Card>
        <div className="between" style={{ marginBottom: 14 }}>
          <div className="t-h2">Family billing</div>
          <Button variant="ghost" size="sm" icon="download">Export</Button>
        </div>
        <div className="col" style={{ gap: 8 }}>
          {CHILDREN.map(c => (
            <div key={c.id} className="row between" style={{ padding: 12, background: "var(--gray-50)", borderRadius: 10 }}>
              <div className="row">
                <Avatar name={c.name} color={c.color} size="sm"/>
                <div>
                  <div style={{ fontWeight: 600, fontSize: 13 }}>{c.name}</div>
                  <div className="t-caption">{c.program} · {c.weekly} sessions/week</div>
                </div>
              </div>
              <div className="row">
                <span className="t-mono-sm" style={{ fontWeight: 700 }}>${c.monthly}.00</span>
                <Pill tone="mint">Paid</Pill>
              </div>
            </div>
          ))}
          <div className="between" style={{ padding: "12px 12px 4px", borderTop: "1px solid var(--gray-200)", marginTop: 4 }}>
            <span style={{ fontWeight: 700 }}>Total monthly</span>
            <span className="t-mono-stat" style={{ fontSize: 22, color: "var(--c-parent)" }}>${CHILDREN.reduce((a, c) => a + c.monthly, 0)}.00</span>
          </div>
          <div className="row" style={{ justifyContent: "flex-end" }}>
            <Pill tone="aqua">Sibling discount applied · -10%</Pill>
          </div>
        </div>
      </Card>
    </div>
  );
}

// Add Child registration wizard
function AddChildFlow({ onClose, onComplete, toast }) {
  const [step, setStep] = useState(0);
  const [form, setForm] = useState({ name: "", dob: "", gender: "F", program: "Learn-to-Swim", club: "Marina Bay AC", coach: "Coach Maria", emergency: "", medical: "", waiverSigned: false });
  const steps = ["Profile", "Program", "Consent", "Review"];

  return (
    <Sheet open={true} onClose={onClose} title={null} large>
      <div className="between" style={{ marginBottom: 8 }}>
        <Pill tone="aqua">Register a swimmer</Pill>
        <div className="t-caption">Step {step + 1} of {steps.length}</div>
      </div>
      <div className="row" style={{ gap: 6, marginBottom: 24 }}>
        {steps.map((s, i) => (
          <div key={s} style={{ flex: 1, height: 6, borderRadius: 999, background: i <= step ? "var(--aqua)" : "var(--gray-200)" }}/>
        ))}
      </div>

      {step === 0 && (
        <div>
          <div className="t-h2" style={{ marginBottom: 8 }}>Tell us about your swimmer</div>
          <div className="muted" style={{ marginBottom: 16 }}>This profile lives under your parent account until they turn 13.</div>
          <div className="col" style={{ gap: 14 }}>
            <div className="row" style={{ gap: 12, flexWrap: "wrap" }}>
              <div style={{ width: 64, height: 64, borderRadius: "50%", background: "linear-gradient(135deg, var(--navy), var(--aqua))", display: "flex", alignItems: "center", justifyContent: "center", color: "white", fontSize: 22, fontWeight: 700 }}>
                {form.name ? form.name.split(" ").map(n => n[0]).slice(0, 2).join("").toUpperCase() : "?"}
              </div>
              <button className="btn btn-secondary btn-sm" type="button"><Icon name="upload" size={14}/>Upload photo</button>
            </div>
            <div className="field"><label>Full name</label><input className="input" value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} placeholder="e.g. Aiko Tanaka" autoFocus/></div>
            <div className="row" style={{ gap: 12 }}>
              <div className="field" style={{ flex: 1 }}><label>Date of birth</label><input className="input" type="date" value={form.dob} onChange={e => setForm({ ...form, dob: e.target.value })}/></div>
              <div className="field" style={{ flex: 1 }}>
                <label>Gender (for age-group entry)</label>
                <div className="row" style={{ gap: 6 }}>
                  {[{ id: "F", l: "Female" }, { id: "M", l: "Male" }, { id: "X", l: "Other / NB" }].map(o => (
                    <button key={o.id} onClick={() => setForm({ ...form, gender: o.id })} type="button" className="btn btn-sm" style={{ flex: 1, background: form.gender === o.id ? "var(--navy)" : "white", color: form.gender === o.id ? "white" : "var(--gray-700)", border: `1px solid ${form.gender === o.id ? "var(--navy)" : "var(--gray-300)"}` }}>{o.l}</button>
                  ))}
                </div>
              </div>
            </div>
            <div className="field"><label>Emergency contact phone</label><input className="input" value={form.emergency} onChange={e => setForm({ ...form, emergency: e.target.value })} placeholder="+65 8123 4567"/></div>
          </div>
        </div>
      )}

      {step === 1 && (
        <div>
          <div className="t-h2" style={{ marginBottom: 8 }}>Choose a program</div>
          <div className="muted" style={{ marginBottom: 16 }}>You can change this any time. Competing programs unlock meets, time-standard badges and live results.</div>
          <div className="col" style={{ gap: 10 }}>
            {[
              { id: "Learn-to-Swim",      label: "Learn-to-Swim",       price: 185, sessions: "2× / week", desc: "Group lessons, swim levels 1–6, parent-supervised.", icon: "wave",     color: "var(--aqua)" },
              { id: "Pre-Competitive",    label: "Pre-Competitive",     price: 320, sessions: "5× / week", desc: "Squad training, club meets, time-standard tracking.", icon: "ladder",   color: "var(--mint)" },
              { id: "Competitive Senior", label: "Competitive Senior",  price: 450, sessions: "8× / week", desc: "Full squad, national-level meets, dryland & video.",  icon: "trophy",   color: "var(--c-competitive)" },
              { id: "Open Water",         label: "Open Water / Tri",    price: 280, sessions: "Flexible",  desc: "GPS-tracked sessions, brick workouts, race calendar.", icon: "pin",      color: "var(--c-openwater)" },
            ].map(p => {
              const active = form.program === p.id;
              return (
                <button key={p.id} onClick={() => setForm({ ...form, program: p.id })} className="row" style={{
                  padding: 14, borderRadius: 12, gap: 14, textAlign: "left",
                  background: active ? `${p.color}11` : "var(--gray-50)",
                  borderLeft: `4px solid ${active ? p.color : "transparent"}`,
                }}>
                  <div style={{ width: 40, height: 40, borderRadius: 10, background: `${p.color}22`, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                    <Icon name={p.icon} size={20} color={p.color}/>
                  </div>
                  <div style={{ flex: 1 }}>
                    <div className="between">
                      <div style={{ fontWeight: 700 }}>{p.label}</div>
                      <span className="t-mono-sm" style={{ fontWeight: 700, color: p.color }}>${p.price}/mo</span>
                    </div>
                    <div style={{ fontSize: 12, color: "var(--gray-600)", marginTop: 2 }}>{p.desc}</div>
                    <Pill style={{ marginTop: 6 }}>{p.sessions}</Pill>
                  </div>
                  <div style={{ width: 22, height: 22, borderRadius: "50%", border: `2px solid ${active ? p.color : "var(--gray-300)"}`, display: "flex", alignItems: "center", justifyContent: "center" }}>
                    {active && <div style={{ width: 12, height: 12, borderRadius: "50%", background: p.color }}/>}
                  </div>
                </button>
              );
            })}
          </div>
          <div className="row" style={{ gap: 12, marginTop: 16 }}>
            <div className="field" style={{ flex: 1 }}><label>Home club</label><select className="select" value={form.club} onChange={e => setForm({ ...form, club: e.target.value })}><option>Marina Bay AC</option><option>Eastside SC</option><option>Sentosa Swim</option></select></div>
            <div className="field" style={{ flex: 1 }}><label>Preferred coach</label><select className="select" value={form.coach} onChange={e => setForm({ ...form, coach: e.target.value })}><option>Coach Maria</option><option>Coach Daniel</option><option>Coach Sam</option><option>Any available</option></select></div>
          </div>
        </div>
      )}

      {step === 2 && (
        <div>
          <div className="t-h2" style={{ marginBottom: 8 }}>Consent & waivers</div>
          <div className="muted" style={{ marginBottom: 16 }}>Required for any swimmer under 18.</div>
          <div className="col" style={{ gap: 14 }}>
            <div className="field"><label>Medical notes (allergies, conditions, medications)</label><textarea className="textarea" rows="3" value={form.medical} onChange={e => setForm({ ...form, medical: e.target.value })} placeholder="None on file"/></div>
            <div style={{ background: "var(--gray-50)", padding: 16, borderRadius: 10, border: "1px solid var(--gray-200)" }}>
              <div className="t-h3" style={{ marginBottom: 8 }}>Parent / Guardian consent</div>
              <ul className="col" style={{ gap: 6, fontSize: 13, color: "var(--gray-700)", paddingLeft: 18, listStyle: "disc" }}>
                <li>I am the parent or legal guardian of this swimmer.</li>
                <li>I authorize emergency medical treatment if I cannot be reached.</li>
                <li>I consent to photography for club records (revocable in settings).</li>
                <li>I have read the club's safety and SafeSport policies.</li>
              </ul>
              <label className="row" style={{ gap: 10, marginTop: 14, padding: 12, background: "white", borderRadius: 8, border: `1.5px solid ${form.waiverSigned ? "var(--mint)" : "var(--gray-300)"}` }}>
                <input type="checkbox" checked={form.waiverSigned} onChange={e => setForm({ ...form, waiverSigned: e.target.checked })}/>
                <span style={{ fontSize: 13, fontWeight: 600 }}>I agree to the above on behalf of my child.</span>
              </label>
            </div>
          </div>
        </div>
      )}

      {step === 3 && (
        <div>
          <div className="t-h2" style={{ marginBottom: 8 }}>Ready to register</div>
          <div className="muted" style={{ marginBottom: 16 }}>Review and confirm. We'll create the profile and add tuition to your monthly bill.</div>
          <div className="col" style={{ gap: 6 }}>
            <Row k="Swimmer" v={form.name || "—"}/>
            <Row k="DOB" v={form.dob || "—"}/>
            <Row k="Program" v={form.program}/>
            <Row k="Home club" v={form.club}/>
            <Row k="Coach" v={form.coach}/>
            <Row k="Monthly tuition" v={`$${{ "Learn-to-Swim": 185, "Pre-Competitive": 320, "Competitive Senior": 450, "Open Water": 280 }[form.program]}.00`}/>
            <Row k="Sibling discount" v="-10% (auto-applied)"/>
          </div>
          <div style={{ marginTop: 16, padding: 14, background: "var(--mint-50)", borderRadius: 10, borderLeft: "3px solid var(--mint)" }}>
            <div className="row" style={{ gap: 10 }}>
              <Icon name="check-circle" size={18} color="var(--mint)"/>
              <div style={{ fontSize: 13, color: "#04866d" }}>Once registered, {form.name || "your swimmer"} will be added to your dashboard with their own progress, badges and class schedule. You retain full visibility and billing control until they turn 13.</div>
            </div>
          </div>
        </div>
      )}

      <div className="row" style={{ marginTop: 24, gap: 10 }}>
        {step > 0 && <Button variant="ghost" onClick={() => setStep(step - 1)}>Back</Button>}
        <div style={{ flex: 1 }}/>
        <Button variant="ghost" onClick={onClose}>Cancel</Button>
        <Button variant="primary" onClick={() => {
          if (step === 0 && !form.name) { toast({ message: "Please enter swimmer's name", tone: "error" }); return; }
          if (step === 2 && !form.waiverSigned) { toast({ message: "Consent is required", tone: "error" }); return; }
          if (step < 3) setStep(step + 1);
          else { toast({ message: `${form.name} added to your family account` }); onComplete?.(); }
        }}>{step < 3 ? "Continue" : "Register swimmer"}<Icon name="chev-right" size={14}/></Button>
      </div>
    </Sheet>
  );
}

// Family management — per-child controls
function FamilyManager({ initialChildId, onClose, onTransition, toast }) {
  const [childId, setChildId] = useState(initialChildId || CHILDREN[0].id);
  const child = CHILDREN.find(c => c.id === childId) || CHILDREN[0];
  const [tab, setTab] = useState("permissions");

  return (
    <Sheet open={true} onClose={onClose} title="Manage family" large>
      <div className="row" style={{ gap: 6, overflowX: "auto", paddingBottom: 8, marginBottom: 14 }}>
        {CHILDREN.map(c => {
          const active = childId === c.id;
          return (
            <button key={c.id} onClick={() => setChildId(c.id)} className="row" style={{
              padding: "8px 12px 8px 8px", borderRadius: 999, gap: 8, whiteSpace: "nowrap",
              background: active ? "var(--navy)" : "var(--gray-100)",
              color: active ? "white" : "var(--gray-700)",
              fontWeight: 600,
            }}>
              <Avatar name={c.name} color={c.color} size="sm"/>
              <span>{c.name.split(" ")[0]}</span>
            </button>
          );
        })}
      </div>

      <div className="between" style={{ marginBottom: 16, padding: "10px 14px", background: "var(--gray-50)", borderRadius: 10 }}>
        <div className="row" style={{ gap: 12 }}>
          <Avatar name={child.name} color={child.color}/>
          <div>
            <div style={{ fontWeight: 700 }}>{child.name}</div>
            <div className="t-caption">Age {child.age} · {child.program}</div>
          </div>
        </div>
        {child.readyToTransition && (
          <Button variant="secondary" size="sm" onClick={onTransition}>Transfer to independent account</Button>
        )}
      </div>

      <Tabs tabs={[
        { id: "permissions", label: "Permissions" },
        { id: "notifications", label: "Notifications" },
        { id: "program", label: "Program" },
        { id: "billing", label: "Billing" },
        { id: "privacy", label: "Privacy" },
      ]} value={tab} onChange={setTab}/>

      <div style={{ marginTop: 16 }}>
        {tab === "permissions" && (
          <div className="col" style={{ gap: 6 }}>
            {[
              { id: "coachMsg", label: "Direct coach messaging", body: "Coach can DM you on behalf of this child. You are CC'd by default.", on: true },
              { id: "shareScores", label: "Share scores with extended family", body: "Send PB & meet result notifications to up to 4 family members.", on: false },
              { id: "homework", label: "Coach-assigned dryland tracking", body: "Allow coach to send dryland workouts to this child's profile.", on: child.competing },
              { id: "leaderboards", label: "Appear in club leaderboards", body: "Show this child's times in public meet leaderboards.", on: child.competing },
              { id: "photos", label: "Photo & video consent", body: "Allow club to photograph this child for newsletters & social.", on: true },
            ].map(t => (
              <div key={t.id} className="row between" style={{ padding: 14, background: "var(--gray-50)", borderRadius: 10, gap: 14 }}>
                <div>
                  <div style={{ fontWeight: 600, fontSize: 13 }}>{t.label}</div>
                  <div className="t-caption" style={{ marginTop: 2 }}>{t.body}</div>
                </div>
                <Toggle on={t.on} onChange={() => {}}/>
              </div>
            ))}
          </div>
        )}

        {tab === "notifications" && (
          <div className="col" style={{ gap: 6 }}>
            <div className="t-caption" style={{ marginBottom: 6 }}>What should we tell you about {child.name.split(" ")[0]}?</div>
            {[
              ["Class reminders (1 hr before)", true],
              ["Attendance reports", true],
              ["Coach notes on progress", true],
              ["New PB or badge earned", true],
              ["Meet entry deadlines", child.competing],
              ["Live meet — when they're racing", child.competing],
              ["Billing reminders", true],
              ["Daily summary email", false],
            ].map(([k, v]) => (
              <div key={k} className="between" style={{ padding: 12, background: "var(--gray-50)", borderRadius: 10 }}>
                <div style={{ fontWeight: 600, fontSize: 13 }}>{k}</div>
                <Toggle on={v} onChange={() => {}}/>
              </div>
            ))}
          </div>
        )}

        {tab === "program" && (
          <div className="col" style={{ gap: 14 }}>
            <div className="field"><label>Program</label><select className="select" defaultValue={child.program}><option>Learn-to-Swim</option><option>Pre-Competitive</option><option>Competitive Senior</option><option>Open Water</option></select></div>
            <div className="field"><label>Home club</label><select className="select"><option>{child.club}</option><option>Eastside SC</option><option>Sentosa Swim</option></select></div>
            <div className="field"><label>Primary coach</label><select className="select"><option>{child.coach}</option><option>Coach Daniel</option><option>Coach Sam</option></select></div>
            <div className="field"><label>Sessions per week</label><input className="input" type="number" defaultValue={child.weekly}/></div>
            <div style={{ padding: 14, background: "var(--amber-50)", borderRadius: 10, borderLeft: "3px solid var(--amber)" }}>
              <div style={{ fontSize: 13, fontWeight: 600, color: "#7a4a06" }}>Program changes adjust monthly tuition</div>
              <div style={{ fontSize: 12, color: "#92590a", marginTop: 4 }}>Pro-rated this month, full rate next billing cycle.</div>
            </div>
          </div>
        )}

        {tab === "billing" && (
          <div className="col" style={{ gap: 14 }}>
            <div className="between" style={{ padding: 14, background: "var(--gray-50)", borderRadius: 10 }}>
              <div><div style={{ fontWeight: 600 }}>Monthly tuition</div><div className="t-caption">{child.program}</div></div>
              <div className="t-mono-stat" style={{ fontSize: 22 }}>${child.monthly}</div>
            </div>
            <div className="between" style={{ padding: 14, background: "var(--gray-50)", borderRadius: 10 }}>
              <div><div style={{ fontWeight: 600 }}>Payment split</div><div className="t-caption">Which account pays</div></div>
              <select className="select"><option>Charge to family card •••• 4242</option><option>Separate payment for this child</option></select>
            </div>
            <div className="between" style={{ padding: 14, background: "var(--gray-50)", borderRadius: 10 }}>
              <div><div style={{ fontWeight: 600 }}>Auto-pay</div><div className="t-caption">Charge 1st of each month</div></div>
              <Toggle on={true} onChange={() => {}}/>
            </div>
            <div className="between" style={{ padding: 14, background: "var(--gray-50)", borderRadius: 10 }}>
              <div><div style={{ fontWeight: 600 }}>Sibling discount</div><div className="t-caption">Auto-applied for 2+ kids</div></div>
              <Pill tone="mint">-10% active</Pill>
            </div>
          </div>
        )}

        {tab === "privacy" && (
          <div className="col" style={{ gap: 6 }}>
            {[
              ["Allow live meet broadcasts to friends", child.competing],
              ["Public profile (other clubs can see PBs)", false],
              ["Include in club newsletter highlights", true],
              ["Share USA Swimming standards externally", child.competing],
              ["Marketing communications", false],
            ].map(([k, v]) => (
              <div key={k} className="between" style={{ padding: 14, background: "var(--gray-50)", borderRadius: 10 }}>
                <div style={{ fontWeight: 600, fontSize: 13 }}>{k}</div>
                <Toggle on={v} onChange={() => {}}/>
              </div>
            ))}
            <div style={{ padding: 14, background: "var(--red-50)", borderRadius: 10, marginTop: 8 }}>
              <div className="between">
                <div><div style={{ fontWeight: 700, color: "var(--red)" }}>Deactivate this swimmer</div><div className="t-caption">Pause classes, stop billing, keep records.</div></div>
                <Button variant="danger" size="sm">Deactivate</Button>
              </div>
            </div>
          </div>
        )}
      </div>

      <div className="row" style={{ marginTop: 18, justifyContent: "flex-end", gap: 8 }}>
        <Button variant="ghost" onClick={onClose}>Done</Button>
        <Button variant="primary" onClick={() => { toast({ message: "Settings saved" }); onClose(); }}>Save changes</Button>
      </div>
    </Sheet>
  );
}

Object.assign(window, { FamilyOverview, AddChildFlow, FamilyManager });