/* global React, Eyebrow, Display, Lead, Diamond, Pill */

/* Section C — Future Pacing: "What your day looks like" */
function YourDay() {
  const moments = [
    { time: 'MORNING', title: 'You wake up', body: 'Your biggest decision is the playlist while you get ready. The garden is already being set.' },
    { time: 'ARRIVAL', title: 'You step into a furnished garden', body: 'Chairs are placed for ceremony. Tables, linens, place settings, and glassware are in their places.' },
    { time: 'CEREMONY', title: 'First look. Then vows.', body: 'Microphones are tested. The aisle is dressed. Yard games are out for guests between moments.' },
    { time: 'COCKTAILS', title: 'Bar is open', body: 'Your alcohol — chilled, stocked, staffed. Iced tea and lemonade for guests who want a quiet glass.' },
    { time: 'RECEPTION', title: 'Buffet served, warm and waiting', body: 'Brunch or dinner. Two-tier display cake on the table. Sheet cake and petit fours plated for the room.' },
    { time: 'LAST DANCE', title: 'You don\u2019t move a single chair', body: 'The DJ closes the night. Our team handles teardown. You walk out into the night, fully held.' },
  ];
  return (
    <section id="day" style={{ background: 'var(--hg-cream-100)', padding: '128px 48px' }}>
      <div style={{ maxWidth: 880, margin: '0 auto', textAlign: 'center' }}>
        <Eyebrow>Picture the day</Eyebrow>
        <div style={{ height: 22 }} />
        <Display size="h1">
          You don't check a single timeline.<br/>
          <em style={{ fontStyle: 'italic', color: 'var(--hg-sage-700)' }}>You walk a day already built for you.</em>
        </Display>
        <div style={{ height: 28 }} />
        <Lead style={{ margin: '0 auto' }}>
          Eleven hours of exclusive garden access. No flipping rooms in thirty minutes.
          No "where is the DJ?" panic. Just a day that arrives already in motion.
        </Lead>
      </div>

      <ol style={{
        listStyle: 'none', padding: 0, margin: '88px auto 0',
        maxWidth: 980,
        display: 'grid', gridTemplateColumns: '1fr', gap: 0,
      }}>
        {moments.map((m, i) => (
          <li key={m.time} style={{
            display: 'grid',
            gridTemplateColumns: '160px 32px 1fr',
            alignItems: 'flex-start', gap: 32,
            padding: '32px 0',
            borderTop: i === 0 ? '1px solid var(--hg-line)' : 'none',
            borderBottom: '1px solid var(--hg-line)',
          }}>
            <div style={{
              fontFamily: 'var(--hg-font-sans)', fontSize: 11, fontWeight: 500,
              textTransform: 'uppercase', letterSpacing: '0.24em',
              color: 'var(--hg-fg-muted)', paddingTop: 10,
            }}>{m.time}</div>
            <div style={{ paddingTop: 8, color: 'var(--hg-sage-700)', textAlign: 'center' }}>
              <Diamond size={16} />
            </div>
            <div>
              <h3 style={{
                fontFamily: 'var(--hg-font-display)', fontWeight: 400,
                fontSize: 32, lineHeight: 1.15, margin: '0 0 8px',
                color: 'var(--hg-fg)', letterSpacing: '-0.005em',
              }}>{m.title}</h3>
              <p style={{
                fontFamily: 'var(--hg-font-serif)', fontSize: 17.5, lineHeight: 1.6,
                color: 'var(--hg-fg-soft)', margin: 0, maxWidth: '60ch',
              }}>{m.body}</p>
            </div>
          </li>
        ))}
      </ol>

      <p style={{
        fontFamily: 'var(--hg-font-serif)', fontStyle: 'italic', fontWeight: 300,
        fontSize: 19, lineHeight: 1.55, color: 'var(--hg-fg-soft)',
        margin: '64px auto 0', maxWidth: '40ch', textAlign: 'center',
      }}>
        You don't direct a single vendor.<br/>
        You don't move a single chair.<br/>
        You just live inside the day.
      </p>
    </section>
  );
}

window.YourDay = YourDay;