// Portfolio: filter chips + grid of project cards
function ProjectCard({ project, onOpen, large }) {
  const r = useReveal(0.1);
  return (
    <article className={'de-pcard ' + (large ? 'de-pcard--large' : '')} ref={r} onClick={() => onOpen(project)}>
      <div className="de-pcard__image">
        <div className="de-image-wrap">
          <img src={project.image} alt={project.title}/>
        </div>
        <div className="de-pcard__code">{project.code}</div>
      </div>
      <div className="de-pcard__body">
        <div className="de-pcard__meta">
          <span>{project.year}</span>
          <span className="de-pcard__dot">·</span>
          <span>{project.category}</span>
        </div>
        <h3 className="de-pcard__title">{project.title}</h3>
        <p className="de-pcard__blurb">{project.blurb}</p>
        <div className="de-pcard__foot">
          <span><strong>{project.built}</strong> Built</span>
          <span><strong>{project.area}</strong> Area</span>
          <span><strong>{project.value}</strong> Value</span>
        </div>
      </div>
    </article>
  );
}

function Portfolio({ onOpen, onNavigate, full }) {
  const [filter, setFilter] = useState('All');
  const categories = ['All', 'Villa', 'Penthouse', 'Estate'];
  const items = filter === 'All' ? PROJECTS : PROJECTS.filter(p => p.category === filter);
  const list = full ? items : items.slice(0, 4);
  const headRef = useReveal();
  return (
    <section className="de-section de-portfolio" id="portfolio">
      <div className="de-container">
        <div className="de-portfolio__head de-reveal is-in" ref={headRef}>
          <div>
            <div className="de-eyebrow">Selected Work · Portfolio</div>
            <h2 className="de-portfolio__heading">
              A practice of <em>quiet presence.</em>
            </h2>
          </div>
          <p className="de-portfolio__lead">
            Residences delivered for principals across the Emirates. Each project is a study in light,
            material and proportion — guided by an architectural patience that refuses to compromise.
          </p>
        </div>

        <div className="de-portfolio__chips de-reveal de-reveal-2 is-in">
          {categories.map(c => (
            <button key={c}
              className={'de-chip ' + (filter === c ? 'is-active' : '')}
              onClick={() => setFilter(c)}>
              {c}
            </button>
          ))}
          {!full && (
            <a className="de-link de-portfolio__all" onClick={() => onNavigate('portfolio')}>
              View All Projects <Icon name="arrow" size={14}/>
            </a>
          )}
        </div>

        <div className="de-portfolio__grid">
          {list.map((p, i) => (
            <ProjectCard
              key={p.id}
              project={p}
              onOpen={onOpen}
              large={!full && i === 0}
            />
          ))}
        </div>
      </div>
    </section>
  );
}
window.Portfolio = Portfolio;
window.ProjectCard = ProjectCard;