/* eslint-disable */
// ─────────────────────────────────────────────────────────────
// searchgg · 로그인 화면 (소셜 로그인: 카카오 / 디스코드 / 구글)
// window.LoginScreen
// ─────────────────────────────────────────────────────────────

function KakaoMark({ size = 20 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <path d="M12 3.5c-5 0-9 3.13-9 7 0 2.5 1.7 4.69 4.27 5.94-.15.53-.78 2.78-.81 2.96 0 0-.02.14.07.2.09.05.2 0 .2 0 .26-.04 3.02-2 3.5-2.33.57.08 1.16.13 1.77.13 5 0 9-3.13 9-7s-4-7-9-7z" fill="#191600" />
    </svg>
  );
}
function DiscordMark({ size = 20 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="#fff">
      <path d="M20.317 4.369A19.79 19.79 0 0 0 15.885 3c-.21.375-.45.88-.617 1.28a18.27 18.27 0 0 0-5.535 0C9.565 3.88 9.318 3.375 9.107 3A19.736 19.736 0 0 0 4.677 4.369C1.9 8.46 1.144 12.44 1.522 16.36a19.9 19.9 0 0 0 6.075 3.05c.49-.665.927-1.372 1.304-2.114-.717-.27-1.404-.604-2.05-.99.172-.126.34-.257.502-.39 3.96 1.84 8.245 1.84 12.16 0 .164.135.332.266.5.39-.647.387-1.335.72-2.052.99.378.742.814 1.45 1.304 2.114a19.84 19.84 0 0 0 6.078-3.05c.444-4.55-.758-8.494-3.205-11.99zM8.02 14.09c-1.18 0-2.15-1.085-2.15-2.42 0-1.334.95-2.42 2.15-2.42 1.21 0 2.17 1.096 2.15 2.42 0 1.335-.95 2.42-2.15 2.42zm7.96 0c-1.18 0-2.15-1.085-2.15-2.42 0-1.334.95-2.42 2.15-2.42 1.21 0 2.17 1.096 2.15 2.42 0 1.335-.94 2.42-2.15 2.42z" />
    </svg>
  );
}
function GoogleMark({ size = 20 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24">
      <path d="M23.04 12.26c0-.81-.07-1.59-.21-2.34H12v4.43h6.2a5.3 5.3 0 0 1-2.3 3.48v2.89h3.72c2.18-2 3.42-4.96 3.42-8.46z" fill="#4285F4" />
      <path d="M12 24c3.11 0 5.72-1.03 7.63-2.79l-3.72-2.89c-1.03.69-2.35 1.1-3.91 1.1-3 0-5.55-2.03-6.46-4.76H1.69v2.98A11.99 11.99 0 0 0 12 24z" fill="#34A853" />
      <path d="M5.54 14.66A7.2 7.2 0 0 1 5.16 12c0-.92.16-1.82.38-2.66V6.36H1.69A11.99 11.99 0 0 0 .43 12c0 1.94.47 3.77 1.26 5.4l3.85-2.74z" fill="#FBBC05" />
      <path d="M12 4.77c1.69 0 3.21.58 4.4 1.72l3.3-3.3C17.71 1.19 15.1 0 12 0 7.31 0 3.26 2.69 1.69 6.36l3.85 2.98C6.45 6.61 9 4.77 12 4.77z" fill="#EA4335" />
    </svg>
  );
}

function SocialButton({ provider, bg, color, border, mark }) {
  const [hover, setHover] = React.useState(false);
  return (
    <button
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ display: 'flex', alignItems: 'center', gap: 12, width: '100%', padding: '13px 18px', borderRadius: 8, cursor: 'pointer',
        background: bg, color, border: border || 'none', fontFamily: "'Pretendard',sans-serif", fontWeight: 700, fontSize: 14.5,
        boxShadow: hover ? '0 4px 14px rgba(0,0,0,.14)' : '0 1px 2px rgba(0,0,0,.06)', transform: hover ? 'translateY(-1px)' : 'none', transition: 'all .16s' }}>
      <span style={{ display: 'grid', placeItems: 'center', width: 22 }}>{mark}</span>
      <span style={{ flex: 1, textAlign: 'center', marginRight: 22 }}>{provider}(으)로 계속하기</span>
    </button>
  );
}

function LoginScreen({ onClose }) {
  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, zIndex: 400, background: 'rgba(20,22,26,.62)', backdropFilter: 'blur(3px)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20, animation: 'sgFade .2s ease' }}>
      <div onClick={(e) => e.stopPropagation()} style={{ width: 420, maxWidth: '100%', background: '#fff', borderRadius: 14, overflow: 'hidden', boxShadow: '0 24px 70px rgba(0,0,0,.34)', fontFamily: "'Pretendard',sans-serif" }}>
        <div style={{ position: 'relative', background: '#23262b', padding: '34px 30px 30px', textAlign: 'center' }}>
          <button onClick={onClose} aria-label="닫기" style={{ position: 'absolute', top: 14, right: 14, width: 30, height: 30, borderRadius: 6, border: 'none', background: 'rgba(255,255,255,.12)', color: '#fff', cursor: 'pointer', fontSize: 16, lineHeight: 1 }}>×</button>
          <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 14 }}><Logo size={26} light /></div>
          <h2 style={{ margin: 0, color: '#fff', fontSize: 21, fontWeight: 800, letterSpacing: '-.4px' }}>로그인</h2>
          <p style={{ margin: '7px 0 0', color: 'rgba(255,255,255,.6)', fontSize: 13, lineHeight: 1.5 }}>소셜 계정으로 간편하게 시작하세요</p>
        </div>
        <div style={{ padding: '24px 30px 14px', display: 'flex', flexDirection: 'column', gap: 11 }}>
          <SocialButton provider="카카오" bg="#FEE500" color="#191600" mark={<KakaoMark />} />
          <SocialButton provider="디스코드" bg="#5865F2" color="#fff" mark={<DiscordMark />} />
          <SocialButton provider="구글" bg="#fff" color="#33373d" border="1px solid #dadce0" mark={<GoogleMark />} />
        </div>
        <div style={{ padding: '8px 30px 26px', textAlign: 'center' }}>
          <p style={{ margin: 0, fontSize: 11.5, color: '#949aa3', lineHeight: 1.6 }}>
            로그인 시 <a style={{ color: '#5b626c', textDecoration: 'underline', cursor: 'pointer' }}>이용약관</a> 및 <a style={{ color: '#5b626c', textDecoration: 'underline', cursor: 'pointer' }}>개인정보처리방침</a>에<br />동의하는 것으로 간주됩니다.
          </p>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { LoginScreen });