/* pers_creative — Home Page
   Webflow export 구조 기반:
   body.mainbody → .app (flex column, padding: 0 30px)
   .mainbody-grid → flex column (brandmenu / mainlink / featured slider)
   .aboutitem-box → position fixed, slides up from bottom
*/
(function () {
  const { useState, useEffect } = React;

  /* ── Inline SVG icons matching Webflow originals ── */
  const IconPlus = () => (
    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M0 0h24v24H0Z" fill="none"/><path d="M12 8v8"/><path d="M16 12H8"/>
      <path d="M12 21C7.029 21 3 16.971 3 12S7.029 3 12 3s9 4.029 9 9-4.029 9-9 9Z"/>
    </svg>
  );
  const IconMinus = () => (
    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M0 0h24v24H0Z" fill="none"/><path d="M16 12H8"/>
      <path d="M12 21C7.029 21 3 16.971 3 12S7.029 3 12 3s9 4.029 9 9-4.029 9-9 9Z"/>
    </svg>
  );
  const IconEdit = () => (
    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" style={{marginRight:'4px',flexShrink:0}}>
      <path d="M7 3H5C3.895 3 3 3.895 3 5v14c0 1.105.895 2 2 2h12c1.105 0 2-.895 2-2v-1"/>
      <path d="M13 17l3.15-.389a.813.813 0 00.585-.285l4.631-4.631a2.165 2.165 0 000-3.061 2.165 2.165 0 00-3.061 0l-4.56 4.56a.813.813 0 00-.283.566L13 17z"/>
      <path d="M13.5 4.5h-5A1.5 1.5 0 007 3v0a1.5 1.5 0 001.5 1.5h5A1.5 1.5 0 0015 3v0a1.5 1.5 0 00-1.5 1.5z"/>
      <path d="M7 8h6M7 12h4M15 3h2c1.105 0 2 .895 2 2"/>
    </svg>
  );
  const IconInsta = () => (
    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" style={{marginRight:'4px',flexShrink:0}}>
      <path d="M7.496 3h9.009c2.482 0 4.495 2.012 4.495 4.496v9.009c0 2.482-2.012 4.495-4.496 4.495H7.496C5.013 21 3 18.988 3 16.504V7.496C3 5.013 5.013 3 7.496 3z" strokeLinejoin="round"/>
      <circle cx="16.949" cy="6.713" r=".338" fill="currentColor"/>
      <path d="M14.546 9.454a3.602 3.602 0 010 5.092 3.602 3.602 0 01-5.092 0 3.602 3.602 0 010-5.092 3.602 3.602 0 015.092 0"/>
    </svg>
  );
  const IconArrowCircle = () => (
    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" style={{marginRight:'4px',flexShrink:0}}>
      <path d="M12 21C7.029 21 3 16.971 3 12S7.029 3 12 3s9 4.029 9 9-4.029 9-9 9Z"/>
      <path d="M16 12H8M13 9l3 3-3 3"/>
    </svg>
  );
  const IconArrowLeft = () => (
    <svg width="20" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M19 12H5M10 7l-5 5 5 5"/>
    </svg>
  );

  function HomePage() {
    const D = window.DATA;
    const [aboutOpen, setAboutOpen] = useState(false);
    const [modalOpen, setModalOpen] = useState(false);
    const [slideIdx, setSlideIdx] = useState(0);

    const slides = D.projects.map(p => ({ thumb: p.thumb, slug: p.slug, name: p.name })).filter(p => p.thumb);

    /* Auto-advance slider every 3s */
    useEffect(() => {
      if (slides.length <= 1) return;
      const t = setInterval(() => setSlideIdx(i => (i + 1) % slides.length), 3000);
      return () => clearInterval(t);
    }, [slides.length]);

    return (
      <div className="app">

        {/* ── Main grid ───────────────────────── */}
        <div className="mainbody-grid">

          {/* Logo */}
          <div className="brandmenu-box">
            <a href="index.html" className="logo-box">
              <img src="assets/logo_pers.png" height="20" alt={D.studio.name} className="logo-image"/>
            </a>
          </div>

          {/* About panel — below logo, expands in-place */}
          <div className={`aboutitem-box about${aboutOpen ? ' open' : ''}`}>
            <div className="aboutlabel-bar" onClick={() => setAboutOpen(prev => !prev)}>
              <div className="systemicon-svg">
                {aboutOpen ? <IconMinus/> : <IconPlus/>}
              </div>
              <div className="menuitem-text">about</div>
              <div className="menuitem-kor">퍼스 크리에이티브</div>
            </div>
            <div className="aboutitem-content">
              <div className="aboutinfo-box">
                <div className="tagline-text">{D.studio.tagline}</div>
                {D.studio.about.map((t, i) => (
                  <div key={i} className="abouttext-block">{t}</div>
                ))}
              </div>
            </div>
          </div>

          {/* Nav links: contact / instagram / projects */}
          <div className="mainlink-container">
            <div className="linkbutton-bar contact" onClick={() => setModalOpen(true)}>
              <div className="systemicon-svg"><IconEdit/></div>
              <div className="menuitem-text">contact</div>
              <div className="menuitem-kor">견적 문의</div>
            </div>
            <a href={D.studio.instagram} target="_blank" rel="noopener noreferrer" className="linkbutton-bar instagram">
              <div className="systemicon-svg"><IconInsta/></div>
              <div className="menuitem-text">instagram</div>
              <div className="menuitem-kor">인스타그램 : @pers_creative</div>
            </a>
            <a href="portfolio.html" className="linkbutton-bar projects">
              <div className="systemicon-svg"><IconArrowCircle/></div>
              <div className="menuitem-text">projects</div>
              <div className="menuitem-kor">프로젝트 리스트</div>
            </a>
          </div>

          {/* Featured slider — fills remaining space below nav */}
          <div className="featuredcontents-wrapper">
            <div className="featuredcontents-slider">
              <div className="featuredcontents-mask">
                {slides.map((slide, i) => (
                  <a
                    key={i}
                    href="portfolio.html"
                    className={`featuredcontents-slide${i === slideIdx ? ' active' : ''}`}
                    style={{ backgroundImage: `url(${slide.thumb})` }}
                  >
                    <div className="featuredcontents-linkbox">
                      <IconArrowLeft/>
                    </div>
                  </a>
                ))}
              </div>
              {slides.length > 1 && (
                <div className="slide-nav-3">
                  {slides.map((_, i) => (
                    <button
                      key={i}
                      className={`w-slider-dot${i === slideIdx ? ' active' : ''}`}
                      onClick={e => { e.preventDefault(); setSlideIdx(i); }}
                    />
                  ))}
                </div>
              )}
            </div>
          </div>

        </div>{/* /mainbody-grid */}

        {/* Footer */}
        <Footer onInquiry={() => setModalOpen(true)}/>

        {/* Modals */}
        <InquiryModal open={modalOpen} onClose={() => setModalOpen(false)}/>
        {D.notice && <NoticeModal notice={D.notice}/>}
      </div>
    );
  }

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