// Section I: Guarantee + Section J: Pricing + Section K: CTA
function Guarantee() {
  return (
    <section id="guarantee" style={{
      position: 'relative',
      padding: '160px 56px 140px',
      background: '#0B0B0C',
      color: '#F6F1E6',
      overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `linear-gradient(rgba(11,11,12,.88),rgba(11,11,12,.96)), url('assets/hero-stage.jpeg')`,
        backgroundSize: 'cover', backgroundPosition: 'center',
      }} />
      <div style={{ maxWidth: 1100, margin: '0 auto', position: 'relative' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '260px 1fr', gap: 72, alignItems: 'start',
        }}>
          {/* Gold seal */}
          <div style={{ display: 'flex', justifyContent: 'center' }}>
            <div style={{
              width: 220, height: 220, borderRadius: '50%',
              border: '2px solid #C6A55C',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              position: 'relative',
              background: 'radial-gradient(circle, rgba(198,165,92,.15), transparent 70%)',
            }}>
              <div style={{
                position: 'absolute', inset: 10, borderRadius: '50%',
                border: '1px solid rgba(198,165,92,.4)',
              }} />
              <div style={{ textAlign: 'center', padding: 24 }}>
                <div style={{
                  fontFamily: 'Jost, sans-serif', fontSize: 9, letterSpacing: '0.32em',
                  textTransform: 'uppercase', color: '#E8C979', marginBottom: 8,
                }}>• The Ideal •</div>
                <div style={{
                  fontFamily: '"Playfair Display", serif', fontWeight: 500, fontStyle: 'italic',
                  fontSize: 32, color: '#F6F1E6', lineHeight: 1,
                }}>100%</div>
                <div style={{
                  fontFamily: '"Cormorant Garamond", serif', fontStyle: 'italic',
                  fontSize: 15, color: '#E8C979', margin: '6px 0',
                }}>on the line</div>
                <div style={{
                  fontFamily: 'Jost, sans-serif', fontSize: 9, letterSpacing: '0.32em',
                  textTransform: 'uppercase', color: '#E8C979',
                }}>Guarantee</div>
              </div>
            </div>
          </div>

          <div>
            <Kicker light>Chapter VIII · The Guarantee</Kicker>
            <h2 style={{
              fontFamily: '"Playfair Display", serif', fontWeight: 500,
              fontSize: 'clamp(36px, 4.2vw, 60px)', lineHeight: 1.06,
              color: '#F6F1E6', margin: '12px 0 0',
            }}>Best-Event-Or-Your-Next-Venue-<br/><em style={{ color: '#E8C979', fontStyle: 'italic' }}>Fee-Is-On-Us.</em></h2>
            <div style={{ width: 88, height: 2, background: '#C8102E', margin: '24px 0 28px' }} />
            <p style={{
              fontFamily: 'Lora, serif', fontSize: 17, lineHeight: 1.75,
              color: '#E0D4B6', margin: '0 0 18px', maxWidth: 640,
            }}>After your event, we help you send a one-question survey to attendees:</p>
            <div style={{
              padding: '24px 28px',
              border: '1px solid rgba(232,201,121,.45)',
              background: 'rgba(23,23,26,.6)',
              fontFamily: '"Cormorant Garamond", serif', fontStyle: 'italic',
              fontSize: 22, color: '#F6F1E6',
              margin: '0 0 28px',
            }}>“On a scale of 1–10, how would you rate the overall experience of this event?”</div>
            <p style={{
              fontFamily: 'Lora, serif', fontSize: 17, lineHeight: 1.75,
              color: '#E0D4B6', margin: '0 0 18px', maxWidth: 640,
            }}>If the average score comes in <span style={{ color: '#E8C979' }}>under 8/10</span> AND we missed on any promised inclusion, we will host your next company event with <span style={{ color: '#E8C979' }}>no venue rental fee.</span> You only cover bar and catering.</p>
            <p style={{
              fontFamily: 'Lora, serif', fontSize: 17, lineHeight: 1.75,
              color: '#E0D4B6', margin: 0, maxWidth: 640,
            }}>We tie our fee to your team’s experience, not vague promises. If we don’t deliver a night your people love, we put our own margin on the line.</p>

            {/* Sample survey results */}
            <div style={{
              marginTop: 40,
              padding: '24px 28px',
              background: 'rgba(11,11,12,.7)',
              border: '1px solid rgba(198,165,92,.3)',
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 16 }}>
                <span style={{
                  fontFamily: 'Jost, sans-serif', fontSize: 10, letterSpacing: '0.28em',
                  textTransform: 'uppercase', color: '#E8C979',
                }}>Last 6 events · Average attendee score</span>
                <span style={{
                  fontFamily: '"Playfair Display", serif', fontWeight: 500,
                  fontSize: 32, color: '#F6F1E6',
                }}>9.4<span style={{ fontSize: 18, color: '#8A8A93' }}>/10</span></span>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 8 }}>
                {[9.6, 9.2, 9.5, 8.9, 9.8, 9.4].map((s, i) => (
                  <div key={i}>
                    <div style={{
                      height: 60, background: 'rgba(198,165,92,.15)',
                      borderTop: '1px solid rgba(198,165,92,.3)',
                      position: 'relative',
                    }}>
                      <div style={{
                        position: 'absolute', bottom: 0, left: 0, right: 0,
                        height: `${(s / 10) * 100}%`,
                        background: 'linear-gradient(180deg, #E8C979, #C6A55C)',
                      }} />
                    </div>
                    <div style={{
                      textAlign: 'center', marginTop: 6,
                      fontFamily: 'Jost, sans-serif', fontSize: 11, color: '#E8C979',
                    }}>{s}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Guarantee = Guarantee;


function Pricing() {
  const piece = [
    ['Unique venue rental for an evening', '$2,500–$3,500'],
    ['Professional DJ or band', '$1,000–$1,500'],
    ['Concert-grade sound & lighting', '$1,000+'],
    ['Bar tab starter', '$1,300'],
    ['Red-carpet & branded backdrop', '$500+'],
    ['Run-of-show planning & production mgmt', '$1,000+'],
  ];
  return (
    <section style={{
      background: '#F6F1E6', color: '#0B0B0C',
      padding: '140px 56px 120px',
    }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 64 }}>
          <Kicker>Chapter IX · The Price</Kicker>
          <h2 style={{
            fontFamily: '"Playfair Display", serif', fontWeight: 500,
            fontSize: 'clamp(40px, 4.6vw, 72px)', lineHeight: 1.06,
            color: '#0B0B0C', margin: '12px auto 0', maxWidth: 860,
          }}>If you pieced it together yourself…<br/><em style={{ fontStyle: 'italic', color: '#9B7E3D' }}>you’d be north of $8,500.</em></h2>
          <div style={{ width: 88, height: 2, background: '#C8102E', margin: '28px auto 0' }} />
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1.15fr', gap: 24, alignItems: 'stretch',
        }}>
          {/* DIY column */}
          <div style={{ padding: '40px 44px', border: '1px solid rgba(11,11,12,.12)', background: '#FBF8EF' }}>
            <Kicker>Piece-by-piece (DIY)</Kicker>
            <h3 style={{
              fontFamily: '"Playfair Display", serif', fontWeight: 500, fontStyle: 'italic',
              fontSize: 30, margin: '6px 0 20px', color: '#50505A',
            }}>The old way.</h3>
            <div style={{ borderTop: '1px solid rgba(11,11,12,.1)' }}>
              {piece.map((r, i) => (
                <div key={i} style={{
                  display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
                  padding: '14px 0', borderBottom: '1px solid rgba(11,11,12,.1)',
                }}>
                  <span style={{ fontFamily: 'Lora, serif', fontSize: 15, color: '#50505A' }}>{r[0]}</span>
                  <span style={{
                    fontFamily: 'Jost, sans-serif', fontSize: 13, color: '#8A8A93',
                    letterSpacing: '0.06em',
                  }}>{r[1]}</span>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 22, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
              <span style={{
                fontFamily: 'Jost, sans-serif', fontSize: 10, letterSpacing: '0.28em',
                textTransform: 'uppercase', color: '#9B7E3D',
              }}>DIY total</span>
              <span style={{
                fontFamily: '"Playfair Display", serif', fontWeight: 500, fontSize: 36, color: '#8A8A93',
                textDecoration: 'line-through', textDecorationColor: 'rgba(200,16,46,.7)',
                textDecorationThickness: '2px',
              }}>$8,500+</span>
            </div>
            <p style={{
              fontFamily: '"Cormorant Garamond", serif', fontStyle: 'italic',
              fontSize: 16, color: '#8A8A93', margin: '14px 0 0',
            }}>…plus weeks of vendor coordination.</p>
          </div>

          {/* Grand slam column */}
          <div style={{
            padding: '40px 44px',
            background: '#0B0B0C', color: '#F6F1E6',
            border: '1px solid #C6A55C',
            position: 'relative',
          }}>
            <div style={{ position: 'absolute', top: -14, right: 32 }}>
              <Chip variant="crimson">Grand Slam Price · 2026</Chip>
            </div>
            <Kicker light>Executive Entertainment Night</Kicker>
            <h3 style={{
              fontFamily: '"Playfair Display", serif', fontWeight: 500, fontStyle: 'italic',
              fontSize: 30, margin: '6px 0 20px', color: '#F6F1E6',
            }}>The new way.</h3>

            <div style={{ display: 'flex', alignItems: 'baseline', gap: 18, margin: '0 0 8px' }}>
              <span style={{
                fontFamily: '"Playfair Display", serif', fontWeight: 500,
                fontSize: 'clamp(60px, 7vw, 108px)', lineHeight: 1, color: '#E8C979',
              }}>$6,000</span>
              <span style={{
                fontFamily: 'Jost, sans-serif', fontSize: 11, letterSpacing: '0.3em',
                textTransform: 'uppercase', color: '#C6A55C',
              }}>all-in</span>
            </div>
            <div style={{ width: 88, height: 2, background: '#C8102E', margin: '8px 0 24px' }} />

            <div style={{
              display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, margin: '0 0 24px',
            }}>
              <div style={{ padding: '16px 18px', border: '1px solid rgba(198,165,92,.3)' }}>
                <div style={{ fontFamily: 'Jost, sans-serif', fontSize: 10, letterSpacing: '0.28em', textTransform: 'uppercase', color: '#E8C979' }}>50%</div>
                <div style={{ fontFamily: '"Cormorant Garamond", serif', fontSize: 17, color: '#F6F1E6', marginTop: 4 }}>$3,000 to reserve your date</div>
              </div>
              <div style={{ padding: '16px 18px', border: '1px solid rgba(198,165,92,.3)' }}>
                <div style={{ fontFamily: 'Jost, sans-serif', fontSize: 10, letterSpacing: '0.28em', textTransform: 'uppercase', color: '#E8C979' }}>50%</div>
                <div style={{ fontFamily: '"Cormorant Garamond", serif', fontSize: 17, color: '#F6F1E6', marginTop: 4 }}>due 30 days pre-event</div>
              </div>
            </div>

            <div style={{
              padding: '18px 20px',
              background: 'rgba(198,165,92,.08)',
              border: '1px solid rgba(198,165,92,.3)',
              marginBottom: 24,
            }}>
              <div style={{
                fontFamily: 'Jost, sans-serif', fontSize: 10, letterSpacing: '0.28em',
                textTransform: 'uppercase', color: '#C6A55C', marginBottom: 12,
              }}>Effective per-head</div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                <div>
                  <div style={{ fontFamily: '"Playfair Display", serif', fontSize: 28, color: '#F6F1E6' }}>≈ $80<span style={{ fontSize: 14, color: '#8A8A93' }}> / head</span></div>
                  <div style={{ fontFamily: 'Lora, serif', fontSize: 13, color: '#B5B5BB' }}>at 75 guests</div>
                </div>
                <div>
                  <div style={{ fontFamily: '"Playfair Display", serif', fontSize: 28, color: '#F6F1E6' }}>≈ $60<span style={{ fontSize: 14, color: '#8A8A93' }}> / head</span></div>
                  <div style={{ fontFamily: 'Lora, serif', fontSize: 13, color: '#B5B5BB' }}>at 100 guests</div>
                </div>
              </div>
            </div>

            <p style={{
              fontFamily: '"Cormorant Garamond", serif', fontStyle: 'italic',
              fontSize: 17, lineHeight: 1.5, color: '#EDE5D1', margin: '0 0 20px',
            }}>For roughly what SMBs already budget for a generic hotel party, you get the only concert-grade corporate night in Eastern Iowa.</p>

            {/* Inventory meter */}
            <div style={{
              borderTop: '1px solid rgba(198,165,92,.25)',
              paddingTop: 18,
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
                <span style={{
                  fontFamily: 'Jost, sans-serif', fontSize: 10, letterSpacing: '0.28em',
                  textTransform: 'uppercase', color: '#C8102E',
                }}>2026 Season Inventory</span>
                <span style={{
                  fontFamily: 'Jost, sans-serif', fontSize: 10, letterSpacing: '0.28em',
                  textTransform: 'uppercase', color: '#E8C979',
                }}>2 of 5 remaining</span>
              </div>
              <div style={{ display: 'flex', gap: 6 }}>
                {[1,2,3,4,5].map(i => (
                  <div key={i} style={{
                    flex: 1, height: 8,
                    background: i <= 3 ? 'rgba(138,138,147,.3)' : '#C6A55C',
                    border: '1px solid rgba(198,165,92,.4)',
                  }} />
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Pricing = Pricing;


function CTA() {
  React.useEffect(() => {
    if (document.getElementById('omg-booking-embed-script')) return;
    const s = document.createElement('script');
    s.src = 'https://links.omg-rentals.com/js/form_embed.js';
    s.id = 'omg-booking-embed-script';
    s.async = true;
    document.body.appendChild(s);
  }, []);

  return (
    <section id="cta" style={{
      position: 'relative',
      padding: '140px 56px 140px',
      background: `linear-gradient(rgba(11,11,12,.78),rgba(11,11,12,.92)), url('assets/glitter-swirl.jpg')`,
      backgroundSize: 'cover', backgroundPosition: 'center',
      color: '#F6F1E6',
    }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <Kicker light>Chapter X · Book your walk-through</Kicker>
          <h2 style={{
            fontFamily: '"Playfair Display", serif', fontWeight: 500,
            fontSize: 'clamp(40px, 4.8vw, 72px)', lineHeight: 1.06,
            color: '#F6F1E6', margin: '12px auto 0', maxWidth: 880,
          }}>Pick a time<br/><em style={{ color: '#E8C979', fontStyle: 'italic' }}>to tour the theater.</em></h2>
          <div style={{ width: 88, height: 2, background: '#C8102E', margin: '28px auto 0' }} />
          <p style={{
            fontFamily: '"Cormorant Garamond", serif', fontStyle: 'italic',
            fontSize: 22, lineHeight: 1.5, color: '#E0D4B6',
            margin: '28px auto 0', maxWidth: 640,
          }}>15 minutes on-site. We'll walk you through the venue, talk through your date, headcount, and budget, and answer anything you want to ask.</p>
        </div>

        <div style={{
          background: '#F6F1E6',
          padding: 8,
          border: '1px solid rgba(232,201,121,.4)',
          boxShadow: '0 24px 80px rgba(0,0,0,0.55)',
        }}>
          <iframe
            src="https://links.omg-rentals.com/widget/booking/sg7YmMBAzwZRu0QkXt2a"
            id="sg7YmMBAzwZRu0QkXt2a_1777853705044"
            scrolling="no"
            style={{ width: '100%', minHeight: 720, border: 'none', overflow: 'hidden', display: 'block' }}
          />
        </div>

        <div style={{
          display: 'flex', justifyContent: 'center', gap: 28, flexWrap: 'wrap',
          marginTop: 32,
          fontFamily: 'Jost, sans-serif', fontSize: 10,
          letterSpacing: '0.24em', textTransform: 'uppercase', color: '#8A8A93',
        }}>
          <span>15-minute walk-through</span>
          <span>·</span>
          <span>No payment required</span>
          <span>·</span>
          <span>5 dates per 2026 season</span>
        </div>
      </div>
    </section>
  );
}
window.CTA = CTA;