/* 홍보 영상 섹션 — promo.html을 폰 프레임 안에 iframe으로 임베드 */

const SectionVideo = () => {
  const phoneRef = React.useRef(null);

  return (
    <section id="video" className="bg-ink" style={{
      padding: '120px 0', position: 'relative', overflow: 'hidden',
      color: '#fff',
    }}>
      {/* decorative glow */}
      <div aria-hidden style={{
        position: 'absolute', top: -200, right: -200, width: 600, height: 600,
        background: 'radial-gradient(50% 50% at 50% 50%, rgba(69,132,255,0.25), transparent 70%)',
        pointerEvents: 'none',
      }} />
      <div aria-hidden style={{
        position: 'absolute', bottom: -300, left: -100, width: 700, height: 700,
        background: 'radial-gradient(50% 50% at 50% 50%, rgba(255,211,0,0.12), transparent 70%)',
        pointerEvents: 'none',
      }} />

      <div className="shell" style={{
        display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 80, alignItems: 'center',
        position: 'relative',
      }} >
        <div>
          <div className="eyebrow" style={{color: '#9DB6E8', marginBottom: 18}}>
            <span className="dot" style={{background: 'var(--sid-yellow)'}} />WATCH IT WORK
          </div>
          <h2 style={{
            fontSize: 48, fontWeight: 800, lineHeight: 1.1, letterSpacing: '-0.04em',
            margin: '0 0 22px', color: '#fff', textWrap: 'balance',
          }}>
            25초로 보는<br/>
            셔틀아이디 운영 흐름.
          </h2>
          <p style={{
            fontSize: 17, color: 'rgba(255,255,255,0.7)', lineHeight: 1.65,
            margin: '0 0 32px', maxWidth: 460,
          }}>
            노선 선택 → AI 얼굴인식 → 잔류 확인 → 통계 자동 생성까지.
            관리자가 실제 마주하는 화면을 그대로 담았습니다.
          </p>

          <div style={{display: 'flex', flexDirection: 'column', gap: 14, marginBottom: 32}}>
            <VideoStep n="01" time="0:00–0:03" title="홈 진입" desc="노선 선택 · 운행 시작" />
            <VideoStep n="02" time="0:07–0:12" title="AI 얼굴인식" desc="다인 동시 인식 0.9초" />
            <VideoStep n="03" time="0:12–0:16" title="잔류 확인" desc="사진 3장 자동 촬영" />
            <VideoStep n="04" time="0:16–0:20" title="통계 대시보드" desc="주간 탑승객 한눈에" />
          </div>

          <a className="btn btn-lg btn-yellow" href="/promo" target="_blank" rel="noreferrer">
            영상 전체화면으로 보기 ↗
          </a>
        </div>

        {/* phone frame with promo iframe */}
        <div ref={phoneRef} style={{position: 'relative', justifySelf: 'center'}}>
          <div style={{
            width: 360, height: 624, borderRadius: 42, padding: 12,
            background: 'linear-gradient(180deg, #1A1F2E, #050811)',
            boxShadow: '0 0 0 1px #2a2d33, 0 50px 110px rgba(0,0,0,0.45), 0 0 80px rgba(69,132,255,0.18)',
            position: 'relative',
          }}>
            <div style={{
              width: 336, height: 600, borderRadius: 32, overflow: 'hidden',
              background: '#FFD400', position: 'relative',
            }}>
              <iframe
                src="/promo"
                title="셔틀아이디 홍보 영상"
                style={{
                  width: 1080,
                  height: 1920,
                  border: 'none',
                  transform: 'scale(0.31111)',
                  transformOrigin: 'top left',
                  display: 'block',
                }}
              />
            </div>
          </div>

          {/* badges around phone */}
          <div style={{
            position: 'absolute', top: 40, right: -60,
            background: 'rgba(255,255,255,0.08)', border: '1px solid rgba(255,255,255,0.18)',
            backdropFilter: 'blur(8px)',
            padding: '10px 16px', borderRadius: 999,
            fontSize: 12, fontWeight: 700, color: '#fff',
            display: 'inline-flex', alignItems: 'center', gap: 8,
          }}>
            <span style={{width: 8, height: 8, borderRadius: 4, background: '#FFD300'}} />
            LIVE PROMO
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 920px) {
          #video .shell { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
};

const VideoStep = ({n, time, title, desc}) => (
  <div style={{
    display: 'flex', alignItems: 'center', gap: 16,
    padding: '14px 18px',
    background: 'rgba(255,255,255,0.04)',
    border: '1px solid rgba(255,255,255,0.08)',
    borderRadius: 14,
  }}>
    <div style={{
      width: 40, height: 40, borderRadius: 10,
      background: 'rgba(69,132,255,0.2)', color: '#9DB6E8',
      display: 'grid', placeItems: 'center',
      fontFamily: 'var(--font-numeric)', fontWeight: 800, fontSize: 14,
    }}>{n}</div>
    <div style={{flex: 1}}>
      <div style={{fontSize: 15, fontWeight: 700, color: '#fff'}}>{title}</div>
      <div style={{fontSize: 12, color: 'rgba(255,255,255,0.6)', marginTop: 2}}>{desc}</div>
    </div>
    <div style={{
      fontFamily: 'var(--font-numeric)', fontSize: 12, fontWeight: 600,
      color: 'rgba(255,255,255,0.5)', letterSpacing: '0.04em',
    }}>{time}</div>
  </div>
);

Object.assign(window, {SectionVideo});