// pages/contato.jsx — Página "Contato"

const BrandIcons = {
  Instagram: (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor">
      <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
    </svg>
  ),
  Facebook: (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor">
      <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
    </svg>
  ),
  YouTube: (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor">
      <path d="M23.495 6.205a3.007 3.007 0 0 0-2.088-2.088c-1.87-.501-9.396-.501-9.396-.501s-7.507-.01-9.396.501A3.007 3.007 0 0 0 .527 6.205a31.247 31.247 0 0 0-.522 5.805 31.247 31.247 0 0 0 .522 5.783 3.007 3.007 0 0 0 2.088 2.088c1.868.502 9.396.502 9.396.502s7.506 0 9.396-.502a3.007 3.007 0 0 0 2.088-2.088 31.247 31.247 0 0 0 .5-5.783 31.247 31.247 0 0 0-.5-5.805zM9.609 15.601V8.408l6.264 3.602z"/>
    </svg>
  ),
  LinkedIn: (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor">
      <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
    </svg>
  ),
  Volunteer: (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2"/>
      <rect x="9" y="3" width="6" height="4" rx="2"/>
      <line x1="9" y1="12" x2="15" y2="12"/>
      <line x1="9" y1="16" x2="12" y2="16"/>
    </svg>
  ),
};

function ContactForm() {
  var [form, setForm] = React.useState({ name: '', email: '', subject: 'Doação', message: '', _gotcha: '' });
  var [status, setStatus] = React.useState('idle');
  var isMobile = useWindowWidth() < 768;

  function handleChange(e) {
    var k = e.target.name, v = e.target.value;
    setForm(function(p) { return Object.assign({}, p, { [k]: v }); });
  }

  function handleSubmit(e) {
    e.preventDefault();
    setStatus('sending');
    fetch('api/contact.php', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(form),
    })
      .then(function(r) { return r.json(); })
      .then(function(d) { setStatus(d.ok ? 'success' : 'error'); })
      .catch(function() { setStatus('error'); });
  }

  var fieldStyle = {
    fontFamily: 'var(--sans)', fontSize: 14, padding: '11px 14px',
    border: '1.5px solid var(--line-strong)', borderRadius: 6,
    background: 'var(--paper)', color: 'var(--ink)', outline: 'none',
    width: '100%', boxSizing: 'border-box', transition: 'border-color .15s',
  };

  if (status === 'success') {
    return (
      <div style={{ background: 'var(--folha-soft)', border: '1px solid var(--folha)',
        borderRadius: 14, padding: '40px 36px', textAlign: 'center' }}>
        <div style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 28,
          color: 'var(--ink)', marginBottom: 10 }}>Mensagem enviada!</div>
        <p style={{ color: 'var(--ink-soft)', margin: 0 }}>
          Recebemos sua mensagem e retornaremos em breve.
        </p>
      </div>
    );
  }

  return (
    <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 16, position: 'relative' }}>
      {/* Honeypot — captura bots que preenchem campos ocultos */}
      <div style={{ position: 'absolute', left: '-9999px', top: 'auto', width: 1, height: 1, overflow: 'hidden' }} aria-hidden="true">
        <input type="text" name="_gotcha" tabIndex={-1} autoComplete="off"
          value={form._gotcha} onChange={handleChange} />
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 16 }}>
        {[
          { name: 'name',  label: 'Nome',   type: 'text',  placeholder: 'Seu nome' },
          { name: 'email', label: 'E-mail', type: 'email', placeholder: 'seu@email.com' },
        ].map(function(f) {
          return (
            <div key={f.name} style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              <label style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.08em',
                textTransform: 'uppercase', color: 'var(--ink-mute)' }}>{f.label}</label>
              <input
                name={f.name} type={f.type} required
                value={form[f.name]} onChange={handleChange}
                placeholder={f.placeholder}
                maxLength={f.name === 'name' ? 100 : 254}
                style={fieldStyle}
                onFocus={function(e) { e.target.style.borderColor = 'var(--ink)'; }}
                onBlur={function(e)  { e.target.style.borderColor = 'var(--line-strong)'; }}
              />
            </div>
          );
        })}
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
        <label style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.08em',
          textTransform: 'uppercase', color: 'var(--ink-mute)' }}>Assunto</label>
        <select name="subject" value={form.subject} onChange={handleChange}
          style={Object.assign({}, fieldStyle, { appearance: 'none', cursor: 'pointer' })}>
          {['Doação','Voluntariado','Parceria','Outros'].map(function(s) {
            return <option key={s} value={s}>{s}</option>;
          })}
        </select>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
        <label style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.08em',
          textTransform: 'uppercase', color: 'var(--ink-mute)' }}>Mensagem</label>
        <textarea
          name="message" required rows={5}
          value={form.message} onChange={handleChange}
          placeholder="Escreva sua mensagem..."
          maxLength={2000}
          style={Object.assign({}, fieldStyle, { resize: 'vertical', lineHeight: 1.55 })}
          onFocus={function(e) { e.target.style.borderColor = 'var(--ink)'; }}
          onBlur={function(e)  { e.target.style.borderColor = 'var(--line-strong)'; }}
        />
      </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 />);
