const Sobre = () => (
  <section className="section sobre" id="sobre">
    <div className="container">
      <div className="section-head" data-reveal="up">
        <span className="kicker">SOBRE O S.A.T.E.</span>
        <h2>Nascidos da categoria, <em>para a categoria.</em></h2>
        <p>
          Há mais de uma década representando auxiliares e técnicos de enfermagem
          de Bauru e região — com presença diária nos hospitais, orientação
          permanente e luta contínua por melhores condições de trabalho.
        </p>
      </div>

      <div className="sobre-grid sobre-grid--wide">
        <div className="sobre-img sobre-img--wide" data-reveal="up">
          <img src="assets/diretoria.png" alt="Diretoria do S.A.T.E." style={{ width: "100%", height: "100%", objectFit: "cover", display: "block", borderRadius: "var(--r-lg)" }} />
        </div>

        <div className="sobre-body" data-reveal="up">
          <p>
            Fundado em 2015, o Sindicato dos Auxiliares e Técnicos de Enfermagem
            de Bauru e Região nasceu da necessidade de dar voz a uma categoria
            essencial, porém historicamente sub-representada nas mesas de
            negociação. Desde então, somos a principal referência em defesa de
            direitos trabalhistas, saúde ocupacional e dignidade profissional
            para milhares de trabalhadores.
          </p>
          <p>
            Atuamos em Bauru e região, negociando
            convenções coletivas, fiscalizando o cumprimento da legislação e
            oferecendo apoio jurídico, social e humano. Cada associado encontra
            aqui não apenas amparo institucional — mas uma casa.
          </p>
        </div>
      </div>
    </div>
  </section>
);

const BENEFICIOS = [
  { icon: "scale", title: "Apoio jurídico completo", desc: "Orientação trabalhista, ações coletivas e individuais, acompanhamento em audiências — sem custo para associados em dia.", cat: "Direitos" },
  { icon: "ticket", title: "Convênios e descontos", desc: "Rede de parceiros em farmácias, clínicas, laboratórios, escolas e comércio local com condições exclusivas.", cat: "Economia" },
  { icon: "heart", title: "Eventos para a família", desc: "Festa da Enfermagem, colônia de férias e área de lazer exclusiva para associados e familiares.", cat: "Convivência" },
  { icon: "book", title: "Capacitação e cursos", desc: "Cursos de atualização, palestras técnicas e workshops voltados à prática diária e ao desenvolvimento profissional.", cat: "Formação" },
  { icon: "shield", title: "Negociação coletiva", desc: "Representação nas convenções coletivas de trabalho, piso salarial, reajustes e condições dignas para a categoria.", cat: "Representação" },
  { icon: "users", title: "Assistência social", desc: "Orientação previdenciária, apoio em momentos difíceis e programa de auxílio para associados e dependentes.", cat: "Suporte" },
];

const Beneficios = () => (
  <section className="section beneficios" id="beneficios">
    <div className="container">
      <div className="section-head" data-reveal="up">
        <span className="kicker">BENEFÍCIOS E SERVIÇOS</span>
        <h2>Tudo o que um <em>sindicato de verdade</em> oferece.</h2>
        <p>
          Ser associado do S.A.T.E. é ter um time inteiro trabalhando por você — do jurídico ao lazer da família.
        </p>
      </div>

      <div className="benefits-grid" data-reveal-group>
        {BENEFICIOS.map((b, i) => (
          <div key={i} className="benefit-card" data-reveal-child>
            <div className="bnum">0{i + 1} / {BENEFICIOS.length < 10 ? `0${BENEFICIOS.length}` : BENEFICIOS.length}</div>
            <div className="bicon"><Icon name={b.icon} size={24} /></div>
            <h3>{b.title}</h3>
            <p>{b.desc}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const Filiacao = () => (
  <section className="filiacao" id="filiar">
    <div className="container filiacao-inner">
      <div data-reveal="left">
        <span className="kicker" style={{ color: "#ffc8c0" }}>FILIE-SE AO S.A.T.E.</span>
        <h2 style={{ marginTop: 12 }}>
          Junte-se a mais de <em>6 mil profissionais</em> que já têm quem os represente.
        </h2>
        <p>
          A filiação é rápida, pode ser feita pelo WhatsApp, e garante acesso imediato
          a todos os benefícios, apoio jurídico e convênios do sindicato.
        </p>
        <div style={{ marginTop: 28 }}>
          <a href={WHATSAPP_URL} target="_blank" rel="noopener" className="btn btn-primary" style={{ background: "#25D366", boxShadow: "0 8px 20px -8px rgba(37,211,102,0.5)" }}>
            <Icon name="whatsapp" size={18} />
            Iniciar filiação no WhatsApp
          </a>
        </div>
      </div>

      <div className="cta-box" data-reveal="right">
        <div className="cta-label">O que você recebe</div>
        <ul className="cta-list">
          <li><span className="check" style={{ background: "#25D366" }}>✓</span> Apoio jurídico trabalhista gratuito (exclusivo para sócios)</li>
          <li><span className="check" style={{ background: "#25D366" }}>✓</span> Acesso à rede de convênios</li>
          <li><span className="check" style={{ background: "#25D366" }}>✓</span> Participação em eventos e cursos</li>
          <li><span className="check" style={{ background: "#25D366" }}>✓</span> Orientação previdenciária</li>
          <li><span className="check" style={{ background: "#25D366" }}>✓</span> Representação em negociações coletivas</li>
        </ul>
      </div>
    </div>
  </section>
);

const Juridico = () => (
  <section className="section juridico" id="juridico">
    <div className="container">
      <div className="section-head center" data-reveal="up">
        <span className="kicker">ASSESSORIA JURÍDICA</span>
        <h2>Quem <em>defende</em> seus direitos.</h2>
        <p>
          Associados do S.A.T.E. contam com atendimento jurídico especializado em direito trabalhista — gratuito e exclusivo para sócios.
        </p>
      </div>

      <div className="juridico-card" data-reveal="up">
        <div className="juridico-photo">
          <img src="assets/dr-hudson.png" alt="Dr. Hudson Chaves — Advogado" />
        </div>
        <div className="juridico-info">
          <h3>Dr. Hudson Chaves</h3>
          <span className="juridico-role">Advogado · OAB/SP 313.075</span>
          <p>
            Especialista em Direito do Trabalho, responsável pelo atendimento jurídico dos associados do S.A.T.E. — orientação, ações individuais e coletivas, acompanhamento em audiências e defesa dos direitos da categoria.
          </p>
          <div className="juridico-tags">
            <span>Direito Trabalhista</span>
            <span>Ações Coletivas</span>
            <span>Audiências</span>
          </div>
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, { Sobre, Beneficios, Juridico, Filiacao });