function Portfolio() {
  const items = [
    { type: 'photo', src: window.ASSETS.urca1, client: 'Urca', title: 'Resultado de escavação I' },
    { type: 'photo', src: window.ASSETS.urca2, client: 'Urca', title: 'Resultado de escavação II' },
    { type: 'video', src: './videos/video-resultado-urca.mp4', poster: window.ASSETS.urca1, client: 'Urca', title: 'Resultado final em vídeo' },
    { type: 'video', src: './videos/video-escavacao-1-brasfigo.mp4', poster: window.ASSETS.perfuracoes, client: 'Brasfigo', title: 'Escavação em andamento' },
    { type: 'video', src: './videos/video-escavacao-2-brasfigo.mp4', poster: window.ASSETS.frontal, client: 'Brasfigo', title: 'Escavação II' },
    { type: 'video', src: './videos/video-escavacao-perplan.mp4', poster: window.ASSETS.lateral, client: 'Construtora Perplan', title: 'Escavação para fundação' },
    { type: 'photo', src: window.ASSETS.centro, client: 'Centro Empresarial Leste', title: 'Obra comercial concluída' },
    { type: 'photo', src: window.ASSETS.perfuracoes, client: 'Casa Bella', title: 'Perfuração em série' },
  ];

  const [active, setActive] = React.useState(null);

  return (
    <section id="projects" className="py-20 bg-background">
      <div className="container mx-auto px-4">
        <div className="max-w-3xl mb-12">
          <div className="text-xs font-semibold tracking-[0.12em] uppercase text-accent mb-3">
            Portfólio
          </div>
          <h2 className="text-3xl md:text-4xl font-bold text-primary leading-tight mb-3">
            Obras reais — incluindo locais que outras máquinas não acessam.
          </h2>
          <p className="text-muted-foreground text-base max-w-2xl">
            Selecionamos trabalhos para clientes como Urca, Construtora Perplan, Brasfigo e Centro Empresarial Leste.
          </p>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
          {items.map((it, i) => (
            <button
              key={i}
              onClick={() => setActive(it)}
              className="relative aspect-[4/3] rounded-lg overflow-hidden shadow-card hover:shadow-elegant transition-smooth group text-left"
            >
              <img
                src={it.type === 'video' ? it.poster : it.src}
                alt={`${it.title} — ${it.client}`}
                className="w-full h-full object-cover transition-smooth group-hover:scale-105"
                loading="lazy"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-primary/95 via-primary/30 to-transparent"></div>

              {it.type === 'video' && (
                <div className="absolute top-3 right-3 inline-flex items-center gap-1.5 bg-black/50 backdrop-blur-sm text-white text-[10px] font-semibold uppercase tracking-wider rounded-full px-2.5 py-1">
                  <Icon name="play" size={11} /> Vídeo
                </div>
              )}

              <div className="absolute inset-x-0 bottom-0 p-4">
                <div className="flex items-center gap-1.5 text-accent mb-1">
                  <Icon name="map-pin" size={13} />
                  <span className="font-bold text-sm">{it.client}</span>
                </div>
                <div className="text-white/85 text-xs">{it.title}</div>
              </div>
            </button>
          ))}
        </div>
      </div>

      {/* Modal */}
      {active && (
        <div
          role="dialog"
          aria-modal="true"
          className="fixed inset-0 z-[80] flex items-center justify-center p-4 bg-black/75 backdrop-blur-sm animate-fade-in"
          onClick={() => setActive(null)}
        >
          <div
            className="relative max-w-4xl w-full bg-white rounded-lg overflow-hidden shadow-elegant"
            onClick={(e) => e.stopPropagation()}
          >
            <button
              onClick={() => setActive(null)}
              className="absolute top-3 right-3 z-10 w-9 h-9 rounded-full bg-black/60 hover:bg-black/80 text-white flex items-center justify-center transition-smooth"
              aria-label="Fechar"
            >
              <Icon name="x" size={18} />
            </button>

            <div className="bg-black aspect-video flex items-center justify-center">
              {active.type === 'video' ? (
                <video
                  src={active.src}
                  poster={active.poster}
                  controls
                  autoPlay
                  className="w-full h-full object-contain"
                />
              ) : (
                <img src={active.src} alt={active.title} className="w-full h-full object-contain" />
              )}
            </div>
            <div className="p-5">
              <div className="flex items-center gap-1.5 text-accent mb-1">
                <Icon name="map-pin" size={13} />
                <span className="font-bold text-sm uppercase tracking-wider">{active.client}</span>
              </div>
              <div className="text-primary font-semibold">{active.title}</div>
            </div>
          </div>
        </div>
      )}
    </section>
  );
}

window.Portfolio = Portfolio;