// Section C: Future pacing — "Picture this"
function FuturePacing() {
  const beats = [
    {
      time: '7:45 PM',
      label: 'Arrival',
      title: 'The marquee is lit.',
      body: 'Your team walks up to a lit-up historic marquee downtown. They step onto a red carpet, snap photos in front of a branded step-and-repeat, and head inside a real 1914 music theater that feels like a concert stop — not a conference room.',
      img: 'assets/venue-crowd.jpg',
    },
    {
      time: '8:05 PM',
      label: 'The Bar',
      title: 'The first round is already on you.',
      body: <>The bar’s open. Your <span style={{ color: '#E8C979' }}>$1,300 bar credit</span> is already loaded. No awkward “who’s paying” tab at the end of the night, no fumbling with drink tickets.</>,
      img: 'assets/bar-scene.jpg',
    },
    {
      time: '8:30 PM',
      label: 'The Show',
      title: 'Walk-on music. Haze. Full concert sound.',
      body: 'Your DJ, acoustic act, or band cues up under full concert sound and lighting. Color washes fill the room. It feels like your team just walked backstage with an artist.',
      img: 'assets/venue-ceiling.jpg',
    },
    {
      time: '9:15 PM',
      label: 'You',
      title: 'You’re not running around.',
      body: 'Your run-of-show is dialed. The timeline, intros, mic moments, and big announcement are already laid out from your pre-event design session. You actually get to enjoy the night.',
      img: 'assets/service.jpeg',
    },
    {
      time: 'MONDAY · 9:02 AM',
      label: 'Monday',
      title: 'The Slack channel is full of photos.',
      body: <>You’re getting “<em style={{ color: '#E8C979', fontStyle: 'italic' }}>that was the best event we’ve ever done</em>” from people who usually roll their eyes at corporate parties. Your boss? Already asking to lock the same thing in for next year.</>,
      img: 'assets/rentals.jpeg',
    },
  ];

  return (
    <section id="future" style={{
      background: '#F6F1E6', color: '#0B0B0C',
      padding: '140px 56px 120px',
    }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 80 }}>
          <Kicker>Chapter II · Picture this</Kicker>
          <h2 style={{
            fontFamily: '"Playfair Display", serif', fontWeight: 500,
            fontSize: 'clamp(40px, 4.6vw, 72px)', lineHeight: 1.06,
            letterSpacing: '-0.01em', color: '#0B0B0C',
            margin: '12px auto 0', maxWidth: 880,
          }}>What your night<br/><em style={{ fontStyle: 'italic', color: '#9B7E3D' }}>actually looks like.</em></h2>
          <div style={{ width: 88, height: 2, background: '#C8102E', margin: '28px auto 0' }} />
        </div>

        {/* Timeline */}
        <div style={{ position: 'relative' }}>
          <div style={{
            position: 'absolute', left: '50%', top: 0, bottom: 0,
            width: 1, background: 'rgba(198,165,92,.45)',
            transform: 'translateX(-0.5px)',
          }} />
          {beats.map((b, i) => {
            const left = i % 2 === 0;
            return (
              <div key={i} style={{
                display: 'grid', gridTemplateColumns: '1fr 56px 1fr',
                alignItems: 'center', gap: 0, marginBottom: 72, position: 'relative',
              }}>
                {/* Left column */}
                <div style={{ paddingRight: 44, textAlign: 'right', opacity: left ? 1 : 0 }}>
                  {left && (
                    <>
                      <div style={{
                        fontFamily: 'Jost, sans-serif', fontSize: 10, letterSpacing: '0.3em',
                        textTransform: 'uppercase', color: '#9B7E3D', marginBottom: 10,
                      }}>{b.label} · {b.time}</div>
                      <h3 style={{
                        fontFamily: '"Playfair Display", serif', fontWeight: 500,
                        fontSize: 32, lineHeight: 1.15, color: '#0B0B0C', margin: 0,
                      }}>{b.title}</h3>
                      <div style={{ width: 48, height: 2, background: '#C8102E', marginLeft: 'auto', marginTop: 16, marginBottom: 14 }} />
                      <p style={{
                        fontFamily: 'Lora, serif', fontSize: 16, lineHeight: 1.7,
                        color: '#50505A', margin: '0 0 0 auto', maxWidth: 420,
                      }}>{b.body}</p>
                    </>
                  )}
                </div>
                {/* Dot */}
                <div style={{ display: 'flex', justifyContent: 'center' }}>
                  <div style={{
                    width: 14, height: 14, borderRadius: '50%',
                    background: '#C6A55C',
                    boxShadow: '0 0 0 5px #F6F1E6, 0 0 0 6px rgba(198,165,92,.5)',
                  }} />
                </div>
                {/* Right column */}
                <div style={{ paddingLeft: 44 }}>
                  {!left ? (
                    <>
                      <div style={{
                        fontFamily: 'Jost, sans-serif', fontSize: 10, letterSpacing: '0.3em',
                        textTransform: 'uppercase', color: '#9B7E3D', marginBottom: 10,
                      }}>{b.label} · {b.time}</div>
                      <h3 style={{
                        fontFamily: '"Playfair Display", serif', fontWeight: 500,
                        fontSize: 32, lineHeight: 1.15, color: '#0B0B0C', margin: 0,
                      }}>{b.title}</h3>
                      <div style={{ width: 48, height: 2, background: '#C8102E', marginTop: 16, marginBottom: 14 }} />
                      <p style={{
                        fontFamily: 'Lora, serif', fontSize: 16, lineHeight: 1.7,
                        color: '#50505A', margin: 0, maxWidth: 420,
                      }}>{b.body}</p>
                    </>
                  ) : (
                    <div style={{ width: '100%', height: 260, overflow: 'hidden' }}>
                      <img src={b.img} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
                    </div>
                  )}
                </div>
                {/* Image on left side for odd rows */}
                {left && (
                  <div style={{
                    position: 'absolute', right: 'calc(50% + 28px)',
                    top: 0, bottom: 0, width: 'calc(50% - 88px)',
                    display: 'none',
                  }}></div>
                )}
              </div>
            );
          })}
        </div>

        {/* Testimonial insert */}
        <div style={{
          marginTop: 40,
          padding: '64px 56px',
          background: '#0B0B0C', color: '#F6F1E6',
          position: 'relative',
          textAlign: 'center',
        }}>
          <div style={{
            fontFamily: '"Playfair Display", serif', fontWeight: 500,
            fontSize: 80, color: '#C6A55C', lineHeight: 1, marginBottom: -30,
          }}>“</div>
          <p style={{
            fontFamily: '"Playfair Display", serif', fontStyle: 'italic',
            fontWeight: 400, fontSize: 'clamp(24px, 2.2vw, 34px)', lineHeight: 1.4,
            color: '#F6F1E6', margin: '0 auto', maxWidth: 760,
          }}>That was the best event we’ve ever done. Our team is still talking about it — and leadership already asked if we can run it back next year.</p>
          <div style={{ width: 48, height: 2, background: '#C8102E', margin: '28px auto' }} />
          <div style={{
            fontFamily: 'Jost, sans-serif', fontSize: 11, letterSpacing: '0.3em',
            textTransform: 'uppercase', color: '#E8C979',
          }}>Mara L. · People Ops · Rockwell Dynamics</div>
        </div>
      </div>
    </section>
  );
}
window.FuturePacing = FuturePacing;