/* pers_creative — Shared Components */
(function () {
  const { useState, useEffect, useRef } = React;

  /* SVG Icons */
  const IconClose = () => (
    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M14.83 9.17L9.17 14.83M14.83 14.83L9.17 9.17"/>
      <circle cx="12" cy="12" r="9"/>
    </svg>
  );
  const IconInsta = () => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <rect x="2" y="2" width="20" height="20" rx="5"/>
      <circle cx="12" cy="12" r="4"/>
      <circle cx="17.5" cy="6.5" r="0.5" fill="currentColor"/>
    </svg>
  );
  const IconArrow = ({ style }) => (
    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" style={style}>
      <path d="M5 12h14M12 5l7 7-7 7"/>
    </svg>
  );
  const IconArrowUp = () => (
    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" style={{transform:'rotate(-90deg)'}}>
      <path d="M5 12h14M12 5l7 7-7 7"/>
    </svg>
  );
  const IconChevron = ({ dir = 'down' }) => {
    const rot = { up: '180deg', down: '0deg', left: '-90deg', right: '90deg' }[dir] || '0deg';
    return (
      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" style={{transform:`rotate(${rot})`, transition:'transform 0.3s'}}>
        <path d="M6 9l6 6 6-6"/>
      </svg>
    );
  };
  const IconGrid = () => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
      <rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/>
      <rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/>
    </svg>
  );
  const IconList = () => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
      <path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/>
    </svg>
  );

  /* ── GNB ──────────────────────────────── */
  function GNB({ page, onPanel, openPanel }) {
    const D = window.DATA;
    return (
      <div className="gnb">
        <div className="logo-box">
          <a href="index.html">
            <img src="assets/logo_pers.png" alt={D.studio.name} className="logo-img"/>
          </a>
        </div>
        <div className="link-box" style={{ gap: 0 }}>
          {page !== 'home' && <>
            <a href="index.html" className="linkitem-box">home</a>
            <span className="divider"/>
          </>}
          {page === 'home' && <>
            <button className="linkitem-box" onClick={() => onPanel('about')}>about</button>
            <span className="divider"/>
          </>}
          <a href="portfolio.html" className="linkitem-box">portfolio</a>
          <span className="divider"/>
          <a href="contact.html" className="linkitem-box">contact</a>
          <span className="divider"/>
          <a href="portfolio.html" className="linkitem-box kr">포트폴리오</a>
        </div>
      </div>
    );
  }

  /* ── Inquiry Modal ────────────────────── */
  function InquiryModal({ open, onClose }) {
    const D = window.DATA;
    const [tab, setTab] = useState('estimate');
    const underlineLeft = tab === 'estimate' ? '3px' : '103px';

    return (
      <div className={`inquirymodal-container ${open ? 'open' : ''}`}>
        {/* Modal Bar */}
        <div className="modalbar-box">
          <button className="modalclose-button" onClick={onClose}>
            <IconClose/> 닫기
          </button>
          <a href={D.studio.instagram} target="_blank" rel="noopener noreferrer" className="contactinfo-box top" style={{display:'flex'}}>
            <IconInsta/>
          </a>
        </div>

        <div className="inquirymodal-box">
          {/* Guide */}
          <p className="guidetext-box">{D.contact.guideText}</p>

          {/* Tabs */}
          <div className="formtype-container">
            <button className={`formtype-button ${tab==='estimate'?'active':''}`} onClick={()=>setTab('estimate')}>
              견적 문의
            </button>
            <button className={`formtype-button ${tab==='general'?'active':''}`} onClick={()=>setTab('general')}>
              일반 문의
            </button>
            <div className="typeunderline-box" style={{left: underlineLeft}}/>
          </div>

          {/* Form */}
          <form onSubmit={e=>e.preventDefault()}>
            <div className="inquiryform-container">
              <div className="formitem-box">
                <label className="fieldlabel-text">이름*</label>
                <input className="inputfield-box" placeholder="연락 받으실 분의 성함을 입력해주세요." required/>
              </div>
              <div className="formitem-box">
                <label className="fieldlabel-text">이메일 주소*</label>
                <input className="inputfield-box" type="email" placeholder="답변을 받으실 이메일 주소를 입력해주세요." required/>
              </div>
              <div className="formitem-box">
                <label className="fieldlabel-text">전화번호*</label>
                <input className="inputfield-box" type="tel" placeholder="전화 답변을 원하시면 번호를 입력해주세요."/>
              </div>

              {tab === 'estimate' && (
                <div className="estimateform-container">
                  <div className="formitem-box">
                    <label className="fieldlabel-text">위치</label>
                    <input className="inputfield-box" placeholder="현장의 지역이나 주소를 입력해주세요."/>
                  </div>
                  <div className="formitem-box">
                    <label className="fieldlabel-text">면적</label>
                    <input className="inputfield-box" placeholder="견적 대상의 면적을 입력해주세요."/>
                  </div>
                  <div className="formitem-box">
                    <label className="fieldlabel-text">시기</label>
                    <input className="inputfield-box" placeholder="원하는 프로젝트의 대략적인 시기를 입력해주세요."/>
                  </div>
                  <div className="formitem-box">
                    <label className="fieldlabel-text">업종</label>
                    <input className="inputfield-box" placeholder="대상의 대략적인 업종이나 용도를 입력해주세요."/>
                  </div>
                </div>
              )}

              <div className="formitem-box message">
                <label className="fieldlabel-text">문의 내용*</label>
                <textarea className="inputfield-box textarea" placeholder="필요하신 문의 사항을 입력해주세요." required/>
              </div>
            </div>
            <div className="formfunction-box">
              <button type="submit" className="formsend-button">보내기</button>
            </div>
          </form>
        </div>
      </div>
    );
  }

  /* ── Notice Modal ─────────────────────── */
  function NoticeModal({ notice }) {
    const [open, setOpen] = useState(!!notice);
    if (!notice) return null;
    return (
      <div className={`noticemodal-box ${open?'open':''}`}>
        <button className="noticeclose-button" onClick={()=>setOpen(false)}>
          <IconClose/>
        </button>
        <div className="noticecontent-box">
          <div className="noticetext-box" style={{marginRight: '100px', position:'relative'}}>
            <div style={{borderBottom:'1px solid #000', marginBottom:'10px', paddingBottom:'5px', fontSize:'15px', fontWeight:700, lineHeight:'15px', textTransform:'none', fontFamily:'var(--font-ko)'}}>{notice.title}</div>
            <div style={{fontSize:'12px', fontWeight:300, lineHeight:'20px', textTransform:'none', fontFamily:'var(--font-ko)', height:'80px', overflow:'auto', paddingBottom:'20px'}}>{notice.body}</div>
          </div>
          {notice.link && (
            <a href={notice.link.href} className="noticelink-block">{notice.link.label}</a>
          )}
        </div>
      </div>
    );
  }

  /* ── Footer ───────────────────────────── */
  function Footer({ onInquiry }) {
    const D = window.DATA;
    return (
      <div className="footer-section">
        <span className="footerlink-box copyright">© 2026 pers_creative</span>
        <div className="footerlink-container">
          <a href={`tel:${D.studio.phone}`} className="footerlink-box">{D.studio.phone}</a>
          <span className="divider"/>
          <span className="footerlink-box companyinfo-text" 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="footerlink-box">INSTAGRAM</a>
        </div>
      </div>
    );
  }

  window.GNB = GNB;
  window.InquiryModal = InquiryModal;
  window.NoticeModal = NoticeModal;
  window.Footer = Footer;
  window.Icons = { Close: IconClose, Insta: IconInsta, Arrow: IconArrow, ArrowUp: IconArrowUp, Chevron: IconChevron, Grid: IconGrid, List: IconList };
})();
