import Layout from "@/app/layout";
import { useEffect, useState } from "react";

const Contact = () => {
  const [isClient, setIsClient] = useState(false);
  useEffect(() => {
    setIsClient(true); // Chỉ set khi component đã mount trên client
  }, []);

  if (!isClient) {
    return null; // Tránh render trên server
  }

  return (
    <Layout>
      <div className="page-contact">
        <div className="container">
          <div className="content-page-contact flex justify-center">
            <div className="contact-left">
              <h1 className="title-contact">Liên hệ</h1>
              <div className="note">
                Đội ngũ hỗ trợ của Hurasoft luôn sẵn sàng hỗ trợ quý khách
              </div>

              <div className="list-info">
                <div className="item">
                  <div className="icon">
                    <i className="icon_2024 map"></i>
                  </div>
                  <div className="txt">
                    Tầng 5 - Số 3,ngõ 18 Yên Lãng,Đống Đa, Hà Nội
                  </div>
                </div>
                <div className="item">
                  <div className="icon">
                    <i className="icon_2024 phone"></i>
                  </div>
                  <div className="txt d-flex align-items">
                    <a href="02422138068">02422.138.068</a>
                    <span>-</span>
                    <a href="tel:0904580181">0904.580.181</a>
                  </div>
                </div>
                <div className="item">
                  <div className="icon">
                    <i className="icon_2024 email"></i>
                  </div>
                  <a href="mailto:hotro@hurasoft.com" className="txt">
                    hotro@hurasoft.com
                  </a>
                </div>
              </div>
            </div>
            <div className="contact-right">
              <div className="box-form">
                <b>Để lại lời nhắn</b>
                <div className="item-form">
                  <label>
                    Tên <span>*</span>
                  </label>
                  <input
                    type="text"
                    name="name"
                    className="input-item"
                    id="js-contact-name"
                    placeholder="Nhập họ và tên"
                  />
                  <div className="note-error"></div>
                </div>
                <div className="item-form">
                  <label>
                    Email <span>*</span>
                  </label>
                  <input
                    type="text"
                    name="email"
                    className="input-item"
                    id="js-contact-email"
                    placeholder="hello@example.com..."
                  />
                  <div className="note-error"></div>
                </div>

                <div className="item-form">
                  <label>
                    Số điện thoại <span>*</span>
                  </label>
                  <input
                    type="text"
                    name="phone"
                    className="input-item"
                    id="js-contact-tel"
                    placeholder="Nhập số điện thoại của bạn"
                  />
                  <div className="note-error"></div>
                </div>

                <div className="item-form">
                  <label>website</label>
                  <input
                    type="text"
                    name="web"
                    className="input-item"
                    id="js-contact-web"
                    placeholder="Nhập website của bạn"
                  />
                  <div className="note-error"></div>
                </div>

                <div className="item-form">
                  <label>Nội dung</label>
                  <textarea
                    name="note"
                    id="js-contact-content"
                    className="input-item"
                    placeholder="Nhập nội dung"
                  ></textarea>
                </div>

                <a href="javascript:void(0)" className="btn btn-submit">
                  Gửi thông tin <i className="fa-solid fa-arrow-right-long"></i>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Layout>
  );
};

export default Contact;
