// Green Voice — Green Voice Premium 멤버십 소개 / 가입 플로우
// 원본 스크린샷 재현: "프리미엄 라운드 케어" 헤더 + 4대 특전 + 혜택 그리드 + 비교표 + 가격 카드

function GVMembershipFlow({ nav, onSubscribe }) {
  const benefits = [
    {
      icon: 'edit_calendar',
      title: '연부킹 컨시어지',
      body: '희망 지역, 요일, 시간대, 예산, 선호 조건을 기준으로 연부킹 후보를 제안하고 조건 조율을 도와드립니다.',
    },
    {
      icon: 'support_agent',
      title: '라운드 CS 케어',
      body: '예약 오류, 일정 변경, 환불 안내 등을 우선순위 창구로 처리해 드립니다.',
    },
    {
      icon: 'assessment',
      title: '프리미엄 골프장 리포트',
      body: '최근 30일 GV Score, 캐디별 그린 안정도, 진행 지연 패턴 등 세부 품질 리포트를 확인할 수 있습니다.',
    },
    {
      icon: 'emoji_events',
      title: '국내 골프 대회 혜택',
      body: 'KLPGA, KPGA, 오픈이벤트 등 국내 주요 골프 대회 관람권 사전 추첨·예매 혜택을 제공합니다.',
    },
  ];

  const included = [
    { icon: 'chat', label: '실시간 상담' },
    { icon: 'headset_mic', label: 'CS 우선 응대' },
    { icon: 'group', label: 'Reviewer Circle' },
    { icon: 'auto_awesome', label: '전용 추천 로직' },
    { icon: 'workspace_premium', label: '프리미엄 지표' },
    { icon: 'stars', label: '전용 앰블럼' },
  ];

  const diff = [
    { label: '연부킹 문의', free: '—', prem: true },
    { label: '조건 조율 대행', free: '—', prem: true },
    { label: '골프장 품질 리포트', free: '기본', prem: '상세 분석' },
    { label: '대회 초청 이벤트', free: '—', prem: true },
  ];

  return (
    <div style={{ background: GV.color.surface, minHeight: '100%', paddingBottom: 100 }}>
      {/* Header */}
      <div style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        padding: '14px 16px',
        borderBottom: `1px solid ${GV.color.borderSubtle}`,
        background: GV.color.surface,
        position: 'sticky',
        top: 0,
        zIndex: 5,
      }}>
        <div style={{ width: 24 }} />
        <div style={{
          fontFamily: GV.font.serif,
          fontSize: 15,
          fontWeight: 600,
          color: GV.color.forestPrimary,
        }}>프리미엄 라운드 케어</div>
        <button onClick={nav.back} style={{
          background: 'none', border: 'none', padding: 0, cursor: 'pointer',
          color: GV.color.forestPrimary, display: 'flex',
        }}>
          <Icon name="close" size={22} />
        </button>
      </div>

      <div>
        {/* Hero Card — GV Premium */}
        <div style={{ padding: '18px 16px 0' }}>
          <div style={{
            background: GV.color.forestDeep,
            borderRadius: 14,
            padding: 20,
            position: 'relative',
            overflow: 'hidden',
            boxShadow: '0 6px 20px rgba(26,67,46,0.15)',
          }}>
            {/* Decorative flag icon */}
            <div style={{
              position: 'absolute',
              right: 14,
              top: 16,
              color: GV.color.prestigeGold,
              opacity: 0.5,
            }}>
              <Icon name="golf_course" size={38} />
            </div>

            <div style={{
              display: 'inline-flex',
              alignItems: 'center',
              gap: 5,
              padding: '5px 12px',
              borderRadius: 999,
              background: GV.color.prestigeGold,
              color: GV.color.forestDeep,
              fontFamily: GV.font.sans,
              fontSize: 10,
              fontWeight: 800,
              letterSpacing: '0.16em',
              marginBottom: 14,
              whiteSpace: 'nowrap',
            }}>
              <Icon name="check" size={12} color={GV.color.forestDeep} />
              GV PREMIUM
            </div>

            <h2 style={{
              fontFamily: GV.font.serif,
              fontSize: 21,
              fontWeight: 600,
              color: GV.color.white,
              margin: 0,
              lineHeight: 1.32,
              letterSpacing: '-0.015em',
              maxWidth: 280,
              wordBreak: 'keep-all',
            }}>연부킹부터 라운드 케어까지, 더 편하게</h2>
            <p style={{
              fontFamily: GV.font.sans,
              fontSize: 12,
              color: GV.color.primaryFixedDim,
              margin: '10px 0 0',
              lineHeight: 1.55,
              maxWidth: 280,
            }}>Green Voice Premium은 반복 라운드가 잦은 골퍼를 위한 프리미엄 케어 멤버십입니다.</p>
          </div>
        </div>

        {/* 4 Benefit blocks */}
        <div style={{ padding: '20px 16px 0', display: 'grid', gap: 14 }}>
          {benefits.map((b, i) => (
            <div key={b.title} style={{
              background: GV.color.white,
              border: `1px solid ${GV.color.borderSubtle}`,
              borderRadius: 12,
              padding: 16,
              display: 'flex',
              gap: 12,
              alignItems: 'flex-start',
            }}>
              <div style={{
                width: 32, height: 32, borderRadius: 8,
                background: GV.color.primaryFixed,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: GV.color.forestDeep,
                flexShrink: 0,
              }}>
                <Icon name={b.icon} size={18} />
              </div>
              <div style={{ flex: 1 }}>
                <h3 style={{
                  fontFamily: GV.font.serif,
                  fontSize: 15,
                  fontWeight: 600,
                  color: GV.color.forestPrimary,
                  margin: '0 0 4px',
                  letterSpacing: '-0.01em',
                }}>{b.title}</h3>
                <p style={{
                  fontFamily: GV.font.sans,
                  fontSize: 12.5,
                  color: GV.color.onSurfaceVariant,
                  margin: 0,
                  lineHeight: 1.55,
                }}>{b.body}</p>
              </div>
            </div>
          ))}
        </div>

        <p style={{
          fontFamily: GV.font.sans,
          fontSize: 10.5,
          color: GV.color.outline,
          margin: '14px 20px 0',
          lineHeight: 1.5,
        }}>* 실제 예약 확정은 골프장 정책에 따르며, 결제/취소 규정은 각 골프장 기준을 따릅니다.</p>

        {/* Included Benefits Grid */}
        <div style={{ padding: '28px 20px 0' }}>
          <h3 style={{
            fontFamily: GV.font.serif,
            fontSize: 16,
            fontWeight: 600,
            color: GV.color.forestPrimary,
            margin: '0 0 12px',
            textAlign: 'center',
            letterSpacing: '-0.01em',
          }}>Premium에 포함되는 혜택</h3>
          <div style={{
            display: 'grid',
            gridTemplateColumns: '1fr 1fr',
            gap: 10,
          }}>
            {included.map(b => (
              <div key={b.label} style={{
                background: GV.color.white,
                border: `1px solid ${GV.color.borderSubtle}`,
                borderRadius: 10,
                padding: '12px 14px',
                display: 'flex',
                alignItems: 'center',
                gap: 10,
              }}>
                <Icon name={b.icon} size={18} color={GV.color.prestigeGold} />
                <span style={{
                  fontFamily: GV.font.sans,
                  fontSize: 12.5,
                  fontWeight: 600,
                  color: GV.color.forestPrimary,
                }}>{b.label}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Comparison table */}
        <div style={{ padding: '28px 20px 0' }}>
          <h3 style={{
            fontFamily: GV.font.serif,
            fontSize: 16,
            fontWeight: 600,
            color: GV.color.forestPrimary,
            margin: '0 0 12px',
            letterSpacing: '-0.01em',
          }}>일반 이용과 Premium의 차이</h3>
          <div style={{
            background: GV.color.white,
            border: `1px solid ${GV.color.borderSubtle}`,
            borderRadius: 12,
            overflow: 'hidden',
          }}>
            {/* Header row */}
            <div style={{
              display: 'grid',
              gridTemplateColumns: '1.5fr 1fr 1fr',
              padding: '12px 14px',
              background: GV.color.surfaceContainerLow,
              borderBottom: `1px solid ${GV.color.borderSubtle}`,
              fontFamily: GV.font.sans,
              fontSize: 10.5,
              fontWeight: 700,
              letterSpacing: '0.12em',
              color: GV.color.outline,
            }}>
              <span>제공 기능</span>
              <span style={{ textAlign: 'center' }}>Free</span>
              <span style={{ textAlign: 'center', color: GV.color.prestigeGold }}>Premium</span>
            </div>
            {diff.map((row, i, arr) => (
              <div key={row.label} style={{
                display: 'grid',
                gridTemplateColumns: '1.5fr 1fr 1fr',
                padding: '12px 14px',
                alignItems: 'center',
                borderBottom: i === arr.length - 1 ? 'none' : `1px solid ${GV.color.borderSubtle}`,
                fontFamily: GV.font.sans,
                fontSize: 12.5,
                color: GV.color.onSurface,
              }}>
                <span style={{ fontWeight: 500 }}>{row.label}</span>
                <span style={{ textAlign: 'center', color: GV.color.outline }}>{row.free}</span>
                <span style={{ textAlign: 'center', color: GV.color.forestDeep, fontWeight: 600 }}>
                  {row.prem === true
                    ? <Icon name="check_circle" size={16} filled color={GV.color.forestDeep} />
                    : row.prem}
                </span>
              </div>
            ))}
          </div>
        </div>

        {/* Membership Price Card */}
        <div style={{ padding: '28px 20px 0' }}>
          <div style={{
            fontFamily: GV.font.sans,
            fontSize: 10,
            fontWeight: 700,
            letterSpacing: '0.18em',
            color: GV.color.outline,
            textAlign: 'center',
            marginBottom: 8,
          }}>MEMBERSHIP PLAN</div>
          <div style={{
            background: GV.color.forestDeep,
            borderRadius: 14,
            padding: '26px 20px',
            textAlign: 'center',
            position: 'relative',
            overflow: 'hidden',
            boxShadow: '0 8px 24px rgba(26,67,46,0.20)',
          }}>
            <div style={{
              position: 'absolute',
              inset: 0,
              background: `radial-gradient(circle at 50% 0%, ${GV.color.prestigeGold}22 0%, transparent 60%)`,
              pointerEvents: 'none',
            }} />
            <div style={{ position: 'relative' }}>
              <h3 style={{
                fontFamily: GV.font.serif,
                fontSize: 20,
                fontWeight: 600,
                color: GV.color.white,
                margin: 0,
                letterSpacing: '-0.015em',
              }}>Green Voice Premium</h3>
              <div style={{
                marginTop: 14,
                display: 'flex',
                alignItems: 'baseline',
                justifyContent: 'center',
                gap: 4,
              }}>
                <span style={{
                  fontFamily: GV.font.sans,
                  fontSize: 14,
                  fontWeight: 600,
                  color: GV.color.prestigeGold,
                }}>월</span>
                <span style={{
                  fontFamily: GV.font.serif,
                  fontSize: 38,
                  fontWeight: 700,
                  color: GV.color.prestigeGold,
                  letterSpacing: '-0.02em',
                  lineHeight: 1,
                }}>55,000</span>
                <span style={{
                  fontFamily: GV.font.sans,
                  fontSize: 14,
                  fontWeight: 500,
                  color: GV.color.prestigeGold,
                }}>원</span>
                <span style={{
                  fontFamily: GV.font.sans,
                  fontSize: 11,
                  color: GV.color.primaryFixedDim,
                  marginLeft: 6,
                }}>부터</span>
              </div>
              <p style={{
                fontFamily: GV.font.sans,
                fontSize: 11.5,
                color: GV.color.primaryFixedDim,
                margin: '10px auto 0',
                lineHeight: 1.55,
                maxWidth: 260,
              }}>부가세 포함 · 언제든 해지 가능. 첫 결제 이후 매월 자동 갱신됩니다.</p>
            </div>
          </div>

          <p style={{
            fontFamily: GV.font.sans,
            fontSize: 10.5,
            color: GV.color.outline,
            margin: '14px 0 0',
            textAlign: 'center',
            lineHeight: 1.55,
          }}>Green Voice Premium은 국내 회원 전용 서비스입니다.<br/>
          해외 라운드 및 특정 프로모션은 제외될 수 있습니다.</p>
        </div>

        {/* Bottom spacer */}
        <div style={{ height: 20 }} />
      </div>

      {/* Sticky CTA at bottom */}
      <div style={{
        position: 'sticky',
        bottom: 0,
        padding: '12px 16px 16px',
        background: GV.color.surface,
        borderTop: `1px solid ${GV.color.borderSubtle}`,
        zIndex: 5,
      }}>
        <button
          onClick={onSubscribe}
          style={{
            width: '100%',
            background: GV.color.forestDeep,
            color: GV.color.white,
            border: 'none',
            borderRadius: 12,
            padding: '15px',
            fontFamily: GV.font.sans,
            fontSize: 14.5,
            fontWeight: 700,
            letterSpacing: '0.02em',
            cursor: 'pointer',
            boxShadow: '0 4px 12px rgba(26,67,46,0.20)',
          }}
        >Premium으로 연부킹 문의하기</button>
        <div style={{
          textAlign: 'center',
          marginTop: 10,
          fontFamily: GV.font.sans,
          fontSize: 11,
          color: GV.color.outline,
        }}>
          이미 회원이신가요? <span style={{ color: GV.color.forestDeep, fontWeight: 600, cursor: 'pointer' }}>로그인</span>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { GVMembershipFlow });