/* ============================================================
   Estores Brigantinos :: JavaScript vanilla (partilhado)
   Cada init só corre se os elementos existirem na página.
   ============================================================ */

/* ------------------------------------------------------------
   Imagens (Unsplash) com gradiente por baixo como fallback.
   Se a foto não carregar, fica o gradiente (nunca "parte").
   ------------------------------------------------------------ */
// Imagens locais (descarregadas para assets/images). Funciona offline.
// O gradiente fica por baixo como fallback, por isso nunca "parte".
function layered(grad, src, shade = '.18') {
  if (!src) return grad;
  return `linear-gradient(0deg, rgba(20,22,18,${shade}), rgba(20,22,18,.05)), url(${src}) center/cover no-repeat, ${grad}`;
}

// Conjuntos de fotos por categoria (ficheiros locais)
const CAT_PHOTOS = {
  'Estores':          ['assets/images/estores-1.jpg', 'assets/images/estores-2.jpg', 'assets/images/estores-3.jpg'],
  'Toldos':           ['assets/images/toldos-1.jpg', 'assets/images/toldos-2.jpg', 'assets/images/toldos-3.jpg'],
  'Portadas':         ['assets/images/portadas-1.jpg', 'assets/images/portadas-2.jpg', 'assets/images/portadas-3.jpg'],
  'Fachadas têxteis': ['assets/images/fachadas-1.jpg', 'assets/images/fachadas-2.jpg', 'assets/images/fachadas-3.jpg'],
  'Fachadas':         ['assets/images/fachadas-1.jpg', 'assets/images/fachadas-2.jpg', 'assets/images/fachadas-3.jpg']
};

/* ------------------------------------------------------------
   Header + Footer partilhados (injetados em todas as páginas)
   A página ativa é indicada por <body data-page="...">.
   ------------------------------------------------------------ */
const NAV = [
  { label: 'Home', href: 'index.html', key: 'home' },
  { label: 'Produtos', href: 'produtos.html', key: 'produtos' },
  { label: 'Projetos', href: 'projetos.html', key: 'projetos' },
  { label: 'Empresa', href: 'empresa.html', key: 'empresa' },
  { label: 'Contactos', href: 'contactos.html', key: 'contactos' }
];

function renderChrome() {
  const page = document.body.dataset.page || 'home';

  const header = document.getElementById('site-header');
  if (header) {
    const links = NAV.map(n => `<a href="${n.href}" class="nav__link${n.key === page ? ' is-active' : ''}">${n.label}</a>`).join('');
    const mLinks = NAV.map(n => `<a href="${n.href}" class="mobile-nav__link">${n.label}</a>`).join('');
    header.className = 'header';
    header.innerHTML = `
      <div class="header__inner">
        <a href="index.html" class="header__logo"><img src="assets/logo.png" alt="Estores Brigantinos"></a>
        <nav class="nav">${links}</nav>
        <a href="contactos.html" class="btn btn--cta header__cta">Pedir orçamento</a>
        <button class="burger" id="burger" aria-label="Menu" aria-expanded="false"><span></span><span></span><span></span></button>
      </div>
      <nav class="mobile-nav" id="mobileNav" hidden>
        ${mLinks}
        <a href="contactos.html" class="btn btn--cta mobile-nav__cta">Pedir orçamento</a>
      </nav>`;
  }

  const footer = document.getElementById('site-footer');
  if (footer) {
    const fLinks = NAV.map(n => `<a href="${n.href}" class="footer__link">${n.label}</a>`).join('');
    footer.className = 'footer';
    footer.innerHTML = `
      <div class="footer__grid">
        <div class="footer__col">
          <img src="assets/logo.png" alt="Estores Brigantinos" class="footer__logo">
          <p class="footer__desc">Soluções em estores, toldos e portadas, com qualidade, design moderno e confiança, para transformar o seu espaço.</p>
        </div>
        <div class="footer__col">
          <h4 class="footer__head">Links rápidos</h4>
          ${fLinks}
        </div>
        <div class="footer__col">
          <h4 class="footer__head">Morada</h4>
          <p class="footer__text">Zona Industrial das Cantarias<br>Av. Dr. Mário Soares, nº 1<br>5300-423 Bragança</p>
          <h4 class="footer__head">Horário</h4>
          <p class="footer__text">Segunda a Sexta<br>8:30h às 12:00h · 14:00h às 18:30h<br>Sábado e Domingo: Fechado</p>
        </div>
        <div class="footer__col">
          <h4 class="footer__head">Contactos</h4>
          <p class="footer__text">273 332 702<br><span class="footer__note">Chamada para Rede Fixa Nacional</span></p>
          <p class="footer__text">geral@estoresbrigantinos.pt</p>
          <a href="https://www.livroreclamacoes.pt/inicio" target="_blank" rel="noopener" class="footer__complaints">
            <span>Livro de Reclamações</span>
          </a>
        </div>
      </div>
      <div class="footer__bottom">© <span data-year></span> Estores Brigantinos. Todos os direitos reservados.</div>`;
  }
}

/* ------------------------------------------------------------
   Menu mobile (todas as páginas)
   ------------------------------------------------------------ */
function initMenu() {
  const burger = document.getElementById('burger');
  const mobileNav = document.getElementById('mobileNav');
  if (!burger || !mobileNav) return;

  const toggle = (open) => {
    mobileNav.hidden = !open;
    burger.setAttribute('aria-expanded', String(open));
  };
  burger.addEventListener('click', () => toggle(mobileNav.hidden));
  mobileNav.querySelectorAll('a').forEach(a => a.addEventListener('click', () => toggle(false)));
  window.addEventListener('resize', () => { if (window.innerWidth >= 900) toggle(false); });
}

/* ------------------------------------------------------------
   Textos dinâmicos: anos de mercado + ano atual (todas)
   ------------------------------------------------------------ */
function initDynamicText() {
  const ANOS = 20;
  document.querySelectorAll('[data-anos]').forEach(el => el.textContent = ANOS);
  document.querySelectorAll('[data-year]').forEach(el => el.textContent = new Date().getFullYear());
}

/* ------------------------------------------------------------
   Hero :: imagens do visual (Home)
   ------------------------------------------------------------ */
function initHeroVisual() {
  const main = document.querySelector('.hero__photo--main');
  const float = document.querySelector('.hero__photo--float');
  if (main) main.style.backgroundImage = 'url(assets/images/estores-1.jpg)';
  if (float) float.style.backgroundImage = 'url(assets/images/hero-float.jpg)';
}

/* ------------------------------------------------------------
   Banner / slider automático (Home)
   ------------------------------------------------------------ */
const BANNER_SLIDES = [
  { kicker: 'Toldos', title: 'Proteção solar sem abrir mão do estilo',
    text: 'Toldos resistentes ao vento e ao sol, com acabamento premium para varandas, esplanadas e jardins.',
    cta: 'Ver toldos', href: 'toldos.html',
    grad: 'linear-gradient(120deg,#2c302e 0%,#3a3f3c 45%,#fe9900 100%)', photoId: 'assets/images/toldos-3.jpg' },
  { kicker: 'Estores', title: 'Estores que se adaptam ao seu espaço',
    text: 'Modelos interiores e exteriores, manuais ou motorizados, com controlo total de luz e privacidade.',
    cta: 'Ver estores', href: 'estores.html',
    grad: 'linear-gradient(120deg,#2c302e 0%,#3a3f3c 45%,#ffca01 100%)', photoId: 'assets/images/estores-2.jpg' }
];

function initBanner() {
  const slide = document.getElementById('bannerSlide');
  const dotsEl = document.getElementById('bannerDots');
  if (!slide || !dotsEl) return;

  const kicker = document.getElementById('bannerKicker');
  const title = document.getElementById('bannerTitle');
  const body = document.getElementById('bannerBody');
  const cta = document.getElementById('bannerCta');
  let index = 0, timer = null;

  dotsEl.innerHTML = '';
  BANNER_SLIDES.forEach((_, i) => {
    const dot = document.createElement('button');
    dot.className = 'banner__dot';
    dot.setAttribute('aria-label', 'Slide ' + (i + 1));
    dot.addEventListener('click', () => { show(i); restart(); });
    dotsEl.appendChild(dot);
  });

  function show(i) {
    index = i;
    const s = BANNER_SLIDES[i];
    slide.style.background = layered(s.grad, s.photoId, '.30');
    kicker.textContent = s.kicker;
    title.textContent = s.title;
    body.textContent = s.text;
    cta.textContent = s.cta;
    cta.href = s.href;
    dotsEl.querySelectorAll('.banner__dot').forEach((d, di) => d.classList.toggle('is-active', di === index));
  }
  function next() { show((index + 1) % BANNER_SLIDES.length); }
  function restart() { clearInterval(timer); timer = setInterval(next, 5500); }

  show(0);
  restart();
}

/* ------------------------------------------------------------
   Categorias + Depoimentos (Home)
   ------------------------------------------------------------ */
const CATEGORIES = [
  { name: 'Estores', tag: 'Interior & Exterior', href: 'estores.html',
    desc: 'Estores interiores e exteriores, manuais ou motorizados, para controlar luz e privacidade com estilo.',
    grad: 'linear-gradient(155deg,#4a4f47 0%,#2c302e 60%,#1c1f1d 100%)', photoId: CAT_PHOTOS['Estores'][0] },
  { name: 'Toldos', tag: 'Varandas & Esplanadas', href: 'toldos.html',
    desc: 'Toldos articulados, retrácteis e fixos, resistentes ao vento, ideais para varandas e esplanadas.',
    grad: 'linear-gradient(155deg,#fe9900 0%,#d97e06 60%,#2c302e 100%)', photoId: CAT_PHOTOS['Toldos'][0] },
  { name: 'Portadas', tag: 'Segurança & Isolamento', href: 'portadas.html',
    desc: 'Soluções robustas em alumínio para proteção, segurança e isolamento térmico.',
    grad: 'linear-gradient(155deg,#565b53 0%,#2c302e 60%,#14150f 100%)', photoId: CAT_PHOTOS['Portadas'][0] },
  { name: 'Fachadas têxteis', tag: 'Cortinas de vidro', href: 'fachadas.html',
    desc: 'Fecho de espaços exteriores mantendo luz natural e proteção contra vento e chuva.',
    grad: 'linear-gradient(155deg,#ffca01 0%,#e0ac10 60%,#2c302e 100%)', photoId: CAT_PHOTOS['Fachadas têxteis'][0] }
];

// Depoimentos fictícios
const TESTIMONIALS = [
  { name: 'Ana Ferreira', place: 'Bragança', stars: 5, text: 'Trabalho impecável do início ao fim. Mediram, aconselharam e instalaram os estores de casa num só dia. Ficou tudo perfeito e muito bem acabado. Recomendo sem hesitar!' },
  { name: 'João Pires', place: 'Mirandela', stars: 5, text: 'Colocámos um toldo articulado na esplanada do café e fez toda a diferença. Resistente ao vento, elegante e a equipa foi super profissional. Excelente relação qualidade-preço.' },
  { name: 'Marta Gonçalves', place: 'Vinhais', stars: 5, text: 'Portadas de alumínio novas em toda a casa. Ganhámos segurança e a casa ficou muito mais quente no inverno. Atendimento próximo e prazos cumpridos à risca.' }
];

function initHomeLists() {
  const catGrid = document.getElementById('catGrid');
  if (catGrid) {
    catGrid.innerHTML = CATEGORIES.map(c => `
      <a href="${c.href}" class="cat-card">
        <div class="cat-card__photo" style="background:${layered(c.grad, c.photoId)}"></div>
        <div class="cat-card__body">
          <span class="cat-card__tag">${c.tag}</span>
          <h3 class="cat-card__name">${c.name}</h3>
          <p class="cat-card__desc">${c.desc}</p>
          <span class="cat-card__link">Ver todos →</span>
        </div>
      </a>`).join('');
  }
  const testimGrid = document.getElementById('testimGrid');
  if (testimGrid) {
    testimGrid.innerHTML = TESTIMONIALS.map(t => `
      <div class="testim-card">
        <div class="testim-card__stars">${'★'.repeat(t.stars)}</div>
        <p class="testim-card__text">${t.text}</p>
        <span class="testim-card__name">${t.name} · <span class="testim-card__place">${t.place}</span></span>
      </div>`).join('');
  }
}

/* ------------------------------------------------------------
   Fotos das páginas de categoria (estores/toldos/portadas/fachadas)
   Lê <body data-cat="..."> e aplica fotos aos cartões existentes.
   ------------------------------------------------------------ */
function initCategoryPhotos() {
  const slug = document.body.dataset.cat;
  if (!slug) return;
  const map = { estores: 'Estores', toldos: 'Toldos', portadas: 'Portadas', fachadas: 'Fachadas têxteis' };
  const photos = CAT_PHOTOS[map[slug]];
  if (!photos) return;
  document.querySelectorAll('.prod-card__photo').forEach((el, i) => {
    const grad = el.style.background || el.style.backgroundImage;
    el.style.background = layered(grad, photos[i % photos.length]);
  });
}

/* ------------------------------------------------------------
   Catálogo de Produtos (produtos.html)
   ------------------------------------------------------------ */
const GRADS = {
  Estores: 'linear-gradient(150deg,#4a4f47,#2c302e)',
  Toldos: 'linear-gradient(150deg,#fe9900,#2c302e)',
  Portadas: 'linear-gradient(150deg,#565b53,#2c302e)',
  'Fachadas têxteis': 'linear-gradient(150deg,#ffca01,#2c302e)'
};
const CAT_HREF = { Estores: 'estores.html', Toldos: 'toldos.html', Portadas: 'portadas.html', 'Fachadas têxteis': 'fachadas.html' };

const CATALOG = [
  { name: 'Estore interior de rolo', category: 'Estores', short: 'Tecido técnico blackout ou screen.', long: 'Estore de rolo interior com tecido técnico, disponível em blackout ou screen. Ideal para quartos, salas e escritórios que precisam de controlo de luz sem perder luminosidade natural.' },
  { name: 'Estore de lâminas verticais', category: 'Estores', short: 'Controlo preciso de luz em grandes vãos.', long: 'Sistema de lâminas verticais orientáveis, indicado para grandes envidraçados e escritórios, permitindo um controlo fino da entrada de luz e privacidade.' },
  { name: 'Estore exterior de lâminas', category: 'Estores', short: 'Alumínio resistente à intempérie.', long: 'Estore exterior em lâminas de alumínio, resistente à chuva e ao vento, com bom isolamento térmico para varandas e fachadas.' },
  { name: 'Estore motorizado', category: 'Estores', short: 'Comando remoto ou domótica.', long: 'Estore motorizado com comando remoto ou integração domótica, com opção de sensor solar automático para maior conforto no dia a dia.' },
  { name: 'Toldo articulado', category: 'Toldos', short: 'Braços articulados, projeção ajustável.', long: 'Toldo com braços articulados e projeção ajustável, ideal para varandas e terraços que precisam de sombra flexível ao longo do dia.' },
  { name: 'Toldo retráctil', category: 'Toldos', short: 'Recolhe totalmente quando não usado.', long: 'Toldo retráctil que recolhe por completo, protegendo o tecido da intempérie quando não está em uso e prolongando a sua durabilidade.' },
  { name: 'Toldo fixo', category: 'Toldos', short: 'Sombra constante em esplanadas.', long: 'Estrutura fixa pensada para sombra permanente em esplanadas e negócios, com tecidos técnicos resistentes à exposição solar constante.' },
  { name: 'Toldo motorizado com sensores', category: 'Toldos', short: 'Sensores de vento e sol.', long: 'Toldo motorizado equipado com sensores de vento e sol, que recolhe automaticamente em condições adversas para proteger a estrutura.' },
  { name: 'Portada de alumínio articulada', category: 'Portadas', short: 'Estrutura robusta e segura.', long: 'Portada articulada em alumínio com fecho reforçado, pensada para máxima segurança em casas e negócios.' },
  { name: 'Portada de correr', category: 'Portadas', short: 'Sistema deslizante para grandes vãos.', long: 'Sistema de correr para grandes vãos, sem ocupar espaço no exterior, com deslizamento suave e duradouro.' },
  { name: 'Portada de enrolar', category: 'Portadas', short: 'Recolhe verticalmente, discreta.', long: 'Portada de enrolar que recolhe verticalmente para uma caixa discreta, prática para uso diário em lojas e habitações.' },
  { name: 'Portada com isolamento térmico', category: 'Portadas', short: 'Reforço térmico e eficiência.', long: 'Portada com reforço de isolamento térmico, contribuindo para maior eficiência energética da habitação durante todo o ano.' },
  { name: 'Cortina de vidro deslizante', category: 'Fachadas têxteis', short: 'Painéis de vidro sem perfis verticais.', long: 'Cortina de vidro com painéis deslizantes que se recolhem lateralmente, sem perfis verticais, mantendo a vista e a luz natural.' },
  { name: 'Fachada têxtil retráctil', category: 'Fachadas têxteis', short: 'Tecido translúcido retráctil.', long: 'Fachada têxtil com tecido técnico translúcido que fecha e abre o espaço à vontade, ideal para todo o ano.' },
  { name: 'Cortina de PVC transparente', category: 'Fachadas têxteis', short: 'Solução económica contra o vento.', long: 'Cortina de PVC transparente, uma solução económica para fechar esplanadas e varandas em dias de vento e chuva.' },
  { name: 'Fachada têxtil para negócios', category: 'Fachadas têxteis', short: 'Ideal para esplanadas o ano todo.', long: 'Fachada têxtil pensada para esplanadas de restaurantes e cafés, permitindo o uso do espaço exterior durante todo o ano.' }
].map((p, i) => {
  const photos = CAT_PHOTOS[p.category];
  return { ...p, id: i, grad: GRADS[p.category], catHref: CAT_HREF[p.category], photoId: photos[i % photos.length] };
});

function initProducts() {
  const grid = document.getElementById('shopGrid');
  if (!grid) return;

  const gridView = document.getElementById('shopView');
  const detailView = document.getElementById('detailView');
  const sidebar = document.getElementById('shopFilters');
  let filter = 'Todos';

  const counts = {};
  CATALOG.forEach(p => counts[p.category] = (counts[p.category] || 0) + 1);
  const labels = ['Todos', 'Estores', 'Toldos', 'Portadas', 'Fachadas têxteis'];

  sidebar.innerHTML = '<h3 class="sidebar__head">Categorias</h3>' + labels.map(label => {
    const count = label === 'Todos' ? CATALOG.length : (counts[label] || 0);
    return `<button class="filter-btn${label === filter ? ' is-active' : ''}" data-filter="${label}">${label}<span class="filter-btn__count">${count}</span></button>`;
  }).join('');

  function renderGrid() {
    const list = filter === 'Todos' ? CATALOG : CATALOG.filter(p => p.category === filter);
    grid.innerHTML = list.map(p => `
      <button class="shop-card" data-id="${p.id}">
        <div class="shop-card__photo" style="background:${layered(p.grad, p.photoId)}"></div>
        <div class="shop-card__body">
          <span class="shop-card__tag">${p.category}</span>
          <h3 class="shop-card__name">${p.name}</h3>
          <p class="shop-card__desc">${p.short}</p>
          <span class="shop-card__link">Ver detalhes →</span>
        </div>
      </button>`).join('');
    grid.querySelectorAll('.shop-card').forEach(btn =>
      btn.addEventListener('click', () => openDetail(Number(btn.dataset.id)))
    );
  }

  function openDetail(id) {
    const p = CATALOG[id];
    detailView.innerHTML = `
      <div class="detail__inner">
        <button class="back-link" id="backToShop">← Voltar aos produtos</button>
        <div class="detail__grid">
          <div>
            <div class="detail__main-photo" style="background:${layered(p.grad, p.photoId)}"></div>
          </div>
          <div class="detail__info">
            <span class="detail__tag">${p.category}</span>
            <h2 class="detail__title">${p.name}</h2>
            <p class="detail__desc">${p.long}</p>
            <a href="contactos.html" class="btn btn--yellow btn--sm detail__cta">Pedir orçamento para este produto</a>
            <a href="${p.catHref}" class="detail__cat-link">Ver mais em ${p.category} →</a>
          </div>
        </div>
      </div>`;
    gridView.hidden = true;
    detailView.hidden = false;
    window.scrollTo({ top: 0, behavior: 'smooth' });
    document.getElementById('backToShop').addEventListener('click', () => {
      detailView.hidden = true;
      gridView.hidden = false;
      window.scrollTo({ top: 0, behavior: 'smooth' });
    });
  }

  sidebar.querySelectorAll('.filter-btn').forEach(btn =>
    btn.addEventListener('click', () => {
      filter = btn.dataset.filter;
      sidebar.querySelectorAll('.filter-btn').forEach(b => b.classList.toggle('is-active', b === btn));
      renderGrid();
    })
  );

  renderGrid();
}

/* ------------------------------------------------------------
   Projetos (projetos.html)
   ------------------------------------------------------------ */
const PROJECTS = [
  { category: 'Estores', title: 'Estores de rolo em apartamento', location: 'Bragança', grad: 'linear-gradient(150deg,#4a4f47,#2c302e)', about: 'Instalação de estores de rolo interiores num apartamento em Bragança, com tecido screen para filtrar a luz sem perder a vista. Medição, fornecimento e montagem feitos pela nossa equipa em menos de um dia.' },
  { category: 'Toldos', title: 'Toldo articulado em varanda', location: 'Mirandela', grad: 'linear-gradient(150deg,#fe9900,#2c302e)', about: 'Toldo articulado com projeção ajustável, instalado numa varanda em Mirandela para criar sombra durante o verão. Estrutura em alumínio resistente ao vento, com tecido técnico impermeável.' },
  { category: 'Portadas', title: 'Portadas de alumínio em vivenda', location: 'Bragança', grad: 'linear-gradient(150deg,#565b53,#2c302e)', about: 'Substituição das portadas antigas de uma vivenda por portadas articuladas em alumínio, reforçando a segurança e o isolamento térmico da casa sem alterar o estilo da fachada.' },
  { category: 'Fachadas', title: 'Cortina de vidro em esplanada', location: 'Vinhais', grad: 'linear-gradient(150deg,#ffca01,#2c302e)', about: 'Fecho de uma esplanada em Vinhais com cortina de vidro deslizante, permitindo manter o espaço aberto durante todo o ano, protegido do vento e da chuva sem perder luz natural.' },
  { category: 'Estores', title: 'Estores exteriores em escritório', location: 'Bragança', grad: 'linear-gradient(150deg,#6a6f65,#2c302e)', about: 'Estores exteriores de lâminas instalados na fachada de um escritório em Bragança, reduzindo o calor solar direto e melhorando o conforto térmico dos espaços de trabalho.' },
  { category: 'Toldos', title: 'Toldo retráctil em jardim', location: 'Macedo de Cavaleiros', grad: 'linear-gradient(150deg,#ffb733,#2c302e)', about: 'Toldo retráctil instalado num jardim privado em Macedo de Cavaleiros, recolhendo por completo fora da época de uso para prolongar a vida do tecido.' },
  { category: 'Portadas', title: 'Portadas de correr em loja', location: 'Bragança', grad: 'linear-gradient(150deg,#787d73,#2c302e)', about: 'Sistema de portadas de correr para uma loja no centro de Bragança, aproveitando ao máximo o vão de entrada sem ocupar espaço no exterior.' },
  { category: 'Fachadas', title: 'Fachada têxtil em restaurante', location: 'Bragança', grad: 'linear-gradient(150deg,#f2c227,#2c302e)', about: 'Fachada têxtil retráctil instalada na esplanada de um restaurante em Bragança, permitindo abrir e fechar o espaço conforme o tempo, mantendo o negócio a funcionar durante todo o ano.' },
  { category: 'Estores', title: 'Estores motorizados em casa', location: 'Chaves', grad: 'linear-gradient(150deg,#8b9082,#2c302e)', about: 'Estores motorizados com comando remoto instalados numa habitação em Chaves, com sensor solar automático para maior conforto no dia a dia.' }
].map((p, i) => ({ ...p, id: i, photos: CAT_PHOTOS[p.category] || CAT_PHOTOS['Estores'] }));

function initProjects() {
  const grid = document.getElementById('projGrid');
  if (!grid) return;

  const gridView = document.getElementById('projView');
  const detailView = document.getElementById('projDetailView');
  const filterRow = document.getElementById('projFilters');
  let filter = 'Todos';
  const labels = ['Todos', 'Estores', 'Toldos', 'Portadas', 'Fachadas'];

  filterRow.innerHTML = labels.map(l =>
    `<button class="pill${l === filter ? ' is-active' : ''}" data-filter="${l}">${l}</button>`
  ).join('');

  function renderGrid() {
    const list = filter === 'Todos' ? PROJECTS : PROJECTS.filter(p => p.category === filter);
    grid.innerHTML = list.map(p => `
      <button class="proj-card" data-id="${p.id}">
        <div class="proj-card__photo" style="background:${layered(p.grad, p.photos[0])}">
          <span class="proj-card__badge">${p.photos.length} fotos</span>
        </div>
        <div class="proj-card__body">
          <span class="proj-card__tag">${p.category}</span>
          <h3 class="proj-card__title">${p.title}</h3>
          <span class="proj-card__loc">${p.location}</span>
        </div>
      </button>`).join('');
    grid.querySelectorAll('.proj-card').forEach(btn =>
      btn.addEventListener('click', () => openDetail(Number(btn.dataset.id)))
    );
  }

  function openDetail(id) {
    const p = PROJECTS[id];
    const thumbs = p.photos.map((ph, i) =>
      `<button class="proj-detail__thumb${i === 0 ? ' is-active' : ''}" data-photo="${i}" style="background:${layered(p.grad, ph)}"></button>`
    ).join('');
    detailView.innerHTML = `
      <div class="proj-detail__inner">
        <button class="back-link" id="backToProj">← Voltar aos projetos</button>
        <span class="proj-detail__tag">${p.category} · ${p.location}</span>
        <h2 class="proj-detail__title">${p.title}</h2>
        <div class="proj-detail__main" id="projMainPhoto" style="background:${layered(p.grad, p.photos[0], '.30')}"></div>
        <div class="proj-detail__body">
          <div>
            <h3 class="proj-detail__head">Sobre o projeto</h3>
            <p class="proj-detail__text">${p.about}</p>
            <a href="contactos.html" class="btn btn--yellow btn--sm proj-detail__cta">Pedir orçamento para um projeto assim</a>
          </div>
          <div>
            <h3 class="proj-detail__head">Galeria</h3>
            <div class="proj-detail__gallery">${thumbs}</div>
          </div>
        </div>
      </div>`;
    gridView.hidden = true;
    detailView.hidden = false;
    window.scrollTo({ top: 0, behavior: 'smooth' });

    const mainPhoto = document.getElementById('projMainPhoto');
    detailView.querySelectorAll('.proj-detail__thumb').forEach(t =>
      t.addEventListener('click', () => {
        const i = Number(t.dataset.photo);
        mainPhoto.style.background = layered(p.grad, p.photos[i], '.30');
        detailView.querySelectorAll('.proj-detail__thumb').forEach(x => x.classList.toggle('is-active', x === t));
      })
    );
    document.getElementById('backToProj').addEventListener('click', () => {
      detailView.hidden = true;
      gridView.hidden = false;
      window.scrollTo({ top: 0, behavior: 'smooth' });
    });
  }

  filterRow.querySelectorAll('.pill').forEach(btn =>
    btn.addEventListener('click', () => {
      filter = btn.dataset.filter;
      filterRow.querySelectorAll('.pill').forEach(b => b.classList.toggle('is-active', b === btn));
      renderGrid();
    })
  );

  renderGrid();
}

/* ------------------------------------------------------------
   Formulário de contacto (contactos.html)
   ------------------------------------------------------------ */
function initContactForm() {
  const form = document.getElementById('contactForm');
  if (!form) return;
  const success = document.getElementById('formSuccess');
  form.addEventListener('submit', (e) => {
    e.preventDefault();
    const top = form.getBoundingClientRect().top + window.scrollY - 120;
    form.hidden = true;
    success.hidden = false;
    window.scrollTo({ top, behavior: 'smooth' });
  });
}

/* ------------------------------------------------------------
   Arranque
   ------------------------------------------------------------ */
document.addEventListener('DOMContentLoaded', () => {
  renderChrome();
  initMenu();
  initDynamicText();
  initHeroVisual();
  initBanner();
  initHomeLists();
  initCategoryPhotos();
  initProducts();
  initProjects();
  initContactForm();
});
