// Componentes da metade inferior

function Books({ lang }) {
  const t = lang === 'pt' ? {
    eyebrow: 'Da fundadora · Livros',
    title: 'Palavras que',
    titleEm: 'fortalecem',
    titleEnd: '.',
    lead: 'Além de fundar e liderar a rede, Juçara escreve. Seus livros traduzem em página o mesmo trabalho de escuta e empoderamento feito nos encontros, disponíveis nas três Amazons onde a rede atua.',
    main: 'Livro em destaque',
    syn: 'Sinopse',
    synText: 'Um convite à reconstrução interior. Em "Fortaleça a sua Mente", Juçara reúne reflexões, exercícios e relatos colhidos em mais de uma década de trabalho com mulheres em três países, para quem quer reorganizar o pensamento, recuperar a clareza e voltar a agir com propósito.',
    pages: '192 páginas · Português',
    where: 'Compre em',
    cta: 'Adquirir na Amazon'
  } : {
    eyebrow: 'From the founder · Books',
    title: 'Words that',
    titleEm: 'strengthen',
    titleEnd: '.',
    lead: 'Beyond founding and leading the network, Juçara is also an author. Her books bring to the page the same spirit of listening and empowerment that inspires the network\'s gatherings. They are available on Amazon in the United States, Brazil, and Portugal.',
    main: 'Featured title',
    syn: 'Synopsis',
    synText: 'An invitation to inner renewal. In "Fortaleça a sua Mente" (Strengthen Your Mind), Juçara gathers reflections, exercises and stories drawn from over a decade of work with women across three countries, for those seeking to reorganize their thoughts, regain clarity and act with purpose again.',
    pages: '192 pages · Portuguese',
    where: 'Buy on',
    cta: 'Get on Amazon'
  };
  const stores = [
  { code: 'us', label: 'Amazon US', flag: 'us', href: 'https://www.amazon.com/dp/B0FNDKHD9Y' },
  { code: 'pt', label: 'Amazon PT', flag: 'pt', href: 'https://www.amazon.es/dp/B0FNDKHD9Y' },
  { code: 'br', label: 'Amazon BR', flag: 'br', href: 'https://www.amazon.com.br/dp/B0FNDKHD9Y' }];

  return (
    <section className="container section books-section" id="livros" data-screen-label="Livros">
      <div className="books-inner">
      <div className="section-head">
        <div>
          <div className="eyebrow">{t.eyebrow}</div>
          <h2 className="section-title serif">{t.title} <em>{t.titleEm}</em>{t.titleEnd}</h2>
        </div>
        <p className="section-lead">{t.lead}</p>
      </div>

      <div className="book-feature">
        <div className="book-cover-wrap">
          <div className="book-cover">
            <img src={window.__r('ebook1', 'ebook-1.jpg')} alt="Fortaleça a sua Mente" onError={(e) => {e.target.style.display = 'none';e.target.parentElement.classList.add('--no-image');}} />
            <div className="book-cover-fallback">
              <div className="mono">EBOOK · 2024</div>
              <div className="serif book-cover-title">Fortaleça a sua Mente</div>
              <div className="book-cover-author">Juçara Johnson</div>
            </div>
          </div>
          <div className="book-cover-meta mono">
            <span>FOTO · CAPA · EBOOK</span>
          </div>
        </div>
        <div className="book-info">
          <div className="mono book-tag">{t.main}</div>
          <h3 className="serif book-title">Fortaleça a sua <em>Mente</em></h3>
          <div className="book-author">{lang === 'pt' ? 'por' : 'by'} Juçara Johnson · {t.pages}</div>

          <div className="book-syn-label mono">{t.syn}</div>
          <p className="book-syn">{t.synText}</p>

          <div className="book-stores-label mono">{t.where}</div>
          <div className="book-stores">
            {stores.map((s) =>
              <a key={s.code} href={s.href} target="_blank" rel="noopener noreferrer" className="book-store">
                <window.SC_UI.MiniFlag country={s.flag} />
                <span className="book-store-label">{s.label}</span>
                <span className="arrow">→</span>
              </a>
              )}
          </div>

          <a href={stores[0].href} target="_blank" rel="noopener noreferrer" className="btn btn-primary book-cta">
            {t.cta} <span className="arrow">→</span>
          </a>
        </div>
      </div>
      </div>
    </section>);

}

function Founder({ lang }) {
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => {if (e.key === 'Escape') setOpen(false);};
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {document.removeEventListener('keydown', onKey);document.body.style.overflow = '';};
  }, [open]);

  const t = lang === 'pt' ? {
    eyebrow: 'Fundadora & CEO',
    quote: 'Quando uma mulher reconhece o seu valor, ela deixa de assistir a sua história se desenrolar e passa a escrevê-la ela mesma.',
    name: 'Juçara Johnson',
    role: 'Fundadora & CEO · Support Center Café com Mulheres & RGE – Empreendedorismo e Tecnologia',
    bio: 'Natural do Espírito Santo, Brasil, Juçara Johnson é líder, fundadora e presidente do Support Center Café com Mulheres Corp — Empresas sem fins lucrativos e da RGE – Empreendedorismo e Tecnologia, ambas com sede na Flórida, EUA. É escritora reconhecida por sua atuação inspiradora e pelo compromisso com o desenvolvimento humano, causas sociais, empreendedorismo e liderança.',
    cta: 'Ler texto completo',
    modalEyebrow: 'Sobre a fundadora · 2026',
    close: 'Fechar',
    modalRole: 'Fundadora & CEO · Support Center Café com Mulheres & RGE – Empreendedorismo e Tecnologia',
    signatureLabel: 'Citação de assinatura',
    signature: 'Quando uma mulher reconhece o seu valor, ela deixa de assistir a sua história se desenrolar e passa a escrevê-la ela mesma. — Juçara Johnson.',
    interview: [
      'Natural do Espírito Santo, Brasil, Juçara Johnson é líder, fundadora e presidente do Support Center Café com Mulheres Corp — Empresas sem fins lucrativos e da RGE – Empreendedorismo e Tecnologia, ambas com sede na Flórida, EUA. É escritora reconhecida por sua atuação inspiradora e pelo compromisso com o desenvolvimento humano, causas sociais, empreendedorismo e liderança.',
      'Esposa, mãe de Cauã Fernandes e tia-mãe de Charlison Fernandes, carrega em sua trajetória valores profundamente enraizados na fé, na resiliência e no propósito. Em 2013, imigrou para os Estados Unidos, onde transformou desafios em alicerces de uma jornada marcada por coragem, visão e impacto.',
      'Como fundadora e líder, dedica-se à construção de conexões, ao fortalecimento de pessoas e à criação de iniciativas que promovem crescimento, autonomia, inovação e prosperidade com significado. Por meio de suas organizações, trabalha para fortalecer empreendedores, criar oportunidades e incentivar o desenvolvimento pessoal e profissional em comunidades e além-fronteiras.',
      'Sua escrita nasce das vivências, da sensibilidade e do desejo genuíno de inspirar reflexão, consciência e transformação.',
      'Com o coração voltado para as causas sociais, Juçara acredita no poder do empreendedorismo como ferramenta de dignidade, liberdade e transformação de vidas. Sua missão é inspirar, capacitar e abrir portas para que mais pessoas reconheçam seu valor, ampliem suas possibilidades e construam legados duradouros.',
      'Seu maior sonho é ser útil e impactar positivamente a vida do maior número possível de mulheres ao redor do mundo, ajudando-as a deixar de ser espectadoras de suas próprias histórias e tornarem-se protagonistas de suas jornadas. Acredita que toda mulher possui um potencial, talentos e um propósito únicos, e dedica sua vida a incentivá-las a descobrir sua força, desenvolver suas habilidades de liderança e construir um futuro alinhado aos seus valores, visão e chamado.',
      'Hoje, seu trabalho segue conectando pessoas, ideias e oportunidades, deixando um legado de serviço, empoderamento e transformação para as gerações futuras.',
    ],
  } : {
    eyebrow: 'Founder & CEO',
    quote: 'When a woman recognizes her worth, she stops watching her story unfold and starts writing it herself.',
    name: 'Juçara Johnson',
    role: 'Founder & CEO · Support Center Café com Mulheres & RGE – Entrepreneurship & Technology',
    bio: 'Born in Espírito Santo, Brazil, Juçara Johnson is a leader, founder, and president of Support Center Café com Mulheres Corp — Nonprofit Enterprises and RGE – Entrepreneurship & Technology, both headquartered in Florida, USA. She is a writer recognized for her inspiring work and her commitment to human development, social causes, entrepreneurship, and leadership.',
    cta: 'Read her story',
    modalEyebrow: 'About the founder · 2026',
    close: 'Close',
    modalRole: 'Founder & CEO · Support Center Café com Mulheres & RGE – Entrepreneurship & Technology',
    signatureLabel: 'Signature Quote',
    signature: 'When a woman recognizes her worth, she stops watching her story unfold and starts writing it herself. — Juçara Johnson.',
    interview: [
      'Born in Espírito Santo, Brazil, Juçara Johnson is a leader, founder, and president of Support Center Café com Mulheres Corp — Nonprofit Enterprises and RGE – Entrepreneurship & Technology, both headquartered in Florida, USA. She is a writer recognized for her inspiring work and her commitment to human development, social causes, entrepreneurship, and leadership.',
      'Wife, mother of Cauã Fernandes, and aunt-mother of Charlison Fernandes, she carries throughout her journey values deeply rooted in faith, resilience, and purpose. In 2013, she immigrated to the United States, where she transformed challenges into the foundation of a journey marked by courage, vision, and impact.',
      'As a founder and leader, she is dedicated to building connections, empowering people, and creating initiatives that foster growth, autonomy, innovation, and meaningful prosperity. Through her organizations, she works to strengthen entrepreneurs, create opportunities, and encourage personal and professional development across communities and borders.',
      'Her writing is born from lived experiences, sensitivity, and a genuine desire to inspire reflection, awareness, and transformation.',
      'With her heart devoted to social causes, Juçara believes in the power of entrepreneurship as a tool for dignity, freedom, and transforming lives. Her mission is to inspire, empower, and open doors so that more people can recognize their worth, expand their possibilities, and build lasting legacies.',
      'Her greatest dream is to be useful and positively impact the lives of as many women as possible around the world, helping them move from being spectators of their own stories to becoming the protagonists of their own journeys. She believes that every woman possesses unique potential, talents, and a purpose, and she dedicates her life to encouraging women to discover their strength, develop their leadership abilities, and build a future aligned with their values, vision, and calling.',
      'Today, her work continues to connect people, ideas, and opportunities, leaving a legacy of service, empowerment, and transformation for future generations.',
    ],
  };
  return (
    <section className="container section" id="sobre" data-screen-label="Fundadora">
      <div className="founder">
        <div className="founder-img" style={{ height: "485px" }}>
          <span className="founder-img-tag">J. JOHNSON · 2025</span>
        </div>
        <div>
          <div className="eyebrow">{t.eyebrow}</div>
          <p className="founder-quote">{t.quote}</p>
          <div className="founder-meta">
            <div className="founder-name serif">{t.name}</div>
            <div className="founder-role">{t.role}</div>
          </div>
          <p className="founder-bio">{t.bio}</p>
          <button type="button" className="btn btn-ghost" onClick={() => setOpen(true)}>{t.cta} <span className="arrow">→</span></button>
        </div>
      </div>

      {open &&
      <div className="interview-overlay" onClick={() => setOpen(false)} role="dialog" aria-modal="true" aria-label={t.name}>
        <article className="interview-modal" onClick={(e) => e.stopPropagation()}>
          <button type="button" className="interview-close" onClick={() => setOpen(false)} aria-label={t.close}>×</button>
          <header className="interview-head">
            <div className="interview-eyebrow mono">{t.modalEyebrow}</div>
            <h2 className="interview-title serif">{t.name}</h2>
            <div className="interview-role">{t.modalRole}</div>
          </header>
          <div className="interview-body">
            {t.interview.map((p, i) => <p key={i} className="interview-p">{p}</p>)}
            {t.signature ?
            <blockquote className="interview-signature">
              <div className="interview-signature-label mono">{t.signatureLabel}</div>
              <p className="interview-signature-quote serif">{t.signature}</p>
            </blockquote> : null}
          </div>
        </article>
      </div>}
    </section>);

}

function DonateStrip({ lang, onDonate }) {
  const [pick, setPick] = React.useState(50);
  const opts = [50, 100, 150];

  const t = lang === 'pt' ? {
    eyebrow: 'Como ajudar',
    title: 'Sua doação ',
    titleEm: 'transforma',
    titleEnd: ' realidades.',
    desc: '100% das doações são aplicadas nos projetos. Mensal, anual ou única, escolha como contribuir.',
    once: 'Doação única', month: 'Mensal',
    cta: 'Doe via Zelle', other: 'Outro valor'
  } : {
    eyebrow: 'How to help',
    title: 'Your donation ',
    titleEm: 'transforms',
    titleEnd: ' lives.',
    desc: '100% of your donation goes directly to our programs. Choose an amount and donate securely via Zelle.',
    once: 'One-time', month: 'Monthly',
    cta: 'Donate via Zelle', other: 'Other amount'
  };
  return (
    <section className="container section" id="doar" data-screen-label="Doação">
      <div className="donate-strip">
        <div>
          <div className="eyebrow" style={{ color: 'color-mix(in oklab, var(--paper) 65%, transparent)' }}>
            <span style={{ background: 'color-mix(in oklab, var(--paper) 65%, transparent)' }} /> {t.eyebrow}
          </div>
          <h2 className="serif">{t.title}<em>{t.titleEm}</em>{t.titleEnd}</h2>
          <p>{t.desc}</p>
        </div>
        <div>
          <div className="donate-options">
            {opts.map((v) =>
            <button
              key={v}
              className={'donate-opt ' + (pick === v ? 'active' : '')}
              onClick={() => setPick(v)}>
                <div className="donate-opt-amount">${v}</div>
              </button>
            )}
          </div>
          <div className="donate-actions">
            <button className="btn btn-primary" onClick={() => onDonate(pick)}>{t.cta} <span className="arrow">→</span></button>
            <button className="btn btn-ghost" onClick={() => onDonate(0)}>{t.other}</button>
          </div>
        </div>
      </div>
    </section>);

}

function teamRole(role, lang) {
  if (role && typeof role === 'object') return role[lang] || role.pt || role.en;
  return role;
}

function teamLabel(obj, lang) {
  if (!obj || typeof obj !== 'object') return '';
  return obj[lang] || obj.pt || obj.en || '';
}

function teamBio(bio, lang) {
  if (!bio || typeof bio !== 'object') return '';
  return bio[lang] || bio.pt || bio.en || '';
}

function teamDisplayName(p, lang) {
  const h = teamLabel(p.honorific, lang);
  return h ? h + ' ' + p.name : p.name;
}

function TeamMemberCard({ p, lang }) {
  return (
    <div className="team-card" data-team-id={p.id}>
      <div className="team-photo">
        {p.photo && <img src={window.__rsrc && window.__rsrc(p.photo) || p.photo} alt={p.name} className="team-photo-img" style={{ margin: '0px', objectFit: 'cover', ...(p.objectPos ? { objectPosition: p.objectPos } : {}) }} />}
      </div>
      <div className="team-card-meta">
        <div className="team-name">{teamDisplayName(p, lang)}</div>
        <div className="team-role">{teamRole(p.role, lang)}</div>
        {p.loc ?
        <div className="team-where">
          <window.SC_UI.MiniFlag country={p.country} />
          <span>{p.loc}</span>
        </div> : null}
      </div>
    </div>
  );
}

function Team({ lang }) {
  const { TEAM_SECTIONS, TEAM_FEATURED, TEAM_SPOTLIGHT } = window.SC_DATA;
  const sections = (TEAM_SECTIONS || []).filter((s) => s.id !== 'board');
  const featured = TEAM_FEATURED || [];
  const spotlight = TEAM_SPOTLIGHT || {};
  const t = lang === 'pt' ?
  { eyebrow: 'Nossa estrutura', title: 'Quem está', titleEm: 'fazendo acontecer', lead: 'Corpo jurídico, arrecadação de fundos e equipes voluntárias e de coordenação em três países.', boardSoon: 'Em breve', highlight: 'Destaque do mês', why: 'Por que está em destaque', portraitTag: 'RETRATO · DESTAQUE' } :
  { eyebrow: 'Our structure', title: 'Who makes', titleEm: 'this possible', lead: 'Our legal, fundraising, volunteer, and program coordination teams working across three countries.', boardSoon: 'Coming soon', highlight: 'Spotlight of the month', why: 'Why they stand out', portraitTag: 'PORTRAIT · SPOTLIGHT' };

  return (
    <section className="container section" id="equipe" data-screen-label="Equipe">
      <div className="section-head">
        <div>
          <div className="eyebrow">{t.eyebrow}</div>
          <h2 className="section-title serif">{t.title} <em>{t.titleEm}</em></h2>
        </div>
        <p className="section-lead">{t.lead}</p>
      </div>

      {featured.length > 0 ?
      <div className="team-spotlight team-spotlight-trio">
        <div className="team-spotlight-header">
          <div className="team-spotlight-eyebrow mono">
            <span className="team-spotlight-star">★</span>
            <span>{t.highlight}</span>
          </div>
          {teamLabel(spotlight.month, lang) ?
          <span className="team-spotlight-month mono">{teamLabel(spotlight.month, lang)}</span> : null}
        </div>

        <div className="team-spotlight-grid">
          {featured.map((p) =>
          <article className="team-spotlight-card" key={p.id} data-team-id={p.id}>
              <div className="team-spotlight-photo">
                <span className="team-spotlight-tag mono">{t.portraitTag}</span>
                {p.photo && <img src={window.__rsrc && window.__rsrc(p.photo) || p.photo} alt={p.name} style={p.objectPos ? { objectPosition: p.objectPos } : undefined} />}
              </div>
              <div className="team-spotlight-meta">
                <h3 className="team-spotlight-name serif">{p.name}</h3>
                <div className="team-spotlight-where">
                  <window.SC_UI.MiniFlag country={p.country} />
                  <span>{p.loc}</span>
                </div>
                <p className="team-spotlight-role">{teamRole(p.role, lang)}</p>
              </div>
            </article>
          )}
        </div>

        {teamLabel(spotlight.quote, lang) ?
        <div className="team-spotlight-footer">
          <div className="team-spotlight-footer-text">
            <div className="team-spotlight-why mono">{t.why}</div>
            <p className="team-spotlight-quote">{teamLabel(spotlight.quote, lang)}</p>
          </div>
        </div> : null}
      </div> : null}

      {sections.map((section) =>
      <div className="team-block" key={section.id} data-team-section={section.id}>
          <div className="team-block-head">
            <h3 className="team-block-title serif">{teamLabel(section.title, lang)}</h3>
            {section.subtitle ?
          <p className="team-block-sub mono">{teamLabel(section.subtitle, lang)}</p> : null}
          </div>

          {section.layout === 'bio' ?
        <div className="team-bio-list">
              {section.members.map((p) =>
          <article className="team-bio-card" key={p.id} data-team-id={p.id}>
                  <div className="team-bio-photo team-photo">
                    {p.photo && <img src={window.__rsrc && window.__rsrc(p.photo) || p.photo} alt={p.name} className="team-photo-img" style={p.objectPos ? { objectPosition: p.objectPos } : undefined} />}
                  </div>
                  <div className="team-bio-body">
                    <h4 className="team-bio-name serif">{teamDisplayName(p, lang)}</h4>
                    <div className="team-role">{teamRole(p.role, lang)}</div>
                    {p.loc ?
              <div className="team-where">
                      <window.SC_UI.MiniFlag country={p.country} />
                      <span>{p.loc}</span>
                    </div> : null}
                    <p className="team-bio-text">{teamBio(p.bio, lang)}</p>
                  </div>
                </article>
          )}
            </div> : null}

          {section.layout === 'placeholder' ?
        <div className="team-board-grid">
              {section.members.map((p, i) =>
          <div className="team-board-slot" key={p.id} data-team-id={p.id}>
                  <div className="team-board-photo" aria-hidden="true">
                    <span className="team-board-num mono">{String(i + 1).padStart(2, '0')}</span>
                  </div>
                  <div className="team-board-name">{t.boardSoon}</div>
                </div>
          )}
            </div> : null}

          {section.layout === 'grid' ?
        <div className={'team-grid team-grid--' + section.id}>
              {section.members.map((p) =>
          <TeamMemberCard key={p.id} p={p} lang={lang} />
          )}
            </div> : null}
        </div>
      )}
    </section>);

}

function Testimonials({ lang }) {
  const { TESTIMONIALS } = window.SC_DATA;
  const t = lang === 'pt' ?
  { eyebrow: 'Depoimentos', title: 'Vozes da', titleEm: 'rede' } :
  { eyebrow: 'Testimonials', title: 'Voices from', titleEm: 'the network' };
  return (
    <section className="container section" data-screen-label="Depoimentos">
      <div className="section-head">
        <div>
          <div className="eyebrow">{t.eyebrow}</div>
          <h2 className="section-title serif">{t.title} <em>{t.titleEm}</em></h2>
        </div>
      </div>
      <div className="test-grid">
        {TESTIMONIALS.map((te, i) =>
        <div className="test-card" key={i}>
            <p className="test-quote" dangerouslySetInnerHTML={{ __html: te.quote[lang] }} />
            <div className="test-meta">
              <div className="test-name">{te.name}</div>
              <div className="test-role">{te.role[lang]}</div>
            </div>
          </div>
        )}
      </div>
    </section>);

}

function Footer({ lang, onDonate }) {
  const mapRef = React.useRef(null);
  const [mapSrc, setMapSrc] = React.useState(null);
  const contact = window.SC_CONTACT || {};
  const site = window.SC_SITE || {};
  const loc = site.location || {};
  React.useEffect(() => {
    const el = mapRef.current;
    if (!el || !loc.embedUrl || mapSrc) return;
    const io = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setMapSrc(loc.embedUrl);
          io.disconnect();
        }
      },
      { rootMargin: '200px 0px', threshold: 0.01 }
    );
    io.observe(el);
    return () => io.disconnect();
  }, [loc.embedUrl, mapSrc]);
  const wa = window.SC_whatsappLink
    ? window.SC_whatsappLink(window.SC_whatsappJoinText && window.SC_whatsappJoinText(lang))
    : (contact.whatsappUrl || '#');
  const anchors = site.anchors || {};
  const { PROJECTS } = window.SC_DATA;
  const socials = [
    { label: 'Instagram', href: contact.social && contact.social.instagram, className: 'pill-link pill-link--instagram' },
    { label: 'LinkedIn', href: contact.social && contact.social.linkedin, className: 'pill-link pill-link--linkedin' },
    { label: 'YouTube', href: contact.social && contact.social.youtube, className: 'pill-link pill-link--youtube' },
  ];
  const t = lang === 'pt' ? {
    tag: 'Rede internacional sem fins lucrativos. Conectamos pessoas, fortalecemos negócios e construímos comunidades.',
    h1: 'Envolva-se', h2: 'Projetos', h3: 'Institucional', h4loc: 'Localização',
    l1: [
      { label: 'Seja Voluntário', href: wa, external: true },
      { label: 'Parcerias', href: wa, external: true },
      { label: 'Eventos', href: wa, external: true },
      { label: 'Doe', href: '#doar', onClick: onDonate },
    ],
    rights: '© 2026 Support Center Café com Mulheres Corp. · EIN: 88-3947265 · LGPD compliant',
    mapsCta: 'Ver no Google Maps',
  } : {
    tag: 'An international nonprofit connecting people, strengthening businesses, and building stronger communities.',
    h1: 'Get involved', h2: 'Programs', h3: 'Institutional', h4loc: 'Location',
    l1: [
      { label: 'Volunteer', href: wa, external: true },
      { label: 'Partnerships', href: wa, external: true },
      { label: 'Events', href: wa, external: true },
      { label: 'Donate', href: '#doar', onClick: onDonate },
    ],
    rights: '© 2026 Support Center Café com Mulheres Corp. · EIN: 88-3947265 · LGPD compliant',
    mapsCta: 'Open in Google Maps',
  };
  const l3 = lang === 'pt' ?
  [
    { label: 'Sobre', href: '#sobre' },
    { label: 'Equipe', href: '#equipe' },
    { label: 'Transparência', href: site.transparencia || 'Transparencia.html' },
    { label: 'Contato', href: wa, external: true },
  ] :
  [
    { label: 'About', href: '#sobre' },
    { label: 'Team', href: '#equipe' },
    { label: 'Transparency', href: site.transparencia || 'Transparencia.html' },
    { label: 'Contact', href: wa, external: true },
  ];
  return (
    <footer className="footer" id="transparencia">
      <div className="container">
        <div className="footer-top">
          <div className="footer-brand-col">
            <a href={site.home || 'index.html'} className="brand brand-full" style={{ display: 'inline-flex' }}>
              <img src={window.__r('logoFull', 'logo-full.png')} alt="Support Center · Café com Mulheres Corp." className="brand-full-img" style={{ filter: 'brightness(0) invert(1)' }} />
            </a>
            <p className="footer-brand-text">{t.tag}</p>
            <div className="footer-social">
              {socials.map((s) =>
              s.href ?
              <a
                key={s.label}
                href={s.href}
                target="_blank"
                rel="noopener noreferrer"
                className={s.className}>
                
                  {s.label}
                </a> :
              <span
                key={s.label}
                className={s.className + ' pill-link--disabled'}
                title={lang === 'pt' ? 'Em breve' : 'Coming soon'}>
                
                  {s.label}
                </span>
              )}
            </div>
          </div>
          <div>
            <h4>{t.h1}</h4>
            <ul>{t.l1.map((x, i) =>
            <li key={i}>
                {x.onClick ?
                <a
                  href={x.href}
                  onClick={(e) => { e.preventDefault(); x.onClick(); }}>
                  
                    {x.label}
                  </a> :
                <a
                  href={x.href}
                  {...(x.external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}>
                  
                    {x.label}
                  </a>}
              </li>
            )}
            </ul>
          </div>
          <div>
            <h4>{t.h2}</h4>
            <ul>{PROJECTS.map((p) =>
            <li key={p.id}>
                <a href={'Projeto.html?id=' + p.id + '#' + p.id}>{p.label}</a>
              </li>
            )}
            </ul>
          </div>
          <div>
            <h4>{t.h3}</h4>
            <ul>{l3.map((x, i) =>
            <li key={i}>
                <a
                href={x.href}
                {...(x.external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}>
                
                  {x.label}
                </a>
              </li>
            )}
            </ul>
          </div>
          <div className="footer-location-col">
            <div className="footer-location">
              <h4>{t.h4loc}</h4>
              <p className="footer-address">
                <a href={loc.mapsUrl} target="_blank" rel="noopener noreferrer">
                  {loc.line1}<br />{lang === 'en' && loc.line2En ? loc.line2En : loc.line2}
                </a>
                {loc.note && <span className="footer-address-note">{lang === 'en' && loc.noteEn ? loc.noteEn : loc.note}</span>}
              </p>
              {loc.embedUrl &&
              <div className="footer-map" ref={mapRef}>
                {mapSrc ?
                <iframe
                  title={lang === 'pt' ? 'Mapa — Support Center' : 'Map — Support Center'}
                  src={mapSrc}
                  loading="lazy"
                  referrerPolicy="no-referrer-when-downgrade"
                  allowFullScreen /> :
                <div className="footer-map-placeholder" aria-hidden="true" />}
              </div>
              }
            </div>
          </div>
        </div>
        <div className="footer-bottom">
          <div>{lang === 'pt' ? 'SEDE' : 'HEADQUARTERS'} · {loc.line1} · {lang === 'en' && loc.line2En ? loc.line2En : loc.line2}</div>
          <div>{t.rights}</div>
        </div>
      </div>
    </footer>);

}

const ZELLE_PRESETS = [50, 100, 150];
const ZELLE_EMAIL = 'suportecafecmulheres@gmail.com';
const ZELLE_ORG = 'Support Center Café com Mulheres Corp';

function DonateModal({ open, onClose, lang, initialAmount }) {
  const [preset, setPreset] = React.useState(null);
  const [freeMode, setFreeMode] = React.useState(false);

  React.useEffect(() => {
    if (!open) return;
    if (initialAmount === 0) {
      setPreset(null);
      setFreeMode(true);
    } else if (ZELLE_PRESETS.includes(initialAmount)) {
      setPreset(initialAmount);
      setFreeMode(false);
    } else {
      setPreset(null);
      setFreeMode(false);
    }
  }, [open, initialAmount]);

  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {
      document.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, [open, onClose]);

  if (!open) return null;

  const t = lang === 'pt' ? {
    title: 'Doe via Zelle',
    sub: '100% destinado aos projetos. Escaneie o QR Code no app do seu banco.',
    amountLabel: 'Valor da doação',
    presetHint: 'No app Zelle, informe o valor de',
    freeHint: 'No app Zelle, escolha o valor que desejar — não há valor pré-definido.',
    pickHint: 'Selecione $50, $100 ou $150 — ou escolha outro valor livre.',
    other: 'Outro valor',
    org: 'Beneficiário',
    email: 'E-mail Zelle',
    scan: 'Escaneie com o app do seu banco'
  } : {
    title: 'Donate via Zelle',
    sub: '100% goes to our programs. Scan the QR code in your banking app.',
    amountLabel: 'Donation amount',
    presetHint: 'In the Zelle app, enter the amount of',
    freeHint: 'In the Zelle app, enter any amount you wish — no preset value.',
    pickHint: 'Select $50, $100, or $150 — or choose a custom amount.',
    other: 'Other amount',
    org: 'Recipient',
    email: 'Zelle email',
    scan: 'Scan with your banking app'
  };

  return (
    <div className="modal-overlay zelle-modal-overlay" onClick={onClose}>
      <div className="modal modal--zelle" onClick={(e) => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose} aria-label={lang === 'pt' ? 'Fechar' : 'Close'}>✕</button>
        <h3 className="serif">{t.title}</h3>
        <p className="modal-sub">{t.sub}</p>

        <div className="zelle-amount-row">
          <span className="mono zelle-amount-label">{t.amountLabel}</span>
          <div className="amount-grid zelle-amount-grid">
            {ZELLE_PRESETS.map((v) =>
            <button
              key={v}
              type="button"
              className={'amount-btn ' + (preset === v ? 'active' : '')}
              onClick={() => { setPreset(v); setFreeMode(false); }}>
              
                ${v}
              </button>
            )}
          </div>
          <button
            type="button"
            className={'zelle-other-btn ' + (freeMode && preset === null ? 'active' : '')}
            onClick={() => { setPreset(null); setFreeMode(true); }}>
            
            {t.other}
          </button>
        </div>

        {preset ?
        <div className="zelle-amount-badge">
          <span className="zelle-amount-badge-value">${preset}</span>
          <span className="zelle-amount-badge-curr">USD</span>
        </div> :
        <p className="zelle-free-note">{freeMode ? t.freeHint : t.pickHint}</p>}

        <div className="zelle-qr-wrap">
          <img src="zelle-qr.png" alt="QR Code Zelle — Support Center" className="zelle-qr-img" />
          <p className="mono zelle-scan-hint">{t.scan}</p>
        </div>

        <div className="zelle-account">
          <div><span className="zelle-account-label">{t.org}</span><strong>{ZELLE_ORG}</strong></div>
          <div><span className="zelle-account-label">{t.email}</span><a href={'mailto:' + ZELLE_EMAIL}>{ZELLE_EMAIL}</a></div>
        </div>
      </div>
    </div>);

}

function JoinForm({ lang }) {
  const waBase = window.SC_whatsappLink
    ? window.SC_whatsappLink('')
    : ((window.SC_CONTACT && window.SC_CONTACT.whatsappUrl) || 'https://wa.me/19548714640');
  const waPreset = window.SC_whatsappJoinText ? window.SC_whatsappJoinText(lang) : '';
  const [form, setForm] = React.useState({
    name: '',
    email: '',
    phone: '',
    city: '',
    role: 'volunteer',
    message: '',
  });
  const [roleOpen, setRoleOpen] = React.useState(false);
  const [thanksLang, setThanksLang] = React.useState(null);
  const roleRef = React.useRef(null);

  const showPendingThanks = React.useCallback(() => {
    try {
      const pending = sessionStorage.getItem('sc-join-thanks');
      if (!pending) return;
      sessionStorage.removeItem('sc-join-thanks');
      setThanksLang(pending);
    } catch (_) {}
  }, []);

  React.useEffect(() => {
    showPendingThanks();
    const onFocus = () => showPendingThanks();
    const onVisible = () => {
      if (document.visibilityState === 'visible') showPendingThanks();
    };
    window.addEventListener('focus', onFocus);
    document.addEventListener('visibilitychange', onVisible);
    return () => {
      window.removeEventListener('focus', onFocus);
      document.removeEventListener('visibilitychange', onVisible);
    };
  }, [showPendingThanks]);

  React.useEffect(() => {
    if (!thanksLang) return;
    const onKey = (e) => { if (e.key === 'Escape') setThanksLang(null); };
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {
      document.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, [thanksLang]);

  React.useEffect(() => {
    if (!roleOpen) return;
    const close = (e) => {
      if (roleRef.current && !roleRef.current.contains(e.target)) setRoleOpen(false);
    };
    document.addEventListener('mousedown', close);
    return () => document.removeEventListener('mousedown', close);
  }, [roleOpen]);

  const t = lang === 'pt' ? {
    eyebrow: 'Faça parte',
    title: 'Sua experiência pode',
    titleEm: 'transformar a vida',
    titleEnd: 'de outra mulher.',
    lead: 'Preencha o formulário abaixo e nossa equipe entra em contato para entender o melhor jeito de você contribuir, seja como voluntária, mentora, coordenadora ou parceira.',
    name: 'Nome completo',
    email: 'E-mail',
    phone: 'Telefone / WhatsApp',
    city: 'Cidade e país',
    role: 'De que forma você quer contribuir',
    message: 'Conte um pouco sobre você (opcional)',
    messagePlaceholder: 'Sua motivação, experiência ou disponibilidade...',
    roles: {
      volunteer: 'Voluntária',
      mentor: 'Mentora',
      coordinator: 'Coordenadora',
      partner: 'Parceira',
      other: 'Outro',
    },
    submit: 'Quero participar',
    note: 'Você será direcionada ao WhatsApp com os dados preenchidos.',
  } : {
    eyebrow: 'Get involved',
    title: 'Your experience can',
    titleEm: 'transform',
    titleEnd: "another woman's life.",
    lead: 'Fill out the form below and our team will reach out to find the best way for you to contribute — as a volunteer, mentor, coordinator, or partner.',
    name: 'Full name',
    email: 'Email',
    phone: 'Phone / WhatsApp',
    city: 'City and country',
    role: 'How would you like to contribute',
    message: 'Tell us a little about yourself (optional)',
    messagePlaceholder: 'Your motivation, experience or availability...',
    roles: {
      volunteer: 'Volunteer',
      mentor: 'Mentor',
      coordinator: 'Coordinator',
      partner: 'Partner',
      other: 'Other',
    },
    submit: 'I want to join',
    note: 'You will be redirected to WhatsApp with your details.',
  };

  const thanks = thanksLang === 'en' ? {
    title: 'Thank you for your interest!',
    body: 'We received your message. Our team will get back to you on WhatsApp soon.',
    btn: 'Close',
  } : {
    title: 'Obrigada pelo interesse!',
    body: 'Recebemos seu contato. Nossa equipe retornará em breve pelo WhatsApp.',
    btn: 'Fechar',
  };

  const setField = (key) => (e) => setForm((f) => ({ ...f, [key]: e.target.value }));

  const handleSubmit = (e) => {
    e.preventDefault();
    const roleLabel = t.roles[form.role] || form.role;
    const lines = lang === 'pt' ? [
      waPreset || 'Olá, quero participar do Support Center Café com Mulheres.',
      '',
      'Nome: ' + form.name,
      'E-mail: ' + form.email,
      'Telefone: ' + form.phone,
      'Cidade/País: ' + form.city,
      'Interesse: ' + roleLabel,
      form.message ? 'Mensagem: ' + form.message : '',
    ] : [
      waPreset || 'Hello, I would like to join Support Center Café com Mulheres.',
      '',
      'Name: ' + form.name,
      'Email: ' + form.email,
      'Phone: ' + form.phone,
      'City/Country: ' + form.city,
      'Interest: ' + roleLabel,
      form.message ? 'Message: ' + form.message : '',
    ];
    const text = lines.filter(Boolean).join('\n');
    try { sessionStorage.setItem('sc-join-thanks', lang); } catch (_) {}
    window.open(waBase + '?text=' + encodeURIComponent(text), '_blank', 'noopener,noreferrer');
  };

  return (
    <section className="container section join-section" id="participar" data-screen-label="Participar">
      {thanksLang ?
      <div className="modal-overlay join-thanks-overlay" onClick={() => setThanksLang(null)}>
        <div className="modal modal--thanks" onClick={(e) => e.stopPropagation()}>
          <button className="modal-close" onClick={() => setThanksLang(null)} aria-label={thanks.btn}>✕</button>
          <h3 className="serif">{thanks.title}</h3>
          <p className="modal-sub">{thanks.body}</p>
          <button type="button" className="btn btn-primary" onClick={() => setThanksLang(null)}>{thanks.btn}</button>
        </div>
      </div> : null}
      <div className="join-inner reveal in">
        <div className="join-layout">
          <div className="join-head">
            <div className="join-head-copy">
              <div className="eyebrow">{t.eyebrow}</div>
              <h2 className="section-title serif">{t.title} <em>{t.titleEm}</em> {t.titleEnd}</h2>
              <p className="join-lead">{t.lead}</p>
            </div>
            <div className="join-logo" aria-hidden="true">
              <img src="assets/logo-mark.svg" alt="" />
            </div>
          </div>

          <form className="join-form" onSubmit={handleSubmit}>
            <div className="join-form-grid">
              <label className="join-field">
                <span className="join-label mono">{t.name}</span>
                <input type="text" name="name" required value={form.name} onChange={setField('name')} autoComplete="name" />
              </label>
              <label className="join-field">
                <span className="join-label mono">{t.email}</span>
                <input type="email" name="email" required value={form.email} onChange={setField('email')} autoComplete="email" />
              </label>
              <label className="join-field">
                <span className="join-label mono">{t.phone}</span>
                <input type="tel" name="phone" required value={form.phone} onChange={setField('phone')} autoComplete="tel" />
              </label>
              <label className="join-field">
                <span className="join-label mono">{t.city}</span>
                <input type="text" name="city" required value={form.city} onChange={setField('city')} autoComplete="address-level2" />
              </label>
              <div className="join-field join-field--full join-field--select" ref={roleRef}>
                <span className="join-label mono">{t.role}</span>
                <input type="hidden" name="role" value={form.role} />
                <button
                  type="button"
                  className={'join-select-trigger ' + (roleOpen ? 'open' : '')}
                  onClick={() => setRoleOpen((o) => !o)}
                  aria-haspopup="listbox"
                  aria-expanded={roleOpen}>
                  {t.roles[form.role]}
                </button>
                {roleOpen ?
                <ul className="join-select-menu" role="listbox">
                  {Object.entries(t.roles).map(([value, label]) =>
                    <li key={value}>
                      <button
                        type="button"
                        role="option"
                        aria-selected={form.role === value}
                        className={'join-select-option ' + (form.role === value ? 'active' : '')}
                        onClick={() => { setForm((f) => ({ ...f, role: value })); setRoleOpen(false); }}>
                        {label}
                      </button>
                    </li>
                  )}
                </ul> : null}
              </div>
              <label className="join-field join-field--full">
                <span className="join-label mono">{t.message}</span>
                <textarea name="message" rows="2" value={form.message} onChange={setField('message')} placeholder={t.messagePlaceholder} />
              </label>
            </div>
            <div className="join-form-actions">
              <button type="submit" className="btn btn-primary">{t.submit} <span className="arrow">→</span></button>
              <p className="join-note mono">{t.note}</p>
            </div>
          </form>
        </div>
      </div>
    </section>);

}

window.SC_UI_2 = { Founder, Books, DonateStrip, Team, Testimonials, JoinForm, Footer, DonateModal };