// ============================================
// Portfolio — asymmetric grid
// ============================================

function Portfolio() {
  const PC = window.PC;
  return (
    <section className="section portfolio" id="work">
      <div className="wrap">
        <header className="section-head">
          <div className="section-head__l">
            <span className="eyebrow reveal">04 — Selected Work</span>
            <h2 className="h-1 reveal" data-d="1">
              Recent <span className="serif it gold-text">projects</span>.
            </h2>
          </div>
          <div className="section-head__r reveal" data-d="2">
            <p className="lead">A glimpse at recent residential and community work. Full case studies available on request.</p>
            <a href="#contact" className="link" style={{marginTop: '20px'}}>
              <span>Request full case studies</span>
              <span className="btn__arrow"></span>
            </a>
          </div>
        </header>

        <div className="portfolio__grid">
          {PC.portfolio.map((p, i) => (
            <article key={p.id} className={`folio folio--${p.span} reveal`} data-d={(i % 3) + 1}>
              <div className="folio__media">
                <PortfolioArt kind={p.art}/>
                <div className="folio__overlay">
                  <span className="label folio__type">{p.type}</span>
                  <span className="h-3 folio__title serif">{p.title}</span>
                  <span className="link folio__cta">
                    <span>View Project</span>
                    <span className="btn__arrow"></span>
                  </span>
                </div>
              </div>
              <div className="folio__meta">
                <span className="label folio__index">/ {String(i + 1).padStart(2, '0')}</span>
                <span className="label">{p.type}</span>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Portfolio = Portfolio;