export default function HemphuDigitalSevaLogin() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-100 to-indigo-200 flex items-center justify-center p-4">
      <div className="w-full max-w-6xl grid grid-cols-1 md:grid-cols-2 gap-6">

        {/* Left Branding Section */}
        <div className="bg-white rounded-3xl shadow-2xl p-10 flex flex-col justify-center">
          <h1 className="text-4xl font-bold text-indigo-700 mb-4">
            HempHu Digital Seva
          </h1>

          <p className="text-gray-600 text-lg leading-relaxed">
            Recharge • Banking • Booking • Utility Services
          </p>

          <div className="mt-8 space-y-4">
            <div className="bg-indigo-50 p-4 rounded-2xl">
              <h3 className="font-semibold text-indigo-700">Admin Panel</h3>
              <p className="text-sm text-gray-600">
                Manage users, payments, reports, and services.
              </p>
            </div>

            <div className="bg-blue-50 p-4 rounded-2xl">
              <h3 className="font-semibold text-blue-700">Distributor Panel</h3>
              <p className="text-sm text-gray-600">
                Create retailers, manage commissions and wallets.
              </p>
            </div>

            <div className="bg-green-50 p-4 rounded-2xl">
              <h3 className="font-semibold text-green-700">Retailer Panel</h3>
              <p className="text-sm text-gray-600">
                Recharge, bill payment and customer services.
              </p>
            </div>
          </div>
        </div>

        {/* Login Card */}
        <div className="bg-white rounded-3xl shadow-2xl p-10">
          <div className="flex justify-center mb-6">
            <div className="bg-indigo-600 text-white px-6 py-3 rounded-2xl text-xl font-bold shadow-lg">
              Login Portal
            </div>
          </div>

          <div className="space-y-6">
            {/* Role Selection */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                Select Login Type
              </label>

              <select className="w-full border border-gray-300 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-indigo-500">
                <option>Admin</option>
                <option>Distributor</option>
                <option>Retailer</option>
              </select>
            </div>

            {/* User ID */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                User ID / Mobile Number
              </label>

              <input
                type="text"
                placeholder="Enter User ID"
                className="w-full border border-gray-300 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-indigo-500"
              />
            </div>

            {/* Password */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                Password
              </label>

              <input
                type="password"
                placeholder="Enter Password"
                className="w-full border border-gray-300 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-indigo-500"
              />
            </div>

            {/* Remember Me */}
            <div className="flex items-center justify-between text-sm">
              <label className="flex items-center gap-2 text-gray-600">
                <input type="checkbox" className="rounded" />
                Remember Me
              </label>

              <button className="text-indigo-600 hover:underline">
                Forgot Password?
              </button>
            </div>

            {/* Login Button */}
            <button className="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-3 rounded-xl shadow-lg transition duration-300">
              Login Now
            </button>

            {/* Footer */}
            <div className="text-center text-sm text-gray-500 pt-4">
              © 2026 HempHu Digital Seva. All Rights Reserved.
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}