// Schedule page

function PageSchedule({ content }) {
  const schedule = content.schedule;
  return (
    <main className="page-enter">
      <header className="page-head">
        <window.PalmLeaf size={260} color="var(--fern)" animated style={{ position: 'absolute', top: -80, right: -100, transform: 'scaleX(-1) rotate(-15deg)', opacity: 0.4 }} />
        <window.JacarandaSprig size={160} color="#9b7fb8" animated style={{ position: 'absolute', top: -10, left: '12%', opacity: 0.6 }} />
        <div className="container">
          <span className="eyebrow">{schedule.eyebrow}</span>
          <h1 className="h2" style={{ marginTop: 22 }}>{schedule.titleLine}<br/><i>{schedule.titleEmphasis}</i></h1>
        </div>
        <window.LeafSpray size={180} color="var(--fern)" style={{ position: 'absolute', top: 30, right: 80, transform: 'rotate(20deg)', opacity: 0.55 }} />
      </header>

      <window.PhotoBand src={window.imgUrl(schedule.photoBandKey, 2400)} height={300} caption={schedule.photoBandCaption} scrim="bottom" />

      <section className="container">
        <div className="schedule-grid">
          {schedule.days.map((day) => (
            <DayCard key={`${day.day}-${day.date}`} {...day} />
          ))}
        </div>

        <div className="dress">
          <div>
            <span className="label">{schedule.dressLabel}</span>
            <h2 className="h3" style={{ marginTop: 14, fontStyle: 'italic' }}>{schedule.dressTitle}</h2>
          </div>
          <div className="body" style={{ fontSize: 16, maxWidth: 620 }}>
            {window.textLines(schedule.dressBody)}
          </div>
        </div>
      </section>
    </main>
  );
}

function DayCard({ day, date, label, feature, items }) {
  return (
    <div className={"day-card" + (feature ? " feature" : "")}>
      <div className="day-mark">
        <h3>{day}</h3>
        <span className="label">{date}</span>
      </div>
      <span className="label">{label}</span>
      <div style={{ marginTop: 'auto' }}>
        {items.map((item, i) => (
          <div className="timeline-item" key={i}>
            <span className="t">{item.time}</span>
            <div>
              <div className="e">{item.event}</div>
              <div className="w">{item.where}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

window.PageSchedule = PageSchedule;