/* pers_creative — Portfolio Page
   View modes: grid(3col) / list
   Thumbnail hover → info overlay
*/
(function () {
  const { useState } = React;

  function PortfolioPage() {
    const D = window.DATA;
    const [view, setView] = useState('grid');
    const [modalOpen, setModalOpen] = useState(false);

    return (
      <div className="app" style={{overflow:'hidden'}}>
        <GNB page="portfolio"/>

        <div className="portfolio-body">
          {/* Sticky Nav */}
          <div className="portfolionav-bar">
            <div style={{display:'flex', alignItems:'center', gap:'var(--sp-xs)'}}>
              <a href="index.html" className="portfolioback-button">
                ← <span className="linklabel-longtext">home</span>
              </a>
            </div>
            <div className="viewmode-tabs">
              <button className={`viewmode-link ${view==='grid'?'active':''}`} onClick={()=>setView('grid')} title="Grid">
                <Icons.Grid/>
              </button>
              <button className={`viewmode-link ${view==='list'?'active':''}`} onClick={()=>setView('list')} title="List">
                <Icons.List/>
              </button>
            </div>
            <div className="companyinfo-box">
              <span className="companyinfo-text" style={{textTransform:'none'}}>{D.studio.name}</span>
            </div>
          </div>

          {/* Grid View */}
          {view === 'grid' && (
            <div className="feedcollection-list">
              {D.projects.map(p => (
                <div key={p.id} className="portfoliothumbnail-box"
                  style={p.thumb ? {backgroundImage:`url(${p.thumb})`} : {}}>
                  <div className="portfolioinfo-box" onClick={()=>window.location.href=`portfolio-detail.html?id=${p.id}`}>
                    <div className="portfoliotitle-text">{p.name}</div>
                    <div className="portfolioclient-text">{p.client}</div>
                  </div>
                </div>
              ))}
            </div>
          )}

          {/* List View */}
          {view === 'list' && (
            <div style={{padding:'0 var(--gutter)'}}>
              {D.projects.map((p,i) => (
                <a key={p.id} href={`portfolio-detail.html?id=${p.id}`}
                  style={{
                    display:'flex', alignItems:'center', justifyContent:'space-between',
                    height:'var(--nav-h)', borderBottom:'1px solid var(--black)',
                    fontSize:'var(--t-12)', textDecoration:'none', color:'var(--black)',
                    transition:'opacity 0.15s',
                  }}
                  onMouseEnter={e=>e.currentTarget.style.opacity='0.5'}
                  onMouseLeave={e=>e.currentTarget.style.opacity='1'}>
                  <span style={{textTransform:'lowercase'}}>{String(i+1).padStart(2,'0')}. {p.name}</span>
                  <span style={{color:'var(--pers-gray)', fontSize:'var(--t-xs)'}}>{p.client} — {p.year}</span>
                </a>
              ))}
            </div>
          )}

          {/* Footer spacer */}
          <div className="portfoliofooter-section">
            <span style={{color:'var(--pers-gray)', fontSize:'var(--t-xs)'}}>
              {D.projects.length} projects
            </span>
          </div>
        </div>

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

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