 <div className="min-vh-100 d-flex align-items-center bg-body-tertiary py-5">
      <div className="container">
        <div className="row g-5 align-items-center justify-content-center">
          {/* Marketing Panel */}
          <div className="col-lg-5 d-none d-lg-block">
            <div className="text-center px-4">
              <div className="mb-4">
                <i
                  className="bi bi-stars text-primary"
                  style={{ fontSize: "4rem" }}
                ></i>
              </div>
              <h2 className="fw-bold mb-3">Join MangoFusion</h2>
              <p className="text-muted mb-4">
                Create your account to discover fresh dishes and manage your
                orders.
              </p>
              <div className="text-start mx-auto" style={{ maxWidth: "360px" }}>
                <div className="d-flex mb-2 small">
                  <i className="bi bi-check-circle-fill text-primary me-2"></i>
                  <span>Personalized experience</span>
                </div>
                <div className="d-flex mb-2 small">
                  <i className="bi bi-check-circle-fill text-primary me-2"></i>
                  <span>Save favorites & re-order</span>
                </div>
                <div className="d-flex mb-2 small">
                  <i className="bi bi-check-circle-fill text-primary me-2"></i>
                  <span>Exclusive offers</span>
                </div>
              </div>
            </div>
          </div>

          <div className="col-md-9 col-lg-6 col-xl-5">
            <div className="border rounded-4 shadow-sm p-4 p-lg-5">
              <div className="mb-4 text-center">
                <h3 className="fw-bold mb-1">Create Account</h3>
                <p className="text-muted small mb-0">Sign up to get started</p>
              </div>

              <form>
                <div className="form-floating mb-3">
                  <input
                    type="text"
                    className="form-control"
                    id="name"
                    name="name"
                    placeholder="Full Name"
                    required
                  />
                  <label htmlFor="name">Full Name</label>
                </div>
                <div className="form-floating mb-3">
                  <input
                    type="email"
                    className="form-control"
                    id="email"
                    name="email"
                    placeholder="name@example.com"
                    required
                  />
                  <label htmlFor="email">Email address</label>
                </div>

                <div className="row g-2 mb-2">
                  <div className="col-sm-6">
                    <div className="form-floating">
                      <input
                        type="password"
                        className="form-control"
                        id="password"
                        name="password"
                        placeholder="Password"
                        required
                      />
                      <label htmlFor="password">Password</label>
                    </div>
                  </div>
                  <div className="col-sm-6">
                    <div className="form-floating">
                      <input
                        type="password"
                        className="form-control"
                        id="confirmPassword"
                        name="confirmPassword"
                        placeholder="Confirm Password"
                        required
                      />
                      <label htmlFor="confirmPassword">Confirm Password</label>
                    </div>
                  </div>
                </div>

                <div className="mb-3">
                  <label className="form-label small fw-semibold text-uppercase text-muted">
                    Role
                  </label>
                  <select className="form-select" id="role" name="role">
                    <option value="Customer">Customer</option>
                    <option value="Admin">Admin</option>
                  </select>
                </div>

                <button
                  type="submit"
                  className="btn btn-primary w-100 py-2 mb-3"
                >
                  <span
                    className="spinner-border spinner-border-sm me-2"
                    role="status"
                  ></span>
                  Creating... Create Account
                </button>
              </form>
              <div className="text-center small">
                <span className="text-muted">Already have an account? </span>
                <a href="/login" className="fw-semibold">
                  Sign in
                </a>
              </div>
              <div className="text-center mt-3 small">
                <a href="/" className="text-decoration-none">
                  <i className="bi bi-arrow-left me-1"></i>Back to Home
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>