<!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 }}">
    <a href="Produtos.dc.html" style="{{ breadcrumbStyle }}">← Produtos</a>
    <span style="{{ kickerLightStyle }}">{{ category.tag }}</span>
    <h1 style="{{ pageHeroTitleStyle }}">{{ category.name }}</h1>
    <p style="{{ pageHeroSubStyle }}">{{ category.desc }}</p>
    <a href="Contactos.dc.html" style="{{ heroCtaStyle }}">Pedir orçamento</a>
  </section>

  <section style="{{ introSectionStyle }}">
    <div style="{{ introInnerStyle }}">
      <p style="{{ introTextStyle }}">{{ category.intro }}</p>
    </div>
  </section>

  <section style="{{ prodSectionStyle }}">
    <div style="{{ prodInnerStyle }}">
      <h2 style="{{ sectionTitleDarkStyle }}">Modelos disponíveis</h2>
      <div style="{{ prodGridStyle }}">
        <sc-for list="{{ category.products }}" as="p" hint-placeholder-count="6">
          <div style="{{ prodCardStyle }}">
            <div style="{{ p.photoStyle }}"></div>
            <div style="{{ prodCardBodyStyle }}">
              <h3 style="{{ prodNameStyle }}">{{ p.name }}</h3>
              <p style="{{ prodDescStyle }}">{{ p.desc }}</p>
            </div>
          </div>
        </sc-for>
      </div>
    </div>
  </section>

  <section style="{{ ctaBandStyle }}">
    <h2 style="{{ ctaBandTitleStyle }}">Peça já o seu orçamento</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 }}">Enviar pedido</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;

class Component extends DCLogic {
  state = { width: 1400, menuOpen: false };
  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 === 'Produtos' ? yellow : '#fff', fontWeight: 600, fontSize: 15, letterSpacing: '.2px' } }));

    const photo = (grad) => ({ height: 170, borderRadius: '14px 14px 0 0', background: grad });
    const category = {
      name: 'Estores',
      tag: 'Interior & Exterior',
      desc: 'Estores interiores e exteriores, manuais ou motorizados, para controlar luz e privacidade com estilo.',
      intro: 'Trabalhamos com os principais sistemas de estores do mercado, adaptados a cada tipo de janela e necessidade. Da simples proteção da luz solar ao controlo total de privacidade, ajudamos a escolher o modelo, tecido e acionamento certos para o seu espaço.',
      products: [
        { name: 'Estore interior de rolo', desc: 'Tecido técnico com opção blackout ou screen, ideal para quartos e escritórios.', photoStyle: photo('linear-gradient(150deg,#4a4f47,#2c302e)') },
        { name: 'Estore de lâminas verticais', desc: 'Controlo preciso de luz para grandes vãos e escritórios.', photoStyle: photo('linear-gradient(150deg,#565b53,#2c302e)') },
        { name: 'Estore exterior de lâminas', desc: 'Alumínio resistente à intempérie, protege e isola termicamente.', photoStyle: photo('linear-gradient(150deg,#6a6f65,#2c302e)') },
        { name: 'Estore veneziano', desc: 'Lâminas orientáveis em alumínio ou madeira, para um controlo total de luz.', photoStyle: photo('linear-gradient(150deg,#787d73,#2c302e)') },
        { name: 'Estore motorizado', desc: 'Comando remoto ou domótica, com opção de sensor solar.', photoStyle: photo('linear-gradient(150deg,#8b9082,#2c302e)') },
        { name: 'Estore de rolo dia/noite', desc: 'Duplo tecido que alterna entre privacidade e luz filtrada.', photoStyle: photo('linear-gradient(150deg,#9ea391,#2c302e)') }
      ],
      heroGrad: 'linear-gradient(150deg,#3a3f3c 0%,#2c302e 55%,#181a17 100%)'
    };

    return {
      mobile, notMobile,
      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: category.heroGrad, padding: mobile ? '110px 20px 40px' : '160px 64px 60px' },
      breadcrumbStyle: { color: 'rgba(255,255,255,.6)', fontSize: 13.5, fontWeight: 600, display: 'inline-block', marginBottom: 18 },
      kickerLightStyle: { color: yellow, fontWeight: 700, fontSize: 13, letterSpacing: '1.5px', textTransform: 'uppercase', display: 'block' },
      pageHeroTitleStyle: { fontFamily: "'Archivo',sans-serif", color: '#fff', fontWeight: 800, fontSize: mobile ? 34 : 50, margin: '10px 0 14px' },
      pageHeroSubStyle: { color: 'rgba(255,255,255,.75)', fontSize: mobile ? 15 : 17, maxWidth: 580, margin: '0 0 26px', lineHeight: 1.6 },
      heroCtaStyle: { display: 'inline-block', background: yellow, color: dark, fontWeight: 700, fontSize: 15, padding: '13px 26px', borderRadius: 8 },

      introSectionStyle: { padding: mobile ? '32px 20px' : '48px 64px', background: '#efeae0' },
      introInnerStyle: { maxWidth: 900, margin: '0 auto' },
      introTextStyle: { color: '#4d514c', fontSize: mobile ? 15.5 : 17, lineHeight: 1.7, margin: 0, textAlign: mobile ? 'left' : 'center' },

      prodSectionStyle: { padding: mobile ? '52px 20px' : '90px 64px', background: cream },
      prodInnerStyle: { maxWidth: 1280, margin: '0 auto' },
      sectionTitleDarkStyle: { fontFamily: "'Archivo',sans-serif", color: dark, fontWeight: 800, fontSize: mobile ? 28 : 34, margin: '0 0 32px' },
      prodGridStyle: { display: 'grid', gridTemplateColumns: mobile ? '1fr' : 'repeat(3,1fr)', gap: 22 },
      prodCardStyle: { background: '#fff', borderRadius: 16, overflow: 'hidden', boxShadow: '0 6px 24px rgba(44,48,46,.08)' },
      prodCardBodyStyle: { padding: '18px 18px 22px' },
      prodNameStyle: { fontFamily: "'Archivo',sans-serif", color: dark, fontWeight: 700, fontSize: 17, margin: '0 0 8px' },
      prodDescStyle: { color: '#65695f', fontSize: 13.5, lineHeight: 1.55, margin: 0 },

      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' },

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

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