// OurStory.jsx — timeline of the couple's journey

function OurStory() {
  const moments = useLL('story') || [];
  if (!moments.length) return null;

  return (
    <section id="story" className="sec-cream" style={{ position: 'relative' }}>
      <div className="container">
        <div className="sec-head reveal">
          <span className="eyebrow">Our Story</span>
          <h2>Câu chuyện của chúng mình</h2>
          <div className="sub">~ một chặng đường nho nhỏ ~</div>
        </div>

        <div className="stagger-polaroid" style={{
          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))',
          gap: 36, marginTop: 40,
        }}>
          {moments.map((m, i) => (
            <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', transform: `rotate(${m.rot}deg)`, '--rot': `${m.rot}deg` }}>
              <div className="polaroid" style={{ width: 220 }}>
                <div className="photo" style={{ height: 220 }}>
                  <img src={`assets/icons/${m.icon}.svg`} style={{ width: 80, height: 80 }}/>
                </div>
                <div className="caption">{m.year}</div>
              </div>
              <div style={{
                marginTop: 20, textAlign: 'center', maxWidth: 260,
                transform: `rotate(${-m.rot}deg)`,
              }}>
                <h3 style={{
                  fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 24, fontWeight: 400,
                  color: 'var(--pink-700)', margin: '0 0 6px',
                }}>{m.title}</h3>
                <p style={{ fontSize: 14, color: 'var(--fg-2)', lineHeight: 1.6, margin: 0 }}>{m.text}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.OurStory = OurStory;