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

export default function VerifyEmail() {
  const email = "example@eg.com"; 

  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" style={{ marginTop: "-100px" }}>
        {/* <div className="w-100" style={{ maxWidth: '500px' }}> */}
          <div className="card border-0 shadow-lg rounded-4">
            <div className="card-body p-5">
              <div className="text-center mb-4">
                <h1 className="fw-bold fs-2">Verify your E-mail address</h1>
              </div>

              <div className="mb-4">
                <p className="text-muted mb-3">
                  We’ve sent a confirmation email to <strong>{email}</strong>. Please click the link in the email to continue.
                </p>
                <p className="mb-0">
                  Didn’t get the email?{' '}
                  <a href="#" className="text-decoration-none text-primary fw-medium">
                    Resend Email
                  </a>.
                  {' '}Entered the wrong address?{' '}
                  <a href="#" className="text-decoration-none text-primary fw-medium">
                    Change Email
                  </a>.
                  {' '}Need help?{' '}
                  <a href="#" className="text-decoration-none text-primary fw-medium">
                    Contact Support
                  </a>.
                </p>
              </div>

              {/* Success Alert at Bottom */}
              <div
                className="alert alert-success d-flex align-items-center justify-content-between mt-4"
                role="alert"
                style={{
                  borderRadius: '1rem',
                  padding: '0.75rem 1rem',
                }}
              >
                <span>✅ Confirmation email sent to {email}</span>
                <button
                  type="button"
                  className="btn-close"
                  aria-label="Close"
                  style={{ fontSize: '0.75rem' }}
                ></button>
              </div>
            </div>
          </div>
        {/* </div> */}
      </main>
    </div>

    </>
  );
}