// Section B: Pattern interrupt / call-out
function PatternInterrupt() {
  return (
    <section style={{
      background: '#0B0B0C', color: '#F6F1E6',
      padding: '140px 56px 120px',
      position: 'relative',
    }}>
      <div style={{ maxWidth: 1080, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '200px 1fr', gap: 48, alignItems: 'start' }}>
          <div>
            <Kicker light>Chapter I</Kicker>
            <div style={{
              fontFamily: '"Playfair Display", serif', fontStyle: 'italic',
              fontWeight: 500, fontSize: 64, color: '#C6A55C', lineHeight: 1,
              marginTop: 6,
            }}>01</div>
            <div style={{ width: 56, height: 2, background: '#C8102E', margin: '20px 0' }} />
            <div style={{
              fontFamily: 'Jost, sans-serif', fontSize: 11,
              letterSpacing: '0.24em', textTransform: 'uppercase', color: '#8A8A93',
            }}>The pressure<br/>is on you.</div>
          </div>
          <div>
            <p style={{
              fontFamily: '"Cormorant Garamond", serif', fontWeight: 400,
              fontSize: 'clamp(26px, 2.3vw, 36px)', lineHeight: 1.35, color: '#F6F1E6',
              margin: 0, maxWidth: 760,
            }}>
              If you’re in charge of the holiday party or year-end event, <span style={{ color: '#E8C979', fontStyle: 'italic' }}>you’re under pressure.</span>
            </p>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32, margin: '48px 0 40px' }}>
              <div style={{ padding: 28, border: '1px solid rgba(198,165,92,.25)', background: 'rgba(23,23,26,.6)' }}>
                <div style={{
                  fontFamily: 'Jost, sans-serif', fontSize: 10, letterSpacing: '0.28em',
                  textTransform: 'uppercase', color: '#8A8A93', marginBottom: 10,
                }}>Blow it</div>
                <div style={{
                  fontFamily: '"Playfair Display", serif', fontStyle: 'italic',
                  fontWeight: 400, fontSize: 24, color: '#B5B5BB', lineHeight: 1.3,
                }}>“Meh. Same as last year.”</div>
              </div>
              <div style={{ padding: 28, border: '1px solid rgba(232,201,121,.5)', background: 'linear-gradient(180deg, rgba(198,165,92,.06), transparent)' }}>
                <div style={{
                  fontFamily: 'Jost, sans-serif', fontSize: 10, letterSpacing: '0.28em',
                  textTransform: 'uppercase', color: '#E8C979', marginBottom: 10,
                }}>Nail it</div>
                <div style={{
                  fontFamily: '"Playfair Display", serif', fontStyle: 'italic',
                  fontWeight: 500, fontSize: 24, color: '#F6F1E6', lineHeight: 1.3,
                }}>Everyone talks for months.<br/><span style={{ color: '#E8C979' }}>You’re the hero.</span></div>
              </div>
            </div>

            <p style={{
              fontFamily: 'Lora, serif', fontSize: 17, lineHeight: 1.75,
              color: '#E0D4B6', maxWidth: 640, margin: '0 0 18px',
            }}>
              The problem? Most options in Eastern Iowa give you the same choice: a beige ballroom, okay food, a sad speaker in the corner, and a bill that feels way too high for how forgettable the night was.
            </p>
            <p style={{
              fontFamily: 'Lora, serif', fontSize: 17, lineHeight: 1.75,
              color: '#E0D4B6', maxWidth: 640, margin: 0,
            }}>
              <span style={{ color: '#E8C979' }}>Executive Entertainment Night</span> is built to fix that in one move — a private, concert-grade corporate takeover of a 1914 music theater in downtown Cedar Rapids, for about what you’re already budgeting.
            </p>
          </div>
        </div>

        {/* Venue proof: two images side by side */}
        <div style={{
          marginTop: 80,
          display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 16,
        }}>
          <div style={{ position: 'relative', height: 420, overflow: 'hidden' }}>
            <img src="assets/venue-crowd.jpg" style={{
              width: '100%', height: '100%', objectFit: 'cover', display: 'block',
            }} />
            <div style={{
              position: 'absolute', left: 20, bottom: 16,
              fontFamily: 'Jost, sans-serif', fontSize: 10,
              letterSpacing: '0.28em', textTransform: 'uppercase', color: '#E8C979',
              background: 'rgba(11,11,12,.65)', padding: '8px 14px',
              border: '1px solid rgba(232,201,121,.4)',
            }}>The Main Floor · 175 guests</div>
          </div>
          <div style={{ position: 'relative', height: 420, overflow: 'hidden' }}>
            <img src="assets/venue-ceiling.jpg" style={{
              width: '100%', height: '100%', objectFit: 'cover', display: 'block',
            }} />
            <div style={{
              position: 'absolute', left: 20, bottom: 16,
              fontFamily: 'Jost, sans-serif', fontSize: 10,
              letterSpacing: '0.28em', textTransform: 'uppercase', color: '#E8C979',
              background: 'rgba(11,11,12,.65)', padding: '8px 14px',
              border: '1px solid rgba(232,201,121,.4)',
            }}>Restored Gilded Ceiling</div>
          </div>
        </div>

        {/* Logo strip — placeholder client logos */}
        <div style={{ marginTop: 64 }}>
          <div style={{
            fontFamily: 'Jost, sans-serif', fontSize: 10, letterSpacing: '0.32em',
            textTransform: 'uppercase', color: '#8A8A93', textAlign: 'center',
            marginBottom: 22,
          }}>Trusted by teams across Eastern Iowa</div>
          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 24,
            opacity: 0.7, alignItems: 'center',
            borderTop: '1px solid rgba(198,165,92,.18)',
            borderBottom: '1px solid rgba(198,165,92,.18)',
            padding: '28px 12px',
          }}>
            {[
              ['HAWTHORNE', 'ENGINEERING'],
              ['KIRKWOOD', 'CO.'],
              ['MCKINLEY', '& FIELD'],
              ['ROCKWELL', 'DYNAMICS'],
              ['CEDAR', 'NORTHWEST'],
              ['PINNACLE', 'HEALTH'],
            ].map(([a, b], i) => (
              <div key={i} style={{ textAlign: 'center' }}>
                <div style={{
                  fontFamily: '"Playfair Display", serif', fontWeight: 500, fontSize: 17,
                  letterSpacing: '0.05em', color: '#E8C979', lineHeight: 1,
                }}>{a}</div>
                <div style={{
                  fontFamily: 'Jost, sans-serif', fontSize: 9, letterSpacing: '0.28em',
                  color: '#8A8A93', marginTop: 4,
                }}>{b}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
window.PatternInterrupt = PatternInterrupt;