/* eslint-disable */
// ─────────────────────────────────────────────────────────────
// searchgg · 클랜홈 메인 화면 (브랜드 컬러 고정)
// window.ClanHome  ·  의존: Nav, Panel, Icon, Emblem, ClanDB, 섹션들(window)
// ─────────────────────────────────────────────────────────────
function ClanHome({ clanName, onClose, onPick, onLogin, onCommunity }) {
  const clan = window.ClanDB(clanName);
  const t = '#48515f'; // 브랜드 포인트 컬러(올리브)

  const stat = (label, value, sub) => (
    <div style={{ flex: 1, textAlign: 'center', padding: '12px 6px', display: 'flex', flexDirection: 'column', justifyContent: 'center', minHeight: 60 }}>
      <div style={{ fontSize: 10.5, color: 'var(--t3)', fontWeight: 600, marginBottom: 5 }}>{label}</div>
      <div style={{ fontFamily: "'Chakra Petch',sans-serif", fontWeight: 700, fontSize: 15, color: 'var(--ink)', lineHeight: 1.1 }}>{value}</div>
      {sub && <div style={{ fontSize: 10, color: t, fontWeight: 700, fontFamily: "'Chakra Petch',sans-serif", marginTop: 3 }}>{sub}</div>}
    </div>
  );

  return (
    <div style={{ position: 'fixed', inset: 0, zIndex: 200, background: 'var(--bg2)', display: 'flex', flexDirection: 'column', animation: 'sgFade .22s ease' }}>
      <window.Nav active="클랜" onLogin={onLogin} onCommunity={onCommunity} />
      <div style={{ flex: 1, overflowY: 'auto' }}>
        {/* 히어로 배너 */}
        <div style={{ position: 'relative', background: '#1c1f24' }}>
          <image-slot id={`clan-banner-${clan.name}`} shape="rect" placeholder="클랜 대표 배너 이미지를 끌어다 놓으세요" style={{ display: 'block', width: '100%', height: 210, color: 'rgba(255,255,255,.78)' }}></image-slot>
          <div style={{ position: 'absolute', inset: 0, background: `linear-gradient(180deg, ${t}26 0%, rgba(20,22,26,.34) 46%, rgba(20,22,26,.9) 100%)`, pointerEvents: 'none' }} />
          <div style={{ position: 'absolute', top: 14, left: 0, right: 0, maxWidth: 1180, margin: '0 auto', padding: '0 28px', display: 'flex', justifyContent: 'flex-end', pointerEvents: 'none' }}>
            <button onClick={onClose} style={{ pointerEvents: 'auto', display: 'flex', alignItems: 'center', gap: 5, padding: '7px 13px', borderRadius: 6, border: 'none', background: 'rgba(0,0,0,.42)', color: '#fff', cursor: 'pointer', fontWeight: 600, fontSize: 12.5, fontFamily: "'Pretendard',sans-serif" }}>
              <Icon name="chevL" size={15} stroke="#fff" /> 닫기
            </button>
          </div>

          {/* 엠블럼 + 정체성 */}
          <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, maxWidth: 1180, margin: '0 auto', padding: '0 28px 20px', display: 'flex', alignItems: 'flex-end', gap: 20 }}>
            <div style={{ flexShrink: 0 }}><window.Emblem cfg={clan.emblem} size={104} /></div>
            <div style={{ flex: 1, minWidth: 0, paddingBottom: 4 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
                <h1 style={{ margin: 0, fontSize: 30, fontWeight: 800, color: '#fff', letterSpacing: '-.6px', textShadow: '0 2px 12px rgba(0,0,0,.4)' }}>{clan.name}</h1>
                {clan.isMine && <span style={{ padding: '3px 10px', borderRadius: 5, background: t, color: '#fff', fontWeight: 700, fontSize: 11.5 }}>내 클랜</span>}
              </div>
              <div style={{ marginTop: 7, fontSize: 14.5, color: 'rgba(255,255,255,.9)', fontWeight: 500, fontStyle: 'italic' }}>“{clan.slogan}”</div>
            </div>
            {!clan.isMine && (
              <div style={{ flexShrink: 0, paddingBottom: 4 }}>
                <button style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '10px 20px', borderRadius: 7, border: 'none', cursor: 'pointer', background: t, color: '#fff', fontWeight: 700, fontSize: 13.5, fontFamily: "'Pretendard',sans-serif", boxShadow: '0 3px 12px rgba(0,0,0,.25)' }}>
                  가입 신청
                </button>
              </div>
            )}
          </div>
        </div>

        {/* 스탯 스트립 */}
        <div style={{ background: '#fff', borderBottom: '1px solid var(--line2)' }}>
          <div style={{ maxWidth: 1180, margin: '0 auto', padding: '0 28px' }}>
            <div style={{ display: 'flex', alignItems: 'stretch' }}>
              {stat('클랜 랭킹', `${clan.rank}위`)}
              <span style={{ width: 1, background: 'var(--line)' }} />
              {stat('클랜원', `${clan.totalMembers}명`)}
              <span style={{ width: 1, background: 'var(--line)' }} />
              {stat('창설일', clan.founded)}
              <span style={{ width: 1, background: 'var(--line)' }} />
              {stat('클랜 경험치', `${window.SA.fmt(clan.expTotal)} EXP`, `▲ ${window.SA.fmt(clan.expWeek)} 이번 주`)}
            </div>
          </div>
        </div>

        {/* 본문 */}
        <div style={{ maxWidth: 1180, margin: '0 auto', padding: '22px 28px 44px' }}>
          {/* 소개 */}
          <div style={{ background: '#fff', border: '1px solid var(--line)', borderRadius: 6, padding: '16px 18px', marginBottom: 18, borderLeft: `4px solid ${t}` }}>
            <div style={{ fontSize: 11.5, fontWeight: 700, color: 'var(--t3)', marginBottom: 7 }}>클랜 소개</div>
            <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.65, color: '#3a4049' }}>{clan.intro}</p>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 322px', gap: 18, alignItems: 'start' }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 18, minWidth: 0 }}>
              <window.ClanNotices clan={clan} />
              <window.ClanFeed clan={clan} />
              <window.ClanGuestbook clan={clan} />
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
              <window.ClanSchedule clan={clan} />
              <window.ClanActivity clan={clan} />
              <window.ClanWeeklyMatches clan={clan} />
              <window.ClanMembers clan={clan} onPick={onPick} />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.ClanHome = ClanHome;