// Login page — minimal, social-only

const Login = ({ navigate }) => {
  const handleLogin = () => {
    navigate('home');
  };

  return (
    <main>
      <div className="auth-page">
        <div className="auth-card">
          <a className="auth-logo" href="#" onClick={e => { e.preventDefault(); navigate('home'); }}>
            <span className="logo-mark">S</span> 솔브잇
          </a>

          <h1>솔브잇 시작하기</h1>
          <p className="sub">소셜 계정으로 3초 만에 로그인하세요.</p>

          <div className="auth-social">
            <button className="btn-social featured" type="button" onClick={handleLogin}>
              <span className="swatch" style={{ background: "#181600", color: "#FEE500" }}>K</span>
              <span className="grow">카카오로 계속하기</span>
              <span className="hint" style={{ background: "rgba(0,0,0,0.08)", color: "#181600" }}>추천</span>
            </button>
            <button className="btn-social" type="button" onClick={handleLogin}>
              <span className="swatch" style={{ background: "#03C75A", color: "#fff" }}>N</span>
              <span className="grow">네이버로 계속하기</span>
            </button>
            <button className="btn-social" type="button" onClick={handleLogin}>
              <span className="swatch" style={{ background: "#fff", border: "1px solid var(--line)" }}>
                <svg width="14" height="14" viewBox="0 0 24 24">
                  <path fill="#4285F4" d="M22.5 12.2c0-.8-.1-1.4-.2-2.1H12v3.9h5.9c-.1.9-.7 2.4-2 3.4l-.02.1 2.9 2.2.2.02c1.9-1.7 3-4.2 3-7.5z"/>
                  <path fill="#34A853" d="M12 23c2.6 0 4.8-.9 6.4-2.3l-3-2.4c-.8.6-1.9 1-3.4 1-2.6 0-4.8-1.7-5.6-4.1l-.1 0-3 2.3-.04.1C4.9 20.3 8.2 23 12 23z"/>
                  <path fill="#FBBC05" d="M6.4 15.2c-.2-.6-.3-1.3-.3-2.2s.1-1.6.3-2.2v-.1l-3-2.3-.1.04A11 11 0 0 0 2 13c0 1.8.4 3.4 1.2 4.8l3.2-2.6z"/>
                  <path fill="#EB4335" d="M12 5c1.8 0 3.1.8 3.8 1.4l2.8-2.7C16.8 2 14.6 1 12 1 8.2 1 4.9 3.7 3.3 7.5l3.1 2.4C7.2 7.7 9.4 5 12 5z"/>
                </svg>
              </span>
              <span className="grow">Google로 계속하기</span>
            </button>
            <button className="btn-social" type="button" onClick={handleLogin}>
              <span className="swatch" style={{ background: "#000", color: "#fff" }}>
                <svg width="12" height="14" viewBox="0 0 13 16">
                  <path fill="currentColor" d="M10.5 8.5c0-2 1.6-2.9 1.7-3-.9-1.3-2.4-1.5-2.9-1.5-1.2-.1-2.4.7-3 .7-.6 0-1.6-.7-2.6-.7-1.4 0-2.6.8-3.3 2-1.4 2.4-.4 5.9 1 7.8.7.9 1.5 2 2.5 1.9 1 0 1.4-.6 2.6-.6 1.2 0 1.5.6 2.6.6 1.1 0 1.8-.9 2.4-1.8.8-1 1.1-2.1 1.1-2.1-.1 0-2.1-.8-2.1-3.3zM8.7 2.7c.5-.6.9-1.5.8-2.4-.8 0-1.7.5-2.2 1.1-.5.5-.9 1.4-.8 2.3.9.1 1.7-.4 2.2-1z"/>
                </svg>
              </span>
              <span className="grow">Apple로 계속하기</span>
            </button>
          </div>

          <p className="auth-terms">
            로그인 시 솔브잇의{" "}
            <a href="#" onClick={e => { e.preventDefault(); navigate('terms'); }}>이용약관</a>과{" "}
            <a href="#" onClick={e => { e.preventDefault(); navigate('privacy'); }}>개인정보처리방침</a>에 동의하게 됩니다.
          </p>

          <div className="auth-back">
            <a href="#" onClick={e => { e.preventDefault(); navigate('home'); }}>← 홈으로 돌아가기</a>
          </div>
        </div>
      </div>
    </main>
  );
};

window.Login = Login;