/* pers_creative — Contact Page */
(function () {
  const { useState } = React;

  function ContactPage() {
    const D = window.DATA;
    const [modalOpen, setModalOpen] = useState(false);

    return (
      <div className="app">
        <GNB page="contact"/>

        <div className="contact-page-body">
          {/* Contact Info Row */}
          <div style={{
            display:'flex', gap:'var(--sp-sm)', alignItems:'center',
            flexWrap:'wrap', marginBottom:'var(--sp-xl)',
            paddingBottom:'var(--sp-xl)', borderBottom:'1px solid var(--pers-gray)'
          }}>
            <a href={`tel:${D.studio.phone}`} className="contactinfo-box">
              {D.studio.phone}
            </a>
            <span className="divider"/>
            <a href={`mailto:${D.studio.email}`} className="contactinfo-box mail">
              {D.studio.email}
            </a>
            <span className="divider"/>
            <span className="contactinfo-box map" style={{fontFamily:'var(--font-ko)', textTransform:'none'}}>
              {D.studio.address}
            </span>
            <span className="divider"/>
            <a href={D.studio.instagram} target="_blank" rel="noopener noreferrer" className="contactinfo-box instagram">
              <Icons.Insta/>
            </a>
          </div>

          {/* Inquiry Form Inline */}
          <p className="guidetext-box" style={{marginBottom:'var(--sp-xl)'}}>{D.contact.guideText}</p>

          <button className="formsend-button" style={{width:'auto', paddingLeft:'var(--sp-xl)', paddingRight:'var(--sp-xl)'}}
            onClick={()=>setModalOpen(true)}>
            문의하기
          </button>
        </div>

        <Footer/>
        <InquiryModal open={modalOpen} onClose={()=>setModalOpen(false)}/>
      </div>
    );
  }

  ReactDOM.createRoot(document.getElementById('root')).render(<ContactPage/>);
})();