// Green Voice — 클럽하우스 (원본 _2 기반 재구현)
// 프로필 · Trust Index 원형 게이지 · Bento 활동 요약 · 리뷰 영향력 · 내 라운드 · 관심 골프장

function GVClubhouseScreen({ nav }) {
  const user = GV_USER;

  return (
    <div style={{ background: GV.color.surface, minHeight: '100%', paddingBottom: 100 }}>
      {/* Centered header */}
      <div style={{ padding: '24px 20px 6px', textAlign: 'center' }}>
        <h1 style={{
          fontFamily: GV.font.serif,
          fontSize: 26,
          fontWeight: 600,
          color: GV.color.forestPrimary,
          margin: 0,
          letterSpacing: '-0.015em',
        }}>클럽하우스</h1>
        <p style={{
          fontFamily: GV.font.sans,
          fontSize: 12.5,
          color: GV.color.outline,
          margin: '4px 0 0',
        }}>{nav.isPremium ? '프리미엄 멤버십 관리' : '내 활동과 라운드 관리'}</p>
      </div>

      {/* Profile */}
      <div style={{
        padding: '24px 20px 32px',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
      }}>
        <div style={{ position: 'relative', marginBottom: 16 }}>
          <div style={{
            width: 88,
            height: 88,
            borderRadius: 999,
            backgroundImage: `url(${user.avatar})`,
            backgroundSize: 'cover',
            backgroundPosition: 'center',
            border: `2px solid ${GV.color.borderSubtle}`,
            boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
          }} />
          <div style={{
            position: 'absolute',
            bottom: -6,
            right: -8,
            background: GV.color.surface,
            border: `1px solid ${GV.color.prestigeGold}`,
            borderRadius: 999,
            padding: '3px 9px',
            display: 'flex',
            alignItems: 'center',
            gap: 3,
            boxShadow: '0 2px 6px rgba(0,0,0,0.08)',
          }}>
            <Icon name="verified" size={13} color={GV.color.prestigeGold} />
            <span style={{
              fontFamily: GV.font.sans,
              fontSize: 9,
              fontWeight: 700,
              letterSpacing: '0.14em',
              color: GV.color.prestigeGold,
            }}>TRUSTED</span>
          </div>
        </div>
        <h2 style={{
          fontFamily: GV.font.serif,
          fontSize: 22,
          fontWeight: 600,
          color: GV.color.forestPrimary,
          margin: '0 0 14px',
          letterSpacing: '-0.015em',
        }}>{user.name}</h2>
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', justifyContent: 'center' }}>
          {[
            { icon: 'golf_course', label: '그린 감별사' },
            { icon: 'reviews', label: '서비스 품질 리뷰어' },
          ].map(t => (
            <span key={t.label} style={{
              background: GV.color.surface,
              border: `1px solid ${GV.color.borderSubtle}`,
              padding: '6px 12px',
              borderRadius: 999,
              fontFamily: GV.font.sans,
              fontSize: 10.5,
              fontWeight: 700,
              letterSpacing: '0.1em',
              color: GV.color.forestPrimary,
              display: 'inline-flex',
              alignItems: 'center',
              gap: 4,
            }}>
              <Icon name={t.icon} size={13} />
              {t.label}
            </span>
          ))}
        </div>
      </div>

      {/* Premium Membership Banner */}
      <div style={{ padding: '0 20px 20px' }}>
        {nav.isPremium ? (
          <div style={{
            background: GV.color.white,
            border: `1px solid ${GV.color.prestigeGold}`,
            borderRadius: 14,
            padding: 16,
            display: 'flex',
            alignItems: 'center',
            gap: 12,
            boxShadow: '0 4px 14px rgba(197,160,89,0.10)',
          }}>
            <div style={{
              width: 44, height: 44, borderRadius: 10,
              background: GV.color.forestDeep,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: GV.color.prestigeGold,
              flexShrink: 0,
            }}>
              <Icon name="workspace_premium" size={22} filled />
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{
                fontFamily: GV.font.sans,
                fontSize: 9.5,
                fontWeight: 800,
                letterSpacing: '0.16em',
                color: GV.color.prestigeGold,
                marginBottom: 2,
              }}>GREEN VOICE PREMIUM</div>
              <div style={{
                fontFamily: GV.font.serif,
                fontSize: 15,
                fontWeight: 600,
                color: GV.color.forestPrimary,
                letterSpacing: '-0.01em',
              }}>프리미엄 멤버 · 다음 결제 8/15</div>
            </div>
            <button
              onClick={() => nav.startConcierge()}
              style={{
                background: GV.color.forestDeep,
                color: GV.color.white,
                border: 'none',
                borderRadius: 999,
                padding: '8px 14px',
                fontFamily: GV.font.sans,
                fontSize: 12,
                fontWeight: 700,
                cursor: 'pointer',
                display: 'inline-flex',
                alignItems: 'center',
                gap: 4,
              }}
            >
              <Icon name="chat" size={13} filled color={GV.color.prestigeGold} />
              상담
            </button>
          </div>
        ) : (
          <div
            onClick={() => nav.startMembership()}
            style={{
              background: GV.color.forestDeep,
              borderRadius: 14,
              padding: 18,
              cursor: 'pointer',
              position: 'relative',
              overflow: 'hidden',
              boxShadow: '0 6px 20px rgba(26,67,46,0.18)',
            }}
          >
            <div style={{
              position: 'absolute',
              right: -24, top: -20,
              opacity: 0.14,
              color: GV.color.prestigeGold,
            }}>
              <Icon name="workspace_premium" size={120} filled />
            </div>
            <div style={{ position: 'relative' }}>
              <div style={{
                display: 'inline-flex',
                alignItems: 'center',
                gap: 4,
                padding: '3px 8px',
                borderRadius: 999,
                background: GV.color.prestigeGold,
                color: GV.color.forestDeep,
                fontFamily: GV.font.sans,
                fontSize: 9,
                fontWeight: 800,
                letterSpacing: '0.16em',
                marginBottom: 10,
              }}>GV PREMIUM</div>
              <div style={{
                fontFamily: GV.font.serif,
                fontSize: 18,
                fontWeight: 600,
                color: GV.color.white,
                letterSpacing: '-0.015em',
                lineHeight: 1.35,
                maxWidth: 250,
              }}>연부킹 컨시어지로 라운드 케어를 시작하세요</div>
              <div style={{
                marginTop: 12,
                display: 'flex',
                alignItems: 'center',
                gap: 6,
                fontFamily: GV.font.sans,
                fontSize: 12,
                fontWeight: 600,
                color: GV.color.prestigeGold,
              }}>
                <span>Premium 소개 보기</span>
                <Icon name="arrow_forward" size={14} color={GV.color.prestigeGold} />
              </div>
            </div>
          </div>
        )}
      </div>

      {/* Trust Index Card — dark, circular gauge */}
      <div style={{ padding: '0 20px' }}>
        <div style={{
          background: GV.color.forestDeep,
          borderRadius: 16,
          padding: 24,
          boxShadow: '0 6px 20px rgba(26,67,46,0.15)',
          border: '1px solid #2a5c41',
          position: 'relative',
          overflow: 'hidden',
        }}>
          {/* Ambient bg icon */}
          <div style={{
            position: 'absolute',
            right: -40,
            top: -40,
            opacity: 0.08,
            color: GV.color.prestigeGold,
          }}>
            <Icon name="workspace_premium" size={200} color={GV.color.prestigeGold} filled />
          </div>

          <div style={{ position: 'relative', textAlign: 'center' }}>
            <div style={{
              fontFamily: GV.font.sans,
              fontSize: 10,
              fontWeight: 700,
              letterSpacing: '0.22em',
              color: GV.color.primaryFixedDim,
              marginBottom: 20,
            }}>GREEN VOICE TRUST INDEX</div>

            {/* Circular gauge */}
            <div style={{ position: 'relative', width: 160, height: 160, margin: '0 auto 20px' }}>
              <svg width="160" height="160" viewBox="0 0 120 120" style={{ transform: 'rotate(-90deg)' }}>
                <circle cx="60" cy="60" r="54" fill="none" stroke="#2a5c41" strokeWidth="4" />
                <circle
                  cx="60" cy="60" r="54"
                  fill="none"
                  stroke={GV.color.prestigeGold}
                  strokeWidth="4"
                  strokeLinecap="round"
                  strokeDasharray="339.29"
                  strokeDashoffset={339.29 * (1 - user.trustIndex / 100)}
                />
              </svg>
              <div style={{
                position: 'absolute',
                inset: 0,
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center',
                justifyContent: 'center',
              }}>
                <div style={{
                  fontFamily: GV.font.sans,
                  fontSize: 10,
                  fontWeight: 700,
                  letterSpacing: '0.16em',
                  color: GV.color.outlineVariant,
                  marginBottom: 2,
                }}>SCORE</div>
                <div style={{
                  fontFamily: GV.font.serif,
                  fontSize: 48,
                  fontWeight: 700,
                  color: GV.color.prestigeGold,
                  lineHeight: 1,
                  letterSpacing: '-0.02em',
                }}>{user.trustIndex}</div>
                <div style={{
                  fontFamily: GV.font.sans,
                  fontSize: 10,
                  fontWeight: 700,
                  letterSpacing: '0.14em',
                  color: GV.color.primaryFixedDim,
                  marginTop: 4,
                }}>/ 100</div>
              </div>
            </div>

            <div style={{
              display: 'grid',
              gridTemplateColumns: '1fr 1fr 1fr',
              borderTop: '1px solid #2a5c41',
              paddingTop: 18,
              marginBottom: 18,
            }}>
              {[
                { label: '정확성', v: `${user.accuracy}%`, color: GV.color.white },
                { label: '영향력', v: `${user.influence}%`, color: GV.color.white },
                { label: '인증 신뢰도', v: 'L2+', color: GV.color.prestigeGold },
              ].map((m, i) => (
                <div key={m.label} style={{
                  borderRight: i < 2 ? '1px solid #2a5c41' : 'none',
                }}>
                  <div style={{
                    fontFamily: GV.font.sans,
                    fontSize: 10,
                    fontWeight: 700,
                    letterSpacing: '0.14em',
                    color: GV.color.primaryFixedDim,
                    marginBottom: 4,
                  }}>{m.label}</div>
                  <div style={{
                    fontFamily: GV.font.serif,
                    fontSize: 18,
                    fontWeight: 700,
                    color: m.color,
                  }}>{m.v}</div>
                </div>
              ))}
            </div>

            <div style={{
              background: '#133322',
              border: '1px solid #2a5c41',
              borderRadius: 8,
              padding: 14,
              textAlign: 'left',
            }}>
              <p style={{
                fontFamily: GV.font.sans,
                fontSize: 12.5,
                color: GV.color.primaryFixedDim,
                margin: 0,
                lineHeight: 1.55,
              }}>"귀하의 리뷰는 전국 <strong style={{ color: GV.color.prestigeGold, fontWeight: 600 }}>상위 0.5%</strong> 수준의 영향력을 가지고 있습니다."</p>
            </div>
          </div>
        </div>
      </div>

      {/* Activity Summary — Bento 2x2 */}
      <div style={{ padding: '32px 20px 0' }}>
        <h3 style={{
          fontFamily: GV.font.serif,
          fontSize: 17,
          fontWeight: 600,
          color: GV.color.forestPrimary,
          margin: '0 0 12px',
          letterSpacing: '-0.01em',
        }}>활동 요약</h3>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
          {[
            { icon: 'how_to_reg', label: '방문 인증', v: 24, unit: '회' },
            { icon: 'edit_document', label: '작성 리뷰', v: 18, unit: '개' },
            { icon: 'moving', label: '랭킹 반영', v: 16, unit: '건' },
            { icon: 'thumb_up', label: '도움됨', v: 156, unit: '회' },
          ].map(item => (
            <div key={item.label} style={{
              background: GV.color.surface,
              border: `1px solid ${GV.color.borderSubtle}`,
              borderRadius: 12,
              padding: 16,
              aspectRatio: '1',
              display: 'flex',
              flexDirection: 'column',
              justifyContent: 'space-between',
            }}>
              <Icon name={item.icon} size={22} color={GV.color.outline} />
              <div>
                <div style={{
                  fontFamily: GV.font.sans,
                  fontSize: 10,
                  fontWeight: 700,
                  letterSpacing: '0.14em',
                  color: GV.color.outline,
                  marginBottom: 4,
                }}>{item.label}</div>
                <div style={{
                  fontFamily: GV.font.serif,
                  fontSize: 24,
                  fontWeight: 600,
                  color: GV.color.forestPrimary,
                  letterSpacing: '-0.02em',
                }}>{item.v}<span style={{ fontSize: 13, fontWeight: 400, marginLeft: 2 }}>{item.unit}</span></div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Review Impact + Status */}
      <div style={{ padding: '24px 20px 0' }}>
        <h3 style={{
          fontFamily: GV.font.serif,
          fontSize: 17,
          fontWeight: 600,
          color: GV.color.forestPrimary,
          margin: '0 0 12px',
          letterSpacing: '-0.01em',
        }}>리뷰 영향력</h3>
        <Card>
          <div style={{ padding: 16 }}>
            <p style={{
              fontFamily: GV.font.sans,
              fontSize: 13,
              color: GV.color.onSurfaceVariant,
              margin: '0 0 14px',
              lineHeight: 1.55,
            }}>이번 달 회원님의 리뷰가 <strong style={{ color: GV.color.forestPrimary }}>3개</strong>의 골프장 랭킹 변동에 기여했습니다.</p>
            <button style={{
              width: '100%',
              background: GV.color.surfaceContainer,
              border: `1px solid ${GV.color.borderSubtle}`,
              color: GV.color.forestPrimary,
              borderRadius: 8,
              padding: '11px',
              fontFamily: GV.font.sans,
              fontSize: 11,
              fontWeight: 700,
              letterSpacing: '0.14em',
              cursor: 'pointer',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              gap: 6,
            }}>
              내 리뷰 영향력 보기
              <Icon name="arrow_forward" size={14} />
            </button>
          </div>
        </Card>
      </div>

      {/* Review Status Center */}
      <div style={{ padding: '20px 20px 0' }}>
        <h3 style={{
          fontFamily: GV.font.serif,
          fontSize: 17,
          fontWeight: 600,
          color: GV.color.forestPrimary,
          margin: '0 0 12px',
          letterSpacing: '-0.01em',
        }}>리뷰 상태 센터</h3>
        <Card>
          <div>
            {[
              { name: '나인브릿지 CC', badge: '반영 완료', bg: GV.color.primaryFixed, color: GV.color.forestPrimary },
              { name: '트리니티 클럽', badge: '수정 요청', bg: GV.color.secondaryContainer, color: GV.color.secondary },
              { name: '안양 CC', badge: '검토 중', bg: GV.color.surfaceContainer, color: GV.color.onSurfaceVariant },
            ].map((r, i, arr) => (
              <div key={r.name} style={{
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
                padding: '14px 16px',
                borderBottom: i === arr.length - 1 ? 'none' : `1px solid ${GV.color.borderSubtle}`,
              }}>
                <span style={{
                  fontFamily: GV.font.sans,
                  fontSize: 14,
                  fontWeight: 500,
                  color: GV.color.forestPrimary,
                }}>{r.name}</span>
                <span style={{
                  fontFamily: GV.font.sans,
                  fontSize: 10,
                  fontWeight: 700,
                  letterSpacing: '0.12em',
                  padding: '4px 10px',
                  borderRadius: 999,
                  background: r.bg,
                  color: r.color,
                  border: `1px solid ${r.color}22`,
                }}>{r.badge}</span>
              </div>
            ))}
          </div>
        </Card>
      </div>

      {/* My Rounds — 4-grid */}
      <div style={{ padding: '24px 20px 0' }}>
        <h3 style={{
          fontFamily: GV.font.serif,
          fontSize: 17,
          fontWeight: 600,
          color: GV.color.forestPrimary,
          margin: '0 0 12px',
          letterSpacing: '-0.01em',
        }}>내 라운드</h3>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 6 }}>
          {[
            { icon: 'event_upcoming', v: 2, label: '예정' },
            { icon: 'pending_actions', v: 1, label: '인증 대기' },
            { icon: 'rate_review', v: 3, label: '리뷰 대기', highlight: true },
            { icon: 'calendar_month', v: 0, label: '연부킹' },
          ].map(item => (
            <div
              key={item.label}
              onClick={() => nav.go('round')}
              style={{
                background: GV.color.surface,
                border: `1px solid ${GV.color.borderSubtle}`,
                borderRadius: 12,
                padding: '12px 8px',
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center',
                justifyContent: 'center',
                cursor: 'pointer',
                transition: 'background 0.15s',
              }}
              onMouseEnter={e => e.currentTarget.style.background = GV.color.surfaceContainer}
              onMouseLeave={e => e.currentTarget.style.background = GV.color.surface}
            >
              <Icon name={item.icon} size={18} color={GV.color.outline} style={{ marginBottom: 6 }} />
              <div style={{
                fontFamily: GV.font.serif,
                fontSize: 20,
                fontWeight: 700,
                color: item.highlight ? GV.color.prestigeGold : GV.color.forestPrimary,
                lineHeight: 1,
                marginBottom: 4,
              }}>{item.v}</div>
              <div style={{
                fontFamily: GV.font.sans,
                fontSize: 9.5,
                fontWeight: 700,
                letterSpacing: '0.1em',
                color: item.highlight ? GV.color.prestigeGold : GV.color.outline,
                textAlign: 'center',
              }}>{item.label}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Followed Courses */}
      <div style={{ padding: '24px 20px 0' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 12 }}>
          <h3 style={{
            fontFamily: GV.font.serif,
            fontSize: 17,
            fontWeight: 600,
            color: GV.color.forestPrimary,
            margin: 0,
            letterSpacing: '-0.01em',
          }}>관심 골프장</h3>
          <button
            onClick={() => nav.go('course')}
            style={{
              background: 'none',
              border: 'none',
              fontFamily: GV.font.sans,
              fontSize: 10,
              fontWeight: 700,
              letterSpacing: '0.14em',
              color: GV.color.outline,
              cursor: 'pointer',
            }}
          >전체 보기</button>
        </div>
        <div style={{ display: 'grid', gap: 10 }}>
          {[
            { id: 'trinity', name: '웰링턴 CC', region: '경기 이천', score: 96.5, delta: '그린 상태 +0.4', img: 'assets/img_11.jpg' },
            { id: 'jade', name: '제이드팰리스 GC', region: '강원 춘천', score: 94.2, delta: '진행 +0.6', img: 'assets/img_16.jpg' },
            { id: 'nine-bridges', name: '해슬리 나인브릿지', region: '제주 서귀포', score: 98.0, delta: '캐디 +0.3', img: 'assets/img_02.jpg' },
          ].map(c => (
            <Card key={c.id} onClick={() => nav.openCourse(c.id)}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: 12 }}>
                <div style={{
                  width: 52,
                  height: 52,
                  borderRadius: 8,
                  backgroundImage: `url(${c.img})`,
                  backgroundSize: 'cover',
                  backgroundPosition: 'center',
                  flexShrink: 0,
                }} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{
                    fontFamily: GV.font.sans,
                    fontSize: 14,
                    fontWeight: 700,
                    color: GV.color.forestPrimary,
                  }}>{c.name}</div>
                  <div style={{
                    fontFamily: GV.font.sans,
                    fontSize: 10,
                    fontWeight: 700,
                    letterSpacing: '0.12em',
                    color: GV.color.outline,
                    marginTop: 2,
                  }}>{c.region}</div>
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div style={{
                    fontFamily: GV.font.serif,
                    fontSize: 17,
                    fontWeight: 700,
                    color: GV.color.forestPrimary,
                  }}>{c.score}</div>
                  <div style={{
                    fontFamily: GV.font.sans,
                    fontSize: 10,
                    fontWeight: 500,
                    color: '#2a5c41',
                    marginTop: 1,
                    display: 'inline-flex',
                    alignItems: 'center',
                    gap: 2,
                  }}>
                    <Icon name="trending_up" size={11} color="#2a5c41" />
                    {c.delta}
                  </div>
                </div>
              </div>
            </Card>
          ))}
        </div>
      </div>

      {/* Settings footer */}
      <div style={{ padding: '24px 20px 0' }}>
        <Card>
          {[
            { icon: 'workspace_premium', label: nav.isPremium ? 'Green Voice Premium 관리' : 'Green Voice Premium 가입', v: nav.isPremium ? '활성' : '미가입', gold: true, onClick: () => nav.startMembership() },
            { icon: 'stars', label: '포인트 및 혜택 내역', v: '12,400 P', gold: true },
            { icon: 'notifications', label: '랭킹 알림 설정' },
            { icon: 'help', label: '고객센터' },
            { icon: 'settings', label: '설정' },
            { icon: 'logout', label: '로그아웃', danger: true },
          ].map((item, i, arr) => (
            <div key={item.icon}
              onClick={item.onClick}
              style={{
              display: 'flex',
              alignItems: 'center',
              gap: 12,
              padding: '13px 16px',
              borderBottom: i === arr.length - 1 ? 'none' : `1px solid ${GV.color.borderSubtle}`,
              cursor: 'pointer',
              color: item.danger ? GV.color.error : GV.color.onSurface,
            }}>
              <Icon name={item.icon} size={20} color={item.danger ? GV.color.error : GV.color.outline} />
              <div style={{
                flex: 1,
                fontFamily: GV.font.sans,
                fontSize: 14,
                fontWeight: 500,
              }}>{item.label}</div>
              {item.v && (
                <div style={{
                  fontFamily: GV.font.sans,
                  fontSize: 13,
                  fontWeight: 700,
                  color: item.gold ? GV.color.prestigeGold : GV.color.forestPrimary,
                }}>{item.v}</div>
              )}
              {!item.danger && !item.v && <Icon name="chevron_right" size={18} color={GV.color.outline} />}
            </div>
          ))}
        </Card>
      </div>

      <div style={{
        textAlign: 'center',
        marginTop: 20,
        fontFamily: GV.font.sans,
        fontSize: 9.5,
        color: GV.color.outline,
        letterSpacing: '0.14em',
      }}>GV SCORE v0.4.0 · GREEN VOICE PRESTIGE</div>
    </div>
  );
}

Object.assign(window, { GVClubhouseScreen });