'use client'

import { useHeaderStore } from '@/store/header'
import { useEffect } from 'react'

export default function Main() {
  const { setBackBtn } = useHeaderStore()
  useEffect(() => {
    setBackBtn(false)
  }, [])

  return (
    <>
      <div className="main-contens">
        <div className="main-head-block">
          <div className="head-block-tit">屋根材の照会</div>
          <div className="head-block-text">ご使用の屋根材の適合性をご確認いただけます</div>
          <div className="head-block-link-wrap">
            <button className="head-block-link">
              照会まさに移動<i className="block-arr"></i>
            </button>
          </div>
        </div>
        <div className="main-grid-wrap">
          <div className="main-grid-bx bx01">
            <div className="grid-bx-head">
              <div className="main-bx-icon">
                <img src="/assets/images/main/main_icon01.svg" alt="" />
              </div>
              <button className="main-bx-arr"></button>
            </div>
            <div className="grid-bx-body">
              <div className="grid-bx-body-tit">調査物件一覧</div>
              <div className="grid-bx-body-txt">作成物件確認</div>
            </div>
          </div>
          <div className="main-grid-bx bx02">
            <div className="grid-bx-head">
              <div className="main-bx-icon">
                <img src="/assets/images/main/main_icon02.svg" alt="" />
              </div>
              <button className="main-bx-arr"></button>
            </div>
            <div className="grid-bx-body">
              <div className="grid-bx-body-tit">調査物件登録</div>
              <div className="grid-bx-body-txt">新規物件作成</div>
            </div>
          </div>
          <div className="main-grid-bx bx03">
            <div className="grid-bx-head">
              <div className="main-bx-icon">
                <img src="/assets/images/main/main_icon03.svg" alt="" />
              </div>
              <button className="main-bx-arr"></button>
            </div>
            <div className="grid-bx-body">
              <div className="grid-bx-body-tit">1:1お問い合わせ リスト</div>
              <div className="grid-bx-body-txt">作成問い合わせの確認</div>
            </div>
          </div>
          <div className="main-grid-bx bx04">
            <div className="grid-bx-head">
              <div className="main-bx-icon">
                <img src="/assets/images/main/main_icon04.svg" alt="" />
              </div>
              <button className="main-bx-arr"></button>
            </div>
            <div className="grid-bx-body">
              <div className="grid-bx-body-tit">1:1問い合わせ登録</div>
              <div className="grid-bx-body-txt">新規お問い合わせの 作成</div>
            </div>
          </div>
        </div>
      </div>
    </>
  )
}