<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./support.js"></script>
</head>
<body>
<x-dc>
<helmet data-dc-atomics>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800&family=Murecho:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
  body { margin: 0; background: #f7f4ee; font-family: 'Murecho', sans-serif; }
  * { box-sizing: border-box; }
  a { color: #fe9900; text-decoration: none; }
  a:hover { color: #ffca01; }
</style>
</helmet>
<div style="{{ pageWrapStyle }}">
  <header style="{{ headerStyle }}">
    <div style="{{ headerInnerStyle }}">
      <a href="Home.dc.html" style="{{ logoLinkStyle }}"><img src="uploads/imgi_1_logotipowhite.png" alt="Estores Brigantinos" style="{{ logoImgStyle }}"/></a>
      <sc-if value="{{ notMobile }}" hint-placeholder-val="{{ true }}">
        <nav style="{{ navStyle }}">
          <sc-for list="{{ navItems }}" as="item" hint-placeholder-count="5">
            <a href="{{ item.href }}" style="{{ item.active }}">{{ item.label }}</a>
          </sc-for>
        </nav>
      </sc-if>
      <sc-if value="{{ notMobile }}" hint-placeholder-val="{{ true }}">
        <a href="Contactos.dc.html" style="{{ ctaHeaderStyle }}">Pedir orçamento</a>
      </sc-if>
      <sc-if value="{{ mobile }}" hint-placeholder-val="{{ false }}">
        <button onClick="{{ toggleMenu }}" style="{{ burgerStyle }}" aria-label="Menu">
          <span style="{{ burgerLineStyle }}"></span>
          <span style="{{ burgerLineStyle }}"></span>
          <span style="{{ burgerLineStyle }}"></span>
        </button>
      </sc-if>
    </div>
    <sc-if value="{{ menuOpen }}" hint-placeholder-val="{{ false }}">
      <nav style="{{ mobileNavStyle }}">
        <sc-for list="{{ navItems }}" as="item" hint-placeholder-count="5">
          <a href="{{ item.href }}" style="{{ mobileLinkStyle }}" onClick="{{ closeMenu }}">{{ item.label }}</a>
        </sc-for>
        <a href="Contactos.dc.html" style="{{ ctaMobileStyle }}" onClick="{{ closeMenu }}">Pedir orçamento</a>
      </nav>
    </sc-if>
  </header>

  <section style="{{ pageHeroStyle }}">
    <span style="{{ kickerLightStyle }}">O nosso trabalho</span>
    <h1 style="{{ pageHeroTitleStyle }}">Projetos</h1>
    <p style="{{ pageHeroSubStyle }}">Instalações reais em casas, varandas e negócios de Bragança e região. Clique num projeto para ver a galeria completa.</p>
  </section>

  <sc-if value="{{ showDetail }}" hint-placeholder-val="{{ false }}">
    <section style="{{ detailSectionStyle }}">
      <div style="{{ detailInnerStyle }}">
        <button onClick="{{ closeDetail }}" style="{{ backLinkStyle }}">← Voltar aos projetos</button>
        <span style="{{ detailTagStyle }}">{{ activeProject.category }} · {{ activeProject.location }}</span>
        <h2 style="{{ detailTitleStyle }}">{{ activeProject.title }}</h2>
        <div style="{{ mainPhotoStyle }}"></div>
        <div style="{{ detailBodyGridStyle }}">
          <div style="{{ aboutColStyle }}">
            <h3 style="{{ aboutHeadStyle }}">Sobre o projeto</h3>
            <p style="{{ aboutTextStyle }}">{{ activeProject.about }}</p>
            <a href="Contactos.dc.html" style="{{ detailCtaStyle }}">Pedir orçamento para um projeto assim</a>
          </div>
          <div style="{{ galleryColStyle }}">
            <h3 style="{{ aboutHeadStyle }}">Galeria</h3>
            <div style="{{ galleryGridStyle }}">
              <sc-for list="{{ detailThumbs }}" as="th" hint-placeholder-count="4">
                <button onClick="{{ th.select }}" style="{{ th.style }}"></button>
              </sc-for>
            </div>
          </div>
        </div>
      </div>
    </section>
  </sc-if>

  <sc-if value="{{ showGrid }}" hint-placeholder-val="{{ true }}">
  <section style="{{ filterSectionStyle }}">
    <div style="{{ filterRowStyle }}">
      <sc-for list="{{ filters }}" as="f" hint-placeholder-count="5">
        <button onClick="{{ f.select }}" style="{{ f.style }}">{{ f.label }}</button>
      </sc-for>
    </div>
  </section>

  <section style="{{ gridSectionStyle }}">
    <div style="{{ gridInnerStyle }}">
      <div style="{{ projGridStyle }}">
        <sc-for list="{{ visibleProjects }}" as="proj" hint-placeholder-count="6">
          <button onClick="{{ proj.open }}" style="{{ projCardStyle }}">
            <div style="{{ proj.photoStyle }}">
              <span style="{{ proj.countBadgeStyle }}">{{ proj.photoCountLabel }}</span>
            </div>
            <div style="{{ projCardBodyStyle }}">
              <span style="{{ projTagStyle }}">{{ proj.category }}</span>
              <h3 style="{{ projTitleStyle }}">{{ proj.title }}</h3>
              <span style="{{ projLocStyle }}">{{ proj.location }}</span>
            </div>
          </button>
        </sc-for>
      </div>
    </div>
  </section>
  </sc-if>

  <section style="{{ ctaBandStyle }}">
    <h2 style="{{ ctaBandTitleStyle }}">O seu espaço pode ser o próximo</h2>
    <p style="{{ ctaBandTextStyle }}">Diga-nos o que precisa e entramos em contacto para agendar uma visita técnica gratuita.</p>
    <a href="Contactos.dc.html" style="{{ ctaBandBtnStyle }}">Pedir orçamento</a>
  </section>

  <footer style="{{ footerStyle }}">
    <div style="{{ footerGridStyle }}">
      <div style="{{ footerColStyle }}">
        <img src="uploads/imgi_1_logotipowhite.png" alt="Estores Brigantinos" style="{{ footerLogoStyle }}"/>
        <p style="{{ footerDescStyle }}">Soluções em estores, toldos e portadas, com qualidade, design moderno e confiança, para transformar o seu espaço.</p>
      </div>
      <div style="{{ footerColStyle }}">
        <h4 style="{{ footerHeadStyle }}">Links rápidos</h4>
        <sc-for list="{{ navItems }}" as="item" hint-placeholder-count="5">
          <a href="{{ item.href }}" style="{{ footerLinkStyle }}">{{ item.label }}</a>
        </sc-for>
      </div>
      <div style="{{ footerColStyle }}">
        <h4 style="{{ footerHeadStyle }}">Morada</h4>
        <p style="{{ footerTextStyle }}">Zona Industrial das Cantarias<br/>Av. Dr. Mário Soares, nº 1<br/>5300-423 Bragança</p>
        <h4 style="{{ footerHeadStyle }}">Horário</h4>
        <p style="{{ footerTextStyle }}">Segunda a Sexta<br/>8:30h – 12:00h · 14:00h – 18:30h<br/>Sábado e Domingo: Fechado</p>
      </div>
      <div style="{{ footerColStyle }}">
        <h4 style="{{ footerHeadStyle }}">Contactos</h4>
        <p style="{{ footerTextStyle }}">273 332 702<br/><span style="{{ footerNoteStyle }}">Chamada para Rede Fixa Nacional</span></p>
        <p style="{{ footerTextStyle }}">geral@estoresbrigantinos.pt</p>
      </div>
    </div>
    <div style="{{ footerBottomStyle }}">© {{ year }} Estores Brigantinos. Todos os direitos reservados.</div>
  </footer>

</div>

</x-dc>
<script type="text/x-dc" data-dc-script data-props="{&quot;$preview&quot;:{&quot;width&quot;:1440}}">
const MOBILE_BP = 900;
const img = (id, w) => `https://images.unsplash.com/${id}?auto=format&fit=crop&w=${w || 1000}&q=60`;
const layered = (grad, id) => id
  ? { backgroundImage: `linear-gradient(0deg, rgba(20,22,18,.06), rgba(20,22,18,.02)), url(${img(id)}), ${grad}`, backgroundSize: 'cover, cover, cover', backgroundPosition: 'center, center, center' }
  : { background: grad };

class Component extends DCLogic {
  state = { width: 1400, menuOpen: false, filter: 'Todos', openId: null, activePhoto: 0 };
  componentDidMount() {
    this.onResize = () => this.setState({ width: window.innerWidth });
    window.addEventListener('resize', this.onResize);
    this.onResize();
  }
  componentWillUnmount() { window.removeEventListener('resize', this.onResize); }

  renderVals() {
    const mobile = this.state.width < MOBILE_BP;
    const notMobile = !mobile;
    const dark = '#2c302e', yellow = '#ffca01', orange = '#fe9900', cream = '#f7f4ee';

    const navItems = [
      { label: 'Home', href: 'Home.dc.html' },
      { label: 'Produtos', href: 'Produtos.dc.html' },
      { label: 'Projetos', href: 'Projetos.dc.html' },
      { label: 'Empresa', href: 'Empresa.dc.html' },
      { label: 'Contactos', href: 'Contactos.dc.html' }
    ].map(n => ({ ...n, active: { color: n.label === 'Projetos' ? yellow : '#fff', fontWeight: 600, fontSize: 15, letterSpacing: '.2px' } }));

    const projectsRaw = [
      { category: 'Estores', title: 'Estores de rolo em apartamento', location: 'Bragança', grad: 'linear-gradient(150deg,#4a4f47,#2c302e)', photos: ['photo-1600210492493-0946911123ea', 'photo-1600121848594-d8644e57abab', 'photo-1560448204-e02f11c3d0e2'], 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)', photos: ['photo-1600566753086-00f18fb6b3ea', 'photo-1600566753190-17f0baa2a6c3', 'photo-1615873968403-89e068629265'], 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)', photos: ['photo-1600607687939-ce8a6c25118c', 'photo-1512918728675-ed5a9ecdebfd', 'photo-1600585152915-d208bec867a1'], 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)', photos: ['photo-1571508601891-ca5e7a713859', 'photo-1600585154340-be6161a56a0c', 'photo-1560185127-6ed189bf02f4'], 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)', photos: ['photo-1560448204-e02f11c3d0e2', 'photo-1600210492493-0946911123ea', 'photo-1600121848594-d8644e57abab'], 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)', photos: ['photo-1615873968403-89e068629265', 'photo-1600566753190-17f0baa2a6c3', 'photo-1600566753086-00f18fb6b3ea'], 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)', photos: ['photo-1512918728675-ed5a9ecdebfd', 'photo-1600585152915-d208bec867a1', 'photo-1600607687939-ce8a6c25118c'], 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)', photos: ['photo-1600585154340-be6161a56a0c', 'photo-1560185127-6ed189bf02f4', 'photo-1571508601891-ca5e7a713859'], 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)', photos: ['photo-1600121848594-d8644e57abab', 'photo-1560448204-e02f11c3d0e2', 'photo-1600210492493-0946911123ea'], 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 }));

    const filterOptions = ['Todos', 'Estores', 'Toldos', 'Portadas', 'Fachadas'];
    const filters = filterOptions.map(label => ({
      label,
      select: () => this.setState({ filter: label }),
      style: {
        border: `2px solid ${this.state.filter === label ? dark : 'rgba(44,48,46,.2)'}`,
        background: this.state.filter === label ? dark : 'transparent',
        color: this.state.filter === label ? '#fff' : dark,
        fontWeight: 700, fontSize: 13.5, padding: '9px 18px', borderRadius: 999, cursor: 'pointer'
      }
    }));

    const filtered = this.state.filter === 'Todos' ? projectsRaw : projectsRaw.filter(p => p.category === this.state.filter);
    const visibleProjects = filtered.map(p => ({
      ...p,
      open: () => this.setState({ openId: p.id, activePhoto: 0 }),
      photoStyle: { height: 220, borderRadius: '14px 14px 0 0', position: 'relative', ...layered(p.grad, p.photos[0]) },
      photoCountLabel: `${p.photos.length} fotos`,
      countBadgeStyle: { position: 'absolute', bottom: 10, right: 10, background: 'rgba(20,22,18,.6)', color: '#fff', fontSize: 11.5, fontWeight: 600, padding: '4px 9px', borderRadius: 999 }
    }));

    const activeProject = this.state.openId != null ? projectsRaw.find(p => p.id === this.state.openId) : null;
    const detailThumbs = activeProject ? activeProject.photos.map((ph, i) => ({
      select: () => this.setState({ activePhoto: i }),
      style: { height: mobile ? 100 : 130, borderRadius: 10, border: this.state.activePhoto === i ? `2px solid ${yellow}` : '2px solid transparent', cursor: 'pointer', padding: 0, ...layered(activeProject.grad, ph) }
    })) : [];

    return {
      mobile, notMobile,
      showDetail: !!activeProject,
      showGrid: !activeProject,
      activeProject: activeProject || {},
      detailThumbs,
      closeDetail: () => this.setState({ openId: null }),
      mainPhotoStyle: activeProject ? { height: mobile ? 260 : 420, borderRadius: 16, ...layered(activeProject.grad, activeProject.photos[this.state.activePhoto]) } : {},

      pageWrapStyle: { background: cream, minHeight: '100vh', overflowX: 'hidden' },
      headerStyle: { position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50, background: dark, boxShadow: '0 2px 18px rgba(0,0,0,.18)' },
      headerInnerStyle: { maxWidth: 1360, margin: '0 auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: mobile ? '10px 18px' : '10px 32px', gap: 24 },
      logoLinkStyle: { display: 'flex', alignItems: 'center' },
      logoImgStyle: { height: mobile ? 40 : 48, width: 'auto', display: 'block' },
      navStyle: { display: 'flex', gap: 30, alignItems: 'center' },
      ctaHeaderStyle: { background: yellow, color: dark, fontWeight: 700, fontSize: 14, padding: '11px 22px', borderRadius: 8, whiteSpace: 'nowrap' },
      burgerStyle: { background: 'none', border: 'none', display: 'flex', flexDirection: 'column', gap: 5, padding: 8, cursor: 'pointer' },
      burgerLineStyle: { width: 24, height: 2, background: '#fff', display: 'block' },
      mobileNavStyle: { display: 'flex', flexDirection: 'column', background: dark, padding: '8px 18px 20px', gap: 4, borderTop: '1px solid rgba(255,255,255,.08)' },
      mobileLinkStyle: { color: '#fff', fontWeight: 600, fontSize: 16, padding: '12px 4px', borderBottom: '1px solid rgba(255,255,255,.08)' },
      ctaMobileStyle: { marginTop: 12, background: yellow, color: dark, fontWeight: 700, fontSize: 15, padding: '13px 20px', borderRadius: 8, textAlign: 'center' },
      toggleMenu: () => this.setState(s => ({ menuOpen: !s.menuOpen })),
      closeMenu: () => this.setState({ menuOpen: false }),
      menuOpen: this.state.menuOpen,

      pageHeroStyle: { background: `linear-gradient(150deg,#2c302e 0%,#23261f 60%,#181a17 100%)`, padding: mobile ? '120px 20px 44px' : '170px 64px 60px' },
      kickerLightStyle: { color: yellow, fontWeight: 700, fontSize: 13, letterSpacing: '1.5px', textTransform: 'uppercase' },
      pageHeroTitleStyle: { fontFamily: "'Archivo',sans-serif", color: '#fff', fontWeight: 800, fontSize: mobile ? 34 : 48, margin: '10px 0 14px' },
      pageHeroSubStyle: { color: 'rgba(255,255,255,.75)', fontSize: mobile ? 15 : 17, maxWidth: 600, margin: 0, lineHeight: 1.6 },

      filterSectionStyle: { padding: mobile ? '24px 20px 0' : '36px 64px 0', background: cream },
      filterRowStyle: { display: 'flex', flexWrap: 'wrap', gap: 10, maxWidth: 1280, margin: '0 auto' },

      gridSectionStyle: { padding: mobile ? '28px 20px 56px' : '32px 64px 96px', background: cream },
      gridInnerStyle: { maxWidth: 1280, margin: '0 auto' },
      projGridStyle: { display: 'grid', gridTemplateColumns: mobile ? '1fr' : 'repeat(3,1fr)', gap: 22 },
      projCardStyle: { background: '#fff', borderRadius: 16, overflow: 'hidden', boxShadow: '0 6px 24px rgba(44,48,46,.08)', border: 'none', padding: 0, cursor: 'pointer', textAlign: 'left', display: 'block', width: '100%', fontFamily: "'Murecho',sans-serif" },
      projCardBodyStyle: { padding: '16px 18px 20px' },
      projTagStyle: { color: orange, fontWeight: 700, fontSize: 11.5, letterSpacing: '.6px', textTransform: 'uppercase' },
      projTitleStyle: { fontFamily: "'Archivo',sans-serif", color: dark, fontWeight: 700, fontSize: 17, margin: '6px 0 6px' },
      projLocStyle: { color: '#65695f', fontSize: 13 },

      ctaBandStyle: { background: `linear-gradient(120deg,${yellow},${orange})`, padding: mobile ? '48px 20px' : '64px 64px', textAlign: 'center' },
      ctaBandTitleStyle: { fontFamily: "'Archivo',sans-serif", color: dark, fontWeight: 800, fontSize: mobile ? 26 : 34, margin: '0 0 12px' },
      ctaBandTextStyle: { color: '#3a3f3c', fontSize: mobile ? 15 : 17, margin: '0 0 26px' },
      ctaBandBtnStyle: { display: 'inline-block', background: dark, color: '#fff', fontWeight: 700, fontSize: 16, padding: '15px 34px', borderRadius: 9 },

      footerStyle: { background: '#1c1f1d', padding: mobile ? '48px 20px 24px' : '72px 64px 28px' },
      footerGridStyle: { maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1.3fr 1fr 1fr 1fr', gap: 36 },
      footerColStyle: {},
      footerLogoStyle: { height: 40, marginBottom: 14 },
      footerDescStyle: { color: 'rgba(255,255,255,.6)', fontSize: 14, lineHeight: 1.6, maxWidth: 280 },
      footerHeadStyle: { fontFamily: "'Archivo',sans-serif", color: '#fff', fontWeight: 700, fontSize: 15, margin: '0 0 16px' },
      footerLinkStyle: { display: 'block', color: 'rgba(255,255,255,.65)', fontSize: 14, marginBottom: 10 },
      footerTextStyle: { color: 'rgba(255,255,255,.65)', fontSize: 14, lineHeight: 1.7, margin: '0 0 16px' },
      footerNoteStyle: { color: 'rgba(255,255,255,.4)', fontSize: 12 },
      footerBottomStyle: { maxWidth: 1280, margin: '40px auto 0', paddingTop: 20, borderTop: '1px solid rgba(255,255,255,.08)', color: 'rgba(255,255,255,.4)', fontSize: 12.5, textAlign: 'center' },

      detailSectionStyle: { padding: mobile ? '40px 20px 60px' : '56px 64px 100px', background: cream },
      detailInnerStyle: { maxWidth: 1080, margin: '0 auto' },
      backLinkStyle: { background: 'none', border: 'none', color: dark, fontWeight: 700, fontSize: 14, cursor: 'pointer', padding: 0, marginBottom: 20 },
      detailTagStyle: { color: orange, fontWeight: 700, fontSize: 12.5, letterSpacing: '.6px', textTransform: 'uppercase', display: 'block' },
      detailTitleStyle: { fontFamily: "'Archivo',sans-serif", color: dark, fontWeight: 800, fontSize: mobile ? 26 : 34, margin: '8px 0 24px' },
      detailBodyGridStyle: { display: 'grid', gridTemplateColumns: mobile ? '1fr' : '.85fr 1.15fr', gap: mobile ? 32 : 48, marginTop: 28, alignItems: 'start' },
      aboutColStyle: { display: 'flex', flexDirection: 'column' },
      aboutHeadStyle: { fontFamily: "'Archivo',sans-serif", color: dark, fontWeight: 700, fontSize: 16, margin: '0 0 12px' },
      aboutTextStyle: { color: '#4d514c', fontSize: 15.5, lineHeight: 1.75, margin: '0 0 26px' },
      detailCtaStyle: { display: 'inline-block', background: yellow, color: dark, fontWeight: 700, fontSize: 15, padding: '14px 26px', borderRadius: 9, textAlign: 'center', width: 'fit-content' },
      galleryColStyle: {},
      galleryGridStyle: { display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 12 },

      year: new Date().getFullYear(),
      navItems, filters, visibleProjects
    };
  }
}

</script>
</body>
</html>
