"use client";
import Link from 'next/link';

export default function LoginPage() {
  return (
    <div className="auth-page">
      <div className="auth-card">
        <h1 className="auth-title"><span>Login</span></h1>
        <p className="auth-sub">Access your pricing and order history.</p>
        
        <form className="auth-form" onSubmit={(e) => e.preventDefault()}>
          <div className="form-group">
            <label className="form-label">Username</label>
            <input className="form-input" type="text" placeholder="contractor_name" />
          </div>
          <div className="form-group">
            <label className="form-label">Password</label>
            <input className="form-input" type="password" placeholder="••••••••" />
          </div>
          
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '24px' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
              <input type="checkbox" id="remember" />
              <label htmlFor="remember" style={{ fontSize: '12px', color: 'rgba(255,255,255,0.5)' }}>Remember me</label>
            </div>
            <a href="#" style={{ fontSize: '12px', color: 'var(--orange)', textDecoration: 'none' }}>Forgot Password?</a>
          </div>
          
          <button type="submit" className="form-submit" style={{ width: '100%' }}>Login to Portal →</button>
        </form>
        
        {/* <div style={{ marginTop: '32px', textAlign: 'center', fontSize: '13px', color: 'rgba(255,255,255,0.5)' }}>
          Don't have a contractor account? <br />
          <Link href="/#quote" style={{ color: 'var(--orange)', fontWeight: 600, textDecoration: 'none' }}>Apply for contractor pricing</Link>
        </div> */}
      </div>
    </div>
  );
}