// ============================================================
// Alumnus member app — community, profile, privacy 1.13 → 1.17
// ============================================================
const { Icon: I3, Crest: C3, Avatar: A3, Button: B3, Eyebrow: E3,
        Pill: P3, Card: Cd3, TabBar: TB3, MEMBER: M3 } = window.AL;

// ─────────────────────────────────────────────────────────────
// 1.13  Community Feed (anonymous, text-only)
// ─────────────────────────────────────────────────────────────
const M_Community = ({ nav = () => {} }) => {
  const posts = [
    {
      who: 'A.R. · Class of 2026',
      ago: '2 hours ago',
      text: 'Three months out today. Bought my first house plant since I came home. Tiny green thing. Felt like a big deal.',
      acks: 42, mine: true,
    },
    {
      who: 'D.M. · Class of 2025',
      ago: '5 hours ago',
      text: "Sponsor told me to be useful when I feel restless. I'm now the unofficial fixer of the church coffee urn. Recommend.",
      acks: 28, mine: false,
    },
    {
      who: 'S.P. · Class of 2025',
      ago: 'yesterday',
      text: 'Sleep keeps slipping. Anyone find a routine that works in the evenings when the brain wants to spin? Not asking for tips, just stories.',
      acks: 17, mine: false,
    },
    {
      who: 'J.K. · Class of 2024',
      ago: '2 days ago',
      text: 'One year. Quiet birthday at home. My daughter baked the cake. Best one I have had.',
      acks: 88, mine: false,
    },
  ];

  return (
    <div style={{ background: 'var(--bg-page)', height: '100%', position: 'relative',
                  overflow: 'auto', boxSizing: 'border-box' }}>
      <div style={{ padding: '60px 24px 110px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 18 }}>
          <div>
            <E3 style={{ marginBottom: 6 }}>Community</E3>
            <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 400,
                         letterSpacing: '-0.012em', margin: 0, lineHeight: '32px' }}>
              Your class is here.
            </h1>
          </div>
          <I3 name="pencil-simple-line" size={22} color="var(--color-ivy)"/>
        </div>
        <p style={{ fontSize: 12.5, color: 'var(--fg-tertiary)',
                    fontStyle: 'italic', fontFamily: 'var(--font-display)',
                    margin: '0 0 18px', display: 'flex', alignItems: 'center', gap: 6 }}>
          <I3 name="shield-check" size={14} color="var(--color-stone)"/>
          Text only. Signed by class year. Moderated by Pine Tree alumni team.
        </p>

        {posts.map((p, i) => (
          <div key={i} style={{
            padding: '18px 0', borderTop: '1px solid var(--border-hairline)',
            borderBottom: i === posts.length - 1 ? '1px solid var(--border-hairline)' : 'none',
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}>
              <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--fg-secondary)',
                            letterSpacing: '0.02em' }}>
                {p.who} {p.mine && <span style={{ color: 'var(--color-brass-dark)' }}>· you</span>}
              </div>
              <div style={{ fontSize: 11, color: 'var(--fg-tertiary)' }}>{p.ago}</div>
            </div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 16, lineHeight: '24px',
                          color: 'var(--fg-primary)', marginBottom: 12 }}>
              {p.text}
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10,
                          fontSize: 12, color: 'var(--fg-tertiary)' }}>
              <button style={{
                background: 'transparent', border: '1px solid var(--border-hairline)',
                borderRadius: 999, padding: '5px 11px', cursor: 'pointer',
                display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 12,
                color: 'var(--fg-secondary)',
              }}>
                <I3 name="hands-praying" size={13} color="var(--color-brass-dark)"/>
                Seen with you · {p.acks}
              </button>
            </div>
          </div>
        ))}
      </div>
      <TB3 active="community" onNav={nav}/>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────
// 1.14  Profile / Membership
// ─────────────────────────────────────────────────────────────
const M_ProfileHub = ({ nav = () => {} }) => {
  const rows1 = [
    { i: 'users-three',   l: 'Your network',     d: '3 people · 2 active', go: 'network' },
    { i: 'calendar-blank',l: 'Meetings',         d: '4 on schedule' },
    { i: 'graduation-cap',l: 'Class & cohort',   d: 'Pine Tree Recovery · 2026' },
  ];
  const rows2 = [
    { i: 'shield-check',  l: 'Privacy controls', d: 'You decide what is observed', go: 'privacy' },
    { i: 'bell',          l: 'Notifications',    d: 'Quiet hours · 10 pm – 7 am' },
    { i: 'question',      l: 'Help & support',   d: 'Talk to a real person' },
    { i: 'sign-out',      l: 'Sign out',         d: null, danger: true },
  ];
  return (
    <div style={{ background: 'var(--bg-page)', height: '100%', position: 'relative',
                  overflow: 'auto', boxSizing: 'border-box' }}>
      <div style={{ padding: '60px 24px 110px' }}>
        {/* Identity block */}
        <div style={{
          display: 'flex', alignItems: 'center', gap: 18, marginBottom: 24,
          padding: '20px 22px', background: 'var(--color-ivy)',
          color: 'var(--color-bone)', borderRadius: 4,
        }}>
          <A3 initials="AR" tone="brass" size={56}/>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 400,
                          letterSpacing: '-0.008em', marginBottom: 2 }}>Anna Reyes</div>
            <div style={{ fontSize: 11.5, color: 'rgba(242,237,226,0.66)',
                          textTransform: 'uppercase', letterSpacing: '0.06em' }}>
              Class of 2026 · 45 days
            </div>
          </div>
          <I3 name="pencil-simple" size={18} color="rgba(242,237,226,0.7)"/>
        </div>

        <E3 style={{ marginBottom: 10 }}>Your continuing care</E3>
        <div style={{ background: 'var(--bg-surface)', border: '1px solid var(--border-hairline)',
                      borderRadius: 4, overflow: 'hidden', marginBottom: 24 }}>
          {rows1.map((r, i) => (
            <div key={i} onClick={() => r.go && nav(r.go)} style={{
              display: 'flex', alignItems: 'center', gap: 14,
              padding: '14px 18px', cursor: 'pointer',
              borderBottom: i < rows1.length - 1 ? '1px solid var(--border-hairline)' : 'none',
            }}>
              <I3 name={r.i} size={20} color="var(--color-ivy)"/>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 14.5, fontWeight: 500 }}>{r.l}</div>
                <div style={{ fontSize: 12, color: 'var(--fg-tertiary)' }}>{r.d}</div>
              </div>
              <I3 name="caret-right" size={14} color="var(--color-stone-soft)"/>
            </div>
          ))}
        </div>

        <E3 style={{ marginBottom: 10 }}>Account</E3>
        <div style={{ background: 'var(--bg-surface)', border: '1px solid var(--border-hairline)',
                      borderRadius: 4, overflow: 'hidden' }}>
          {rows2.map((r, i) => (
            <div key={i} onClick={() => r.go && nav(r.go)} style={{
              display: 'flex', alignItems: 'center', gap: 14,
              padding: '14px 18px', cursor: 'pointer',
              borderBottom: i < rows2.length - 1 ? '1px solid var(--border-hairline)' : 'none',
            }}>
              <I3 name={r.i} size={20} color={r.danger ? 'var(--color-ember)' : 'var(--color-ivy)'}/>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 14.5, fontWeight: 500,
                              color: r.danger ? 'var(--color-ember)' : 'var(--fg-primary)' }}>{r.l}</div>
                {r.d && <div style={{ fontSize: 12, color: 'var(--fg-tertiary)' }}>{r.d}</div>}
              </div>
              {!r.danger && <I3 name="caret-right" size={14} color="var(--color-stone-soft)"/>}
            </div>
          ))}
        </div>

        <div style={{ marginTop: 32, fontSize: 11, color: 'var(--fg-tertiary)',
                      textAlign: 'center', letterSpacing: '0.04em', fontFamily: 'var(--font-display)',
                      fontStyle: 'italic' }}>
          A membership of Pine Tree Recovery · v 2.4.1
        </div>
      </div>
      <TB3 active="profile" onNav={nav}/>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────
// 1.15  Privacy Controls Detail (demo-critical)
// ─────────────────────────────────────────────────────────────
const M_Privacy = ({ nav = () => {} }) => {
  const signals = [
    { l: 'Sleep rhythm',          d: 'Start and length, not what you do awake',  on: true },
    { l: 'Meeting check-ins',     d: 'Geofenced. Only the addresses you added',  on: true },
    { l: 'Time of day patterns',  d: "When you're typically awake or asleep",     on: true },
    { l: 'On-device content scan',d: 'No content uploaded. No human ever reads',  on: true },
    { l: 'Communication frequency', d: 'How often you reach out. Never to whom or what', on: false },
    { l: 'Movement during day',   d: 'Active vs. still hours, anonymized',        on: false },
  ];
  return (
    <div style={{ background: 'var(--bg-page)', height: '100%', overflow: 'auto', boxSizing: 'border-box' }}>
      <div style={{ padding: '76px 24px 40px' }}>
        <button onClick={() => nav('profile')} style={{ background: 'none', border: 'none',
                color: 'var(--fg-secondary)', fontSize: 14, padding: 0, marginBottom: 22,
                cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
          <I3 name="caret-left" size={14}/> Profile
        </button>
        <E3 tone="brass" style={{ marginBottom: 8 }}>Privacy controls</E3>
        <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 28, lineHeight: '34px',
                     fontWeight: 400, letterSpacing: '-0.012em', margin: '0 0 12px' }}>
          You decide what we notice.
        </h1>
        <p style={{ fontSize: 14, lineHeight: '20px', color: 'var(--fg-secondary)', margin: '0 0 24px' }}>
          Each signal is opt-in. Turning one off reduces what the network can see. Nothing is hidden from you.
        </p>

        {/* Big actions first */}
        <div style={{ background: 'var(--bg-elevated)', border: '1px solid var(--border-hairline)',
                      borderRadius: 4, padding: '18px 20px', marginBottom: 22 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
            <div>
              <div style={{ fontSize: 14.5, fontWeight: 600 }}>Pause observation</div>
              <div style={{ fontSize: 12.5, color: 'var(--fg-tertiary)' }}>For an evening, a day, or until you turn it back on.</div>
            </div>
            <B3 variant="secondary" size="sm">Pause</B3>
          </div>
          <div style={{ height: 1, background: 'var(--border-hairline)', margin: '14px 0' }}/>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <div>
              <div style={{ fontSize: 14.5, fontWeight: 600, color: 'var(--color-ember)' }}>Revoke all access</div>
              <div style={{ fontSize: 12.5, color: 'var(--fg-tertiary)' }}>Removes your network and ends observation. Reversible.</div>
            </div>
            <B3 variant="ghost" size="sm" style={{ color: 'var(--color-ember)', borderColor: 'var(--color-ember-soft)' }}>Revoke</B3>
          </div>
        </div>

        <E3 style={{ marginBottom: 10 }}>Signals</E3>
        <div style={{ background: 'var(--bg-surface)', border: '1px solid var(--border-hairline)',
                      borderRadius: 4, overflow: 'hidden' }}>
          {signals.map((s, i) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'flex-start', gap: 14,
              padding: '14px 18px',
              borderBottom: i < signals.length - 1 ? '1px solid var(--border-hairline)' : 'none',
            }}>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--fg-primary)' }}>{s.l}</div>
                <div style={{ fontSize: 12, color: 'var(--fg-tertiary)', marginTop: 2 }}>{s.d}</div>
                {!s.on && (
                  <div style={{ fontSize: 11.5, color: 'var(--color-brass-dark)', marginTop: 5,
                                fontStyle: 'italic', fontFamily: 'var(--font-display)' }}>
                    Off · your network won't see this pattern
                  </div>
                )}
              </div>
              <div style={{
                width: 38, height: 22, borderRadius: 999,
                background: s.on ? 'var(--color-ivy)' : 'var(--color-stone-soft)',
                position: 'relative', flexShrink: 0, marginTop: 2,
              }}>
                <div style={{
                  position: 'absolute', top: 2, left: s.on ? 18 : 2,
                  width: 18, height: 18, borderRadius: 999, background: '#fff',
                  transition: 'left 200ms var(--ease)',
                }}/>
              </div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 22, padding: '14px 16px', background: 'var(--color-bone-soft)',
                      borderLeft: '2px solid var(--color-brass)',
                      fontFamily: 'var(--font-display)', fontSize: 13.5, lineHeight: '20px',
                      fontStyle: 'italic', color: 'var(--fg-secondary)' }}>
          Pine Tree Recovery's BAA covers this data under HIPAA. Audit log available on request.
        </div>
      </div>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────
// 1.16  Notification Center
// ─────────────────────────────────────────────────────────────
const M_Notifications = ({ nav = () => {} }) => {
  const groups = [
    { title: 'Today', items: [
      { i: 'chat-circle',  l: "Beth: 'thinking of you tonight'", t: '11:42 am', tone: 'ivy' },
      { i: 'calendar-blank', l: "St. Margaret's tonight at 7:30", t: '8:00 am', tone: 'ivy' },
    ]},
    { title: 'Yesterday', items: [
      { i: 'check-circle', l: 'Checked in at Pine Tree IOP', t: '6:02 pm', tone: 'moss' },
      { i: 'medal',        l: "You've kept a steady month — Dr. Singh noticed.", t: '10:00 am', tone: 'brass' },
    ]},
    { title: 'This week', items: [
      { i: 'users-three',  l: 'Maria accepted the partner invitation', t: 'Mon', tone: 'ivy' },
      { i: 'shield-check', l: 'Your privacy log is ready for May', t: 'Mon', tone: 'stone' },
    ]},
  ];
  const toneColor = { ivy: 'var(--color-ivy)', moss: 'var(--color-moss)',
                      brass: 'var(--color-brass-dark)', stone: 'var(--color-stone)' };
  return (
    <div style={{ background: 'var(--bg-page)', height: '100%', overflow: 'auto', boxSizing: 'border-box' }}>
      <div style={{ padding: '60px 24px 110px' }}>
        <E3 style={{ marginBottom: 6 }}>Notifications</E3>
        <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 400,
                     letterSpacing: '-0.012em', margin: '0 0 22px', lineHeight: '32px' }}>
          Quiet week, mostly.
        </h1>
        {groups.map((g, gi) => (
          <div key={gi} style={{ marginBottom: 18 }}>
            <div style={{ fontSize: 11, color: 'var(--fg-tertiary)', letterSpacing: '0.08em',
                          textTransform: 'uppercase', fontWeight: 600, marginBottom: 8 }}>
              {g.title}
            </div>
            <div style={{ background: 'var(--bg-surface)', border: '1px solid var(--border-hairline)',
                          borderRadius: 4, overflow: 'hidden' }}>
              {g.items.map((n, i) => (
                <div key={i} style={{
                  display: 'flex', alignItems: 'flex-start', gap: 12, padding: '12px 16px',
                  borderBottom: i < g.items.length - 1 ? '1px solid var(--border-hairline)' : 'none',
                }}>
                  <I3 name={n.i} size={18} color={toneColor[n.tone]} style={{ marginTop: 2 }}/>
                  <div style={{ flex: 1, fontSize: 13.5, lineHeight: '19px' }}>{n.l}</div>
                  <div style={{ fontSize: 11, color: 'var(--fg-tertiary)', flexShrink: 0,
                                fontVariantNumeric: 'tabular-nums' }}>{n.t}</div>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
      <TB3 active="home" onNav={nav}/>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────
// 1.17  Crisis / Support
// ─────────────────────────────────────────────────────────────
const M_Crisis = ({ nav = () => {} }) => {
  const calls = [
    { i: 'phone', l: 'Beth · sponsor',     d: '8 months together · texts back fast', primary: true },
    { i: 'phone', l: 'Maria · mom',        d: 'Your mother. Knows the score.' },
    { i: 'phone', l: 'Dr. Singh',          d: 'Pine Tree alumni line · 24 / 7' },
    { i: 'phone', l: '988 Crisis Line',    d: 'Free, confidential, anytime', emergency: true },
  ];
  return (
    <div style={{ background: 'var(--bg-page)', height: '100%', overflow: 'auto', boxSizing: 'border-box' }}>
      <div style={{ padding: '76px 24px 60px' }}>
        <button onClick={() => nav('home')} style={{ background: 'none', border: 'none',
                color: 'var(--fg-secondary)', fontSize: 14, padding: 0, marginBottom: 28,
                cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
          <I3 name="caret-left" size={14}/> Close
        </button>
        <E3 tone="brass" style={{ marginBottom: 12 }}>You're not alone right now</E3>
        <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 30, lineHeight: '36px',
                     fontWeight: 400, letterSpacing: '-0.015em', margin: '0 0 16px' }}>
          Who would you like to talk to?
        </h1>
        <p style={{ fontSize: 14, lineHeight: '21px', color: 'var(--fg-secondary)', margin: '0 0 28px' }}>
          Pick whoever feels right. They know what you've been through.
        </p>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {calls.map((c, i) => (
            <div key={i} style={{
              padding: '18px 20px', borderRadius: 4,
              background: c.primary ? 'var(--color-ivy)' : c.emergency ? 'var(--bg-elevated)' : 'var(--bg-surface)',
              color: c.primary ? 'var(--color-bone)' : 'var(--fg-primary)',
              border: c.emergency ? '1px solid var(--color-ember-soft)' : '1px solid var(--border-hairline)',
              display: 'flex', alignItems: 'center', gap: 16,
            }}>
              <div style={{
                width: 44, height: 44, borderRadius: 999,
                background: c.primary ? 'var(--color-brass)'
                          : c.emergency ? 'var(--color-ember)'
                          : 'var(--color-bone)',
                color: c.primary ? 'var(--color-ink)'
                      : c.emergency ? 'var(--color-bone)'
                      : 'var(--color-ivy)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                flexShrink: 0,
              }}>
                <I3 name={c.i} size={22}/>
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 15.5, fontWeight: 600 }}>{c.l}</div>
                <div style={{ fontSize: 12.5,
                              color: c.primary ? 'rgba(242,237,226,0.7)' : 'var(--fg-tertiary)' }}>{c.d}</div>
              </div>
              <I3 name="caret-right" size={16}
                  color={c.primary ? 'rgba(242,237,226,0.7)' : 'var(--color-stone)'}/>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 36, padding: '16px 18px',
                      background: 'var(--color-bone-soft)', borderRadius: 4,
                      borderLeft: '2px solid var(--color-brass)' }}>
          <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic',
                        fontSize: 14, lineHeight: '21px', color: 'var(--fg-primary)' }}>
            "If you can't call, text. If you can't text, walk to where Beth or Maria is. That's it. That's the only rule for tonight."
          </div>
          <div style={{ fontSize: 11, color: 'var(--fg-tertiary)', marginTop: 8,
                        letterSpacing: '0.04em', textTransform: 'uppercase' }}>
            From your discharge letter
          </div>
        </div>
      </div>
    </div>
  );
};

window.MemberRest = { M_Community, M_ProfileHub, M_Privacy, M_Notifications, M_Crisis };