import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import Navbar from './Navbar';


export default function Signup() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [phone, setPhone] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();

    if (password !== confirmPassword) {
      alert("Passwords don't match!");
      return;
    }

    console.log({ name, email, phone, password });
  };

  return (
    <>
    <Navbar />
  
    <div className="vh-100 bg-light d-flex flex-column">


      {/* Main Content */}
      <main className="flex-grow-1 d-flex align-items-center justify-content-center p-4">
        <div className="w-100" style={{ maxWidth: '480px' }}>
          <div className="card border-0 shadow-lg rounded-4">
            <div className="card-body p-5">
              <div className="text-center mb-4">
                <p className="text-muted mb-1">Create your account</p>
                <h1 className="fw-bold fs-2">Sign up</h1>
              </div>

              <form onSubmit={handleSubmit}>
                {/* Name */}
                <div className="mb-3">
                  <input
                    type="text"
                    className="form-control form-control-lg py-3"
                    placeholder="Full Name"
                    value={name}
                    onChange={(e) => setName(e.target.value)}
                    required
                  />
                </div>

                {/* Email */}
                <div className="mb-3">
                  <input
                    type="email"
                    className="form-control form-control-lg py-3"
                    placeholder="Email"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    required
                  />
                </div>

                {/* Phone */}
                <div className="mb-3">
                  <input
                    type="tel"
                    className="form-control form-control-lg py-3"
                    placeholder="Phone Number (optional)"
                    value={phone}
                    onChange={(e) => setPhone(e.target.value)}
                  />
                </div>

                {/* Password */}
                <div className="mb-3">
                  <input
                    type="password"
                    className="form-control form-control-lg py-3"
                    placeholder="Password"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    required
                    minLength={6}
                  />
                </div>

                {/* Confirm Password */}
                <div className="mb-4">
                  <input
                    type="password"
                    className="form-control form-control-lg py-3"
                    placeholder="Confirm Password"
                    value={confirmPassword}
                    onChange={(e) => setConfirmPassword(e.target.value)}
                    required
                  />
                </div>

                {/* Submit Button */}
                <div className="d-grid mb-4">
                  <button type="submit" className="btn btn-primary btn-lg py-3 fw-bold">
                    Sign Up
                  </button>
                </div>

                {/* Login Link */}
                <div className="text-center">
                  <p className="mb-0 small text-muted">
                    Already have an account?{' '}
                    <Link to="/login" className="text-decoration-none fw-medium text-danger">
                      Log in
                    </Link>
                  </p>
                </div>
              </form>
            </div>
          </div>
        </div>
      </main>
    </div>
    </>
  );
}