Mensagem

</div>
      {status === 'error' && (
        <div style={{ color: 'var(--ceramica)', fontSize: 13.5 }}>
          Não foi possível enviar. Tente pelo WhatsApp ou e-mail.
        </div>
      )}
      <div>
        <button type="submit" disabled={status === 'sending'} style={{
          fontFamily: 'var(--sans)', fontSize: 15, fontWeight: 600,
          padding: '14px 28px', borderRadius: 999,
          background: status === 'sending' ? 'var(--ink-mute)' : 'var(--ink)',
          color: 'var(--paper)', border: 'none',
          cursor: status === 'sending' ? 'not-allowed' : 'pointer',
          display: 'inline-flex', alignItems: 'center', gap: 8, transition: 'background .2s',
        }}>
          {Icons.Mail}
          {status === 'sending' ? 'Enviando…' : 'Enviar mensagem'}
        </button>
      </div>
    </form>
  );
}

function PageContato() {
  var isMobile = useWindowWidth() < 768;

return (
    <PageShell>
      <SiteHeader active="contato" />

{/* HEADER */}
      <section style={{ padding: isMobile ? '56px 24px' : '56px 56px', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', bottom: -10, right: -20, opacity: 0.35 }}>
          <DecConstellation width={400} height={200} />
        </div>
        <div style={{ position: 'relative' }}>
          <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.16em',
            textTransform: 'uppercase', color: 'var(--ink-mute)',
            display: 'inline-flex', alignItems: 'center', gap: 10 }}>
            <DecSectionMark size={14} /> Contato
          </div>
          <h1 style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: isMobile ? 52 : 88,
            lineHeight: 0.95, fontWeight: 400, letterSpacing: '-0.025em',
            margin: '20px 0 22px' }}>
            A porta está aberta.
          </h1>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--ink-soft)',
            maxWidth: 720, margin: 0 }}>
            Quer falar com a Casa Lar Luz do Caminho, tirar dúvidas ou saber
            como ajudar? Entre em contato pelos canais oficiais — temos uma
            equipe dedicada para cada tipo de assunto.
          </p>
        </div>
      </section>

{/* THREE CHANNELS */}
      <section data-reveal="" style={{ padding: isMobile ? '0 24px 56px' : '0 56px 56px' }}>
        <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.14em',
          textTransform: 'uppercase', color: 'var(--ink-mute)', marginBottom: 22,
          display: 'inline-flex', alignItems: 'center', gap: 10 }}>
          <DecSectionMark size={14} /> Canais oficiais · WhatsApp
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: 18 }}>
          {[
            {
              tag: 'Comunicação & Parcerias', tone: 'sol',
              phone: '(48) 99203-8976',
              hours: 'seg–sex · 9h às 18h',
              desc: 'Imprensa, divulgação, ações institucionais, empresas parceiras e campanhas.',
              wa: 'https://wa.me/5548992038976',
            },
            {
              tag: 'Doações', tone: 'folha',
              phone: '(48) 98805-1644',
              hours: 'seg–sex · 9h às 18h',
              desc: 'Alimentos, roupas, itens essenciais, PIX e formas de contribuição.',
              wa: 'https://wa.me/5548988051644',
            },
            {
              tag: 'Coordenação', tone: 'ceu',
              phone: '(48) 99212-8123',
              hours: 'seg–sex · 9h às 18h',
              desc: 'Assuntos institucionais, orientações gerais e contatos administrativos.',
              wa: 'https://wa.me/5548992128123',
            },
          ].map((c, i) => (
            <div key={i} style={{
              background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 14,
              padding: 26, display: 'flex', flexDirection: 'column', gap: 16,
              borderTop: `4px solid var(--${c.tone})`,
            }}>
              <Badge tone={c.tone} size="md">{c.tag}</Badge>
              <div style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 32,
                lineHeight: 1, color: 'var(--ink)', letterSpacing: '-0.018em', margin: '4px 0 0' }}>
                {c.phone}
              </div>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '0.1em',
                textTransform: 'uppercase', color: 'var(--ink-mute)' }}>
                {c.hours}
              </div>
              <p style={{ fontSize: 13.5, lineHeight: 1.55, color: 'var(--ink-soft)', margin: 0, flex: 1 }}>
                {c.desc}
              </p>
              <a href={c.wa} target="_blank" rel="noopener" style={{ textDecoration: 'none' }}>
                <Button variant="primary" full iconRight={Icons.Arrow}>Conversar pelo WhatsApp</Button>
              </a>
            </div>
          ))}
        </div>
      </section>

{/* CONTACT FORM */}
      <section data-reveal="" style={{ padding: isMobile ? '56px 24px' : '56px 56px', background: 'var(--paper-2)',
        borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1.2fr', gap: isMobile ? 28 : 56, alignItems: 'start' }}>
          <div>
            <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.14em',
              textTransform: 'uppercase', color: 'var(--ink-mute)',
              display: 'inline-flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
              <DecSectionMark size={14} /> Fale por escrito
            </div>
            <h2 style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 40,
              lineHeight: 1.05, fontWeight: 400, letterSpacing: '-0.02em',
              margin: '0 0 18px', color: 'var(--ink)' }}>
              Prefere enviar uma mensagem?
            </h2>
            <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--ink-soft)', margin: 0 }}>
              Preencha o formulário e nossa equipe retornará em até 2 dias úteis.
              Para assuntos urgentes, prefira o WhatsApp.
            </p>
          </div>
          <div style={{ background: 'var(--paper)', borderRadius: 14, padding: 32,
            border: '1px solid var(--line)' }}>
            <ContactForm />
          </div>
        </div>
      </section>

{/* ADDRESS + MAP */}
      <section data-reveal="" style={{ padding: isMobile ? '56px 24px' : '56px 56px' }}>
        <div style={{ borderRadius: 16, overflow: 'hidden', border: '1px solid var(--line)',
          display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1.4fr', minHeight: isMobile ? 'auto' : 340,
          background: 'var(--paper)' }}>
          <div style={{ padding: 36, background: 'var(--paper)' }}>
            <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.14em',
              textTransform: 'uppercase', color: 'var(--ink-mute)',
              display: 'inline-flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
              <DecSectionMark size={14} /> Endereço da casa
            </div>
            <div style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 32,
              lineHeight: 1.15, color: 'var(--ink)', letterSpacing: '-0.018em', margin: '0 0 18px' }}>
              Servidão Água Marinha,<br/>nº 88
            </div>
            <div style={{ fontSize: 15, lineHeight: 1.65, color: 'var(--ink-soft)' }}>
              Ingleses do Rio Vermelho<br/>
              Florianópolis · SC<br/>
              <span style={{ fontFamily: 'var(--mono)', fontSize: 13, marginTop: 4, display: 'inline-block' }}>CEP 88058-204</span>
            </div>
            <div style={{ marginTop: 22, paddingTop: 18, borderTop: '1px solid var(--line)' }}>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.12em',
                textTransform: 'uppercase', color: 'var(--ink-mute)', marginBottom: 6 }}>Visitas</div>
              <p style={{ fontSize: 13, color: 'var(--ink-soft)', margin: 0, lineHeight: 1.55 }}>
                Visitas são importantes — para você e, principalmente, para as
                crianças. Pedimos agendamento prévio por um dos canais acima.
              </p>
            </div>
          </div>
          <iframe
            src="https://maps.google.com/maps?q=Servid%C3%A3o+%C3%81gua+Marinha+88+Ingleses+do+Rio+Vermelho+Florian%C3%B3polis+SC&output=embed&z=16"
            width="100%" height="100%"
            style={{ border: 0, display: 'block', minHeight: isMobile ? 260 : 340 }}
            allowFullScreen={false}
            loading="lazy"
            referrerPolicy="no-referrer-when-downgrade"
            title="Localização da Casa Lar Luz do Caminho"
          />
        </div>
      </section>

{/* SOCIAL */}
      <section data-reveal="" style={{ padding: isMobile ? '56px 24px' : '56px 56px', background: 'var(--paper-2)',
        borderTop: '1px solid var(--line)' }}>
        <SectionHead
          kicker="Acompanhe e participe"
          title="Cinco caminhos para estar perto."
          intro="Histórias, campanhas, conquistas, bastidores — e a porta aberta para quem quer se voluntariar."
          align="center"
        />
        <div style={{ marginTop: 48, display: 'grid',
          gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : 'repeat(5, 1fr)', gap: 14 }}>
          {[
            { l: 'Instagram',    icon: 'Instagram',  h: '@casalarluzdocaminho',         u: 'https://www.instagram.com/casalarluzdocaminho/',                                  c: 'var(--rosa)' },
            { l: 'Facebook',     icon: 'Facebook',   h: '/casalarluzdocaminho',          u: 'https://www.facebook.com/casalarluzdocaminho/?locale=pt_BR',                      c: 'var(--ceu)' },
            { l: 'YouTube',      icon: 'YouTube',    h: '@casalarluzdocaminhoo',         u: 'https://www.youtube.com/@casalarluzdocaminhoo',                                   c: 'var(--ceramica)' },
            { l: 'LinkedIn',     icon: 'LinkedIn',   h: '/company/casa-lar-luz-do-caminho', u: 'https://www.linkedin.com/company/casa-lar-luz-do-caminho/?originalSubdomain=br', c: 'var(--folha)' },
            { l: 'Voluntariado', icon: 'Volunteer',  h: 'Formulário de inscrição',       u: 'https://docs.google.com/forms/d/e/1FAIpQLSckh7I45rtPGkufGlRklGRGO8ZLzQOlvXp7_FAQnWXqqLpaKQ/viewform', c: 'var(--sol)' },
          ].map((s, i) => (
            <a key={i} href={s.u} target="_blank" rel="noopener" style={{ textDecoration: 'none' }}>
              <div style={{
                background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 14,
                padding: 22, display: 'flex', flexDirection: 'column', gap: 10, minHeight: 200,
                borderTop: `4px solid ${s.c}`, height: '100%',
              }}>
                <div style={{ color: s.c }}>{BrandIcons[s.icon]}</div>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '0.14em',
                  textTransform: 'uppercase', color: 'var(--ink-mute)' }}>{s.l}</div>
                <div style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 17,
                  lineHeight: 1.2, color: 'var(--ink)', letterSpacing: '-0.012em', flex: 1,
                  wordBreak: 'break-word' }}>{s.h}</div>
                <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6,
                  fontSize: 13, fontWeight: 600, color: 'var(--ink)' }}>
                  Abrir <span style={{ display: 'inline-flex' }}>{Icons.Arrow}</span>
                </div>
              </div>
            </a>
          ))}
        </div>
      </section>

<SiteFooter />
    </PageShell>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<PageContato />);