// Eu Faço Parte — Sections part 3: Como fazemos / Como garantimos / CTA / Footer

const AbrigoEducacao = () => (
  <section className="comofazemos" id="comofazemos">
    <div className="section">
      <div className="section-head">
        <div className="head-left">
          <span className="eyebrow"><span className="num">03</span> · Como fazemos</span>
        </div>
        <div className="head-right">
          <h2 className="h-section">
            <em>Abrigo</em> e Educação.
          </h2>
        </div>
      </div>

      <div className="cf-grid">
        <div className="cf-img-1 cf-img-1--with-overlay">
          <figure className="figure">
            <img
              src="images/acolhimento.jpg"
              alt="Crianças no abrigo"
              onError={(e) => { const ph = document.createElement('div'); ph.className = 'ph cf-ph-1'; ph.dataset.label = '— Foto · abrigo, atividade'; e.currentTarget.replaceWith(ph); }}
            />
            <figcaption className="cap"><span className="marker"></span>Abrigo · atividade educacional</figcaption>
          </figure>
          <img className="cf-overlay-illustration" src="images/section-abrigo-educacao.png" alt="" aria-hidden="true" />
        </div>

        <div className="cf-text">
          <p className="lede">
            Nos comprometemos com a missão de fazer com que os jovens e crianças possuam um <strong>abrigo</strong> onde possam desenvolver seus caminhos, ampliar seus olhares sobre o mundo e conquistar a sua independência quando maiores de idade, construindo relações saudáveis e estimulando o desenvolvimento emocional e social.
          </p>

          <div className="cf-quote">
            <span className="quotemark">”</span>
            <p>
              Acreditamos que a <em>educação</em> é um poderoso agente transformador na vida dos jovens, moldando não apenas seu conhecimento, mas também cultivando um pensamento crítico que os capacita a enfrentar os desafios do mundo.
            </p>
          </div>

          <p className="body-text">
            Assim buscamos incentivar a curiosidade, a criatividade e a busca pelo conhecimento como elementos fundamentais para o desenvolvimento pessoal. Ao investir na educação desses jovens, visamos não apenas preencher lacunas educacionais, mas também cultivar suas capacidades de enxergar o mundo de maneira mais ampla e crítica, preparando-os para os desafios e promovendo um entendimento mais profundo das complexidades da vida.
          </p>

          <p className="body-text">
            Você, apoiador, é a peça fundamental desta jornada de mudança. Sua participação não se resume a uma doação; cada contribuição representa a construção de um elo valioso na corrente de transformação.
          </p>
        </div>

        <div className="cf-img-2">
          <figure className="figure">
            <img
              src="images/comofazemos-2.jpg"
              alt="Crianças no abrigo"
              onError={(e) => { const ph = document.createElement('div'); ph.className = 'ph cf-ph-2'; ph.dataset.label = '— Foto · abrigo, atividade'; e.currentTarget.replaceWith(ph); }}
            />
            <figcaption className="cap"><span className="marker"></span>Abrigo · atividade educacional</figcaption>
          </figure>
        </div>

        <div className="cf-cta">
          <button className="btn btn-ghost" onClick={() => window.openProjectsModal?.()}>Conheça nossos projetos <span className="arrow">→</span></button>
          <button className="btn btn-primary" onClick={() => window.openDonationModal?.()}>Faça uma doação <HeartIcon /></button>
        </div>
      </div>
    </div>
  </section>
);

// ---- Animated list ----
const PROT_ITEMS = ['Resgatar', 'Ressocializar', 'Impulsionar'];

const ProtList = () => {
  const [visible, setVisible] = React.useState(false);
  const ref = React.useRef(null);

  React.useEffect(() => {
    const obs = new IntersectionObserver(
      ([e]) => { if (e.isIntersecting) { setVisible(true); obs.disconnect(); } },
      { threshold: 0.4 }
    );
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);

  return (
    <ul className="prot-list" ref={ref}>
      {PROT_ITEMS.map((item, i) => (
        <li
          key={item}
          style={{
            opacity:   visible ? 1 : 0,
            transform: visible ? 'translateX(0)' : 'translateX(-18px)',
            transition: `opacity 0.45s ease ${i * 120}ms, transform 0.45s ease ${i * 120}ms`,
          }}
        >
          <span className="prot-bullet">→</span> {item}
        </li>
      ))}
    </ul>
  );
};

// ---- Proteção e Ressocialização ----
const Protecao = () => (
  <section className="protecao" id="protecao">
    <div className="section">
      <div className="prot-grid">
        <div className="prot-text">
          <span className="eyebrow"><span className="num">03.2</span> · Como fazemos</span>
          <h2 className="h-section">
            <em>Proteção</em> e<br/>Ressocialização.
          </h2>
          <p className="lede">
            O <strong>Eu Faço Parte</strong> dedica-se a resgatar, ressocializar e impulsionar adolescentes e jovens que enfrentam situações de vulnerabilidade e risco social.
          </p>
          <p className="body-text">
            Através do abrigo, da educação e profissionalização, possibilitamos a transformação de suas vidas e a realização de seus sonhos. Cuidando e oferecendo as ferramentas necessárias para que esses jovens possam se reintegrar à sociedade, sendo a <em>educação o veículo do desenvolvimento do ser humano</em> e a profissionalização o alicerce para uma vida sustentável.
          </p>

          <ProtList />
        </div>

        <div className="prot-figure">
          <figure className="figure">
            <img
              src="images/comofazemos-protecao.jpg"
              alt="Jovem em formação profissional"
              onError={(e) => { const ph = document.createElement('div'); ph.className = 'ph prot-ph'; ph.dataset.label = '— Foto · profissionalização'; e.currentTarget.replaceWith(ph); }}
            />
            <figcaption className="cap"><span className="marker"></span>Profissionalização · aprendizado em prática</figcaption>
          </figure>
        </div>
      </div>
    </div>
  </section>
);

// ---- Como garantimos ----
const Conexao = () => (
  <section className="conexao" id="comogarantimos">
    <div className="section">
      <div className="section-head">
        <div className="head-left">
          <span className="eyebrow"><span className="num">04</span> · Como garantimos</span>
        </div>
        <div className="head-right">
          <h2 className="h-section">
            <em>Conexão</em> e União.
          </h2>
        </div>
      </div>

      <div className="conex-grid">
        <div className="conex-figure-a">
          <figure className="figure">
            <img
              src="images/surf-sagi.jpg"
              alt="Equipe e doadores juntos"
              onError={(e) => { const ph = document.createElement('div'); ph.className = 'ph conex-ph'; ph.dataset.label = '— Foto · encontro de doadores'; e.currentTarget.replaceWith(ph); }}
            />
            <figcaption className="cap"><span className="marker"></span>Doadores · Sala de Memórias e Roupas</figcaption>
          </figure>
        </div>

        <div className="conex-text conex-text--with-overlay">
          <img className="conex-overlay-illustration" src="images/section-conexao-uniao.png" alt="" aria-hidden="true" />
          <p className="lede">
            Na nossa abordagem, priorizamos manter uma <strong>conexão</strong> entre os doadores, os projetos e jovens apoiados.
          </p>
          <p className="body-text">
            Através de newsletters informativas, e-mails, cartas e envolventes mini-documentários, buscamos compartilhar regularmente as mudanças e impactos positivos que cada doação está causando. Dessa forma, as vozes daqueles que estão sendo apoiados ganham destaque, tornando-se audíveis e inspiradoras.
          </p>
          <p className="body-text">
            Estamos comprometidos em criar uma experiência <em>participativa e transparente</em> para os doadores, permitindo que eles testemunhem diretamente a diferença que estão fazendo na vida desses jovens.
          </p>
        </div>

        <div className="conex-figure-b">
        </div>

        <div className="conex-news">
          <div className="news-card">
            <span className="eyebrow"><span className="dot"></span> Newsletter</span>
            <h3 className="h-card">
              Acompanhe de perto<br/>
              quem <em>também faz parte.</em>
            </h3>
            <p className="body-text">
              Deseja acompanhar de perto nosso trabalho e saber mais sobre nossas realizações e sobre os sonhos de quem também faz parte? Entre em nossa newsletter e receba todas as notícias.
            </p>
            <NewsletterForm />
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ---- Newsletter form ----
const NewsletterForm = () => {
  const [email, setEmail] = React.useState('');
  const [status, setStatus] = React.useState('idle');
  const [showModal, setShowModal] = React.useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setStatus('sending');
    try {
      const res = await fetch('https://formsubmit.co/ajax/lucas.nadler@eufacoparte.org', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
        body: JSON.stringify({
          email,
          _subject: 'Nova inscrição na Newsletter, Eu Faço Parte',
          message: `Nova inscrição na newsletter: ${email}`,
          _captcha: 'false',
        }),
      });
      if (res.ok) {
        setStatus('idle');
        setEmail('');
        setShowModal(true);
      } else {
        setStatus('error');
      }
    } catch {
      setStatus('error');
    }
  };

  return (
    <>
      <form className="news-form" onSubmit={handleSubmit}>
        <input
          type="email"
          placeholder="seu@email.com"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          required
        />
        <button type="submit" className="btn btn-primary" disabled={status === 'sending'}>
          {status === 'sending' ? 'Enviando…' : 'Participar'} <span className="arrow">→</span>
        </button>
      </form>
      {status === 'error' && (
        <p style={{ marginTop: '12px', fontFamily: 'var(--mono)', fontSize: '12px', color: 'oklch(0.55 0.18 25)' }}>
          Algo deu errado. Tente novamente ou escreva para lucas.nadler@eufacoparte.org.
        </p>
      )}

      {showModal && (
        <div className="modal-overlay" onClick={() => setShowModal(false)}
          style={{ display: 'flex', zIndex: 1000 }}>
          <div className="modal-box" onClick={(e) => e.stopPropagation()}
            style={{ maxWidth: '480px', textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '20px' }}>
            <span className="eyebrow"><span className="num">✻</span> Inscrição confirmada</span>
            <h2 className="h-section" style={{ margin: 0 }}>Você agora <em>faz parte!</em></h2>
            <p className="body-text" style={{ maxWidth: '38ch' }}>
              Nossas newsletters são <strong>quinzenais</strong>, a cada duas semanas você receberá as novidades das nossas ações e o impacto que estamos criando juntos.
            </p>
            <button className="btn btn-primary" onClick={() => setShowModal(false)}>
              Fechar ×
            </button>
          </div>
        </div>
      )}
    </>
  );
};

// ---- Manifesto / CTA strip ----
const Manifesto = () => (
  <section className="manifesto" id="doar">
    <div className="section">
      <div className="manifesto-inner">
        <span className="eyebrow"><span className="num">✻</span> Manifesto</span>
        <h2 className="h-display manifesto-title">
          “Eu sou<br/>
          <em>porque nós somos.</em>”
        </h2>
        <p className="lede manifesto-lede">
          Cada doação representa um elo na corrente de transformação. Faça parte —
          e construa um legado benevolente que ecoará na vida de quem também faz parte.
        </p>
        <div className="manifesto-cta">
          <button className="btn btn-primary btn-lg" onClick={() => window.openDonationModal?.()}>Faça uma doação <HeartIcon /></button>
          <a href="#contato" className="btn btn-ghost btn-lg">Quero ser parceiro <span className="arrow">→</span></a>
        </div>
      </div>
    </div>
  </section>
);

// ---- Footer ----
const Footer = () => {
  const [encomenda, setEncomenda] = React.useState(null);
  const [nome,      setNome]      = React.useState('');
  const [email,     setEmail]     = React.useState('');
  const [mensagem,  setMensagem]  = React.useState('');
  const [status,    setStatus]    = React.useState('idle');
  const [showOk,    setShowOk]    = React.useState(false);

  React.useEffect(() => {
    window.setLojaEncomenda = (name) => setEncomenda(name);
    return () => { delete window.setLojaEncomenda; };
  }, []);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setStatus('sending');
    try {
      const res = await fetch('https://formsubmit.co/ajax/lucas.nadler@eufacoparte.org', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
        body: JSON.stringify({
          nome, email,
          _subject: encomenda ? `Encomenda: ${encomenda}, Eu Faço Parte` : 'Contato, Eu Faço Parte',
          mensagem: encomenda ? `Produto de interesse: ${encomenda}\n\n${mensagem}` : mensagem,
          _captcha: 'false',
        }),
      });
      if (res.ok) {
        setNome(''); setEmail(''); setMensagem(''); setEncomenda(null);
        setStatus('idle'); setShowOk(true);
      } else { setStatus('error'); }
    } catch { setStatus('error'); }
  };

  return (
    <footer className="footer" id="contato">
      <div className="section footer-inner">

        {/* ---- Contact form ---- */}
        <div className="footer-form-area">
          <div className="footer-form-left">
            <span className="eyebrow"><span className="dot"></span> Contato</span>
            <h2 className="h-section" style={{ marginTop: '12px' }}>Fale <em>conosco.</em></h2>
            <p className="body-text" style={{ marginTop: '16px', maxWidth: '34ch' }}>
              Dúvidas, parcerias ou encomendas da nossa loja, estamos aqui.
            </p>
          </div>

          <div className="footer-form-right">
            {showOk ? (
              <div className="footer-form-ok">
                <span className="eyebrow"><span className="num">✻</span> Mensagem enviada</span>
                <p className="body-text" style={{ marginTop: '10px' }}>Obrigado! Entraremos em contato em breve.</p>
                <button className="btn btn-ghost" style={{ marginTop: '20px' }} onClick={() => setShowOk(false)}>
                  Enviar outra mensagem
                </button>
              </div>
            ) : (
              <form className="footer-contact-form" onSubmit={handleSubmit}>
                <div className="contato-form-cols">
                  <div className="form-field">
                    <label className="form-label">Nome</label>
                    <input className="form-input" type="text" placeholder="Seu nome" value={nome} onChange={e => setNome(e.target.value)} required />
                  </div>
                  <div className="form-field">
                    <label className="form-label">E-mail</label>
                    <input className="form-input" type="email" placeholder="seu@email.com" value={email} onChange={e => setEmail(e.target.value)} required />
                  </div>
                </div>

                {encomenda && (
                  <div className="form-field">
                    <label className="form-label">Produto de interesse</label>
                    <div className="form-encomenda">
                      <span className="form-encomenda-name">{encomenda}</span>
                      <button type="button" className="form-encomenda-clear" onClick={() => setEncomenda(null)}>×</button>
                    </div>
                  </div>
                )}

                <div className="form-field">
                  <label className="form-label">Mensagem</label>
                  <textarea className="form-input form-textarea" placeholder="Como podemos ajudar?" value={mensagem} onChange={e => setMensagem(e.target.value)} />
                </div>

                {status === 'error' && (
                  <p style={{ fontFamily: 'var(--mono)', fontSize: '12px', color: 'oklch(0.55 0.18 25)' }}>
                    Algo deu errado. Escreva para contato@eufacoparte.org.
                  </p>
                )}
                <button type="submit" className="btn btn-primary" disabled={status === 'sending'}>
                  {status === 'sending' ? 'Enviando…' : 'Enviar mensagem'} <span className="arrow">→</span>
                </button>
              </form>
            )}
          </div>
        </div>

        <div className="footer-top">
          <div className="footer-brand">
            <img src="assets/logo.png" alt="Eu Faço Parte" />
            <p className="muted footer-tag">
              Associação Privada sem fins lucrativos<br/>
              (ONG/NGO) registrada e fiscalizada<br/>
              no <strong>Brasil</strong> 🇧🇷 e <strong>Suíça</strong> 🇨🇭.
            </p>
          </div>

          <div className="footer-col">
            <span className="eyebrow">Navegação</span>
            <a href="#top">Início</a>
            <a href="#nossa-historia">Nossa História</a>
            <a href="#oquefazemos">O Que Fazemos</a>
            <a href="#comofazemos">Como Fazemos</a>
            <a href="#comogarantimos">Como Garantimos</a>
          </div>

          <div className="footer-col">
            <span className="eyebrow">Projetos</span>
            <a href="#">Sagi Surf</a>
            <a href="#">Sagi Vidas</a>
            <a href="#">Abrigo ANCA</a>
            <a href="#">Artesanato & Brinquedos</a>
            <a href="#">Roupas & Memórias</a>
            <a href="#">Sonhos em Campo</a>
          </div>

          <div className="footer-col">
            <span className="eyebrow">Contato</span>
            <a href="https://www.instagram.com/eufacoparte.ong/">@eufacoparte.ong</a>
            <a href="mailto:contato@eufacoparte.org">contato@eufacoparte.org</a>
            <span className="muted">CNPJ 58.009.272/0001-32</span>
            <span className="muted">Brasil · Suíça</span>
          </div>
        </div>

        <div className="footer-bottom">
          <span className="muted">© 2026 Eu Faço Parte, Todos os direitos reservados.</span>
          <span className="muted">Feito com ❤️ e cuidado.</span>
        </div>
      </div>
    </footer>
  );
};

window.AbrigoEducacao = AbrigoEducacao;
window.Protecao = Protecao;
window.Conexao = Conexao;
window.Manifesto = Manifesto;
window.Footer = Footer;