// B&L ENGENHARIA — Portfólio na home.
// Mostra SEMPRE os 4 empreendimentos mais recentes (final da lista, em ordem de adição).
// A lista completa + filtros (cidade, tipo, construtora) vivem em empreendimentos.html.
// Para destacar novos empreendimentos: acrescente no FINAL de PROJETOS.

const PROJETOS = [
  { name: "Vox Corporate",      accent: "Corporate",   city: "Ribeirão Preto / SP", area: "46.781,53 m²", tipo: "Comercial",              photo: "assets/projetos/vox-corporate.jpg",    pos: "50% 30%" },
  { name: "Outlet Santa Maria", accent: "Santa Maria", city: "Ribeirão Preto / SP", area: "34.477,53 m²", tipo: "Comercial",              photo: "assets/projetos/outlet-santa-maria.jpg", pos: "50% 55%" },
  { name: "Leven Residence",    accent: "Residence",   city: "Ribeirão Preto / SP", area: "27.640 m²",    tipo: "Residencial",            photo: "assets/projetos/leven-residence.jpg",  pos: "50% 45%" },
  { name: "Parque Lilases",     accent: "Lilases",     city: "São Carlos / SP",     area: "16.675,14 m²", tipo: "Comercial",              photo: "assets/projetos/parque-lilases-1.png", pos: "50% 60%" },
  { name: "High Business",      accent: "Business",    city: "Franca / SP",         area: "24.765,21 m²", tipo: "Comercial",              photo: "assets/projetos/high-business-1.jpg",  pos: "50% 50%" },
  { name: "Edifício das Artes", accent: "Artes",       city: "Franca / SP",         area: "17.981,43 m²", tipo: "Residencial",            photo: "assets/projetos/das-artes-1.jpg",      pos: "50% 50%" },
  { name: "Villa Guaimbê",      accent: "Guaimbê",     city: "Ribeirão Preto / SP", area: "17.777,92 m²", tipo: "Residencial",            photo: "assets/projetos/villa-guaimbe-1.png",  pos: "50% 45%" },
  { name: "Ventisette",         accent: "Ventisette",  city: "Franca / SP",         area: "18.925,15 m²", tipo: "Residencial",            photo: "assets/projetos/ventisette-1.jpg",     pos: "50% 50%" },
  { name: "Auge",               accent: "Auge",        city: "Franca / SP",         area: "18.892,12 m²", tipo: "Residencial",            photo: "assets/projetos/auge-1.jpg",           pos: "50% 50%" },
  { name: "Le Monde",           accent: "Monde",       city: "Ribeirão Preto / SP", area: "52.137,74 m²", tipo: "Residencial · Comercial", photo: "assets/projetos/le-monde-1.webp",      pos: "50% 45%" },
  { name: "Quartier",           accent: "Quartier",    city: "Ribeirão Preto / SP", area: "25.594,54 m²", tipo: "Comercial",              tall: true, photo: "assets/projetos/quartier-2.jpg", pos: "50% 40%" },
  { name: "Les Alpes",          accent: "Alpes",       city: "Ribeirão Preto / SP", area: "19.776,35 m²", tipo: "Residencial",            photo: "assets/projetos/les-alpes-1.webp",     pos: "50% 55%" },
  { name: "Grand Paysage",      accent: "Paysage",     city: "Campinas / SP",       area: "14.492,09 m²", tipo: "Residencial",            photo: "assets/projetos/grand-paysage-1.webp", pos: "50% 50%" },
];

// Layout dos 4 cards recentes — larguras somam 12 por linha (7+5 / 5+7).
const RECENTES_SPANS = [7, 5, 5, 7];

function ProjAccent({ name, accent }) {
  if (!accent || !name.includes(accent)) return <span>{name}</span>;
  const i = name.lastIndexOf(accent);
  return (
    <React.Fragment>
      {name.slice(0, i)}
      <span className="italic">{accent}</span>
      {name.slice(i + accent.length)}
    </React.Fragment>
  );
}

function Projetos() {
  const recentes = PROJETOS.slice(-4);

  return (
    <section className="section-bone" id="projetos">
      <div className="wrap-wide">
        <div className="proj-head">
          <div>
            <div className="eyebrow">07 / Portfólio</div>
            <h2>Empreendimentos <span className="italic">recentes</span>.</h2>
          </div>
          <p className="proj-intro">
            Os últimos projetos que entregamos. O portfólio completo, com filtros por
            cidade, tipo e construtora, está na página de empreendimentos.
          </p>
        </div>

        <div className="proj-grid">
          {recentes.map((p, i) => (
            <article key={p.name} className={`proj span-${RECENTES_SPANS[i] || 6}${p.tall ? " tall" : ""}`}>
              <div className="proj-img">
                <img
                  src={p.photo}
                  alt={`${p.name} — ${p.city}`}
                  loading="lazy"
                  style={{ objectPosition: p.pos || "50% 50%" }}
                />
                <span className="proj-tag">Recente · {String(i + 1).padStart(2, "0")}</span>
              </div>
              <div className="proj-meta">
                <div>
                  <h3><ProjAccent name={p.name} accent={p.accent} /></h3>
                  <div className="proj-loc">{p.city}</div>
                </div>
                <div className="right">
                  <div>{p.tipo}</div>
                  <div style={{ marginTop: 4 }}>{p.area}</div>
                </div>
              </div>
            </article>
          ))}
        </div>

        <div className="proj-more">
          <a href="empreendimentos.html" className="btn btn-dark">
            Ver todos os empreendimentos
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7h10M7 2l5 5-5 5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </a>
        </div>
      </div>
    </section>
  );
}

window.Projetos = Projetos;