// ADOS website — Projects listing
const { Button } = window.ADOSDesignSystem_5aafbb;

function ProjectsSection({ onOpenProject, onNavigate }) {
  const { ProjectCard } = window;
  const all = window.ADOS_PROJECTS;
  const wrap = { maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--pad-x)' };

  return (
    <React.Fragment>
      <section style={{ borderBottom: '1px solid var(--border)', background: 'var(--bg-deep)' }}>
        <div style={{ ...wrap, padding: '64px var(--pad-x) 36px' }}>
          <div className="eyebrow" style={{ marginBottom: 16 }}>Portafolio</div>
          <h1 style={{ fontSize: 'clamp(32px, 5vw, 48px)', letterSpacing: '-0.03em', margin: '0 0 16px' }}>Proyectos coordinados en BIM</h1>
          <p style={{ color: 'var(--text-muted)', fontSize: 17, maxWidth: 540, margin: 0, lineHeight: 1.6 }}>
            Cada entrega nace de un modelo federado. Explore el trabajo en detalle.
          </p>
        </div>
      </section>
      <section style={{ background: 'var(--bg-deep)' }}>
        <div style={{ ...wrap, padding: '48px var(--pad-x) 88px' }}>
          {/* cursor crosshair: guiño al entorno CAD/BIM al explorar la galería */}
          <div className="w-grid-3 w-crosshair" style={{ gap: 24 }}>
            {all.map((p) => <ProjectCard key={p.id} p={p} onOpen={onOpenProject} />)}
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

window.ProjectsSection = ProjectsSection;