<!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; }
  input::placeholder, textarea::placeholder { color: #9a9d95; }
  input:focus, textarea:focus, select:focus { outline: 2px solid #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 }}">Fale connosco</span>
    <h1 style="{{ pageHeroTitleStyle }}">Peça já o seu orçamento</h1>
    <p style="{{ pageHeroSubStyle }}">Diga-nos o que precisa e entramos em contacto para agendar uma visita técnica gratuita.</p>
  </section>

  <section style="{{ mainSectionStyle }}">
    <div style="{{ mainInnerStyle }}">
      <div style="{{ formColStyle }}">
        <sc-if value="{{ submitted }}" hint-placeholder-val="{{ false }}">
          <div style="{{ successBoxStyle }}">
            <h3 style="{{ successTitleStyle }}">Pedido enviado!</h3>
            <p style="{{ successTextStyle }}">Obrigado pelo contacto. A nossa equipa responde em breve.</p>
          </div>
        </sc-if>
        <sc-if value="{{ notSubmitted }}" hint-placeholder-val="{{ true }}">
          <form onSubmit="{{ handleSubmit }}" style="{{ formStyle }}">
            <label style="{{ labelStyle }}">Nome
              <input required="" type="text" value="{{ form.nome }}" onChange="{{ setField.nome }}" placeholder="O seu nome" style="{{ inputStyle }}"/>
            </label>
            <div style="{{ rowStyle }}">
              <label style="{{ labelStyle }}">Email
                <input required="" type="email" value="{{ form.email }}" onChange="{{ setField.email }}" placeholder="email@exemplo.pt" style="{{ inputStyle }}"/>
              </label>
              <label style="{{ labelStyle }}">Telefone
                <input required="" type="tel" value="{{ form.telefone }}" onChange="{{ setField.telefone }}" placeholder="9xx xxx xxx" style="{{ inputStyle }}"/>
              </label>
            </div>
            <label style="{{ labelStyle }}">Tipo de produto
              <select value="{{ form.tipo }}" onChange="{{ setField.tipo }}" style="{{ inputStyle }}">
                <option value="Estores">Estores</option>
                <option value="Toldos">Toldos</option>
                <option value="Portadas">Portadas</option>
                <option value="Fachadas têxteis">Fachadas têxteis</option>
                <option value="Outro">Outro</option>
              </select>
            </label>
            <label style="{{ labelStyle }}">Mensagem
              <textarea value="{{ form.mensagem }}" onChange="{{ setField.mensagem }}" placeholder="Conte-nos um pouco sobre o seu espaço e o que procura" rows="5" style="{{ textareaStyle }}"></textarea>
            </label>
            <button type="submit" style="{{ submitBtnStyle }}">Enviar pedido</button>
          </form>
        </sc-if>
      </div>

      <div style="{{ infoColStyle }}">
        <div style="{{ infoCardStyle }}">
          <h3 style="{{ infoHeadStyle }}">Morada</h3>
          <p style="{{ infoTextStyle }}">Zona Industrial das Cantarias<br/>Av. Dr. Mário Soares, nº 1<br/>5300-423 Bragança</p>
          <h3 style="{{ infoHeadStyle }}">Horário</h3>
          <p style="{{ infoTextStyle }}">Segunda a Sexta<br/>8:30h – 12:00h · 14:00h – 18:30h<br/>Sábado e Domingo: Fechado</p>
          <h3 style="{{ infoHeadStyle }}">Contactos</h3>
          <p style="{{ infoTextStyle }}"><a href="tel:+351273332702" style="{{ infoLinkStyle }}">273 332 702</a><br/><span style="{{ infoNoteStyle }}">Chamada para Rede Fixa Nacional</span></p>
          <p style="{{ infoTextStyle }}"><a href="mailto:geral@estoresbrigantinos.pt" style="{{ infoLinkStyle }}">geral@estoresbrigantinos.pt</a></p>
        </div>
        <div style="{{ mapPlaceholderStyle }}"><span style="{{ mapLabelStyle }}">Mapa — Zona Industrial das Cantarias, Bragança</span></div>
      </div>
    </div>
  </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>
      </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, submitted: false,
    form: { nome: '', email: '', telefone: '', tipo: 'Estores', mensagem: '' }
  };
  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 === 'Contactos' ? yellow : '#fff', fontWeight: 600, fontSize: 15, letterSpacing: '.2px' } }));

    const fieldNames = ['nome', 'email', 'telefone', 'tipo', 'mensagem'];
    const setField = {};
    fieldNames.forEach(f => {
      setField[f] = (e) => this.setState(s => ({ form: { ...s.form, [f]: e.target.value } }));
    });

    const handleSubmit = (e) => {
      e.preventDefault();
      this.setState({ submitted: true });
    };

    return {
      mobile, notMobile,
      submitted: this.state.submitted,
      notSubmitted: !this.state.submitted,
      form: this.state.form,
      setField, handleSubmit,

      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 64px' },
      kickerLightStyle: { color: yellow, fontWeight: 700, fontSize: 13, letterSpacing: '1.5px', textTransform: 'uppercase' },
      pageHeroTitleStyle: { fontFamily: "'Archivo',sans-serif", color: '#fff', fontWeight: 800, fontSize: mobile ? 32 : 46, margin: '10px 0 14px' },
      pageHeroSubStyle: { color: 'rgba(255,255,255,.75)', fontSize: mobile ? 15 : 17, maxWidth: 560, margin: 0, lineHeight: 1.6 },

      mainSectionStyle: { padding: mobile ? '48px 20px 60px' : '80px 64px 100px', background: cream },
      mainInnerStyle: { maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1.3fr 1fr', gap: mobile ? 32 : 48, alignItems: 'flex-start' },

      formColStyle: {},
      formStyle: { display: 'flex', flexDirection: 'column', gap: 18, background: '#fff', padding: mobile ? '26px 20px' : '36px', borderRadius: 16, boxShadow: '0 8px 30px rgba(44,48,46,.08)' },
      rowStyle: { display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1fr 1fr', gap: 18 },
      labelStyle: { display: 'flex', flexDirection: 'column', gap: 8, fontWeight: 600, fontSize: 13.5, color: dark },
      inputStyle: { border: '1.5px solid #dcd8cd', borderRadius: 9, padding: '12px 14px', fontSize: 15, fontFamily: "'Murecho',sans-serif", color: dark, background: '#fbfaf7' },
      textareaStyle: { border: '1.5px solid #dcd8cd', borderRadius: 9, padding: '12px 14px', fontSize: 15, fontFamily: "'Murecho',sans-serif", color: dark, background: '#fbfaf7', resize: 'vertical' },
      submitBtnStyle: { background: yellow, color: dark, fontWeight: 700, fontSize: 16, padding: '15px 20px', borderRadius: 9, border: 'none', cursor: 'pointer', marginTop: 6 },

      successBoxStyle: { background: '#fff', borderRadius: 16, padding: '48px 32px', textAlign: 'center', boxShadow: '0 8px 30px rgba(44,48,46,.08)' },
      successTitleStyle: { fontFamily: "'Archivo',sans-serif", color: dark, fontWeight: 800, fontSize: 24, margin: '0 0 10px' },
      successTextStyle: { color: '#5a5e56', fontSize: 15, margin: 0 },

      infoColStyle: { display: 'flex', flexDirection: 'column', gap: 20 },
      infoCardStyle: { background: dark, borderRadius: 16, padding: mobile ? '26px 22px' : '32px 28px' },
      infoHeadStyle: { fontFamily: "'Archivo',sans-serif", color: yellow, fontWeight: 700, fontSize: 14, textTransform: 'uppercase', letterSpacing: '.6px', margin: '18px 0 8px' },
      infoTextStyle: { color: 'rgba(255,255,255,.8)', fontSize: 14.5, lineHeight: 1.7, margin: '0 0 4px' },
      infoLinkStyle: { color: '#fff', fontWeight: 600 },
      infoNoteStyle: { color: 'rgba(255,255,255,.45)', fontSize: 12 },
      mapPlaceholderStyle: { height: 200, borderRadius: 16, background: 'linear-gradient(150deg,#dcd8cd,#efeae0)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20, textAlign: 'center' },
      mapLabelStyle: { color: '#6b6f69', fontSize: 13, fontWeight: 600 },

      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
    };
  }
}

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