// Schedule.jsx — wedding day program, grouped by nhà trai / nhà gái / both

function Schedule() {
  const events = useLL('schedule') || [];
  if (!events.length) return null;

  const groups = [
    { key: 'bride', label: 'Nhà gái · Lễ Vu Quy', eyebrow: 'Bride side' },
    { key: 'groom', label: 'Nhà trai · Lễ Thành Hôn', eyebrow: 'Groom side' },
    { key: 'both',  label: 'Chung · Tiệc cưới',      eyebrow: 'Together' },
  ];

  const bySide = groups.map(g => ({
    ...g,
    items: events.filter(ev => (ev.side || 'both') === g.key),
  })).filter(g => g.items.length > 0);

  return (
    <section id="schedule" className="sec-blush" style={{ position: 'relative' }}>
      <style>{`
        .ll-sched-group + .ll-sched-group { margin-top: 56px; }
        .ll-sched-group-head {
          text-align: center; margin-bottom: 28px;
        }
        .ll-sched-group-head .eyebrow {
          display: block; color: var(--pink-600); margin-bottom: 6px;
        }
        .ll-sched-group-head h3 {
          font-family: var(--font-display); font-style: italic; font-weight: 400;
          font-size: 30px; margin: 0; color: var(--ink-900);
        }
      `}</style>

      <div className="container">
        <div className="sec-head reveal">
          <span className="eyebrow">The Day of · 03.05.2026</span>
          <h2>Lịch trình lễ cưới</h2>
          <div className="sub">một ngày thật trọn vẹn</div>
        </div>

        {bySide.map(g => (
          <div key={g.key} className="ll-sched-group">
            <div className="ll-sched-group-head reveal">
              <span className="eyebrow">{g.eyebrow}</span>
              <h3>{g.label}</h3>
            </div>

            <div className="stagger" style={{
              display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
              gap: 24,
            }}>
              {g.items.map((ev, i) => (
                <div key={i} className={`card ${ev.featured ? 'card-gold' : ''}`} style={{ position: 'relative' }}>
                  <img src={`assets/icons/${ev.icon}.svg`} style={{
                    position: 'absolute', top: -24, right: -12, width: 56, height: 56,
                    transform: 'rotate(15deg)',
                  }}/>
                  <div style={{
                    fontFamily: 'var(--font-script)', fontSize: 40, color: 'var(--pink-600)',
                    lineHeight: 1, marginBottom: 4,
                  }}>{ev.time}</div>
                  <div className="eyebrow" style={{ marginBottom: 4 }}>{ev.subtitle}</div>
                  <h3 style={{
                    fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 28,
                    fontWeight: 400, margin: '0 0 12px', color: 'var(--ink-900)',
                  }}>{ev.title}</h3>
                  <div style={{ fontSize: 13, color: 'var(--fg-2)', marginBottom: 16, lineHeight: 1.5 }}>{ev.addr}</div>
                  <a href="#venue" style={{
                    fontFamily: 'var(--font-ui)', fontSize: 13, fontWeight: 600,
                    color: 'var(--pink-600)', textDecoration: 'none',
                  }}>Xem bản đồ →</a>
                </div>
              ))}
            </div>
          </div>
        ))}

        <div className="divider reveal" data-rv="fadein">❦ · With love · ❦</div>
      </div>
    </section>
  );
}

window.Schedule = Schedule;