'use client'
import { useState } from 'react'
import Link from 'next/link'

export default function LoginPage() {
  const [showPassword, setShowPassword] = useState(false)

  return (
    <main className="flex-1 flex flex-col min-h-screen">
      {/* Header Branding */}
      <div className="flex flex-col items-center justify-center pt-16 pb-8 px-4">
        <div className="w-16 h-16 rounded-2xl bg-[#10b981] flex items-center justify-center shadow-lg mb-4">
          <span className="material-symbols-outlined text-white text-[36px]" style={{ fontVariationSettings: "'FILL' 1" }}>storefront</span>
        </div>
        <h1 className="text-[28px] font-bold text-[#006c49]">CommunityMarket</h1>
        <p className="text-[14px] text-[#3c4a42] mt-1">Masuk ke akun warga kamu</p>
      </div>

      {/* Form */}
      <div className="flex-1 px-4 flex flex-col gap-4">
        <div className="flex flex-col gap-2">
          <label className="text-[12px] font-semibold text-[#3c4a42]">Email</label>
          <div className="relative flex items-center">
            <span className="material-symbols-outlined absolute left-3 text-[#6c7a71]">mail</span>
            <input
              type="email"
              placeholder="email@kamu.com"
              className="w-full h-12 pl-10 pr-4 bg-white border border-[#bbcabf] rounded-xl text-[14px] text-[#141b2b] placeholder:text-[#6c7a71] focus:outline-none focus:border-[#10b981] focus:ring-1 focus:ring-[#10b981] transition-colors"
            />
          </div>
        </div>

        <div className="flex flex-col gap-2">
          <label className="text-[12px] font-semibold text-[#3c4a42]">Password</label>
          <div className="relative flex items-center">
            <span className="material-symbols-outlined absolute left-3 text-[#6c7a71]">lock</span>
            <input
              type={showPassword ? 'text' : 'password'}
              placeholder="Masukkan password"
              className="w-full h-12 pl-10 pr-12 bg-white border border-[#bbcabf] rounded-xl text-[14px] text-[#141b2b] placeholder:text-[#6c7a71] focus:outline-none focus:border-[#10b981] focus:ring-1 focus:ring-[#10b981] transition-colors"
            />
            <button
              type="button"
              onClick={() => setShowPassword(!showPassword)}
              className="absolute right-3 text-[#6c7a71] hover:text-[#3c4a42]"
            >
              <span className="material-symbols-outlined text-[20px]">
                {showPassword ? 'visibility_off' : 'visibility'}
              </span>
            </button>
          </div>
        </div>

        <div className="flex justify-end">
          <button className="text-[12px] font-semibold text-[#006c49] hover:underline">Lupa password?</button>
        </div>

        <Link href="/">
          <button className="w-full h-12 bg-[#10b981] text-white rounded-xl text-[14px] font-semibold hover:opacity-90 active:scale-[0.98] transition-all shadow-md mt-2">
            Masuk
          </button>
        </Link>

        {/* Divider */}
        <div className="flex items-center gap-3 my-2">
          <div className="flex-1 h-px bg-[#dee0e2]" />
          <span className="text-[12px] text-[#6c7a71]">atau</span>
          <div className="flex-1 h-px bg-[#dee0e2]" />
        </div>

        {/* Google Login */}
        <button className="w-full h-12 bg-white border border-[#bbcabf] rounded-xl text-[14px] font-semibold text-[#141b2b] flex items-center justify-center gap-3 hover:bg-[#f1f3ff] active:scale-[0.98] transition-all">
          <svg width="18" height="18" viewBox="0 0 48 48">
            <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"/>
            <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"/>
            <path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"/>
            <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.18 1.48-4.97 2.31-8.16 2.31-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"/>
          </svg>
          Masuk dengan Google
        </button>
      </div>

      {/* Footer */}
      <div className="p-8 flex justify-center">
        <p className="text-[14px] text-[#3c4a42]">
          Belum punya akun?{' '}
          <Link href="/register" className="text-[#006c49] font-semibold hover:underline">Daftar sekarang</Link>
        </p>
      </div>
    </main>
  )
}