// Projects.jsx — danh sách dự án (nhiều dự án, quản trị từ portal). Ảnh trống → khung placeholder.
function Projects() {
  const C = (window.SITE || SITE_DEFAULTS).projects;
  const items = C.items || [];
  if (!items.length) return null;
  return (
    <Section id="projects" tone="light">
      <Reveal><Eyebrow>{C.eyebrow}</Eyebrow></Reveal>
      <Reveal delay={60}><h2 className="swk-h2">{C.heading}</h2></Reveal>
      {items.map((it, idx) => (
        <div className="swk-project" key={idx} style={idx > 0 ? { marginTop: 56 } : undefined}>
          <Reveal>
            <div className="swk-shot">
              <div className="browserbar">
                <span className="dot" style={{ background: '#ED6A5E' }} />
                <span className="dot" style={{ background: '#F4BF4F' }} />
                <span className="dot" style={{ background: '#61C554' }} />
              </div>
              {it.imageUrl
                ? <img src={it.imageUrl} alt={it.title} style={{ position: 'absolute', top: 34, left: 0, width: '100%', height: 'calc(100% - 34px)', objectFit: 'cover' }} />
                : (
                  <div className="ph" style={{ top: 34 }}>
                    <Icon name="dashboard" size={40} />
                    <div style={{ fontSize: 13, fontFamily: 'var(--font-mono)' }}>Ảnh dự án — cập nhật trong Quản trị website</div>
                  </div>
                )}
            </div>
          </Reveal>
          <Reveal delay={90}>
            <div>
              {it.tag && <span className="tag">{it.tag}</span>}
              <h3>{it.title}</h3>
              {it.client && <div className="client">{it.client}</div>}
              <ul>
                {(it.points || []).map(p => (
                  <li key={p}><Icon name="check" size={20} />{p}</li>
                ))}
              </ul>
              <div style={{ marginTop: 26 }}>
                <Btn variant="secondary" href="#contact" icon="arrowRight">{it.ctaLabel || 'Xem chi tiết dự án'}</Btn>
              </div>
            </div>
          </Reveal>
        </div>
      ))}
    </Section>
  );
}
Object.assign(window, { Projects });