/* global React */
/* 스폰서십 웹페이지 v3 — Golforage 문법: 필 네비 / 포토 히어로 / 스테이트먼트 / 슬롯 카드 */
const { Input: V3Input } = window.GSCaltexDesignSystem_4a6bda;

/* ── 공용: 필 버튼 + 원형 화살표 콤보 ─────────────────────── */
function PillArrow({ label, tone = 'white', href = '#contact', onClick }) {
  const tones = {
    white: { bg: '#fff', fg: 'var(--neutral-900)' },
    green: { bg: 'var(--brand-dark-500)', fg: '#fff' },
    dark: { bg: 'var(--neutral-900)', fg: '#fff' }
  };
  const t = tones[tone] || tones.white;
  const go = (e) => {e.preventDefault();if (onClick) onClick();else location.hash = href.slice(1);};
  return (
    <a href={href} onClick={go} style={{ display: 'inline-flex', alignItems: 'center', gap: 4, textDecoration: 'none' }}>
      <span style={{ display: 'inline-flex', alignItems: 'center', height: 48, padding: '0 26px', borderRadius: 44, background: t.bg, color: t.fg, fontSize: 14.5, fontWeight: 700, letterSpacing: '-0.01em', whiteSpace: 'nowrap' }}>{label}</span>
      <span aria-hidden="true" style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 48, height: 48, borderRadius: '50%', background: t.bg, color: t.fg, fontSize: 17, fontWeight: 700 }}>↗</span>
    </a>);

}

/* ── 플로팅 필 네비 ──────────────────────────────────────── */
function V3Nav() {
  return (
    <div style={{ position: 'fixed', top: 22, left: 0, right: 0, zIndex: 50, display: 'flex', justifyContent: 'center', padding: '0 28px', pointerEvents: 'none' }}>
      <nav style={{ pointerEvents: 'auto', width: '100%', maxWidth: 1290, height: 68, borderRadius: 78, background: 'rgba(20,24,20,.82)', backdropFilter: 'blur(10px)', WebkitBackdropFilter: 'blur(10px)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 14px 0 30px', boxSizing: 'border-box', boxShadow: '0 8px 32px rgba(0,0,0,.18)' }}>
        <a href="#top" style={{ display: 'flex', alignItems: 'center', gap: 12, textDecoration: 'none' }}>
          <span style={{ fontSize: 15.5, fontWeight: 800, color: '#fff', letterSpacing: '-0.01em', whiteSpace: 'nowrap' }}>GS칼텍스 매경오픈 <span style={{ fontFamily: 'var(--font-en)', fontWeight: 500, opacity: .55, fontSize: 12, marginLeft: 6 }}>THE 46TH</span></span>
        </a>
        <div style={{ display: 'flex', alignItems: 'center', gap: 38 }}>
          {[['#why', '대회'], ['#slots', '스폰서 슬롯'], ['#signature', '시그니처'], ['#tiers', '등급']].map(([href, label]) =>
          <a key={href} href={href} style={{ fontSize: 14, fontWeight: 600, color: 'rgba(255,255,255,.82)', textDecoration: 'none' }}
          onMouseEnter={(e) => {e.currentTarget.style.color = '#fff';}}
          onMouseLeave={(e) => {e.currentTarget.style.color = 'rgba(255,255,255,.82)';}}>{label}</a>
          )}
        </div>
        <a href="#contact" style={{ display: 'inline-flex', alignItems: 'center', height: 40, padding: '0 22px', borderRadius: 44, border: '1px solid rgba(255,255,255,.85)', color: '#fff', fontSize: 13.5, fontWeight: 700, textDecoration: 'none', whiteSpace: 'nowrap', transition: 'background .15s, color .15s' }}
        onMouseEnter={(e) => {e.currentTarget.style.background = '#fff';e.currentTarget.style.color = 'var(--neutral-900)';}}
        onMouseLeave={(e) => {e.currentTarget.style.background = 'transparent';e.currentTarget.style.color = '#fff';}}>문의하기</a>
      </nav>
    </div>);

}

/* ── 풀블리드 포토 히어로 ─────────────────────────────────── */
function V3Hero() {
  return (
    <section id="top" style={{ position: 'relative', minHeight: '92vh', display: 'flex', alignItems: 'flex-end', overflow: 'hidden', background: '#1E2A1E' }}>
      <img src="assets/img/hero-course.jpg" alt="남서울CC 챔피언십 코스" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.05) 40%, rgba(0,0,0,.52) 78%, rgba(0,0,0,.62) 100%)', pointerEvents: 'none' }}></div>
      <div style={{ position: 'relative', zIndex: 2, width: '100%', maxWidth: 1320, margin: '0 auto', padding: '180px 40px 64px', boxSizing: 'border-box', display: 'grid', gridTemplateColumns: '1.15fr 0.85fr', gap: 56, alignItems: 'end' }}>
        <h1 className="sp-reveal" style={{ margin: 0, fontSize: 62, lineHeight: 1.08, letterSpacing: '-0.03em', fontWeight: 800, color: '#fff', wordBreak: 'keep-all', textShadow: '0 2px 28px rgba(0,0,0,.25)' }}>
          한국의 마스터스를<br />함께 쓸 파트너를<br />찾습니다
        </h1>
        <div className="sp-reveal">
          <p style={{ margin: 0, fontSize: 16.5, lineHeight: 1.7, color: 'rgba(255,255,255,.92)', wordBreak: 'keep-all', letterSpacing: '0.01em' }}>총상금 13억원, 우승상금 3억원의 국내 최대규모 대회 제46회 GS칼텍스 매경오픈.<br />1982년부터 이어온 권위있는 골프대회에서,<br />광고 노출을 넘어 대회 직후 남서울CC 코스에서 직접 라운딩하실 수 있는 특별한 경험을 제안합니다.
          </p>
          <div style={{ marginTop: 26 }}>
            <PillArrow label="스폰서십 문의" tone="white" />
          </div>
        </div>
      </div>
    </section>);
}

/* ── 스테이트먼트 + 3업 이미지 ────────────────────────────── */
function V3Statement() {
  return (
    <section id="why" style={{ background: '#fff' }}>
      <div style={{ maxWidth: 1320, margin: '0 auto', padding: '110px 40px 96px' }}>
        <p className="sp-reveal" style={{ margin: 0, fontSize: 31, lineHeight: 1.5, fontWeight: 700, letterSpacing: '-0.02em', color: 'var(--neutral-900)', wordBreak: 'keep-all', maxWidth: 1180 }}>
          우리는 광고 노출 그 이상을 제안합니다.<br />
          최고의 접근성을 가진 남서울CC에서 열리는 <span style={{ color: 'var(--brand-dark-500)' }}>나흘간의 승부</span> — 그리고 대회가 끝난 바로 다음날, 그 코스를 통째로 누리는<span style={{ color: 'var(--brand-dark-500)' }}> 스폰서만의 하루</span>.<br />
          후원금은 총상금으로 환원되어 스포츠 인재 양성으로 이어집니다.
        </p>
        <div className="sp-reveal" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 24, marginTop: 56 }}>
          {[
          { src: 'assets/img/strip-a.jpg', cap: '구름갤러리로 유명한 국내 최고 인기 대회' },
          { src: 'assets/img/strip-d.jpg', cap: '접근성 뛰어난 명문 구장 남서울컨트리클럽' },
          { src: 'assets/img/strip-e.jpg', cap: 'TV생중계/광고보드 등 대고객 커뮤니케이션 극대화' }].
          map((g) =>
          <figure key={g.src} style={{ margin: 0 }}>
              <img src={g.src} alt={g.cap} style={{ width: '100%', height: 300, objectFit: 'cover', borderRadius: 16, display: 'block' }} />
              <figcaption style={{ fontSize: 13.5, fontWeight: 600, color: 'var(--neutral-600)', marginTop: 12 }}>{g.cap}</figcaption>
            </figure>
          )}
        </div>
      </div>
    </section>);

}

/* ── 글래스 배지 ─────────────────────────────────────────── */
function GlassBadge({ children }) {
  return (
    <span style={{ position: 'absolute', top: 20, left: 20, display: 'inline-flex', alignItems: 'center', height: 35, padding: '0 16px', 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, whiteSpace: 'nowrap' }}>{children}</span>);

}

/* ── 슬롯 섹션: 비대칭 3카드 + 미니 슬롯 그리드 ────────────── */
function V3Slots() {
  const minis = [
  { name: 'VIP 대회 관람', spec: '비표·주차·식사권', d: '핵심 고객 초청을 위한 품격 있는 응대' },
  { name: '디지털·미디어', spec: '에너지플러스 앱 + 매경', d: '에너지플러스 앱 홍보배너와 매일경제 지면·기사' },
  { name: '폴배너', spec: '600×2,200mm', d: '대회장 입구 — 모든 내장객의 첫 접점' },
  { name: '갤러리 부스', spec: '3×3m', d: '클럽하우스 앞 — 갤러리들의 브랜드 체험 공간' }];

  return (
    <section id="slots" style={{ background: '#fff' }}>
      <div style={{ maxWidth: 1320, margin: '0 auto', padding: '20px 40px 110px' }}>
        <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' }}>브랜드가 노출되고,<br />경험이 되는 자리</h2>
          <PillArrow label="등급별 구성 보기" tone="green" href="#tiers" />
        </div>
        <div className="sp-reveal" style={{ display: 'grid', gridTemplateColumns: '341fr 590fr 341fr', gap: 24, marginTop: 48, alignItems: 'center' }}>
          {/* left small */}
          <div style={{ position: 'relative', height: 300, borderRadius: 16, overflow: 'hidden' }}>
            <img src="assets/img/ad-board-gen2.png" alt="광고보드" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
            <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.45) 100%)' }}></div>
            <GlassBadge>현장 · 중계</GlassBadge>
            <div style={{ position: 'absolute', left: 20, right: 20, bottom: 18 }}>
              <div style={{ fontSize: 26, fontWeight: 800, color: '#fff', letterSpacing: '-0.02em' }}>광고보드</div>
              <div style={{ fontSize: 13, color: 'rgba(255,255,255,.85)', marginTop: 4 }}>대형 1,800×1,800 ·
중형 1,800×1,000mm
— TV 중계 반복 노출</div>
            </div>
          </div>
          {/* center big */}
          <div style={{ position: 'relative', height: 388, borderRadius: 16, overflow: 'hidden' }}>
            <img src="assets/img/card-wide.jpg" alt="After-Tournament Round" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
            <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.55) 100%)' }}></div>
            <GlassBadge>시그니처</GlassBadge>
            <div style={{ position: 'absolute', left: 20, right: 20, bottom: 20, display: 'flex', alignItems: 'flex-end', gap: 24, justifyContent: 'space-between' }}>
              <div style={{ fontSize: 30, fontWeight: 800, color: '#fff', letterSpacing: '-0.02em', lineHeight: 1.15, wordBreak: 'keep-all', maxWidth: 270 }}>After-Tournament Round</div>
              <div style={{ fontSize: 13, lineHeight: 1.55, color: 'rgba(255,255,255,.88)', maxWidth: 250, wordBreak: 'keep-all' }}>대회 종료 다음날, 남서울CC 대관 — 챔피언십 세팅 그대로 스폰서의 팀이 라운드합니다.</div>
            </div>
          </div>
          {/* right small — 또 다른 특권 안내 카드 */}
          <div style={{ position: 'relative', height: 300, borderRadius: 16, overflow: 'hidden', background: 'var(--brand-dark-500)', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', padding: '24px 24px 22px', boxSizing: 'border-box' }}>
            <GlassBadge>더 많은 슬롯</GlassBadge>
            <div style={{ marginTop: 'auto' }}>
              <div style={{ fontSize: 26, fontWeight: 800, color: '#fff', letterSpacing: '-0.02em', lineHeight: 1.2, wordBreak: 'keep-all' }}>또 다른<br />특권들</div>
              <div style={{ fontSize: 13, color: 'rgba(255,255,255,.82)', marginTop: 8, lineHeight: 1.55, wordBreak: 'keep-all' }}>갤러리 부스·폴배너·디지털 노출·VIP 주차와 식음료까지 — 아래에서 이어집니다.</div>
              <div aria-hidden="true" style={{ marginTop: 16, width: 44, height: 44, borderRadius: '50%', background: '#fff', color: 'var(--brand-dark-500)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 19, fontWeight: 800 }}>↓</div>
            </div>
          </div>
        </div>
        <div className="sp-reveal" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24, marginTop: 24 }}>
          {minis.map((m) => <div key={m.name} style={{ border: '1px solid var(--neutral-100)', borderRadius: 16, padding: '22px 24px', transition: 'border-color .2s' }} onMouseEnter={(e) => {e.currentTarget.style.borderColor = 'var(--brand-dark-500)';}}
          onMouseLeave={(e) => {e.currentTarget.style.borderColor = 'var(--neutral-100)';}}>
              <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--brand-dark-500)', letterSpacing: '0.01em' }}>{m.spec}</div>
              <div style={{ fontSize: 17, fontWeight: 800, color: 'var(--neutral-900)', letterSpacing: '-0.01em', marginTop: 5, wordBreak: 'keep-all' }}>{m.name}</div>
              <p style={{ margin: '8px 0 0', fontSize: 13.5, lineHeight: 1.6, color: 'var(--neutral-600)', wordBreak: 'keep-all' }}>{m.d}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

Object.assign(window, { PillArrow, GlassBadge, V3Nav, V3Hero, V3Statement, V3Slots });