// Section B: Pattern interrupt / call-out
function PatternInterrupt() {
  const isMobile = useBreakpoint();

  return (
    <section style={{
      background: '#0B0B0C', color: '#F6F1E6',
      padding: isMobile ? '72px 20px 60px' : '140px 56px 120px',
      position: 'relative',
    }}>
      <div style={{ maxWidth: 1080, margin: '0 auto' }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '200px 1fr',
          gap: isMobile ? 24 : 48, alignItems: 'start',
        }}>
          <div>
            <Kicker light>Chapter I</Kicker>
            <div style={{
              fontFamily: '"Playfair Display", serif', fontStyle: 'italic',
              fontWeight: 500, fontSize: isMobile ? 48 : 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(22px, 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: isMobile ? 16 : 32, margin: '40px 0',
            }}>
              <div style={{ padding: isMobile ? 20 : 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: isMobile ? 18 : 24, color: '#B5B5BB', lineHeight: 1.3,
                }}>"Meh. Same as last year."</div>
              </div>
              <div style={{ padding: isMobile ? 20 : 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: isMobile ? 18 : 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 */}
        <div style={{
          marginTop: isMobile ? 48 : 80,
          display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '2fr 1fr',
          gap: 16,
        }}>
          <div style={{ position: 'relative', height: isMobile ? 240 : 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: isMobile ? 180 : 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>

      </div>
    </section>
  );
}
window.PatternInterrupt = PatternInterrupt;