// Guestbook.jsx — floating wish cards

function Guestbook() {
  const all = useLL('wishes') || [];
  const rots = [-2, 3, -4, 2, -1, 4, -3, 1];
  if (!all.length) return null;

  return (
    <section id="wishes" className="sec-blush" style={{ position: 'relative', overflow: 'hidden' }}>
      <div className="container">
        <div className="sec-head reveal">
          <span className="eyebrow">Guestbook · Lời chúc</span>
          <h2>Những lời yêu thương</h2>
          <div className="sub">từ mọi người dành cho chúng mình</div>
        </div>

        <div className="stagger-polaroid" style={{
          display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))',
          gap: 20,
        }}>
          {all.map((w, i) => (
            <div key={i} style={{
              background: i % 3 === 0 ? 'var(--cream-50)' : i % 3 === 1 ? '#FFE8EE' : '#FFF5F7',
              padding: '24px 22px',
              borderRadius: 'var(--r-lg)',
              boxShadow: 'var(--shadow-md)',
              transform: `rotate(${rots[i % rots.length]}deg)`,
              '--rot': `${rots[i % rots.length]}deg`,
              border: '1px solid var(--border-rose)',
              position: 'relative',
            }}>
              <img src="assets/icons/heart-solid.svg" style={{
                width: 24, position: 'absolute', top: -12, left: 18, transform: 'rotate(-15deg)',
              }}/>
              <p style={{
                fontFamily: 'var(--font-script)', fontSize: 22, color: 'var(--ink-900)',
                lineHeight: 1.35, margin: '0 0 14px',
              }}>"{w.text}"</p>
              <div style={{
                fontFamily: 'var(--font-ui)', fontSize: 12, fontWeight: 700,
                letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--pink-600)',
              }}>— {w.name}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Guestbook = Guestbook;