// Seção O Evento — cards de informação + modal cardápio
window.EventInfo = function EventInfo() {
  const C = window.CONFIG;
  const [showCardapio, setShowCardapio] = React.useState(false);

  const cards = [
    {
      icon: "calendar", title: "Data & Horário",
      body: <>{C.dataFormatada} <br/> {C.diaSemana}, {C.horaCerimonia} </>
    },
    {
      icon: "map-pin", title: "Local",
      body: (
        <>
          {C.local}<br/>{C.endereco}
          <div className="evento-card-map">
            <iframe
              src="https://maps.google.com/maps?q=-22.7608084,-42.8980681&hl=pt-BR&z=17&output=embed"
              width="100%" height="100%"
              style={{ border: 0, display: 'block' }}
              allowFullScreen="" loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
              title="Localização do evento"
            />
          </div>
        </>
      ),
      action: { label: "Abrir no Maps →", href: C.mapsLink }
    },
    {
      icon: "hanger", title: "Vestimenta",
      body: <>Cerimônia formal e religiosa. Clique para ver todas as orientações.</>,
      action: { label: "Ver detalhes →", href: "#vestimenta" }
    },
    {
      icon: "music", title: "Cântico da Cerimônia",
      body: <>Louve conosco a nossa união na cerimônia.</>,
      action: { label: "Cântico 131 →", href: "https://www.jw.org/pt/biblioteca/musicas-canticos/cante-de-coracao/131-o-que-jeova-uniu/?media=sjjm" }
    },
    {
      icon: "utensils", title: "Cardápio",
      body: (
        <>
          Rodízio completo de massas <br/> Com refrigerante e água incluídos<br/>
          <strong>Cada convidado paga sua conta.</strong>
          {C.cardapioNota ? <><br/><span style={{fontSize:'12px',color:'#888780'}}>{C.cardapioNota}</span></> : null}
        </>
      ),
      onCardapioClick: true
    },
    {
      icon: "check", title: "Confirme Presença",
      body: <>Confirme assim que receber esse convite.</>,
      button: { label: "Confirmar presença", href: "#rsvp", icon: "check" }
    },
    {
      icon: "phone", title: "Dúvidas",
      body: <>{C.contatoTel}<br/>{C.contatoEmail}</>
    }
  ];

  return (
    <section id="evento" className="evento">
      <div className="container">
        <header className="section-header" data-animate>
          <p className="sub">Detalhes do dia</p>
          <h2>O Evento</h2>
          <Ornament width={140} />
          <p className="evento-intro">
            Será uma honra ter você conosco neste dia tão especial.
            Reunimos aqui tudo o que precisa saber para celebrar conosco.
          </p>
        </header>

        <div className="evento-grid">
          {cards.map((c, i) => (
            <article key={c.title} className="evento-card" data-animate style={{ transitionDelay: `${i * 60}ms` }}>
              <div className="evento-card-ico"><Icon name={c.icon} size={22} color="#711312" /></div>
              <h3 className="evento-card-title">{c.title}</h3>
              <p className="evento-card-body">{c.body}</p>
              {c.action && (
                <a href={c.action.href} className="evento-card-link"
                   {...(c.action.href.startsWith('http') ? { target: '_blank', rel: 'noopener noreferrer' } : {})}>
                  {c.action.label}
                </a>
              )}
              {c.onCardapioClick && (
                <button onClick={() => setShowCardapio(true)} className="evento-card-link evento-card-link--btn">
                  Ver cardápio →
                </button>
              )}
              {c.button && (
                <a href={c.button.href} className="btn-outline-marsala evento-card-btn">
                  <Icon name={c.button.icon} size={14} /> {c.button.label}
                </a>
              )}
            </article>
          ))}
        </div>
      </div>

      {/* Modal cardápio */}
      {showCardapio && (
        <div className="cardapio-overlay" onClick={() => setShowCardapio(false)}>
          <div className="cardapio-modal" onClick={e => e.stopPropagation()}>
            <button className="cardapio-close" onClick={() => setShowCardapio(false)} aria-label="Fechar">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
                <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
              </svg>
            </button>
            <img src="assets/cardapio.png" alt="Cardápio" className="cardapio-img" />
          </div>
        </div>
      )}

      <style>{`
        .evento {
          background: #ffffff;
          padding: 96px 0 88px;
          position: relative;
        }
        .evento-intro {
          font-family: 'Cormorant Garamond', serif;
          font-size: 17px; font-style: italic;
          color: #5C3D2E; max-width: 540px;
          margin: 14px auto 0; line-height: 1.6;
        }
        .evento-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 18px;
          margin-bottom: 36px;
        }
        .evento-card {
          background: #ffffff;
          border: 0.5px solid #C0455A;
          border-radius: 12px;
          padding: 26px 24px 22px;
          transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
          display: flex; flex-direction: column;
          position: relative;
        }
        .evento-card:hover {
          border-color: #ADADAD;
          transform: translateY(-3px);
          box-shadow: 0 14px 28px -18px rgba(139,38,53,0.35);
        }
        .evento-card-ico {
          width: 44px; height: 44px;
          border-radius: 50%;
          border: 0.5px solid rgba(139,38,53,0.35);
          background: #FBF6EE;
          display: flex; align-items: center; justify-content: center;
          margin-bottom: 14px;
        }
        .evento-card-title {
          font-family: 'Cormorant Garamond', serif;
          font-size: 20px; font-weight: 600;
          color: #711312; margin-bottom: 8px;
          letter-spacing: 0.01em;
        }
        .evento-card-body {
          font-family: 'Lato', sans-serif;
          font-size: 14px; line-height: 1.55;
          color: #5C3D2E;
          flex: 1;
        }
        .evento-card-link {
          display: inline-block; margin-top: 12px;
          color: #ADADAD; font-size: 12px;
          letter-spacing: 1px; text-transform: uppercase;
          border-bottom: 1px solid #ADADAD; padding-bottom: 2px;
          align-self: flex-start;
          transition: opacity 0.2s ease;
        }
        .evento-card-link--btn {
          background: none; border: none; border-bottom: 1px solid #ADADAD;
          padding: 0; padding-bottom: 2px; cursor: pointer;
          font-family: 'Lato', sans-serif;
        }
        .evento-card-link:hover { opacity: 0.75; }
        .evento-card-btn { margin-top: 14px; }
        .evento-card-map {
          height: 180px;
          border-radius: 8px;
          overflow: hidden;
          margin-top: 12px;
          border: 0.5px solid rgba(139,38,53,0.12);
        }

        /* === Modal cardápio === */
        .cardapio-overlay {
          position: fixed; inset: 0; z-index: 8000;
          background: rgba(0,0,0,0.72);
          display: flex; align-items: center; justify-content: center;
          padding: 24px;
          animation: fadeIn 0.2s ease;
        }
        .cardapio-modal {
          position: relative;
          max-width: 520px; width: 100%;
          max-height: 90vh;
          border-radius: 16px;
          overflow: hidden;
          box-shadow: 0 32px 64px -16px rgba(0,0,0,0.5);
          animation: scaleIn 0.25s cubic-bezier(0.34,1.56,0.64,1);
        }
        .cardapio-img {
          display: block; width: 100%; height: auto;
          max-height: 90vh; object-fit: contain;
          background: #fff;
        }
        .cardapio-close {
          position: absolute; top: 12px; right: 12px;
          width: 36px; height: 36px;
          border-radius: 50%;
          background: rgba(255,255,255,0.92);
          border: none; cursor: pointer;
          display: flex; align-items: center; justify-content: center;
          color: #711312;
          box-shadow: 0 2px 8px rgba(0,0,0,0.15);
          transition: background 0.2s ease, transform 0.15s ease;
        }
        .cardapio-close:hover { background: #fff; transform: scale(1.1); }
        @keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
        @keyframes scaleIn { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }

        @media (min-width: 1101px) {
          .evento-card:nth-child(2) { grid-row: span 2; }
        }
        @media (max-width: 1100px) {
          .evento-grid { grid-template-columns: repeat(2, 1fr); }
          .evento-card:nth-child(2) { grid-row: span 1; }
        }
        @media (max-width: 560px) {
          .evento { padding: 72px 0 64px; }
          .evento-grid { grid-template-columns: 1fr; gap: 14px; }
          .evento-card { padding: 22px 20px; }
        }
      `}</style>
    </section>
  );
};