const EVENTS = [
  { day: "10", month: "MAI", year: "2026", title: "Festa do Dia do Técnico de Enfermagem 2026", where: "Clube Atlético Bauru", time: "A partir das 12h", meta: "Almoço, shows e sorteios para associados e família" },
  { day: "25", month: "ABR", year: "2026", title: "Assembleia Geral Extraordinária — Campanha Salarial", where: "Sede do S.A.T.E. · Bauru/SP", time: "19h00", meta: "Pauta: aprovação da proposta patronal" },
  { day: "13", month: "JUN", year: "2026", title: "Curso: Atualização em Biossegurança Hospitalar", where: "Auditório SATE", time: "08h às 17h", meta: "Certificado · Inscrições pelo WhatsApp" },
  { day: "12", month: "OUT", year: "2026", title: "Dia das Crianças — Festa da Família SATE", where: "Recanto Ecológico Primavera", time: "10h às 18h", meta: "Brinquedos, almoço e recreação gratuitos" },
];

const Eventos = () => (
  <section className="section eventos" id="eventos">
    <div className="container">
      <div className="section-head" data-reveal="up">
        <span className="kicker">AGENDA</span>
        <h2>Próximos <em>eventos</em> e assembleias.</h2>
        <p>
          Encontros para a categoria, assembleias deliberativas e momentos de confraternização com a família.
          Participe — sua presença fortalece o sindicato.
        </p>
      </div>

      <div className="events-list" data-reveal-group>
        {EVENTS.map((e, i) => (
          <a key={i} className="event-row" data-reveal-child href={WHATSAPP_URL} target="_blank" rel="noopener">
            <div className="event-date">
              <div className="day">{e.day}</div>
              <div className="mon-yr">{e.month} · {e.year}</div>
            </div>
            <div>
              <h3>{e.title}</h3>
              <div className="event-meta" style={{ marginTop: 8 }}>
                <span><Icon name="pin" size={14} /> {e.where}</span>
                <span><Icon name="clock" size={14} /> {e.time}</span>
              </div>
            </div>
            <div className="event-meta" style={{ color: "var(--ink-soft)", fontSize: 14 }}>
              {e.meta}
            </div>
            <div className="event-link">
              Inscrever-se
              <Icon name="arrow" size={16} />
            </div>
          </a>
        ))}
      </div>
    </div>
  </section>
);

const NEWS = [
  {
    cat: "Direitos trabalhistas",
    date: "15 ABR 2026",
    title: "Nova convenção coletiva garante reajuste de 6,2% para técnicos e auxiliares de enfermagem em Bauru",
    desc: "Acordo firmado após três meses de negociação também garante reajuste no vale-alimentação e abono por tempo de serviço para categoria.",
    img: "assets/img-news-1.svg",
    featured: true,
  },
  {
    cat: "Apoio jurídico",
    date: "02 ABR 2026",
    title: "S.A.T.E. obtém na Justiça o pagamento retroativo de adicional de insalubridade para associados",
    desc: "Decisão beneficia mais de 240 profissionais de três hospitais da região.",
    img: "assets/img-news-2.svg",
  },
  {
    cat: "Eventos",
    date: "28 MAR 2026",
    title: "Inscrições abertas para a Festa do Dia do Técnico de Enfermagem 2026",
    desc: "Associados em dia recebem dois convites gratuitos. Confira como garantir o seu.",
    img: "assets/img-news-3.svg",
  },
];

const Noticias = () => (
  <section className="section noticias" id="noticias">
    <div className="container">
      <div className="section-head" data-reveal="up">
        <span className="kicker">NOTÍCIAS</span>
        <h2>Fique por dentro do que <em>importa para a categoria.</em></h2>
        <p>
          Conquistas, novas convenções, orientações trabalhistas e avisos importantes — tudo em primeira mão.
        </p>
      </div>

      <div className="news-grid" data-reveal-group>
        {NEWS.map((n, i) => (
          <article key={i} className={`news-card ${n.featured ? "featured" : ""}`} data-reveal-child>
            <div className="news-img">
              <Img src={n.img} alt={n.title} />
            </div>
            <div className="news-body">
              <div className="news-meta">
                <span className="cat">{n.cat}</span>
                <span>{n.date}</span>
              </div>
              <h3>{n.title}</h3>
              <p>{n.desc}</p>
              <span className="news-more">Ler matéria completa <Icon name="arrow" size={14} /></span>
            </div>
          </article>
        ))}
      </div>

      <div style={{ textAlign: "center", marginTop: 48 }} data-reveal="fade">
        <a href="#" className="btn btn-ghost">Ver todas as notícias <Icon name="arrow" size={16} /></a>
      </div>
    </div>
  </section>
);

Object.assign(window, { Eventos, Noticias, EVENTS, NEWS });