// B&L ENGENHARIA — Página de Empreendimentos (portfólio completo)
// Cada empreendimento: 2 fotos + ficha técnica. Filtros por Cidade e por Tipo.

const EMPREENDIMENTOS = [
  {
    id: "parque-lilases",
    name: "Parque Lilases",
    accent: "Lilases",
    construtora: "Ascen Construtora",
    tipo: "Comercial",
    tipologia: "Edifício comercial",
    city: "São Carlos / SP",
    year: "2024",
    area: "16.675,14 m²",
    projeto: "Hidrossanitário",
    metodo: "BIM",
    photos: [
      { src: "assets/projetos/parque-lilases-1.png", pos: "50% 62%", alt: "Edifício Comercial Parque Lilases — vista aérea diurna" },
      { src: "assets/projetos/parque-lilases-2.png", pos: "50% 35%", alt: "Edifício Comercial Parque Lilases — fachada ao entardecer" },
    ],
  },
  {
    id: "vox-corporate",
    name: "Vox Corporate",
    accent: "Corporate",
    construtora: "Enoch Construtora",
    tipo: "Comercial",
    tipologia: "Edifício comercial",
    city: "Ribeirão Preto / SP",
    area: "46.781,53 m²",
    projeto: "Hidrossanitário e Prevenção Contra Incêndio com SPK",
    metodo: "CAD",
    photos: [
      { src: "assets/projetos/vox-corporate.jpg", pos: "50% 30%", alt: "Vox Corporate — fachada" },
      { src: "assets/projetos/vox-corporate-2.jpg", pos: "50% 50%", alt: "Vox Corporate — ambiente corporativo interno" },
    ],
  },
  {
    id: "wyndham",
    name: "Hotel Wyndham",
    accent: "Wyndham",
    construtora: "Enoch Construtora",
    tipo: "Hotel",
    tipologia: "Hotel",
    city: "Ribeirão Preto / SP",
    area: "18.822,80 m²",
    projeto: "Hidrossanitário",
    metodo: "CAD",
    photos: [
      { src: "assets/projetos/wyndham-1.jpeg", pos: "50% 40%", alt: "Hotel Wyndham — fachada ao entardecer" },
      { src: "assets/projetos/wyndham-2.jpg", pos: "50% 50%", alt: "Hotel Wyndham — rooftop com piscina à noite" },
    ],
  },
  {
    id: "la-coruna",
    name: "Plaza La Coruña",
    accent: "Coruña",
    construtora: "Stéfani Nogueira",
    tipo: "Residencial",
    tipologia: "Edifício residencial",
    city: "Franca / SP",
    area: "15.568,39 m²",
    projeto: "Hidrossanitário e Prevenção Contra Incêndio",
    metodo: "CAD",
    photos: [
      { src: "assets/projetos/la-coruna-1.jpg", pos: "50% 50%", alt: "Plaza La Coruña — vista aérea das torres" },
      { src: "assets/projetos/la-coruna-2.avif", pos: "50% 50%", alt: "Plaza La Coruña — piscina com deck e vista" },
    ],
  },
  {
    id: "magnolia",
    name: "Magnólia",
    accent: "Magnólia",
    construtora: "Stéfani Nogueira",
    tipo: "Residencial",
    tipologia: "Edifício residencial",
    city: "Ribeirão Preto / SP",
    area: "21.136,10 m²",
    projeto: "Hidrossanitário e Prevenção Contra Incêndio",
    metodo: "CAD",
    photos: [
      { src: "assets/projetos/magnolia-1.avif", pos: "50% 60%", alt: "Magnólia — fachada com identidade do empreendimento" },
      { src: "assets/projetos/magnolia-2.avif", pos: "50% 50%", alt: "Magnólia — espaço gourmet com churrasqueira" },
    ],
  },
  {
    id: "high-redentora",
    name: "High Redentora",
    accent: "Redentora",
    construtora: "Stéfani Nogueira",
    tipo: "Residencial",
    tipologia: "Edifício residencial",
    city: "São José do Rio Preto / SP",
    area: "33.868,95 m²",
    projeto: "Hidrossanitário",
    metodo: "CAD",
    photos: [
      { src: "assets/projetos/high-redentora-1.avif", pos: "50% 50%", alt: "High Redentora — torre única em vista aérea" },
      { src: "assets/projetos/high-redentora-2.avif", pos: "50% 50%", alt: "High Redentora — salão com forro de madeira" },
    ],
  },
  {
    id: "outlet-santa-maria",
    name: "Outlet Santa Maria",
    accent: "Santa Maria",
    construtora: "Construtora Pereira Alvim",
    tipo: "Comercial",
    tipologia: "Shopping Center",
    city: "Ribeirão Preto / SP",
    year: "2022",
    area: "34.477,53 m²",
    projeto: "Hidrossanitário e Prevenção Contra Incêndio com Sprinklers (SPK)",
    metodo: "BIM",
    photos: [
      { src: "assets/projetos/outlet-santa-maria.jpg", pos: "50% 55%", alt: "Outlet Santa Maria — acesso coberto" },
      { src: "assets/projetos/outlet-santa-maria-2.jpeg", pos: "50% 50%", alt: "Outlet Santa Maria — vista aérea da fachada" },
    ],
  },
  {
    id: "high-business",
    name: "High Business",
    accent: "Business",
    construtora: "Ascen Construtora",
    tipo: "Comercial",
    tipologia: "Edifício comercial",
    city: "Franca / SP",
    year: "2019",
    area: "24.765,21 m²",
    projeto: "Hidrossanitário e Prevenção Contra Incêndio com Sprinklers (SPK)",
    metodo: "CAD",
    photos: [
      { src: "assets/projetos/high-business-1.jpg", pos: "50% 50%", alt: "High Business — área corporativa interna" },
      { src: "assets/projetos/high-business-2.png", pos: "50% 45%", alt: "High Business — fachada em vidro" },
    ],
  },
  {
    id: "das-artes",
    name: "Edifício das Artes",
    accent: "Artes",
    construtora: "Ascen Construtora",
    tipo: "Residencial",
    tipologia: "Edifício residencial",
    city: "Franca / SP",
    area: "17.981,43 m²",
    projeto: "Hidrossanitário e Prevenção Contra Incêndio",
    metodo: "BIM",
    photos: [
      { src: "assets/projetos/das-artes-1.jpg", pos: "50% 50%", alt: "Edifício das Artes — living integrado" },
      { src: "assets/projetos/das-artes-2.png", pos: "50% 35%", alt: "Edifício das Artes — fachada" },
    ],
  },
  {
    id: "villa-guaimbe",
    name: "Villa Guaimbê",
    accent: "Guaimbê",
    construtora: "Ascen Construtora",
    tipo: "Residencial",
    tipologia: "Edifício residencial",
    city: "Ribeirão Preto / SP",
    area: "17.777,92 m²",
    projeto: "Hidrossanitário e Prevenção Contra Incêndio",
    metodo: "BIM",
    photos: [
      { src: "assets/projetos/villa-guaimbe-1.png", pos: "50% 45%", alt: "Villa Guaimbê — hall de entrada" },
      { src: "assets/projetos/villa-guaimbe-2.png", pos: "50% 40%", alt: "Villa Guaimbê — fachada" },
    ],
  },
  {
    id: "ventisette",
    name: "Ventisette",
    accent: "Ventisette",
    construtora: "Ascen Construtora",
    tipo: "Residencial",
    tipologia: "Edifício residencial",
    city: "Franca / SP",
    area: "18.925,15 m²",
    projeto: "Hidrossanitário e Prevenção Contra Incêndio",
    metodo: "BIM",
    photos: [
      { src: "assets/projetos/ventisette-1.jpg", pos: "50% 50%", alt: "Ventisette — living com vista" },
      { src: "assets/projetos/ventisette-2.png", pos: "50% 35%", alt: "Ventisette — fachada ao entardecer" },
    ],
  },
  {
    id: "auge",
    name: "Auge",
    accent: "Auge",
    construtora: "Ascen Construtora",
    tipo: "Residencial",
    tipologia: "Edifício residencial",
    city: "Franca / SP",
    area: "18.892,12 m²",
    projeto: "Hidrossanitário e Prevenção Contra Incêndio",
    metodo: "BIM",
    photos: [
      { src: "assets/projetos/auge-1.jpg", pos: "50% 50%", alt: "Auge — lobby de recepção" },
      { src: "assets/projetos/auge-2.png", pos: "50% 40%", alt: "Auge — fachada iluminada" },
    ],
  },
  {
    id: "le-monde",
    name: "Le Monde",
    accent: "Monde",
    construtora: "Copema Construtora",
    tipo: "Residencial · Comercial",
    tipoClass: "comercial",
    tipos: ["Residencial", "Comercial"],
    tipologia: "Edifício residencial / comercial",
    city: "Ribeirão Preto / SP",
    area: "52.137,74 m²",
    projeto: "Hidrossanitário e Prevenção Contra Incêndio com Sprinkler (SPK)",
    metodo: "CAD",
    photos: [
      { src: "assets/projetos/le-monde-1.webp", pos: "50% 45%", alt: "Le Monde — torre ao entardecer" },
      { src: "assets/projetos/le-monde-2.webp", pos: "50% 45%", alt: "Le Monde — implantação diurna" },
    ],
  },
  {
    id: "quartier",
    name: "Quartier",
    accent: "Quartier",
    construtora: "Copema Construtora",
    tipo: "Comercial",
    tipologia: "Edifício comercial",
    city: "Ribeirão Preto / SP",
    area: "25.594,54 m²",
    projeto: "Hidrossanitário e Prevenção Contra Incêndio com Sprinkler (SPK)",
    metodo: "CAD",
    photos: [
      { src: "assets/projetos/quartier-1.jpg", pos: "50% 50%", alt: "Quartier — lobby de recepção" },
      { src: "assets/projetos/quartier-2.jpg", pos: "50% 35%", alt: "Quartier — fachada ao entardecer" },
    ],
  },
  {
    id: "les-alpes",
    name: "Les Alpes",
    accent: "Alpes",
    construtora: "Copema Construtora",
    tipo: "Residencial",
    tipologia: "Edifício residencial",
    nota: "Bellegard · Bellevue · Beaumont",
    city: "Ribeirão Preto / SP",
    area: "19.776,35 m²",
    projeto: "Hidrossanitário e Prevenção Contra Incêndio",
    metodo: "CAD",
    photos: [
      { src: "assets/projetos/les-alpes-1.webp", pos: "50% 50%", alt: "Les Alpes — vista aérea do conjunto" },
      { src: "assets/projetos/les-alpes-2.webp", pos: "50% 40%", alt: "Les Alpes — fachada à noite" },
    ],
  },
  {
    id: "grand-paysage",
    name: "Grand Paysage",
    accent: "Paysage",
    construtora: "Copema Construtora",
    tipo: "Residencial",
    tipologia: "Edifício residencial",
    city: "Campinas / SP",
    area: "14.492,09 m²",
    projeto: "Hidrossanitário e Prevenção Contra Incêndio",
    metodo: "CAD",
    photos: [
      { src: "assets/projetos/grand-paysage-fachada.png", pos: "50% 50%", alt: "Grand Paysage — fachada" },
      { src: "assets/projetos/grand-paysage-1.webp", pos: "50% 50%", alt: "Grand Paysage — lounge com sofás" },
    ],
  },
];

const TIPOS = ["Comercial", "Residencial", "Hotel", "Industrial"];

// Cidades derivadas dos dados, ordenadas por nº de empreendimentos.
function citiesFromData(data) {
  const counts = {};
  data.forEach((e) => { counts[e.city] = (counts[e.city] || 0) + 1; });
  return Object.keys(counts).sort((a, b) => counts[b] - counts[a] || a.localeCompare(b));
}

// Construtoras derivadas dos dados (apenas as informadas), ordenadas por nº de empreendimentos.
function construtorasFromData(data) {
  const counts = {};
  data.forEach((e) => { if (e.construtora) counts[e.construtora] = (counts[e.construtora] || 0) + 1; });
  return Object.keys(counts).sort((a, b) => counts[b] - counts[a] || a.localeCompare(b));
}

function NameWithAccent({ 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 FichaRow({ k, children }) {
  return (
    <div className="emp-ficha-row">
      <span className="k">{k}</span>
      <span className="v">{children}</span>
    </div>
  );
}

function EmpCard({ e, n }) {
  const [primary, secondary] = e.photos;
  return (
    <article className={"emp-card tipo-" + (e.tipoClass || e.tipo.toLowerCase())} data-screen-label={`Empreendimento · ${e.name}`}>
      <header className="emp-card-head">
        <span className="emp-index">№ {String(n).padStart(2, "0")}</span>
        <span className="emp-badge">
          <i className="emp-badge-dot" />
          {e.tipo}
        </span>
      </header>

      <h3 className="emp-name"><NameWithAccent name={e.name} accent={e.accent} /></h3>
      <div className="emp-loc">{e.city}</div>

      <div className="emp-photos">
        <figure className="emp-photo emp-photo-main">
          {primary ? (
            <img src={primary.src} alt={primary.alt} loading="lazy" style={{ objectPosition: primary.pos || "50% 50%" }} />
          ) : (
            <Placeholder label={`FOTO 01 · ${e.name.toUpperCase()}`} style={{ position: "absolute", inset: 0 }} />
          )}
          {e.year && <span className="emp-photo-tag">{e.year}</span>}
        </figure>
        <figure className="emp-photo emp-photo-sub">
          {secondary ? (
            <img src={secondary.src} alt={secondary.alt} loading="lazy" style={{ objectPosition: secondary.pos || "50% 50%" }} />
          ) : (
            <Placeholder label="FOTO 02" style={{ position: "absolute", inset: 0 }} />
          )}
        </figure>
      </div>

      <div className="emp-ficha">
        {e.construtora && <FichaRow k="Construtora">{e.construtora}</FichaRow>}
        <FichaRow k="Tipologia">{e.tipologia}</FichaRow>
        {e.nota && <FichaRow k="Torres">{e.nota}</FichaRow>}
        <FichaRow k="Área construída">{e.area}</FichaRow>
        <FichaRow k="Projeto">{e.projeto}</FichaRow>
        <FichaRow k="Desenvolvido em">
          {e.metodo === "BIM"
            ? (<span className="emp-bim"><i className="emp-bim-dot" />BIM</span>)
            : (e.metodo || "—")}
        </FichaRow>
      </div>
    </article>
  );
}

function FilterGroup({ label, options, value, onChange, allLabel }) {
  const active = value !== "Todos";
  return (
    <div className="emp-filter-group">
      <span className="emp-filter-label">{label}</span>
      <div className="emp-select-wrap">
        <select
          className={"emp-select" + (active ? " active" : "")}
          value={value}
          onChange={(e) => onChange(e.target.value)}
          aria-label={label}
        >
          <option value="Todos">{allLabel}</option>
          {options.map((o) => (
            <option key={o} value={o}>{o}</option>
          ))}
        </select>
        <svg className="emp-select-chevron" width="11" height="11" viewBox="0 0 12 12" fill="none" aria-hidden="true">
          <path d="M2.5 4.5L6 8l3.5-3.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </div>
    </div>
  );
}

function EmpreendimentosPage() {
  const [cidade, setCidade] = React.useState("Todos");
  const [tipo, setTipo] = React.useState("Todos");
  const [construtora, setConstrutora] = React.useState("Todos");
  const cities = React.useMemo(() => citiesFromData(EMPREENDIMENTOS), []);
  const construtoras = React.useMemo(() => construtorasFromData(EMPREENDIMENTOS), []);

  const filtered = EMPREENDIMENTOS.filter(
    (e) =>
      (cidade === "Todos" || e.city === cidade) &&
      (tipo === "Todos" || (e.tipos || [e.tipo]).includes(tipo)) &&
      (construtora === "Todos" || e.construtora === construtora)
  );

  return (
    <React.Fragment>
      <Nav active="projetos" />

      <header className="emp-hero">
        <div className="emp-hero-grid" />
        <div className="wrap-wide emp-hero-inner">
          <div className="eyebrow">08 / Portfólio · Empreendimentos</div>
          <h1 className="emp-hero-title">
            Empreendimentos <span className="italic">entregues</span>.
          </h1>
          <p className="emp-hero-lead">
            Cada projeto modelado em BIM, compatibilizado e documentado — da concepção
            hidrossanitária à prevenção de incêndio. Filtre por cidade, tipo de empreendimento ou construtora.
          </p>
          <div className="emp-hero-meta">
            <div><span className="num">{EMPREENDIMENTOS.length}</span> empreendimentos</div>
            <div><span className="num">{cities.length}</span> cidades</div>
            <div><span className="num">6</span> milhões de m² projetados</div>
          </div>
        </div>
      </header>

      <div className="emp-controls">
        <div className="wrap-wide emp-controls-inner">
          <FilterGroup label="Cidade" allLabel="Todas" options={cities} value={cidade} onChange={setCidade} />
          <FilterGroup label="Tipo" allLabel="Todos" options={TIPOS} value={tipo} onChange={setTipo} />
          <FilterGroup label="Construtora" allLabel="Todas" options={construtoras} value={construtora} onChange={setConstrutora} />
          <div className="emp-count">
            {filtered.length === EMPREENDIMENTOS.length
              ? `${filtered.length} empreendimentos`
              : `${filtered.length} de ${EMPREENDIMENTOS.length}`}
          </div>
        </div>
      </div>

      <section className="emp-section">
        <div className="wrap-wide">
          {filtered.length > 0 ? (
            <div className="emp-grid">
              {filtered.map((e, i) => (
                <EmpCard key={e.id} e={e} n={i + 1} />
              ))}
            </div>
          ) : (
            <div className="emp-empty">
              <div className="eyebrow">Sem resultados</div>
              <p>
                Nenhum empreendimento <span className="italic">{tipo !== "Todos" ? tipo.toLowerCase() : ""}</span>
                {cidade !== "Todos" ? ` em ${cidade}` : ""} no portfólio publicado.
              </p>
              <button className="btn btn-light" onClick={() => { setCidade("Todos"); setTipo("Todos"); setConstrutora("Todos"); }}>
                Limpar filtros
              </button>
            </div>
          )}
        </div>
      </section>

      <Footer />
    </React.Fragment>
  );
}

window.EmpreendimentosPage = EmpreendimentosPage;