/* global React */
/* 스폰서십 웹페이지 v3 — 하단: 풀블리드 밴드 / 등급 / 문의 / 푸터 */
const { Input: V3FormInput } = window.GSCaltexDesignSystem_4a6bda;

/* ── 풀블리드 시그니처 밴드 ───────────────────────────────── */
function V3Band() {
  return (
    <section id="signature" style={{ position: 'relative', minHeight: 640, display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden', background: '#16201A' }}>
      <img src="assets/img/band-course.jpg" alt="남서울CC 코스" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
      <div style={{ position: 'absolute', inset: 0, background: 'rgba(8,14,10,.42)', pointerEvents: 'none' }}></div>
      <div className="sp-reveal" style={{ position: 'relative', zIndex: 2, textAlign: 'center', padding: '110px 40px', maxWidth: 860 }}>
        <span style={{ display: 'inline-flex', alignItems: 'center', height: 35, padding: '0 18px', borderRadius: 44, background: 'rgba(0,0,0,.25)', backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)', boxShadow: 'inset 0 0 0 1px rgba(255,255,255,.6)', color: '#fff', fontSize: 13.5, fontWeight: 700 }}>대회 종료 다음날 5월 3일(월) · 남서울CC 전체 대관</span>
        <h2 style={{ margin: '26px 0 0', fontSize: 48, fontWeight: 800, lineHeight: 1.18, letterSpacing: '-0.025em', color: '#fff', wordBreak: 'keep-all', textShadow: '0 2px 28px rgba(0,0,0,.3)' }}>
          프로가 경기한 바로 그 코스세팅 그대로,<br />당신의 팀이 라운딩합니다
        </h2>
        <p style={{ margin: '20px auto 0', fontSize: 16.5, lineHeight: 1.7, color: 'rgba(255,255,255,.88)', maxWidth: 560, wordBreak: 'keep-all' }}>남서울CC, 프로들의 코스 환경 그대로. 공식 스코어카드와 프로 사용 핀 플래그 기념 패키지, 웰컴 드링크와 조중식 식사까지 — 스폰서만의 단 하루.


        </p>
        <div style={{ marginTop: 30, display: 'flex', justifyContent: 'center' }}>
          <PillArrow label="등급별 팀 수 보기" tone="white" href="#tiers" />
        </div>
      </div>
    </section>);

}

/* ── 등급 ───────────────────────────────────────────────── */
function V3Tiers() {
  const tiers = [
  { name: 'Diamond', role: 'Exclusive', price: '1억 원', emph: true, rows: [['애프터 라운드', '12팀 · 48명'], ['보드 노출', '대형 1 + 중형 2'], ['홍보 채널', '에너지플러스 앱 + 매경 지면·기사'], ['갤러리 부스', '2칸'], ['VIP 의전', '출입비표 12장 · 주차 6대 · 식사 50개· 초대권 200장']] },
  { name: 'Platinum', price: '5,000만 원', rows: [['애프터 라운드', '6팀 · 24명'], ['보드 노출', '대형 1'], ['홍보 채널', '에너지플러스 앱 홍보배너'], ['갤러리 부스', '1칸'], ['VIP 의전', '출입비표 4장 · 주차 3대 · 식사 20개 · 초대권 100장']] },
  { name: 'Gold', price: '3,000만 원', rows: [['애프터 라운드', '4팀 · 16명'], ['보드 노출', '중형 1'], ['홍보 채널', '—'], ['갤러리 부스', '1칸'], ['VIP 의전', '출입비표 2장 · 주차 2대 · 식사 10개 · 초대권 50장']] },
  { name: 'Silver', price: '1,000만 원', rows: [['애프터 라운드', '1팀 · 4명'], ['보드 노출', '폴배너 2'], ['홍보 채널', '—'], ['갤러리 부스', '—'], ['VIP 의전', '출입비표 1장 · 주차 1대 · 초대권 50장']] }];

  return (
    <section id="tiers" style={{ background: 'rgb(244,244,244)' }}>
      <div style={{ maxWidth: 1320, margin: '0 auto', padding: '110px 40px' }}>
        <div className="sp-reveal" style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 32, flexWrap: 'wrap' }}>
          <h2 style={{ margin: 0, fontSize: 46, fontWeight: 800, lineHeight: 1.12, letterSpacing: '-0.025em', color: 'var(--neutral-900)', wordBreak: 'keep-all' }}>등급별 혜택</h2>
          <p style={{ margin: 0, fontSize: 14.5, color: 'var(--neutral-600)', maxWidth: 380, lineHeight: 1.6, wordBreak: 'keep-all' }}>후원금은 총상금에 환원되는 채리티 구조 — 후원이 곧 스포츠 인재 양성입니다.</p>
        </div>
        <div className="sp-reveal" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24, marginTop: 44, alignItems: 'stretch' }}>
          {tiers.map((t) =>
          <div key={t.name} style={{
            background: t.emph ? 'var(--brand-dark-500)' : '#fff',
            color: t.emph ? '#fff' : 'var(--neutral-900)',
            borderRadius: 16, padding: '30px 26px', display: 'flex', flexDirection: 'column',
            boxShadow: t.emph ? '0 24px 48px -24px rgba(27,82,48,.55)' : 'none'
          }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                <span style={{ fontFamily: 'var(--font-en)', fontSize: 21, fontWeight: 800, letterSpacing: '-0.01em' }}>{t.name}</span>
                {t.role && <span style={{ fontSize: 11, fontWeight: 700, padding: '5px 12px', borderRadius: 44, background: 'rgba(255,255,255,.16)', boxShadow: 'inset 0 0 0 1px rgba(255,255,255,.5)', whiteSpace: 'nowrap' }}>{t.role}</span>}
              </div>
              <div style={{ fontFamily: 'var(--font-en)', fontSize: 30, fontWeight: 800, margin: '16px 0 2px', letterSpacing: '-0.02em' }}>{t.price}</div>
              <div style={{ fontSize: 12, opacity: t.emph ? .65 : 1, color: t.emph ? '#fff' : 'var(--neutral-400)' }}>후원금</div>
              <dl style={{ margin: '20px 0 0', padding: '18px 0 0', borderTop: t.emph ? '1px solid rgba(255,255,255,.22)' : '1px solid var(--neutral-100)', display: 'grid', gap: 12, flex: 1 }}>
                {t.rows.map(([k, v]) =>
              <div key={k} style={{ display: 'grid', gap: 2 }}>
                    <dt style={{ fontSize: 11, opacity: t.emph ? .6 : 1, color: t.emph ? '#fff' : 'var(--neutral-400)' }}>{k}</dt>
                    <dd style={{ margin: 0, fontSize: 13.5, fontWeight: 700, wordBreak: 'keep-all', color: v === '—' ? t.emph ? 'rgba(255,255,255,.4)' : 'var(--neutral-400)' : 'inherit' }}>{v}</dd>
                  </div>
              )}
              </dl>
              <a href="#contact" onClick={(e) => {e.preventDefault();location.hash = 'contact';}}
            style={{ marginTop: 22, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', height: 44, borderRadius: 44, fontSize: 13.5, fontWeight: 700, textDecoration: 'none', background: t.emph ? '#fff' : 'transparent', color: t.emph ? 'var(--brand-dark-500)' : 'var(--neutral-900)', boxShadow: t.emph ? 'none' : 'inset 0 0 0 1px var(--neutral-900)' }}>
                이 등급 문의하기 ↗
              </a>
            </div>
          )}
        </div>
        <p className="sp-reveal" style={{ margin: '20px 0 0', fontSize: 13, color: 'var(--neutral-400)', lineHeight: 1.6, wordBreak: 'keep-all' }}>※ 일반 관람객은 클럽하우스 내 출입 및 식사, 대회현장 주차가 불가합니다.</p>
      </div>
    </section>);

}
function V3Contact() {
  const [sent, setSent] = React.useState(false);
  return (
    <section id="contact" style={{ background: '#fff' }}>
      <div style={{ maxWidth: 1320, margin: '0 auto', padding: '110px 40px 90px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 72, alignItems: 'center' }}>
        <div className="sp-reveal">
          <h2 style={{ margin: 0, fontSize: 46, fontWeight: 800, lineHeight: 1.16, letterSpacing: '-0.025em', color: 'var(--neutral-900)', wordBreak: 'keep-all' }}>대회의 격을 높이고,<br />최고의 라운딩 경험을<br />하실 준비되셨나요?</h2>
          <div style={{ position: 'relative', height: 230, marginTop: 36 }}>
            <img src="assets/img/foot-a.jpg" alt="" style={{ position: 'absolute', left: 0, top: 48, width: 200, height: 150, objectFit: 'cover', borderRadius: 16 }} />
            <img src="assets/img/foot-b.jpg" alt="" style={{ position: 'absolute', left: 224, top: 0, width: 180, height: 198, objectFit: 'cover', borderRadius: 16 }} />
          </div>
          <dl style={{ margin: '30px 0 0', display: 'grid', gap: 10, maxWidth: 420 }}>
            {[['담당', 'GS칼텍스 매경오픈 스폰서십 사무국'], ['전화', '02-2000-0000'], ['이메일', 'sponsorship@mkopen.co.kr']].map(([k, v]) =>
            <div key={k} style={{ display: 'flex', gap: 18, paddingBottom: 10, borderBottom: '1px solid var(--neutral-100)' }}>
                <dt style={{ width: 48, fontSize: 13, color: 'var(--neutral-400)', flex: 'none' }}>{k}</dt>
                <dd style={{ margin: 0, fontSize: 14.5, fontWeight: 700, color: 'var(--neutral-900)' }}>{v}</dd>
              </div>
            )}
          </dl>
        </div>
        <div className="sp-reveal" style={{ background: 'var(--ep-green-bg)', borderRadius: 24, padding: 40 }}>
          {sent ?
          <div style={{ textAlign: 'center', padding: '64px 8px' }}>
              <div style={{ fontSize: 20, fontWeight: 800, color: 'var(--brand-dark-500)' }}>문의가 접수되었습니다</div>
              <p style={{ margin: '10px 0 0', fontSize: 14.5, color: 'var(--neutral-600)' }}>담당자가 영업일 2일 내<br />제안서와 함께 연락드리겠습니다.</p>
            </div> :

          <form onSubmit={(e) => {e.preventDefault();setSent(true);}} style={{ display: 'grid', gap: 16 }}>
              <div style={{ fontSize: 19, fontWeight: 800, color: 'var(--neutral-900)', marginBottom: 4 }}>제안서 요청</div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                <V3FormInput label="회사명" placeholder="(주)예시" required />
                <V3FormInput label="담당자명" placeholder="홍길동" required />
              </div>
              <V3FormInput label="이메일" type="email" placeholder="name@company.com" required />
              <V3FormInput label="관심 등급 · 문의 내용" placeholder="예) Diamond 상세 제안 요청" />
              <button type="submit" style={{ marginTop: 6, height: 52, borderRadius: 44, border: 0, background: 'var(--brand-dark-500)', color: '#fff', fontSize: 15, fontWeight: 700, cursor: 'pointer', fontFamily: 'var(--font-base)' }}>
                제안서 요청하기 ↗
              </button>
            </form>
          }
        </div>
      </div>
      <footer style={{ borderTop: '1px solid var(--neutral-100)' }}>
        <div style={{ maxWidth: 1320, margin: '0 auto', padding: '26px 40px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap' }}>
          <span style={{ fontSize: 13.5, fontWeight: 800, color: 'var(--neutral-900)', letterSpacing: '-0.01em', whiteSpace: 'nowrap' }}>GS칼텍스 매경오픈</span>
          <span style={{ fontSize: 12, color: 'var(--neutral-400)' }}>© 2026 The 46th GS Caltex Maekyung Open Sponsorship Office.</span>
        </div>
      </footer>
    </section>);

}

Object.assign(window, { V3Band, V3Tiers, V3Contact });