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

/* Section C — Future pacing: "what the day actually feels like" */
function YourDay() {
  const moments = [
  { time: 'THE MORNING OF', title: 'You get ready slowly, with coffee', body: 'No car to load with vases and folding chairs. You arrive at Himaya Garden like a guest at your own party.' },
  { time: 'ARRIVAL', title: 'You walk into a finished tea house', body: 'Linens pressed. The tablescape set in your colors. Dragonfly Tea Cakes and Maya tea waiting. Your Tea Host greets you with the day already mapped.' },
  { time: 'THE WELCOME', title: 'Your guests go quiet \u2014 the good kind', body: 'The kind of quiet that means she really did this. They find their seats, and the afternoon begins exactly on time.' },
  { time: 'TWO HOURS', title: 'You do exactly one job: be present', body: 'Laugh. Sit. Pour. Take the photo. Hug the people you love. Your Tea Host runs the timeline so you never have to glance at a clock.' },
  { time: 'THE SEND-OFF', title: 'Every guest leaves with a keepsake', body: 'A branded Dragonfly favor in every hand, a styled photo moment captured, a group text already forming.' },
  { time: 'AFTER', title: 'You leave. No teardown.', body: 'No car full of dishes. Just a phone full of pictures and a message that starts with \u201cthat was the most beautiful thing I\u2019ve ever been to.\u201d' }];

  return (
    <section id="afternoon" data-screen-label="The Afternoon" style={{ background: 'var(--hg-cream-100)', padding: "60px 48px 128px" }}>
      <div style={{ maxWidth: 880, margin: '0 auto', textAlign: 'center' }}>
        <Eyebrow>Picture the morning of</Eyebrow>
        <div style={{ height: 22 }} />
        <Display size="h1">
          You don&rsquo;t run the day.<br />
          <em style={{ fontStyle: 'italic', color: 'var(--hg-sage-700)' }}>You get to live inside it.</em>
        </Display>
        <div style={{ height: 28 }} />
        <Lead style={{ margin: '0 auto' }}>
          No flipping a room in thirty minutes. No &ldquo;where is the food?&rdquo; panic.
          Just an afternoon that arrives already in motion &mdash; and asks nothing of you but to enjoy it.
        </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: '190px 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: '42ch', textAlign: 'center'
      }}>
        You don&rsquo;t direct a single vendor.<br />
        You don&rsquo;t carry a single tray.<br />
        You just live inside the afternoon.
      </p>
    </section>);

}

window.YourDay = YourDay;