function IconCal() {
  return (
    <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1" width="36" height="36">
      <rect x="4" y="6" width="24" height="22" />
      <line x1="4" y1="12" x2="28" y2="12" />
      <line x1="10" y1="3" x2="10" y2="9" />
      <line x1="22" y1="3" x2="22" y2="9" />
      <text x="16" y="23" fill="currentColor" stroke="none" textAnchor="middle" fontFamily="Cormorant Garamond" fontSize="9" fontStyle="italic">30</text>
    </svg>
  );
}
function IconClock() {
  return (
    <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1" width="36" height="36">
      <circle cx="16" cy="16" r="12" />
      <line x1="16" y1="16" x2="16" y2="9" />
      <line x1="16" y1="16" x2="21" y2="18" />
    </svg>
  );
}
function IconCoffee() {
  return (
    <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1" width="36" height="36">
      <path d="M6 12 H22 V20 a4 4 0 0 1 -4 4 H10 a4 4 0 0 1 -4 -4 Z" />
      <path d="M22 14 H25 a3 3 0 0 1 0 6 H22" />
      <path d="M11 6 q1 2 0 4" />
      <path d="M16 6 q1 2 0 4" />
    </svg>
  );
}
function IconTicket() {
  return (
    <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1" width="36" height="36">
      <path d="M4 10 V22 H28 V10 a3 3 0 0 1 0 -6 H4 a3 3 0 0 1 0 6 Z" />
      <line x1="20" y1="6" x2="20" y2="26" strokeDasharray="2 2" />
    </svg>
  );
}

function Event() {
  return (
    <section className="event" data-screen-label="05 Evento">
      <div className="wrap">
        <div className="event__card">
          <div className="event__head">
            <h2 className="serif">
              Uma manhã para <span className="gold-grad" style={{ fontStyle: "italic" }}>decifrar</span>
              <br />o que move você à mesa.
            </h2>
          </div>

          <div className="event__grid">
            <div className="event__cell">
              <div className="icon"><IconCal /></div>
              <div className="k">Data</div>
              <div className="v big">30 Mai</div>
              <div className="v" style={{ fontSize: 14, color: "var(--ink-muted)", marginTop: 6 }}>2026 · sábado</div>
            </div>
            <div className="event__cell">
              <div className="icon"><IconClock /></div>
              <div className="k">Horário</div>
              <div className="v big">9h00</div>
              <div className="v" style={{ fontSize: 14, color: "var(--ink-muted)", marginTop: 6 }}>da manhã</div>
            </div>
            <div className="event__cell">
              <div className="icon"><IconCoffee /></div>
              <div className="k">Incluso</div>
              <div className="v">Café da manhã</div>
              <div className="v" style={{ fontSize: 14, color: "var(--ink-muted)", marginTop: 6 }}>servido no local</div>
            </div>
            <div className="event__cell">
              <div className="icon"><IconTicket /></div>
              <div className="k">Investimento</div>
              <div className="v big">R$ 49,90</div>
              <div className="v" style={{ fontSize: 14, color: "var(--ink-muted)", marginTop: 6 }}>vagas limitadas</div>
            </div>
          </div>

          <div className="event__cta">
            <a className="btn-gold" href="https://chat.whatsapp.com/BTaNimP5Ufb3jC22G8kDIY?mode=gi_t" target="_blank" rel="noreferrer">
              Entrar no Grupo <span className="arrow">→</span>
            </a>
            <p className="event__note">
              <span className="star">✦</span> Toda renda arrecadada será <em>doada</em> para uma instituição
              que apoia mulheres vítimas de violência doméstica.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Event = Event;