// Ceremony.jsx — formal announcement cards for Lễ Thành Hôn / Lễ Vu Quy

function Ceremony() {
  const ceremonies = useLL('ceremonies') || [];
  if (!ceremonies.length) return null;

  return (
    <section id="ceremony" className="sec-cream" style={{ position: 'relative' }}>
      <style>{`
        .ll-ceremony-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
          gap: 32px;
          align-items: start;
        }
        .ll-ceremony-card {
          position: relative;
          background: var(--cream-50);
          border: 1px solid var(--border-rose);
          border-radius: var(--r-lg);
          padding: 48px 36px 40px;
          box-shadow: var(--shadow-md);
          text-align: center;
          overflow: hidden;
        }
        .ll-ceremony-card::before,
        .ll-ceremony-card::after {
          content: ''; position: absolute; width: 110px; height: 110px;
          background-size: contain; background-repeat: no-repeat;
          opacity: .55; pointer-events: none;
        }
        .ll-ceremony-card::before {
          top: -12px; left: -18px;
          background-image: url('assets/icons/leaf-sprig.svg');
          transform: rotate(-18deg);
        }
        .ll-ceremony-card::after {
          bottom: -14px; right: -18px;
          background-image: url('assets/icons/leaf-sprig.svg');
          transform: rotate(160deg);
        }
        .ll-parents-row {
          display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
          margin-bottom: 28px;
        }
        .ll-parents-row > div { text-align: center; }
        .ll-parents-title {
          font-family: var(--font-ui); font-weight: 700; font-size: 12px;
          color: var(--pink-700); letter-spacing: .12em;
          margin-bottom: 4px;
        }
        .ll-parents-name {
          font-family: var(--font-ui); font-weight: 700; font-size: 13px;
          color: var(--pink-700); letter-spacing: .08em;
          line-height: 1.5;
        }
        .ll-parents-loc {
          font-family: var(--font-body); font-style: italic; font-size: 12px;
          color: var(--fg-3); margin-top: 4px;
        }
        .ll-cer-title {
          font-family: var(--font-ui); font-weight: 700; font-size: 18px;
          color: var(--pink-700); letter-spacing: .22em;
          margin: 8px 0 18px;
        }
        .ll-cer-couple {
          font-family: var(--font-display-script);
          font-size: clamp(52px, 9vw, 76px);
          color: var(--pink-600); line-height: 1;
          margin: 0;
        }
        .ll-cer-amp {
          font-family: var(--font-script); color: var(--pink-400);
          font-size: 40px; line-height: 1; margin: 4px 0;
        }
        .ll-cer-when-label {
          font-family: var(--font-body); font-style: italic; font-size: 14px;
          color: var(--fg-2); margin: 24px 0 6px;
        }
        .ll-cer-when {
          font-family: var(--font-ui); font-weight: 700; font-size: 14px;
          color: var(--pink-700); letter-spacing: .1em; line-height: 1.6;
        }
        .ll-cer-when .sep { color: var(--pink-300); margin: 0 8px; }
        .ll-cer-lunar {
          font-family: var(--font-body); font-style: italic; font-size: 13px;
          color: var(--fg-3); margin-top: 4px;
        }
        .ll-cer-venue-label {
          font-family: var(--font-ui); font-weight: 700; font-size: 13px;
          color: var(--pink-700); letter-spacing: .18em;
          margin: 24px 0 8px;
        }
        .ll-cer-venue-addr {
          font-family: var(--font-body); font-size: 13px; color: var(--fg-2);
          line-height: 1.6; white-space: pre-line;
        }
        @media (max-width: 520px) {
          .ll-ceremony-card { padding: 36px 22px 30px; }
          .ll-parents-row { gap: 10px; }
          .ll-parents-name { font-size: 12px; }
        }
      `}</style>

      <div className="container">
        <div className="sec-head reveal">
          <span className="eyebrow">Trân trọng kính mời</span>
          <h2>Lễ Thành Hôn &amp; Vu Quy</h2>
          <div className="sub">nghi thức thiêng liêng của hai bên gia đình</div>
        </div>

        <div className="ll-ceremony-grid stagger">
          {ceremonies.map((c, i) => (
            <article key={c.id || i} className="ll-ceremony-card">
              <div className="ll-parents-row">
                <div>
                  <div className="ll-parents-title">{c.groomParents?.title || 'Ông Bà'}</div>
                  <div className="ll-parents-name">
                    {c.groomParents?.father}<br/>
                    {c.groomParents?.mother}
                  </div>
                  {c.groomParents?.location && (
                    <div className="ll-parents-loc">{c.groomParents.location}</div>
                  )}
                </div>
                <div>
                  <div className="ll-parents-title">{c.brideParents?.title || 'Ông Bà'}</div>
                  <div className="ll-parents-name">
                    {c.brideParents?.father}<br/>
                    {c.brideParents?.mother}
                  </div>
                  {c.brideParents?.location && (
                    <div className="ll-parents-loc">{c.brideParents.location}</div>
                  )}
                </div>
              </div>

              <div className="ll-cer-title">{c.title}</div>

              <div className="ll-cer-couple">{c.coupleTop}</div>
              <div className="ll-cer-amp">&amp;</div>
              <div className="ll-cer-couple">{c.coupleBottom}</div>

              <div className="ll-cer-when-label">Được tổ chức vào</div>
              <div className="ll-cer-when">
                {c.time}
                {c.date && <><span className="sep">|</span>{c.date}</>}
                {c.weekday && <><span className="sep">|</span>{c.weekday}</>}
              </div>
              {c.lunarDate && <div className="ll-cer-lunar">({c.lunarDate})</div>}

              {c.venueLabel && <div className="ll-cer-venue-label">{c.venueLabel}</div>}
              {c.venueAddress && <div className="ll-cer-venue-addr">{c.venueAddress}</div>}
            </article>
          ))}
        </div>

        <div className="divider reveal" data-rv="fadein">❦ · Two families, one joy · ❦</div>
      </div>
    </section>
  );
}

window.Ceremony = Ceremony;