// idea-3-squads.jsx — "Study Squads"
// Squad of friends with a shared weekly XP goal, group chat, weak-topic radar.

const SQ_MEMBERS = [
  { name: 'kyleajames', tag: 'YOU',        charId: 'leaf',   xp: 480, you: true },
  { name: 'MitoMari',   tag: 'Yr 11 · 7A', charId: 'cell',   xp: 620 },
  { name: 'AldolAlex',  tag: 'Yr 11 · 7B', charId: 'beaker', xp: 540 },
  { name: 'ProtonPete', tag: 'Yr 11 · 7B', charId: 'atom',   xp: 290, flag: 'streak-at-risk' },
];

function StudySquads() {
  const totalXP = SQ_MEMBERS.reduce((a, b) => a + b.xp, 0);
  const goal = 2500;
  return (
    <div className="sq-wrap">
      {/* Left — squad + goal + radar */}
      <div className="sq-main">
        <div className="sq-head">
          <div>
            <h2 className="sq-name">
              <Icon name="users"/> The Mitochondriacs
            </h2>
            <div className="sq-meta">Riverside High · Biology · Year 11 · 8-week squad streak 🔥</div>
          </div>
          <button className="sq-invite"><Icon name="share"/> Invite friend</button>
        </div>

        {/* Roster */}
        <div className="sq-roster">
          {SQ_MEMBERS.map((m, i) => (
            <div key={i} className={`sq-member ${m.you ? 'you' : ''}`}>
              {m.flag && (
                <span className="sq-member-flag"><Icon name="flame"/> AT RISK</span>
              )}
              <div className="sq-member-av"><CharAv charId={m.charId} size={52}/></div>
              <div className="sq-member-name">{m.name}</div>
              <div className="sq-member-xp">{m.xp} XP this wk</div>
            </div>
          ))}
          <div className="sq-member sq-member-empty">
            <Icon name="users"/>
            Invite<br/>+1
          </div>
        </div>

        {/* Goal */}
        <div className="sq-goal">
          <div className="sq-goal-head">
            <div className="sq-goal-title"><Icon name="target" style={{ width: 14, height: 14, marginRight: 6, verticalAlign: 'middle' }}/> Weekly squad goal</div>
            <div className="sq-goal-num">{totalXP.toLocaleString()}<small> / {goal.toLocaleString()} XP</small></div>
          </div>
          <div className="sq-goal-bar">
            <i style={{ width: `${Math.min(100, totalXP/goal*100)}%` }}/>
          </div>
          <div className="sq-goal-sub">
            On track · 3 days left · Hit the goal → unlock <strong>Mitochondria Squad badge</strong> + 500 coins each
          </div>
        </div>

        {/* Squad weak-topic radar */}
        <div className="sq-radar">
          <h4>
            <span><Icon name="target" style={{ width: 12, height: 12, marginRight: 4, verticalAlign: '-1px' }}/> Squad weak-topic radar</span>
            <em>3 topics 4+ of you got wrong this week</em>
          </h4>

          <div className="sq-weak-row">
            <div className="sq-weak-topic">
              DNA replication — leading vs lagging strand
              <small>Mod 5 · 4 of you missed it this week</small>
            </div>
            <div className="sq-weak-avs">
              <CharAv charId="cell"   size={26}/>
              <CharAv charId="beaker" size={26}/>
              <CharAv charId="atom"   size={26}/>
              <CharAv charId="leaf"   size={26}/>
            </div>
            <button className="sq-weak-btn">TACKLE TOGETHER</button>
          </div>

          <div className="sq-weak-row">
            <div className="sq-weak-topic">
              Active vs passive transport
              <small>Mod 5 · 3 of you missed it</small>
            </div>
            <div className="sq-weak-avs">
              <CharAv charId="cell"  size={26}/>
              <CharAv charId="atom"  size={26}/>
              <CharAv charId="leaf"  size={26}/>
            </div>
            <button className="sq-weak-btn">TACKLE TOGETHER</button>
          </div>

          <div className="sq-weak-row">
            <div className="sq-weak-topic">
              Punnett square · dihybrid ratio
              <small>Mod 5 · 3 of you missed it</small>
            </div>
            <div className="sq-weak-avs">
              <CharAv charId="beaker" size={26}/>
              <CharAv charId="cell"   size={26}/>
              <CharAv charId="leaf"   size={26}/>
            </div>
            <button className="sq-weak-btn">TACKLE TOGETHER</button>
          </div>
        </div>
      </div>

      {/* Right — chat */}
      <div className="sq-chat">
        <div className="sq-chat-head">
          <Icon name="users"/> Squad chat <em>4 online</em>
        </div>
        <div className="sq-chat-body">
          <div className="sq-pinned">
            <strong><Icon name="bulb"/> PINNED · MITOMARI</strong>
            anyone get the Q14 dihydrid cross from 2024? — going through it now
          </div>

          <div className="sq-msg">
            <CharAv charId="beaker" size={30}/>
            <div className="sq-msg-bubble">
              <strong>AldolAlex · 2:14pm</strong>
              I had pyruvate going to the wrong place lol, fixed it now
            </div>
          </div>

          <div className="sq-msg me">
            <div className="sq-msg-bubble">
              <strong>You · 2:16pm</strong>
              same. the AI marker called me out on it 💀
            </div>
            <CharAv charId="leaf" size={30}/>
          </div>

          <div className="sq-msg">
            <CharAv charId="cell" size={30}/>
            <div className="sq-msg-bubble">
              <strong>MitoMari · 2:18pm</strong>
              squad sesh tonight 8pm? we need to crack DNA replication before Tuesday
            </div>
          </div>

          <div className="sq-msg">
            <CharAv charId="atom" size={30}/>
            <div className="sq-msg-bubble">
              <strong>ProtonPete · 2:21pm</strong>
              👍 in
            </div>
          </div>
        </div>
        <div className="sq-chat-input">
          <div className="sq-chat-field">Message your squad…</div>
          <button className="sq-chat-send"><Icon name="chevronR"/></button>
        </div>
      </div>
    </div>
  );
}

function Idea3() {
  return (
    <IdeaShell
      num="03"
      title="Study"
      titleEm="Squads"
      tagline={<><strong>HSC is lonely.</strong> Lock in a squad of up to 5 classmates, share a weekly XP goal, and get an automatic radar of topics where your squad is collectively weak — so you study what helps everyone.</>}
      pills={[
        { kind: 'rose',  icon: 'flame', label: 'Marketing · viral growth' },
        { kind: 'green', icon: 'users', label: 'Social study' },
      ]}
      stats={[
        { num: '×4',      label: 'Referral multiplier', sub: 'Every squad member must sign up — built-in K-factor without dollar incentives.' },
        { num: '+58%',    label: 'Weekly retention',    sub: 'Social streaks > solo streaks · students return so they don\'t let mates down.', dark: true },
      ]}
      pros={[
        'Weak-topic radar gives squads a <strong>reason to study together</strong>, not just chat — every screen has a CTA.',
        'School cohorts <strong>self-organise</strong> — one keen student brings 4 friends, who each bring 4 more.',
        'At-risk members get flagged so mates can nudge them — community-driven retention.',
        'Pinned help requests + bubble chat means students <strong>stop using DMs / group chats</strong> for HSC questions.',
      ]}
    >
      <StudySquads/>
    </IdeaShell>
  );
}

window.Idea3 = Idea3;