// Green Voice — Course Detail screen (modal)

function GVCourseDetail({ courseId, nav }) {
  const c = GV_COURSES.find(x => x.id === courseId) || GV_COURSES[0];
  const [followed, setFollowed] = React.useState(false);
  const [tab, setTab] = React.useState('overview');

  return (
    <div style={{ background: GV.color.surface, minHeight: '100%', paddingBottom: 100 }}>
      {/* Hero image with overlay */}
      <div style={{ position: 'relative' }}>
        <ImageBox src={c.heroImage} alt={c.name} height={280}>
          <div style={{
            position: 'absolute',
            inset: 0,
            background: 'linear-gradient(to top, rgba(26,67,46,0.65) 0%, rgba(0,0,0,0.15) 40%, rgba(0,0,0,0.35) 100%)',
          }} />
          {/* Top bar overlay */}
          <div style={{
            position: 'absolute',
            top: 0,
            left: 0,
            right: 0,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            padding: '12px 12px',
          }}>
            <button
              onClick={nav.back}
              style={{
                background: 'rgba(255,255,255,0.9)',
                border: 'none',
                width: 40, height: 40,
                borderRadius: 999,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                cursor: 'pointer',
                color: GV.color.forestDeep,
              }}
            >
              <Icon name="arrow_back" size={22} />
            </button>
            <div style={{ display: 'flex', gap: 8 }}>
              <button
                onClick={() => setFollowed(!followed)}
                style={{
                  background: 'rgba(255,255,255,0.9)',
                  border: 'none',
                  width: 40, height: 40,
                  borderRadius: 999,
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  cursor: 'pointer',
                  color: followed ? '#d4453a' : GV.color.forestDeep,
                }}
              >
                <Icon name="favorite" size={20} filled={followed} />
              </button>
              <button
                style={{
                  background: 'rgba(255,255,255,0.9)',
                  border: 'none',
                  width: 40, height: 40,
                  borderRadius: 999,
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  cursor: 'pointer',
                  color: GV.color.forestDeep,
                }}
              >
                <Icon name="share" size={20} />
              </button>
            </div>
          </div>
          {/* Verified badge */}
          <VerifiedBadge style={{ position: 'absolute', bottom: 16, left: 16 }} />
        </ImageBox>
      </div>

      {/* Summary card, floating over image */}
      <div style={{ padding: '0 16px', marginTop: -40, position: 'relative' }}>
        <Card>
          <div style={{ padding: 18 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 }}>
              <div style={{ flex: 1, minWidth: 0 }}>
                <h2 style={{
                  fontFamily: GV.font.serif,
                  fontSize: 22,
                  fontWeight: 600,
                  color: GV.color.forestDeep,
                  margin: 0,
                  letterSpacing: '-0.015em',
                }}>{c.name}</h2>
                <div style={{
                  display: 'flex',
                  alignItems: 'center',
                  gap: 4,
                  fontFamily: GV.font.sans,
                  fontSize: 12,
                  color: GV.color.outline,
                  marginTop: 4,
                }}>
                  <Icon name="location_on" size={14} />
                  {c.region}
                </div>
              </div>
              <GVScoreBadge score={c.score} size="md" />
            </div>

            <div style={{
              marginTop: 14,
              padding: '10px 12px',
              background: GV.color.surfaceContainerLow,
              borderRadius: 8,
              borderLeft: `3px solid ${GV.color.prestigeGold}`,
            }}>
              <div style={{
                fontFamily: GV.font.sans,
                fontSize: 10,
                fontWeight: 700,
                letterSpacing: '0.14em',
                color: GV.color.secondary,
                marginBottom: 3,
              }}>TODAY'S SUMMARY</div>
              <div style={{
                fontFamily: GV.font.sans,
                fontSize: 13,
                color: GV.color.charcoal,
                lineHeight: 1.5,
              }}>{c.summary}</div>
            </div>

            <div style={{
              display: 'flex',
              gap: 12,
              marginTop: 14,
              fontFamily: GV.font.sans,
              fontSize: 12,
              color: GV.color.outline,
            }}>
              <span><Icon name="rate_review" size={13} style={{ verticalAlign: -2 }} /> 방문 인증 {c.reviewCount.toLocaleString()}건</span>
              <span><Icon name="payments" size={13} style={{ verticalAlign: -2 }} /> {c.priceRange}</span>
            </div>
          </div>
        </Card>
      </div>

      {/* Sub tabs */}
      <div style={{
        display: 'flex',
        gap: 20,
        padding: '20px 20px 0',
        borderBottom: `1px solid ${GV.color.borderSubtle}`,
        marginTop: 8,
      }}>
        {[
          { id: 'overview', label: '요약' },
          { id: 'pillars', label: '품질 축' },
          { id: 'reviews', label: '리뷰' },
        ].map(t => (
          <button
            key={t.id}
            onClick={() => setTab(t.id)}
            style={{
              background: 'none',
              border: 'none',
              padding: '10px 0',
              fontFamily: GV.font.sans,
              fontSize: 14,
              fontWeight: tab === t.id ? 700 : 500,
              color: tab === t.id ? GV.color.forestDeep : GV.color.outline,
              cursor: 'pointer',
              position: 'relative',
              borderBottom: tab === t.id ? `2px solid ${GV.color.forestDeep}` : '2px solid transparent',
              marginBottom: -1,
            }}
          >{t.label}</button>
        ))}
      </div>

      {tab === 'overview' && <OverviewTab course={c} />}
      {tab === 'pillars' && <PillarsTab course={c} />}
      {tab === 'reviews' && <ReviewsTab course={c} />}

      {/* Booking Options Sheet — 일반 예약 vs 연부킹(프리미엄 컨시어지) */}
      <div style={{ padding: '28px 20px 0' }}>
        <div style={{
          fontFamily: GV.font.sans,
          fontSize: 10,
          fontWeight: 700,
          letterSpacing: '0.16em',
          color: GV.color.outline,
          marginBottom: 10,
        }}>BOOKING OPTIONS</div>

        <div style={{ display: 'grid', gap: 10 }}>
          {/* Option 1: 일반 예약 */}
          <button
            onClick={() => nav.startBooking(c.id)}
            style={{
              textAlign: 'left',
              background: GV.color.white,
              border: `1px solid ${GV.color.borderSubtle}`,
              borderRadius: 12,
              padding: 16,
              display: 'flex',
              alignItems: 'center',
              gap: 12,
              cursor: 'pointer',
              transition: 'border-color 0.15s, box-shadow 0.15s',
            }}
            onMouseEnter={e => { e.currentTarget.style.borderColor = GV.color.forestDeep; e.currentTarget.style.boxShadow = '0 4px 12px rgba(26,67,46,0.06)'; }}
            onMouseLeave={e => { e.currentTarget.style.borderColor = GV.color.borderSubtle; e.currentTarget.style.boxShadow = 'none'; }}
          >
            <div style={{
              width: 40, height: 40, borderRadius: 10,
              background: GV.color.primaryFixed,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: GV.color.forestDeep,
              flexShrink: 0,
            }}>
              <Icon name="event_available" size={20} />
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{
                fontFamily: GV.font.serif,
                fontSize: 15,
                fontWeight: 600,
                color: GV.color.forestPrimary,
                letterSpacing: '-0.01em',
              }}>일반 예약</div>
              <div style={{
                fontFamily: GV.font.sans,
                fontSize: 12,
                color: GV.color.onSurfaceVariant,
                marginTop: 2,
                lineHeight: 1.45,
              }}>공지된 티타임을 폼으로 신청합니다. 확정 여부는 골프장 정책에 따릅니다.</div>
            </div>
            <Icon name="chevron_right" size={20} color={GV.color.outline} />
          </button>

          {/* Option 2: 연부킹 (프리미엄) */}
          <button
            onClick={() => nav.startAnnualBooking(c.id)}
            style={{
              textAlign: 'left',
              background: GV.color.forestDeep,
              border: `1px solid ${GV.color.forestDeep}`,
              borderRadius: 12,
              padding: 16,
              display: 'flex',
              alignItems: 'center',
              gap: 12,
              cursor: 'pointer',
              position: 'relative',
              overflow: 'hidden',
            }}
          >
            <div style={{
              width: 40, height: 40, borderRadius: 10,
              background: 'rgba(197,160,89,0.20)',
              border: `1px solid ${GV.color.prestigeGold}66`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: GV.color.prestigeGold,
              flexShrink: 0,
            }}>
              <Icon name="workspace_premium" size={20} filled />
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{
                display: 'flex',
                alignItems: 'center',
                gap: 6,
                marginBottom: 2,
              }}>
                <div style={{
                  fontFamily: GV.font.serif,
                  fontSize: 15,
                  fontWeight: 600,
                  color: GV.color.white,
                  letterSpacing: '-0.01em',
                }}>연부킹 문의</div>
                <span style={{
                  fontFamily: GV.font.sans,
                  fontSize: 8.5,
                  fontWeight: 800,
                  letterSpacing: '0.16em',
                  color: GV.color.forestDeep,
                  background: GV.color.prestigeGold,
                  padding: '2px 6px',
                  borderRadius: 999,
                }}>PREMIUM</span>
              </div>
              <div style={{
                fontFamily: GV.font.sans,
                fontSize: 12,
                color: GV.color.primaryFixedDim,
                lineHeight: 1.45,
              }}>{nav.isPremium
                ? '전담 컨시어지와 실시간 채팅으로 조건 조율'
                : '프리미엄 멤버십 가입 시 컨시어지가 대신 처리'}</div>
            </div>
            <Icon name="chevron_right" size={20} color={GV.color.prestigeGold} />
          </button>
        </div>
      </div>

      {/* Bottom review CTA */}
      <div style={{ padding: '24px 20px 0' }}>
        <button
          onClick={nav.startVerify}
          style={{
            width: '100%',
            background: 'none',
            border: `1px solid ${GV.color.borderSubtle}`,
            color: GV.color.forestDeep,
            borderRadius: 12,
            padding: '13px',
            fontFamily: GV.font.sans,
            fontSize: 13.5,
            fontWeight: 600,
            cursor: 'pointer',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            gap: 8,
          }}
        >
          <Icon name="edit_note" size={18} />
          방문 인증하고 리뷰 남기기
        </button>
      </div>
    </div>
  );
}

function OverviewTab({ course }) {
  return (
    <div>
      {/* Reasons */}
      <div style={{ padding: '18px 20px 0' }}>
        <div style={{
          fontFamily: GV.font.sans,
          fontSize: 10,
          fontWeight: 700,
          letterSpacing: '0.16em',
          color: GV.color.outline,
          marginBottom: 8,
        }}>WHY THIS COURSE IS RECOMMENDED</div>
        <Card>
          <div style={{ padding: 4 }}>
            {(course.reasons || []).map((r, i, arr) => (
              <div key={i} style={{
                display: 'flex',
                gap: 14,
                padding: '12px 14px',
                borderBottom: i === arr.length - 1 ? 'none' : `1px solid ${GV.color.borderSubtle}`,
              }}>
                <div style={{
                  width: 34,
                  height: 34,
                  borderRadius: 8,
                  background: GV.color.primaryFixed,
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  color: GV.color.forestDeep,
                  flexShrink: 0,
                }}>
                  <Icon name={r.icon} size={18} />
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{
                    fontFamily: GV.font.sans,
                    fontSize: 14,
                    fontWeight: 600,
                    color: GV.color.forestDeep,
                  }}>{r.label}</div>
                  <div style={{
                    fontFamily: GV.font.sans,
                    fontSize: 12,
                    color: GV.color.onSurfaceVariant,
                    marginTop: 2,
                  }}>{r.detail}</div>
                </div>
              </div>
            ))}
          </div>
        </Card>
      </div>

      {/* Tags */}
      <div style={{ padding: '20px 20px 0' }}>
        <div style={{
          fontFamily: GV.font.sans,
          fontSize: 10,
          fontWeight: 700,
          letterSpacing: '0.16em',
          color: GV.color.outline,
          marginBottom: 10,
        }}>GOLFER TAGS</div>
        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
          {course.tags.map(t => (
            <span key={t} style={{
              background: GV.color.white,
              border: `1px solid ${GV.color.borderSubtle}`,
              color: GV.color.forestDeep,
              fontFamily: GV.font.sans,
              fontSize: 12,
              fontWeight: 500,
              padding: '6px 12px',
              borderRadius: 999,
            }}>{t}</span>
          ))}
        </div>
      </div>
    </div>
  );
}

function PillarsTab({ course }) {
  return (
    <div style={{ padding: '20px', display: 'grid', gap: 12 }}>
      {GV_QUALITY_AXES.map(axis => {
        const score = course.metrics[axis.key];
        const pct = (score / 10) * 100;
        return (
          <Card key={axis.key} hover={false} style={{ boxShadow: 'none', borderColor: GV.color.borderSubtle }}>
            <div style={{ padding: 14 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
                <div style={{
                  width: 32,
                  height: 32,
                  borderRadius: 8,
                  background: GV.color.primaryFixed,
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  color: GV.color.forestDeep,
                }}>
                  <Icon name={axis.icon} size={18} />
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{
                    fontFamily: GV.font.sans,
                    fontSize: 14,
                    fontWeight: 600,
                    color: GV.color.forestDeep,
                  }}>{axis.label}</div>
                  <div style={{
                    fontFamily: GV.font.sans,
                    fontSize: 11,
                    color: GV.color.outline,
                  }}>{axis.desc}</div>
                </div>
                <div style={{
                  fontFamily: GV.font.serif,
                  fontSize: 20,
                  fontWeight: 700,
                  color: GV.color.forestDeep,
                }}>{score}</div>
              </div>
              {/* Progress bar */}
              <div style={{
                height: 6,
                borderRadius: 4,
                background: GV.color.surfaceContainer,
                overflow: 'hidden',
              }}>
                <div style={{
                  height: '100%',
                  width: `${pct}%`,
                  background: score >= 9.5
                    ? `linear-gradient(90deg, ${GV.color.forestDeep} 0%, ${GV.color.prestigeGold} 100%)`
                    : GV.color.forestDeep,
                  borderRadius: 4,
                  transition: 'width 0.6s ease',
                }} />
              </div>
            </div>
          </Card>
        );
      })}

      {/* Caddie service detail */}
      <div style={{ marginTop: 8 }}>
        <div style={{
          fontFamily: GV.font.sans,
          fontSize: 10,
          fontWeight: 700,
          letterSpacing: '0.16em',
          color: GV.color.outline,
          marginBottom: 8,
        }}>CADDIE SERVICE QUALITY</div>
        <Card hover={false}>
          <div style={{ padding: 14 }}>
            {[
              { l: '진행 응대 만족도', v: 9.8 },
              { l: '거리·클럽 조언', v: 9.7 },
              { l: '그린 리딩', v: 9.6 },
              { l: '매너·응대', v: 9.9 },
            ].map((m, i, arr) => (
              <div key={m.l} style={{
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
                padding: '8px 0',
                borderBottom: i === arr.length - 1 ? 'none' : `1px solid ${GV.color.borderSubtle}`,
              }}>
                <span style={{ fontFamily: GV.font.sans, fontSize: 13, color: GV.color.charcoal }}>{m.l}</span>
                <span style={{ fontFamily: GV.font.serif, fontSize: 15, fontWeight: 600, color: GV.color.forestDeep }}>{m.v}</span>
              </div>
            ))}
          </div>
        </Card>
      </div>
    </div>
  );
}

function ReviewsTab({ course }) {
  const reviews = [
    {
      user: '박제언', title: '진심으로 감동한 라운드였습니다',
      body: '주중 오전 티오프였는데 그린이 정말 빨랐습니다. 오르막에서 라이만 맞추면 홀에 근접하는 완벽한 컨디션이었어요.',
      time: '1일 전', helpful: 24,
    },
    {
      user: '김성진', title: '캐디 서비스가 진짜 프로페셔널',
      body: '거리 조언과 그린 리딩이 정말 정확했습니다. 특히 3번 홀에서의 조언은 결정적이었어요. 매너도 완벽했고요.',
      time: '3일 전', helpful: 18,
    },
    {
      user: '골드리버', title: '그늘집의 한식 메뉴 완벽',
      body: '9홀 후 뜨끈한 순두부찌개를 먹었는데 정말 맛있었습니다. 클럽하우스 전체적으로 클래식하면서도 세련된 분위기.',
      time: '5일 전', helpful: 15,
    },
  ];
  return (
    <div style={{ padding: '18px 20px 0', display: 'grid', gap: 10 }}>
      {reviews.map((r, i) => (
        <Card key={i} hover={false}>
          <div style={{ padding: 14 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
              <div style={{
                width: 28, height: 28, borderRadius: 999,
                background: GV.color.primaryFixed,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: GV.font.sans,
                fontSize: 12,
                fontWeight: 600,
                color: GV.color.forestDeep,
              }}>{r.user[0]}</div>
              <div style={{ flex: 1 }}>
                <div style={{
                  fontFamily: GV.font.sans,
                  fontSize: 13,
                  fontWeight: 600,
                  color: GV.color.forestDeep,
                  display: 'flex',
                  alignItems: 'center',
                  gap: 4,
                }}>
                  {r.user}
                  <Icon name="verified" size={12} filled color={GV.color.forestDeep} />
                </div>
                <div style={{
                  fontFamily: GV.font.sans,
                  fontSize: 10,
                  color: GV.color.outline,
                }}>{r.time} · VISIT-VERIFIED</div>
              </div>
            </div>
            <div style={{
              fontFamily: GV.font.serif,
              fontSize: 14,
              fontWeight: 600,
              color: GV.color.forestDeep,
            }}>{r.title}</div>
            <p style={{
              fontFamily: GV.font.sans,
              fontSize: 12.5,
              color: GV.color.charcoal,
              margin: '4px 0 0',
              lineHeight: 1.5,
            }}>{r.body}</p>
            <div style={{
              marginTop: 10,
              display: 'flex',
              gap: 12,
              fontFamily: GV.font.sans,
              fontSize: 12,
              color: GV.color.outline,
            }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3 }}>
                <Icon name="thumb_up" size={13} /> 도움됨 {r.helpful}
              </span>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3 }}>
                <Icon name="chat_bubble_outline" size={13} /> 답글
              </span>
            </div>
          </div>
        </Card>
      ))}
    </div>
  );
}

Object.assign(window, { GVCourseDetail });