// Section C: Future pacing — "Picture this"
function FuturePacing() {
  const isMobile = useBreakpoint();

  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,500 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: isMobile ? '72px 20px 60px' : '140px 56px 120px',
    }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: isMobile ? 48 : 80 }}>
          <Kicker>Chapter II · Picture this</Kicker>
          <h2 style={{
            fontFamily: '"Playfair Display", serif', fontWeight: 500,
            fontSize: 'clamp(36px, 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>

        {isMobile ? (
          // Mobile: vertical stacked timeline
          <div style={{ position: 'relative', paddingLeft: 28 }}>
            <div style={{
              position: 'absolute', left: 8, top: 8, bottom: 8,
              width: 1, background: 'rgba(155,126,61,.5)',
            }} />
            {beats.map((b, i) => (
              <div key={i} style={{ marginBottom: 44, position: 'relative' }}>
                <div style={{
                  position: 'absolute', left: -24, top: 4,
                  width: 12, height: 12, borderRadius: '50%',
                  background: '#C6A55C',
                  boxShadow: '0 0 0 4px #F6F1E6, 0 0 0 5px rgba(198,165,92,.4)',
                }} />
                <div style={{
                  fontFamily: 'Jost, sans-serif', fontSize: 10, letterSpacing: '0.3em',
                  textTransform: 'uppercase', color: '#9B7E3D', marginBottom: 8,
                }}>{b.label} · {b.time}</div>
                <h3 style={{
                  fontFamily: '"Playfair Display", serif', fontWeight: 500,
                  fontSize: 24, lineHeight: 1.15, color: '#0B0B0C', margin: 0,
                }}>{b.title}</h3>
                <div style={{ width: 36, height: 2, background: '#C8102E', marginTop: 12, marginBottom: 12 }} />
                <p style={{
                  fontFamily: 'Lora, serif', fontSize: 15, lineHeight: 1.7,
                  color: '#50505A', margin: '0 0 16px',
                }}>{b.body}</p>
                <div style={{ height: 180, overflow: 'hidden' }}>
                  <img src={b.img} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
                </div>
              </div>
            ))}
          </div>
        ) : (
          // Desktop: alternating left/right 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>
                </div>
              );
            })}
          </div>
        )}

        {/* Testimonial insert */}
        <div style={{
          marginTop: 40,
          padding: isMobile ? '40px 20px' : '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(20px, 2.2vw, 34px)', lineHeight: 1.4,
            color: '#F6F1E6', margin: '0 auto', maxWidth: 760,
          }}>Incredible venue! The rotating cocktail list is fantastic and surprisingly creative. Even when the bar is busy, the bartenders are quick to serve. Probably the best venue for small bands I've been to.</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',
          }}>Matt Baskerville · Google Review</div>
        </div>
      </div>
    </section>
  );
}
window.FuturePacing = FuturePacing;