"use client"

import { FcGoogle } from 'react-icons/fc';
import Image from 'next/image';
import { signIn } from "next-auth/react"
 


export default function Home() {
  const handleSignIn = () => {
    signIn("google")
  }
  return (
    <div className="bg-[url('/imsi_bg.png')] bg-cover bg-center h-screen">
      {/* <video className="bg-cover bg-center h-screen" autoPlay loop muted>
        <source src="/bgmv.mp4" type="video/mp4" />
        Your browser does not support the video tag.
      </video> */}
      <div className="
      h-screen
      pt-5 pb-5

      w-full sm:w-1/2 xl:w-1/3
      transition-width 

      fixed right-0
      shadow-lg

      min-w-[500px] min-h-[500px]
      " >
        <div
        className="
        bg-black/30 backdrop-blur-lg

        w-full h-full
        rounded-tl-xl rounded-bl-xl
        flex flex-col items-center justify-center
        p-5
        "
        >
          <div className="flex flex-col items-center justify-center gap-5">
            <div className="flex flex-col items-center justify-center gap-5">
              <div className="text-white text-2xl font-bold mb-3 justify-center items-center">
                <Image src="/ever_logo.png" alt="logo" width={100} height={100} />
              </div>
              <div className="text-white text-4xl font-bold text-center mb-3">콘텐츠 음원 수익<br/>에버팩토리에서 편리하게</div>
              <div className="text-white text-md text-center mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis maximus</div>
            </div>
            <div>
              <div className="text-white text-md text-center mb-3 cursor-pointer ">Ready to travel with us?<br/> Enter your email to create or restart your membership.</div>
              <div className="pointer rounded-full bg-white p-2 flex items-center justify-center gap-2 cursor-pointer" onClick={handleSignIn}> <FcGoogle/> continue with google</div>
            </div>
          </div>

        </div>
      </div>
    </div>
  );
}