"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="relative min-h-screen overflow-hidden bg-black">
      <video
        className="fixed inset-0 w-full h-full object-cover z-0"
        autoPlay
        muted
        loop
        playsInline
        preload="metadata"
        poster="/imsi_bg.png"
      >
        <source src="/everfactory.mp4" type="video/mp4" />
      </video>
      <div className="
      pt-5 pb-5

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

      fixed right-0 top-0 bottom-0 z-10
      shadow-lg

      min-w-[500px] min-h-[500px]
      "
      style={{ height: '100dvh', paddingBottom: 'max(env(safe-area-inset-bottom), 1.25rem)' }}
      >
        <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="/falogo2.png" alt="logo" width={200} height={200} />
              </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 className="w-full">
              <div className="text-white text-md text-center mb-3 cursor-pointer ">Ready to travel with us?</div>
              <div className="pointer rounded-full bg-white p-2 flex items-center justify-center gap-2 cursor-pointer w-full" onClick={handleSignIn}> <FcGoogle/> continue with google</div>
            </div>
          </div>

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