/* global React, M, CoastGroup */

// Brief Coast group description used in member/admin/public views.
const G = window.CoastGroup;

// ====================================================================
// A1 — Group public / recruiting view (mobile)
// ====================================================================
function GroupPublicMobile() {
  const { MScreen, MTopBar, Eyebrow, MSectionH, Perf, SagePill, MStickyCTA, MiniAvatar, SageBar, Glyph } = window.M;

  const slots = [
    { name: "Legal & conveyancing", count: 2, full: 2, open: false },
    { name: "Finance & accounting", count: 4, full: 4, open: false },
    { name: "Property", count: 1, full: 2, open: true, openLabel: "1 open" },
    { name: "Marketing & creative", count: 4, full: 4, open: false },
    { name: "Technology", count: 2, full: 2, open: false },
    { name: "Tax advisory", count: 0, full: 1, open: true, openLabel: "open" },
    { name: "HR consulting", count: 0, full: 1, open: true, openLabel: "open" },
  ];

  return (
    <MScreen footer={
      <MStickyCTA hint="Application takes ~5 minutes.">
        <SagePill fullWidth>Apply to join</SagePill>
      </MStickyCTA>
    }>
      <MTopBar right={<button style={{ width: 36, height: 36, borderRadius: 18, background: "transparent", border: "none", color: "var(--text-2)", cursor: "pointer" }}><Glyph.Share size={16}/></button>}/>

      {/* Hero */}
      <div style={{ padding: "0 24px 28px", position: "relative", overflow: "hidden" }}>
        {/* gradient bg ribbon */}
        <div style={{ position: "absolute", inset: "0 0 0 0", background: "radial-gradient(circle at 80% -20%, var(--accent-soft), transparent 60%)", opacity: 0.65, pointerEvents: "none" }}/>
        <div style={{ position: "relative" }}>
          <Eyebrow>EST. 2024 · By application · Gold Coast QLD</Eyebrow>
          <h1 className="serif" style={{ fontSize: 40, lineHeight: 1.05, letterSpacing: "-0.02em", margin: "16px 0 0" }}>
            Coast Referral<br/>
            <span className="serif-i" style={{ color: "var(--accent)" }}>Collective.</span>
          </h1>
          <p style={{ fontSize: 14.5, lineHeight: 1.6, color: "var(--text-2)", marginTop: 18, textWrap: "pretty" }}>
            Fourteen practitioners — one per discipline — meeting fortnightly to refer their best clients to people they trust. Founded August 2024. Currently accepting applications in <span className="serif-i" style={{ color: "var(--text)" }}>tax advisory</span> and <span className="serif-i" style={{ color: "var(--text)" }}>HR consulting</span>.
          </p>
        </div>
        {/* verified stamp */}
        <div style={{ position: "absolute", top: 6, right: 24, width: 70, height: 70, border: "1.2px solid var(--accent)", borderRadius: "50%", color: "var(--accent)", display: "grid", placeItems: "center", textAlign: "center", transform: "rotate(-6deg)", opacity: 0.7 }}>
          <div>
            <div className="mono" style={{ fontSize: 7, letterSpacing: "0.14em" }}>VERIFIED</div>
            <div className="serif-i" style={{ fontSize: 12, marginTop: 2 }}>'26</div>
          </div>
        </div>
      </div>

      {/* Stat strip */}
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", borderTop: "1px solid var(--border-soft)", borderBottom: "1px solid var(--border-soft)" }}>
        {[
          ["312", "1to1s held"],
          ["184", "Connections made"],
          ["$4.2M", "Attributed business"],
          ["11/14", "Industries"],
        ].map(([n, l], i) => (
          <div key={i} style={{ padding: "20px 22px", borderRight: i % 2 === 0 ? "1px solid var(--border-soft)" : "none", borderBottom: i < 2 ? "1px solid var(--border-soft)" : "none" }}>
            <div className="mono" style={{ fontSize: 28, fontWeight: 500, letterSpacing: "-0.02em" }}>{n}</div>
            <div className="mono" style={{ fontSize: 10, letterSpacing: "0.12em", color: "var(--text-3)", textTransform: "uppercase", marginTop: 6 }}>{l}</div>
          </div>
        ))}
      </div>

      {/* Pull quote */}
      <div style={{ padding: "32px 28px 28px" }}>
        <div className="serif-i" style={{ fontSize: 26, lineHeight: 1.25, letterSpacing: "-0.005em", color: "var(--text)" }}>
          "We refer the work that <span style={{ color: "var(--accent)" }}>matters.</span>"
        </div>
        <p style={{ fontSize: 14.5, lineHeight: 1.65, color: "var(--text-2)", marginTop: 22, textWrap: "pretty" }}>
          The Collective started over coffee at The Pantry in Robina, between four operators who were tired of generic networking. The format is deliberate: one chair per discipline, fortnightly meetings, no membership pressure outside that cadence.
        </p>
        <p style={{ fontSize: 14.5, lineHeight: 1.65, color: "var(--text-2)", marginTop: 14, textWrap: "pretty" }}>
          Members hold each other to a quiet bar — refer the way you'd want to be referred. We track the work that gets attributed back, not the meetings held. Quality compounds.
        </p>
      </div>

      <Perf margin="0 28px"/>

      {/* Composition */}
      <div style={{ padding: "28px 24px" }}>
        <Eyebrow>Composition</Eyebrow>
        <div style={{ marginTop: 16 }}>
          {slots.map((s, i) => (
            <div key={i} style={{ padding: "14px 0", borderBottom: i < slots.length - 1 ? "1px solid var(--border-soft)" : "none" }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 6 }}>
                <span style={{ fontSize: 13.5 }}>{s.name}{s.open && <span className="serif-i" style={{ color: "var(--accent)", marginLeft: 6, fontSize: 13 }}>({s.openLabel})</span>}</span>
                <span className="mono" style={{ fontSize: 11.5, color: "var(--text-2)" }}>{s.count} / {s.full}</span>
              </div>
              <SageBar value={s.count} total={s.full} height={3}/>
            </div>
          ))}
        </div>
      </div>

      {/* Cadence */}
      <div style={{ padding: "16px 24px 8px" }}>
        <div style={{ background: "var(--surface-2)", borderRadius: 12, padding: 22, border: "1px solid var(--border-soft)" }}>
          <Eyebrow>Cadence</Eyebrow>
          <p className="serif" style={{ fontSize: 17, lineHeight: 1.45, marginTop: 12, color: "var(--text)" }}>
            Meets fortnightly Tuesdays, <span className="serif-i" style={{ color: "var(--accent)" }}>7:30am</span> at The Pantry, Robina.
          </p>
          <div className="muted" style={{ fontSize: 12, marginTop: 8 }}>Quorum rule: 80% attendance.</div>
        </div>
      </div>

      {/* Convenor */}
      <div style={{ padding: "20px 24px 8px" }}>
        <div style={{ background: "var(--surface-2)", borderRadius: 12, padding: 22, border: "1px solid var(--border-soft)", display: "flex", gap: 14, alignItems: "center" }}>
          <MiniAvatar initials="MC" size={50} accent/>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 14.5, fontWeight: 500 }}>Marcus Chen</div>
            <div className="mono" style={{ fontSize: 9.5, color: "var(--text-3)", letterSpacing: "0.12em", textTransform: "uppercase", marginTop: 4 }}>Convenor · 8 months</div>
            <div className="muted" style={{ fontSize: 12, marginTop: 6 }}>Open to a quick call before applying.</div>
          </div>
        </div>
      </div>

      <div style={{ height: 24 }}/>
    </MScreen>
  );
}

// ====================================================================
// A2 — Member view (mobile)
// ====================================================================
function GroupMemberMobile() {
  const { MScreen, MTopBar, Eyebrow, MiniAvatar, MSectionH, Perf, SageBar, MiniSpark, Glyph } = window.M;
  return (
    <MScreen>
      <MTopBar right={<button style={{ width: 36, height: 36, borderRadius: 18, background: "transparent", border: "none", color: "var(--text-2)", cursor: "pointer" }}><Glyph.Cog/></button>}/>

      {/* Hero compact */}
      <div style={{ padding: "8px 24px 22px" }}>
        <Eyebrow>Group · member view</Eyebrow>
        <h1 className="serif" style={{ fontSize: 32, lineHeight: 1.05, letterSpacing: "-0.02em", margin: "12px 0 0" }}>
          Coast Referral<br/>
          <span className="serif-i" style={{ color: "var(--accent)" }}>Collective.</span>
        </h1>
        <div className="muted" style={{ fontSize: 13.5, lineHeight: 1.55, marginTop: 12 }}>
          Professional services for small business owners across the Gold Coast.
        </div>
        <div className="mono" style={{ fontSize: 10, letterSpacing: "0.12em", color: "var(--text-3)", textTransform: "uppercase", marginTop: 14 }}>
          Gold Coast QLD · 14 members · Next meeting Tue 12 May
        </div>
      </div>

      {/* Group rhythm strip */}
      <div style={{ padding: "0 24px 20px" }}>
        <div style={{ background: "var(--accent-soft)", borderRadius: 12, padding: 20, border: "1px solid var(--accent)", borderLeftWidth: 1 }}>
          <Eyebrow accent>This week · Group Rhythm</Eyebrow>
          <div className="serif-i" style={{ fontSize: 19, lineHeight: 1.35, color: "var(--text)", marginTop: 8 }}>
            <span style={{ color: "var(--accent)" }}>11 of 14</span> members held their Rhythm this week.
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 14, marginTop: 14 }}>
            <div style={{ flex: 1 }}><SageBar value={11} total={14} height={3}/></div>
            <span style={{ color: "var(--accent)", fontSize: 11, cursor: "pointer", whiteSpace: "nowrap" }}>View members →</span>
          </div>
        </div>
      </div>

      {/* Health metrics — horizontal scroll */}
      <div style={{ padding: "0 0 20px" }}>
        <div style={{ padding: "0 24px 12px" }}><Eyebrow>Health</Eyebrow></div>
        <div style={{ display: "flex", gap: 10, padding: "0 24px", overflowX: "auto", scrollbarWidth: "none" }}>
          {[
            { n: "312", l: "Total 1to1s", d: "+24", s: [4,5,6,7,8,9] },
            { n: "184", l: "Group reach", d: "+9", s: [3,4,4,6,7,8] },
            { n: "11/14", l: "Industry breadth", d: "", s: [6,7,8,9,10,11] },
            { n: "0.71", l: "Ext : Int ratio", d: "", s: [0.4,0.5,0.58,0.63,0.68,0.71] },
            { n: "0.84", l: "Cross-poll", d: "+0.06", s: [0.5,0.6,0.68,0.74,0.79,0.84] },
          ].map((m, i) => (
            <div key={i} style={{ flex: "0 0 130px", padding: 16, background: "var(--surface-2)", border: "1px solid var(--border-soft)", borderRadius: 12 }}>
              <div className="mono" style={{ fontSize: 22, fontWeight: 500, letterSpacing: "-0.02em" }}>{m.n}</div>
              {m.d && <div className="mono" style={{ fontSize: 10, color: "var(--accent)", marginTop: 4 }}>{m.d}</div>}
              <div className="mono" style={{ fontSize: 9.5, letterSpacing: "0.1em", color: "var(--text-3)", textTransform: "uppercase", marginTop: 6 }}>{m.l}</div>
              <div style={{ marginTop: 10 }}><MiniSpark data={m.s} w={98} h={20} color="var(--accent)"/></div>
            </div>
          ))}
        </div>
      </div>

      <Perf margin="20px 24px"/>

      {/* Members */}
      <div style={{ padding: "0 24px 8px" }}>
        <MSectionH right="14">Members</MSectionH>
      </div>
      <div>
        {/* Marcus row */}
        <div style={{ display: "flex", gap: 12, alignItems: "center", padding: "12px 24px", borderLeft: "2px solid var(--accent)", background: "var(--accent-soft)" }}>
          <MiniAvatar initials="MC" size={44} self/>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 14, fontWeight: 500 }}>Marcus Chen <span className="mono" style={{ fontSize: 9, color: "var(--accent)", letterSpacing: "0.14em", marginLeft: 6 }}>(YOU)</span></div>
            <div className="muted" style={{ fontSize: 12 }}>Commercial solicitor · Chen Legal</div>
          </div>
          <span style={{ color: "var(--text-3)" }}>›</span>
        </div>
        {G.members.slice(1).map((m, i) => (
          <div key={m.id} style={{ display: "flex", gap: 12, alignItems: "center", padding: "12px 24px", borderBottom: i < G.members.length - 2 ? "1px solid var(--border-soft)" : "none", cursor: "pointer" }}>
            <MiniAvatar initials={m.initials} size={40}/>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 13.5, fontWeight: 500 }}>{m.name}</div>
              <div className="muted" style={{ fontSize: 11.5, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{m.role} · {m.firm}</div>
            </div>
            <span style={{ color: "var(--text-3)" }}>›</span>
          </div>
        ))}
      </div>

      <Perf margin="24px 24px"/>

      {/* Activity feed */}
      <div style={{ padding: "0 24px 8px" }}>
        <MSectionH>Activity</MSectionH>
      </div>
      <div style={{ padding: "0 24px" }}>
        {[
          { d: "2 DAYS AGO", who: "Priya Anand → Marcus Chen", what: "made an intro to", italic: "Coast Ledger" },
          { d: "3 DAYS AGO", who: "James Whitford", what: "submitted a debrief from his 1to1 with", italic: "Sienna" },
          { d: "LAST TUESDAY", who: "Eliza Hart + Felix Aoki", what: "attributed a", italic: "$14k retainer" },
          { d: "LAST TUESDAY", who: "Group", what: "fortnightly meeting · 12 of 14 attended", italic: null },
          { d: "LAST WEEK", who: "Devon Park", what: "joined the", italic: "Property Power Team" },
        ].map((a, i, arr) => (
          <div key={i} style={{ padding: "16px 0", borderBottom: i < arr.length - 1 ? "1px dotted var(--border)" : "none" }}>
            <div className="mono" style={{ fontSize: 9.5, letterSpacing: "0.14em", color: "var(--text-3)" }}>{a.d}</div>
            <div className="serif" style={{ fontSize: 14, lineHeight: 1.55, marginTop: 6, color: "var(--text)" }}>
              <span className="serif-i">{a.who}</span> {a.what} {a.italic && <span className="serif-i" style={{ color: "var(--accent)" }}>{a.italic}</span>}
            </div>
          </div>
        ))}
      </div>

      <Perf margin="24px 24px"/>

      {/* Power Teams */}
      <div style={{ padding: "0 24px 32px" }}>
        <MSectionH>Power Teams</MSectionH>
        {G.powerTeams.map((t, i) => (
          <div key={i} style={{ padding: 18, background: "var(--surface-2)", border: "1px solid var(--border-soft)", borderRadius: 12, marginBottom: 10 }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
              <span className="serif" style={{ fontSize: 17 }}>{t.name}</span>
              <span style={{ color: "var(--accent)", fontSize: 12, cursor: "pointer" }}>View →</span>
            </div>
            <div className="muted" style={{ fontSize: 12, marginTop: 4 }}>{t.focus}</div>
            <div style={{ display: "flex", gap: 4, marginTop: 12, alignItems: "center" }}>
              {t.members.map((m, j) => <MiniAvatar key={j} initials={m} size={28}/>)}
              <span className="mono" style={{ fontSize: 10, color: "var(--text-3)", marginLeft: 8 }}>{t.deals} deals</span>
            </div>
          </div>
        ))}
      </div>
    </MScreen>
  );
}

// ====================================================================
// A3 — Admin view (mobile)
// ====================================================================
function GroupAdminMobile() {
  const { MScreen, MTopBar, Eyebrow, MiniAvatar, MSectionH, Perf, SageBar, SagePill, MStickyCTA, Glyph } = window.M;
  const missingFromRhythm = [
    { i: "RB", n: "Rohan Bose", missing: "1to1 + Connection" },
    { i: "FA", n: "Felix Aoki", missing: "Connection" },
    { i: "VS", n: "Vivian Soo", missing: "Requests" },
  ];

  return (
    <MScreen footer={
      <MStickyCTA><SagePill ghost fullWidth>Invite member</SagePill></MStickyCTA>
    }>
      <MTopBar right={<button style={{ background: "transparent", border: "none", color: "var(--accent)", fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", cursor: "pointer", padding: "0 8px" }}>Settings</button>}/>

      {/* Hero */}
      <div style={{ padding: "8px 24px 22px" }}>
        <Eyebrow>Group · admin view</Eyebrow>
        <h1 className="serif" style={{ fontSize: 32, lineHeight: 1.05, letterSpacing: "-0.02em", margin: "12px 0 0" }}>
          Coast Referral<br/>
          <span className="serif-i" style={{ color: "var(--accent)" }}>Collective.</span>
        </h1>
        <div style={{ marginTop: 14, display: "inline-flex", padding: "5px 11px", borderRadius: 999, background: "var(--accent-soft)", border: "1px solid var(--accent)" }}>
          <span className="mono" style={{ fontSize: 10, letterSpacing: "0.14em", color: "var(--accent)", textTransform: "uppercase" }}>Convenor</span>
        </div>
      </div>

      {/* Applications */}
      <div style={{ padding: "0 24px 22px" }}>
        <Eyebrow accent>Applications · 3 pending</Eyebrow>
        <div style={{ marginTop: 14, background: "var(--surface-2)", border: "1px solid var(--border-soft)", borderRadius: 12, padding: 4 }}>
          {G.applications.map((a, i) => (
            <div key={i} style={{ padding: 14, borderBottom: i < 2 ? "1px solid var(--border-soft)" : "none", display: "flex", gap: 12, alignItems: "flex-start" }}>
              <MiniAvatar initials={a.name.split(" ").map(s => s[0]).join("")} size={40}/>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13.5, fontWeight: 500 }}>{a.name}</div>
                <div className="muted" style={{ fontSize: 11.5 }}>{a.role} · {a.firm}</div>
                <div className="mono" style={{ fontSize: 9, letterSpacing: "0.12em", color: "var(--text-3)", textTransform: "uppercase", marginTop: 4 }}>{a.intro}</div>
                <div style={{ display: "flex", gap: 8, marginTop: 10 }}>
                  <button style={{ height: 28, padding: "0 12px", borderRadius: 999, background: "var(--accent)", border: "none", color: "#0E0D0B", fontSize: 11.5, fontWeight: 600, cursor: "pointer" }}>Review</button>
                  <button style={{ height: 28, padding: "0 12px", borderRadius: 999, background: "transparent", border: "1px solid var(--border)", color: "var(--text-2)", fontSize: 11.5, cursor: "pointer" }}>Decline</button>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Group Rhythm — admin breakdown */}
      <div style={{ padding: "0 24px 20px" }}>
        <div style={{ background: "var(--surface-2)", borderRadius: 12, padding: 20, border: "1px solid var(--border-soft)" }}>
          <Eyebrow accent>This week · Group Rhythm</Eyebrow>
          <div className="serif-i" style={{ fontSize: 18, lineHeight: 1.35, color: "var(--text)", marginTop: 8 }}>
            <span style={{ color: "var(--accent)" }}>11 of 14</span> members held their Rhythm this week.
          </div>
          <SageBar value={11} total={14} height={3}/>
          <div className="mono muted-2" style={{ fontSize: 9.5, letterSpacing: "0.12em", marginTop: 16, textTransform: "uppercase" }}>3 not yet at Rhythm</div>
          <div style={{ marginTop: 10 }}>
            {missingFromRhythm.map((m, i) => (
              <div key={i} style={{ padding: "10px 0", borderTop: "1px dotted var(--border)", display: "flex", gap: 12, alignItems: "center" }}>
                <MiniAvatar initials={m.i} size={28}/>
                <span style={{ fontSize: 12.5, flex: 1 }}>{m.n}</span>
                <span className="mono" style={{ fontSize: 10, color: "var(--text-3)", letterSpacing: "0.08em" }}>{m.missing}</span>
              </div>
            ))}
          </div>
          <div className="muted" style={{ fontSize: 11, lineHeight: 1.55, marginTop: 14, fontStyle: "italic" }}>
            Informational. The Convenor sees the pattern; the app does not nag the individual member.
          </div>
        </div>
      </div>

      {/* Health metrics with extra admin tiles */}
      <div style={{ padding: "0 24px 20px" }}>
        <Eyebrow>Health</Eyebrow>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, marginTop: 14 }}>
          {[
            ["312", "Total 1to1s", "+24"],
            ["184", "Group reach", "+9"],
            ["11/14", "Industry breadth", ""],
            ["0.84", "Cross-poll", "+0.06"],
            ["80%", "Quorum rule", "Tap to edit", true],
            ["+1/q", "Member growth", "Tap to edit", true],
          ].map(([n, l, d, tap], i) => (
            <div key={i} style={{ padding: 14, background: "var(--surface-2)", border: "1px solid " + (tap ? "var(--border)" : "var(--border-soft)"), borderRadius: 10, cursor: tap ? "pointer" : "default" }}>
              <div className="mono" style={{ fontSize: 19, fontWeight: 500 }}>{n}</div>
              <div className="mono" style={{ fontSize: 9.5, letterSpacing: "0.1em", color: "var(--text-3)", textTransform: "uppercase", marginTop: 4 }}>{l}</div>
              {d && <div className="mono" style={{ fontSize: 9, color: tap ? "var(--accent)" : "var(--accent)", marginTop: 6, letterSpacing: "0.08em" }}>{d}</div>}
            </div>
          ))}
        </div>
      </div>

      {/* Member management */}
      <div style={{ padding: "0 24px 16px" }}>
        <MSectionH>Member management</MSectionH>
        {G.members.slice(0,8).map((m, i) => (
          <div key={m.id} style={{ display: "flex", gap: 12, alignItems: "center", padding: "12px 0", borderBottom: i < 7 ? "1px dotted var(--border)" : "none", cursor: "pointer" }}>
            <MiniAvatar initials={m.initials} size={36} self={m.self}/>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 13, fontWeight: 500 }}>{m.name}{m.self && <span className="mono" style={{ fontSize: 9, color: "var(--accent)", letterSpacing: "0.14em", marginLeft: 6 }}>(YOU)</span>}</div>
              <div className="muted" style={{ fontSize: 11 }}>{m.role}</div>
            </div>
            <div style={{ textAlign: "right" }}>
              <div className="mono" style={{ fontSize: 11, fontWeight: 500 }}>{30 + m.id*2}</div>
              <div className="mono muted-2" style={{ fontSize: 9, letterSpacing: "0.1em", textTransform: "uppercase" }}>1to1s · {80 + (m.id%5)*4}%</div>
            </div>
            <span style={{ color: "var(--text-3)" }}>›</span>
          </div>
        ))}
        <div style={{ paddingTop: 12 }}>
          <span style={{ color: "var(--accent)", fontSize: 12, cursor: "pointer" }}>View all 14 →</span>
        </div>
      </div>

      <Perf margin="24px 24px"/>

      {/* Settings rail */}
      <div style={{ padding: "0 24px 32px" }}>
        <MSectionH>Settings</MSectionH>
        {[
          ["Group visibility", "Application required"],
          ["Industry exclusivity", "One per category"],
          ["Meeting cadence", "Fortnightly · Tuesdays"],
          ["Quorum rule", "80% attendance"],
          ["Power Teams", "Manage 2 teams"],
        ].map(([l, v], i, arr) => (
          <div key={i} style={{ padding: "14px 0", borderBottom: i < arr.length - 1 ? "1px solid var(--border-soft)" : "none", display: "flex", alignItems: "center", justifyContent: "space-between", cursor: "pointer" }}>
            <span style={{ fontSize: 13.5 }}>{l}</span>
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <span className="muted" style={{ fontSize: 12 }}>{v}</span>
              <span style={{ color: "var(--text-3)" }}>›</span>
            </div>
          </div>
        ))}
      </div>
    </MScreen>
  );
}

// ====================================================================
// A3a — Application review sheet
// ====================================================================
function ApplicationReviewSheet() {
  const { MScreen, MTopBar, Eyebrow, MStickyCTA, MiniAvatar, Perf, SagePill, SageBar } = window.M;
  return (
    <MScreen footer={
      <MStickyCTA>
        <div style={{ display: "flex", gap: 8 }}>
          <SagePill fullWidth>Approve</SagePill>
          <SagePill ghost>Decline</SagePill>
        </div>
        <div style={{ textAlign: "center", marginTop: 10 }}>
          <span style={{ color: "var(--accent)", fontSize: 12, cursor: "pointer" }}>Ask a question first</span>
        </div>
      </MStickyCTA>
    }>
      <MTopBar label="Application · Review" right={<button style={{ background: "transparent", border: "none", color: "var(--text-3)", fontSize: 18, cursor: "pointer", padding: "0 8px" }}>✕</button>}/>

      {/* Applicant header */}
      <div style={{ padding: "8px 24px 24px" }}>
        <div style={{ display: "flex", gap: 16, alignItems: "center" }}>
          <MiniAvatar initials="TR" size={64} accent/>
          <div>
            <h1 className="serif" style={{ fontSize: 26, lineHeight: 1.1, letterSpacing: "-0.015em", margin: 0 }}>Tomás <span className="serif-i" style={{ color: "var(--accent)" }}>Rivera.</span></h1>
            <div className="muted" style={{ fontSize: 13, marginTop: 6 }}>Tax advisor · Rivera Tax · Mermaid Beach</div>
          </div>
        </div>
      </div>

      {/* Approval rationale */}
      <div style={{ padding: "0 24px 24px" }}>
        <div style={{ background: "var(--accent-soft)", borderRadius: 12, padding: 18, border: "1px solid var(--accent)" }}>
          <Eyebrow accent>Approved by · James Whitford (member)</Eyebrow>
          <div className="serif-i" style={{ fontSize: 16, lineHeight: 1.5, color: "var(--text)", marginTop: 10 }}>
            "I've referred to Tomás for two years. He explains tax planning so SME owners actually do it. He fills our open seat in advisory."
          </div>
        </div>
      </div>

      <Perf margin="0 24px 8px"/>

      {/* Meet Sheet preview */}
      <div style={{ padding: "20px 24px 0" }}>
        <Eyebrow>Their Meet Sheet</Eyebrow>
      </div>

      <div style={{ padding: "16px 24px" }}>
        <div style={{ padding: 22, background: "var(--surface)", border: "1px solid var(--border)", borderRadius: 14 }}>
          <div className="mono" style={{ fontSize: 9, letterSpacing: "0.14em", color: "var(--text-3)" }}>MEET SHEET № 0312 · MERMAID BEACH QLD</div>
          <div className="serif" style={{ fontSize: 28, marginTop: 10, lineHeight: 1, letterSpacing: "-0.02em" }}>Tomás <span className="serif-i" style={{ color: "var(--accent)" }}>Rivera.</span></div>

          <div className="perf" style={{ margin: "20px 0" }}/>

          <Eyebrow>Now · 90-day focus</Eyebrow>
          <div className="serif-i" style={{ fontSize: 16, lineHeight: 1.45, marginTop: 8 }}>
            "Helping SME owners under $5M turnover restructure for the next stage — looking for solicitors and brokers who serve <span style={{ color: "var(--accent)" }}>commercial property buyers</span>."
          </div>

          <div className="perf" style={{ margin: "20px 0" }}/>

          <Eyebrow>Asks</Eyebrow>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginTop: 10 }}>
            {["Commercial solicitors", "Mortgage brokers · SME", "Bookkeepers · construction"].map((t, i) => (
              <span key={i} className="serif-i" style={{ padding: "6px 12px", borderRadius: 999, background: "var(--accent-soft)", color: "var(--accent)", fontSize: 12.5, border: "1px solid transparent" }}>{t}</span>
            ))}
          </div>

          <div className="perf" style={{ margin: "20px 0" }}/>

          <Eyebrow>Offers</Eyebrow>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginTop: 10 }}>
            {["Tax restructure", "ATO remediation", "Bookkeeping handoff"].map((t, i) => (
              <span key={i} style={{ padding: "6px 12px", borderRadius: 999, background: "var(--surface-2)", color: "var(--text-2)", fontSize: 12, border: "1px solid var(--border)" }}>{t}</span>
            ))}
          </div>

          <div className="perf" style={{ margin: "20px 0" }}/>

          <Eyebrow>Reputation · 8 months active</Eyebrow>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr", marginTop: 12 }}>
            {[["28","1to1s"],["24","Reach"],["7","Conn"],["4.7","Quality"]].map(([n,l], i) => (
              <div key={i} style={{ borderLeft: i>0 ? "1px solid var(--border)" : "none", padding: "0 8px", textAlign: "center" }}>
                <div className="mono" style={{ fontSize: 19, fontWeight: 500 }}>{n}</div>
                <div className="mono muted-2" style={{ fontSize: 9, letterSpacing: "0.1em", textTransform: "uppercase", marginTop: 4 }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div style={{ padding: "0 24px 32px" }}>
        <Eyebrow>Industry slot</Eyebrow>
        <div style={{ marginTop: 12, padding: 14, background: "var(--surface-2)", borderRadius: 10, border: "1px solid var(--border-soft)" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
            <span style={{ fontSize: 13.5 }}>Tax advisory</span>
            <span className="mono" style={{ fontSize: 11, color: "var(--accent)" }}>0 / 1 — open</span>
          </div>
          <div style={{ marginTop: 8 }}><SageBar value={0} total={1} height={3}/></div>
        </div>
      </div>
    </MScreen>
  );
}

window.GroupPublicMobile = GroupPublicMobile;
window.GroupMemberMobile = GroupMemberMobile;
window.GroupAdminMobile = GroupAdminMobile;
window.ApplicationReviewSheet = ApplicationReviewSheet;