// invite.jsx — Friend invite page + Body Check bonus already handled in academy/league
const { useState: useStateInv } = React;

function InviteFriends({ go, back }) {
  const [copied, setCopied] = useStateInv(false);
  const code = 'AVA-7K2P';
  const channels = [
    { id: 'kakao', label: '카카오톡', tone: T.amber, icon: 'chat' },
    { id: 'message', label: '메시지', tone: T.good, icon: 'bell' },
    { id: 'link', label: '링크 복사', tone: T.calm, icon: 'share' },
    { id: 'more', label: '더보기', tone: T.violet, icon: 'plus' },
  ];
  const pending = [
    { name: '수현', status: '가입 대기', day: '어제 초대' },
    { name: '太현', status: 'Quest 2회 완료', day: '함께 3일째', done: true },
  ];

  return (
    <Screen bg={T.surface}>
      <TopBar title="친구 초대" onBack={back}/>

      {/* hero — multi-hue */}
      <div style={{ borderRadius: 26, padding: '26px 22px', marginBottom: 18, textAlign: 'center', background: `linear-gradient(140deg, ${T.coral} 0%, ${T.violet} 100%)`, boxShadow: `0 10px 30px ${T.pink}33`, position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', top: 0, left: 0, width: 80, height: '100%', background: 'rgba(255,255,255,0.2)', animation: 'shine 5s ease-in-out infinite' }}/>
        <div style={{ position: 'relative' }}>
          <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 14 }}>
            <div style={{ display: 'flex' }}>
              <AvaOrb size={56}/>
              <div style={{ width: 56, height: 56, borderRadius: '50%', marginLeft: -14, background: 'rgba(255,255,255,0.3)', border: '3px solid rgba(255,255,255,0.6)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon name="plus" size={26} color="#fff" sw={2.6}/>
              </div>
            </div>
          </div>
          <div style={{ fontSize: 22, fontWeight: 800, color: '#fff', letterSpacing: -0.4, marginBottom: 6 }}>같이 하면 더 오래 가요</div>
          <div style={{ fontSize: 14.5, color: 'rgba(255,255,255,0.92)', fontWeight: 500, lineHeight: 1.5, maxWidth: 280, margin: '0 auto' }}>친구가 첫 Quest를 완료하면<br/>두 분 모두 <b>에너지 5개</b>를 받아요</div>
        </div>
      </div>

      {/* reward strip */}
      <div style={{ display: 'flex', gap: 10, marginBottom: 20 }}>
        {[['친구 초대', '+5', 'bolt', T.teal], ['둘 다 3일', '+50', 'flame', T.amberDark], ['스쿼드 합류', '+120', 'sparkle', T.coral]].map((r, i) => (
          <div key={i} style={{ flex: 1, background: T.bg, borderRadius: 18, padding: '14px 8px', textAlign: 'center', boxShadow: `0 3px 0 ${T.surface2}` }}>
            <div style={{ width: 34, height: 34, borderRadius: 11, background: r[3], margin: '0 auto 8px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <Icon name={r[2]} size={18} color="#fff" fill={r[2] === 'bolt' || r[2] === 'flame' ? '#fff' : 'none'} sw={r[2] === 'bolt' || r[2] === 'flame' ? 0 : 2}/>
            </div>
            <div style={{ fontSize: 17, fontWeight: 800, color: T.ink, lineHeight: 1 }}>{r[1]}</div>
            <div style={{ fontSize: 11, fontWeight: 700, color: T.ink3, marginTop: 3 }}>{r[0]}</div>
          </div>
        ))}
      </div>

      {/* invite code */}
      <div style={{ fontSize: 13, fontWeight: 800, color: T.ink3, letterSpacing: 0.5, margin: '0 2px 10px' }}>내 초대 코드</div>
      <button onClick={() => { setCopied(true); setTimeout(() => setCopied(false), 1600); }} style={{ width: '100%', display: 'flex', alignItems: 'center', gap: 12, background: T.bg, border: `2px dashed ${T.line2}`, borderRadius: 18, padding: '16px 18px', cursor: 'pointer', fontFamily: 'inherit', marginBottom: 18 }}>
        <span style={{ flex: 1, textAlign: 'left', fontSize: 22, fontWeight: 800, color: T.ink, letterSpacing: 2 }}>{code}</span>
        <span style={{ display: 'flex', alignItems: 'center', gap: 5, color: copied ? T.good : T.coralDark, fontSize: 14, fontWeight: 800 }}>
          <Icon name={copied ? 'check' : 'share'} size={17} color={copied ? T.good : T.coralDark} sw={2.2}/>{copied ? '복사됨' : '복사'}
        </span>
      </button>

      {/* channels */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 22 }}>
        {channels.map(ch => (
          <button key={ch.id} style={{ display: 'flex', alignItems: 'center', gap: 11, background: T.bg, border: 'none', borderRadius: 16, padding: '14px 16px', cursor: 'pointer', fontFamily: 'inherit', boxShadow: `0 3px 0 ${T.surface2}` }}>
            <div style={{ width: 36, height: 36, borderRadius: 11, background: ch.tone, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <Icon name={ch.icon} size={19} color="#fff" sw={2}/>
            </div>
            <span style={{ fontSize: 15, fontWeight: 800, color: T.ink, letterSpacing: -0.2 }}>{ch.label}</span>
          </button>
        ))}
      </div>

      {/* pending / joined */}
      <div style={{ fontSize: 13, fontWeight: 800, color: T.ink3, letterSpacing: 0.5, margin: '0 2px 10px' }}>초대한 친구</div>
      <Card pad={0} style={{ marginBottom: 14 }}>
        {pending.map((p, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '14px 16px', borderBottom: i < pending.length - 1 ? `0.5px solid ${T.line}` : 'none' }}>
            <div style={{ width: 40, height: 40, borderRadius: '50%', background: p.done ? `linear-gradient(135deg, ${T.teal}, ${T.calm})` : T.surface2, color: p.done ? '#fff' : T.ink3, display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 800, fontSize: 15, flexShrink: 0 }}>{p.name[0]}</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 15.5, fontWeight: 800, color: T.ink }}>{p.name}</div>
              <div style={{ fontSize: 13, color: p.done ? T.teal : T.ink3, fontWeight: 600 }}>{p.status}</div>
            </div>
            {p.done ? <span style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 13, fontWeight: 800, color: T.teal }}><Icon name="bolt" size={14} color={T.teal} fill={T.teal} sw={0}/>+5</span>
              : <span style={{ fontSize: 12.5, color: T.ink3, fontWeight: 600 }}>{p.day}</span>}
          </div>
        ))}
      </Card>
      <div style={{ height: 12 }}/>
    </Screen>
  );
}

Object.assign(window, { InviteFriends });