'use client'

import Footer from "@/components/layouts/Footer";
import { useState } from "react";

export default function LoginPage(){
  const [pwShow, setPwShow] = useState(false); //비밀번호 보이기 숨기기

  return(
    <div className="wrap">
      <div className="container">
        <div className="login-contents">
          <h1 className="login-logo">Hanasys 現地調査</h1>
          <div className="login-form-wrap">
            <div className="login-form mb15">
              <div className="login-input id">
                <input type="text" className="login-frame" placeholder="Input Frame ID"/>
                <button className="login-icon"><i className="del-icon"></i></button>
              </div>
            </div>
            <div className="login-form">
              <div className="login-input pw">
                <input type={`${pwShow ? 'text': 'password'}`} className="login-frame" placeholder="Input Frame PW"/>
                <button className={`login-icon ${pwShow ? 'act' : ''}`} onClick={() => setPwShow(!pwShow)}><i className="show-icon"></i></button>
              </div>
            </div>
            <div className="login-check-warp">
              <div className="check-form-box">
                <input type="checkbox" id="ch01"/>
                <label htmlFor="ch01">ID Save</label>
              </div>
              <div className="toggle-form">
                <label className="toggle-btn">
                    <input type="checkbox"/>
                    <span className="slider"></span>
                </label>
                <div className="toggle-name">Q.PARTNERS</div>
              </div>
            </div>
            <div className="login-btn-wrap">
              <button className="btn-frame icon login">お問い合わせ  <i className="btn-arr"></i></button>
            </div>
          </div>
        </div>
      </div>
      <Footer/>
    </div>
  )
}