// Green Voice — Home screen (원본 gv/code.html 기반 재구현)

function GVHomeScreen({ nav }) {
  const hero = (GV_COURSES || []).find(c => c.id === 'nine-bridges') || (GV_COURSES && GV_COURSES[0]); // 해슬리 나인브릿지
  const rec = (GV_COURSES || []).find(c => c.id === 'labievelle') || (GV_COURSES && GV_COURSES[1]); // 라비에벨 CC 올드코스

  if (!hero || !rec) {
    return <div style={{ padding: 40, textAlign: 'center', color: GV.color.outline, fontFamily: GV.font.sans }}>Loading...</div>;
  }

  return (
    <div style={{
      background: GV.color.surface,
      minHeight: '100%',
      paddingBottom: 100,
    }}>
      {/* Header */}
      <div style={{ padding: '20px 20px 4px' }}>
        <h2 style={{
          fontFamily: GV.font.serif,
          fontSize: 24,
          fontWeight: 600,
          color: GV.color.forestPrimary,
          margin: 0,
          letterSpacing: '-0.015em',
          lineHeight: 1.25,
        }}>오늘의 믿을 수 있는<br/>라운드 브리프</h2>
        <p style={{
          fontFamily: GV.font.sans,
          fontSize: 13,
          color: GV.color.onSurfaceVariant,
          margin: '6px 0 0',
        }}>방문 인증 리뷰와 GV Score로 오늘의 컨디션을 확인하세요.</p>
      </div>

      {/* Hero Card — image-based with score badge in gold ring */}
      <div style={{ padding: '20px 20px 0' }}>
        <Card onClick={() => nav.openCourse(hero.id)}>
          <ImageBox src={hero.heroImage} alt={hero.name} height={200}>
            {/* Gradient overlay */}
            <div style={{
              position: 'absolute',
              inset: 0,
              background: `linear-gradient(to top, ${GV.color.forestPrimary}cc 0%, transparent 55%)`,
            }} />
            {/* Score badge (gold-bordered circle) */}
            <div style={{
              position: 'absolute',
              top: 16,
              right: 16,
              width: 64,
              height: 64,
              borderRadius: 999,
              background: GV.color.forestDeep,
              color: GV.color.prestigeGold,
              border: `2px solid ${GV.color.prestigeGold}66`,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              fontFamily: GV.font.serif,
              fontSize: 24,
              fontWeight: 700,
              boxShadow: '0 4px 16px rgba(0,0,0,0.2)',
              letterSpacing: '-0.02em',
            }}>{hero.score}</div>
            {/* Bottom title area */}
            <div style={{
              position: 'absolute',
              left: 16,
              right: 96,
              bottom: 14,
            }}>
              <div style={{
                display: 'inline-flex',
                alignItems: 'center',
                gap: 4,
                padding: '3px 8px',
                borderRadius: 999,
                border: `1px solid ${GV.color.prestigeGold}`,
                background: 'rgba(26,67,46,0.5)',
                backdropFilter: 'blur(6px)',
                color: GV.color.prestigeGold,
                marginBottom: 6,
              }}>
                <Icon name="check" size={10} color={GV.color.prestigeGold} />
                <span style={{
                  fontFamily: GV.font.sans,
                  fontSize: 9.5,
                  fontWeight: 700,
                  letterSpacing: '0.14em',
                }}>VISIT-VERIFIED</span>
              </div>
              <h3 style={{
                fontFamily: GV.font.serif,
                fontSize: 19,
                fontWeight: 600,
                color: GV.color.white,
                margin: 0,
                letterSpacing: '-0.01em',
                textShadow: '0 2px 8px rgba(0,0,0,0.35)',
              }}>{hero.name}</h3>
            </div>
          </ImageBox>
          <div style={{ padding: 18 }}>
            <p style={{
              fontFamily: GV.font.sans,
              fontSize: 14,
              color: GV.color.onSurface,
              margin: 0,
              lineHeight: 1.55,
            }}>"최근 7일 그린 상태 최상 유지 · 진행 지연 낮음 · 캐디 서비스 품질 안정"</p>
            <div style={{
              marginTop: 14,
              paddingTop: 14,
              borderTop: `1px solid ${GV.color.borderSubtle}`,
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'center',
            }}>
              <span style={{
                fontFamily: GV.font.sans,
                fontSize: 10,
                fontWeight: 700,
                letterSpacing: '0.14em',
                color: GV.color.outline,
              }}>GV SCORE DETAIL</span>
              <button style={{
                background: 'none',
                border: 'none',
                padding: 0,
                display: 'flex',
                alignItems: 'center',
                gap: 2,
                fontFamily: GV.font.sans,
                fontSize: 13,
                fontWeight: 600,
                color: GV.color.forestPrimary,
                cursor: 'pointer',
              }}
                onClick={(e) => { e.stopPropagation(); nav.go('ranking'); }}
              >
                랭킹 근거 보기
                <Icon name="chevron_right" size={14} />
              </button>
            </div>
          </div>
        </Card>
      </div>

      {/* Rising Quality — horizontal scroll */}
      <div style={{ marginTop: 30 }}>
        <div style={{ padding: '0 20px 12px' }}>
          <h3 style={{
            display: 'inline-block',
            fontFamily: GV.font.serif,
            fontSize: 17,
            fontWeight: 600,
            color: GV.color.forestPrimary,
            margin: 0,
            borderBottom: `2px solid ${GV.color.forestPrimary}`,
            paddingBottom: 4,
            letterSpacing: '-0.01em',
          }}>서비스 품질 급상승</h3>
        </div>
        <div
          className="gv-hscroll"
          style={{
            display: 'flex',
            gap: 12,
            overflowX: 'auto',
            padding: '0 20px 4px',
            scrollSnapType: 'x mandatory',
          }}
        >
          {[
            { name: '트리니티 클럽', axis: '캐디 서비스 품질', delta: '+1.2', score: 9.6, id: 'trinity' },
            { name: '제이드팰리스', axis: '진행 품질', delta: '+0.8', score: 9.4, id: 'jade' },
            { name: '남부 CC', axis: '그린 스피드', delta: '+0.6', score: 9.0, id: 'namyang' },
          ].map(m => (
            <Card
              key={m.id}
              onClick={() => nav.openCourse(m.id)}
              style={{ minWidth: 240, scrollSnapAlign: 'start', flexShrink: 0 }}
            >
              <div style={{ padding: 14 }}>
                <h4 style={{
                  fontFamily: GV.font.serif,
                  fontSize: 15,
                  fontWeight: 600,
                  color: GV.color.forestPrimary,
                  margin: 0,
                }}>{m.name}</h4>
                <div style={{
                  marginTop: 12,
                  display: 'flex',
                  justifyContent: 'space-between',
                  alignItems: 'center',
                }}>
                  <div style={{
                    display: 'inline-flex',
                    alignItems: 'center',
                    gap: 3,
                    background: 'rgba(192,237,207,0.35)',
                    padding: '4px 8px',
                    borderRadius: 4,
                    color: GV.color.forestDeep,
                  }}>
                    <Icon name="trending_up" size={13} color={GV.color.forestDeep} />
                    <span style={{
                      fontFamily: GV.font.sans,
                      fontSize: 10.5,
                      fontWeight: 700,
                      letterSpacing: '0.05em',
                    }}>{m.axis} {m.delta}</span>
                  </div>
                  <div style={{ textAlign: 'right' }}>
                    <div style={{
                      fontFamily: GV.font.sans,
                      fontSize: 9,
                      fontWeight: 700,
                      letterSpacing: '0.12em',
                      color: GV.color.outline,
                    }}>GV SCORE</div>
                    <div style={{
                      fontFamily: GV.font.serif,
                      fontSize: 18,
                      fontWeight: 700,
                      color: GV.color.forestPrimary,
                      lineHeight: 1,
                      marginTop: 1,
                    }}>{m.score}</div>
                  </div>
                </div>
              </div>
            </Card>
          ))}
        </div>
      </div>

      {/* Today's recommended round */}
      <div style={{ marginTop: 30, padding: '0 20px' }}>
        <h3 style={{
          fontFamily: GV.font.serif,
          fontSize: 17,
          fontWeight: 600,
          color: GV.color.forestPrimary,
          margin: 0,
          letterSpacing: '-0.01em',
        }}>오늘의 추천 라운드</h3>
        <p style={{
          fontFamily: GV.font.sans,
          fontSize: 12.5,
          color: GV.color.onSurfaceVariant,
          margin: '4px 0 12px',
          lineHeight: 1.45,
        }}>방문 인증 리뷰와 GV Score를 기준으로 컨디션이 안정적인 골프장을 추천합니다.</p>

        <div style={{
          background: GV.color.surfaceCream,
          border: `1px solid ${GV.color.borderSubtle}`,
          borderRadius: 12,
          padding: 18,
          boxShadow: '0 4px 12px rgba(26,67,46,0.02)',
        }}>
          <div style={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'flex-start',
            marginBottom: 16,
          }}>
            <div style={{ flex: 1, minWidth: 0 }}>
              <h3 style={{
                fontFamily: GV.font.serif,
                fontSize: 17,
                fontWeight: 600,
                color: GV.color.forestPrimary,
                margin: 0,
                letterSpacing: '-0.01em',
              }}>{rec.name}</h3>
              <div style={{
                marginTop: 4,
                fontFamily: GV.font.sans,
                fontSize: 10,
                fontWeight: 700,
                letterSpacing: '0.12em',
                color: GV.color.outline,
                display: 'inline-flex',
                alignItems: 'center',
                gap: 4,
              }}>
                TRUST INDEX <span style={{ color: GV.color.forestPrimary, fontWeight: 700 }}>{rec.trustIndex || 98}%</span>
              </div>
            </div>
            <div style={{
              width: 48,
              height: 48,
              borderRadius: 999,
              background: GV.color.forestDeep,
              color: GV.color.prestigeGold,
              border: `1px solid rgba(197,160,89,0.3)`,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              fontFamily: GV.font.serif,
              fontSize: 18,
              fontWeight: 700,
              letterSpacing: '-0.02em',
            }}>{rec.score}</div>
          </div>

          {/* 2x2 grid */}
          <div style={{
            display: 'grid',
            gridTemplateColumns: '1fr 1fr',
            gap: 12,
            padding: '14px 0',
            borderTop: `1px solid ${GV.color.borderSubtle}`,
            borderBottom: `1px solid ${GV.color.borderSubtle}`,
            marginBottom: 14,
          }}>
            {[
              { label: 'GREEN STABILITY', v: '최상' },
              { label: 'PACE', v: '매우 쾌적' },
              { label: 'SERVICE', v: '안정' },
              { label: 'REVIEW COUNT', v: '48' },
            ].map(m => (
              <div key={m.label}>
                <div style={{
                  fontFamily: GV.font.sans,
                  fontSize: 9.5,
                  fontWeight: 700,
                  letterSpacing: '0.12em',
                  color: GV.color.outline,
                  marginBottom: 2,
                }}>{m.label}</div>
                <div style={{
                  fontFamily: GV.font.serif,
                  fontSize: 14,
                  fontWeight: 600,
                  color: GV.color.forestPrimary,
                }}>{m.v}</div>
              </div>
            ))}
          </div>

          <p style={{
            fontFamily: GV.font.sans,
            fontSize: 13,
            color: GV.color.onSurface,
            margin: '0 0 14px',
            lineHeight: 1.55,
          }}>"이번 주 그린 상태와 진행 품질이 안정적으로 유지되고 있습니다."</p>

          <button
            onClick={() => nav.openCourse(rec.id)}
            style={{
              width: '100%',
              background: GV.color.forestPrimary,
              color: GV.color.white,
              border: 'none',
              borderRadius: 8,
              padding: '12px',
              fontFamily: GV.font.sans,
              fontSize: 14,
              fontWeight: 600,
              cursor: 'pointer',
              marginBottom: 8,
            }}
          >라운드 조건 보기</button>
          <button
            onClick={() => nav.startAnnualBooking(rec.id)}
            style={{
              width: '100%',
              background: 'none',
              color: GV.color.onSurfaceVariant,
              border: 'none',
              padding: '8px',
              fontFamily: GV.font.sans,
              fontSize: 12,
              fontWeight: 500,
              cursor: 'pointer',
              display: 'inline-flex',
              alignItems: 'center',
              justifyContent: 'center',
              gap: 6,
            }}
          >
            <Icon name="workspace_premium" size={13} color={GV.color.prestigeGold} filled />
            <span style={{ textDecoration: 'underline', textUnderlineOffset: 3 }}>연부킹 문의 (Premium)</span>
          </button>
        </div>
      </div>

      {/* Live Verified Reviews */}
      <div style={{ marginTop: 30, padding: '0 20px' }}>
        <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 style={{
            background: 'none',
            border: 'none',
            padding: 0,
            display: 'flex',
            alignItems: 'center',
            gap: 2,
            fontFamily: GV.font.sans,
            fontSize: 10,
            fontWeight: 700,
            letterSpacing: '0.14em',
            color: GV.color.outline,
            cursor: 'pointer',
          }}>
            전체보기
            <Icon name="arrow_forward" size={12} />
          </button>
        </div>

        <Card>
          <div style={{ padding: 16 }}>
            <div style={{
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'flex-start',
              marginBottom: 12,
            }}>
              <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
                <div style={{
                  width: 32,
                  height: 32,
                  borderRadius: 999,
                  background: GV.color.surfaceContainer,
                  color: GV.color.forestPrimary,
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  fontFamily: GV.font.sans,
                  fontSize: 13,
                  fontWeight: 700,
                }}>P</div>
                <div>
                  <div style={{
                    fontFamily: GV.font.sans,
                    fontSize: 13,
                    fontWeight: 600,
                    color: GV.color.onSurface,
                  }}>Park***</div>
                  <div style={{
                    fontFamily: GV.font.sans,
                    fontSize: 10,
                    fontWeight: 700,
                    letterSpacing: '0.1em',
                    color: GV.color.outline,
                  }}>2시간 전</div>
                </div>
              </div>
              <div style={{
                display: 'inline-flex',
                alignItems: 'center',
                gap: 4,
                padding: '3px 8px',
                borderRadius: 999,
                border: `1px solid ${GV.color.prestigeGold}`,
                background: GV.color.surfaceCream,
                color: GV.color.prestigeGold,
              }}>
                <Icon name="check" size={10} color={GV.color.prestigeGold} />
                <span style={{
                  fontFamily: GV.font.sans,
                  fontSize: 9,
                  fontWeight: 700,
                  letterSpacing: '0.12em',
                }}>VISIT-VERIFIED</span>
              </div>
            </div>
            <h4 style={{
              fontFamily: GV.font.serif,
              fontSize: 16,
              fontWeight: 600,
              color: GV.color.forestPrimary,
              margin: '0 0 6px',
            }}>안양 CC</h4>
            <p style={{
              fontFamily: GV.font.sans,
              fontSize: 13,
              color: GV.color.onSurface,
              margin: '0 0 12px',
              lineHeight: 1.5,
            }}>그린 스피드 3.1 이상 유지됨. 디봇 관리 상태 훌륭하며 캐디 진행 매끄러웠습니다.</p>
            <div style={{ display: 'flex', gap: 6 }}>
              {['assets/img_23.jpg', 'assets/img_07.jpg', 'assets/img_04.jpg'].map((src, i) => (
                <div key={i} style={{
                  width: 64,
                  height: 64,
                  borderRadius: 6,
                  border: `1px solid ${GV.color.borderSubtle}`,
                  backgroundImage: `url(${src})`,
                  backgroundSize: 'cover',
                  backgroundPosition: 'center',
                  position: 'relative',
                }}>
                  {i === 2 && (
                    <div style={{
                      position: 'absolute',
                      inset: 0,
                      background: 'rgba(26,67,46,0.4)',
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      color: GV.color.white,
                      fontFamily: GV.font.serif,
                      fontSize: 12,
                      fontWeight: 700,
                      borderRadius: 6,
                    }}>+1</div>
                  )}
                </div>
              ))}
            </div>
          </div>
        </Card>
      </div>

      {/* Bottom CTA (in-flow, not sticky) */}
      <div style={{ padding: '24px 20px 0' }}>
        <button
          onClick={() => nav.startVerify()}
          style={{
            width: '100%',
            background: GV.color.forestPrimary,
            color: GV.color.white,
            border: 'none',
            borderRadius: 12,
            padding: '16px',
            fontFamily: GV.font.sans,
            fontSize: 15,
            fontWeight: 600,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            gap: 8,
            boxShadow: '0 4px 12px rgba(26,67,46,0.15)',
            cursor: 'pointer',
          }}
        >
          <Icon name="photo_camera" size={20} color={GV.color.prestigeGold} />
          <span>방문 인증하고 리뷰 남기기</span>
        </button>
      </div>
    </div>
  );
}

Object.assign(window, { GVHomeScreen });