// Section G: Offer / Value Stack
const STACK = [
  { title: 'Private full-venue buyout, 4 PM–1 AM', sub: 'Up to 175 guests. Exclusive use of a historic 1914 music theater in downtown Cedar Rapids.', value: 3000 },
  { title: 'Pro staff, security, coat check, setup & teardown', sub: 'You arrive to a ready-to-go space and leave without lifting a finger.', value: 750 },
  { title: '$1,300 bar credit', sub: 'Applied directly to your bar tab so the first round(s) are already on you.', value: 1300 },
  { title: 'In-house concert sound & lighting + engineer', sub: 'No renting gear or dealing with third-party AV.', value: 1000 },
  { title: 'One 60-minute live entertainment set', sub: 'DJ, acoustic, or band — curated to fit your crowd and event goals.', value: 1500 },
  { title: 'Concert-grade production pack', sub: 'Lighting design, haze, intros/exits, walk-on music, and cues.', value: 1000 },
  { title: 'Red-carpet arrival + branded step-and-repeat', sub: 'Instagram-ready photo ops from the moment people walk in.', value: 500 },
  { title: 'Run-Of-Show design session with the owner', sub: '7 days prior. We co-build your agenda, timing, talking points, and tech cues.', value: 750 },
  { title: 'Simple Event Blueprint', sub: 'Plug-and-play run-of-show template plus internal invite email for your team.', value: 450 },
];

function Offer() {
  const total = STACK.reduce((s, i) => s + i.value, 0);
  return (
    <section id="offer" style={{
      background: '#0B0B0C', color: '#F6F1E6',
      padding: '140px 56px 120px',
    }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 72 }}>
          <Kicker light>Chapter VI · The Offer</Kicker>
          <h2 style={{
            fontFamily: '"Playfair Display", serif', fontWeight: 500,
            fontSize: 'clamp(40px, 4.6vw, 72px)', lineHeight: 1.06,
            color: '#F6F1E6', margin: '12px auto 0', maxWidth: 900,
          }}>Everything included in<br/><em style={{ color: '#E8C979', fontStyle: 'italic' }}>one turnkey package.</em></h2>
          <div style={{ width: 88, height: 2, background: '#C8102E', margin: '28px auto 0' }} />
        </div>

        {/* Marquee header */}
        <Marquee
          style={{ marginBottom: 0 }}
          text={<>
            <div style={{
              fontFamily: 'Jost, sans-serif', fontSize: 10, letterSpacing: '0.32em',
              textTransform: 'uppercase', color: '#E8C979', marginBottom: 8,
            }}>Now Playing</div>
            <div style={{
              fontFamily: '"Playfair Display", serif', fontWeight: 500, fontStyle: 'italic',
              fontSize: 'clamp(28px, 3vw, 40px)', color: '#F6F1E6', lineHeight: 1.1,
            }}>Executive Entertainment Night</div>
            <div style={{
              fontFamily: 'Jost, sans-serif', fontSize: 11, letterSpacing: '0.28em',
              textTransform: 'uppercase', color: '#C6A55C', marginTop: 10,
            }}>Concert-Grade Corporate Takeover</div>
          </>}
        />

        {/* Value stack table */}
        <div style={{
          marginTop: 48,
          border: '1px solid rgba(198,165,92,.3)',
          background: 'rgba(23,23,26,.5)',
        }}>
          {STACK.map((item, i) => (
            <div key={i} style={{
              display: 'grid', gridTemplateColumns: '64px 1fr 180px',
              alignItems: 'center', gap: 28,
              padding: '26px 32px',
              borderBottom: i < STACK.length - 1 ? '1px solid rgba(198,165,92,.18)' : 'none',
            }}>
              <div style={{
                fontFamily: '"Playfair Display", serif', fontStyle: 'italic',
                fontWeight: 500, fontSize: 26, color: '#C6A55C', lineHeight: 1,
              }}>{String(i + 1).padStart(2, '0')}</div>
              <div>
                <h4 style={{
                  fontFamily: '"Cormorant Garamond", serif', fontWeight: 600,
                  fontSize: 21, lineHeight: 1.25, color: '#F6F1E6', margin: 0,
                }}>{item.title}</h4>
                <p style={{
                  fontFamily: 'Lora, serif', fontSize: 14, lineHeight: 1.6,
                  color: '#B5B5BB', margin: '6px 0 0', maxWidth: 680,
                }}>{item.sub}</p>
              </div>
              <div style={{
                textAlign: 'right',
                fontFamily: 'Jost, sans-serif', fontSize: 10, letterSpacing: '0.28em',
                textTransform: 'uppercase', color: '#8A8A93',
              }}>
                Retail value
                <div style={{
                  fontFamily: '"Playfair Display", serif', fontWeight: 500,
                  fontSize: 24, color: '#E8C979', letterSpacing: 0,
                  textTransform: 'none', marginTop: 4,
                }}>${item.value.toLocaleString()}</div>
              </div>
            </div>
          ))}
          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 180px',
            padding: '26px 32px',
            background: '#17171A',
            borderTop: '2px solid #C6A55C',
          }}>
            <div style={{
              fontFamily: '"Playfair Display", serif', fontStyle: 'italic',
              fontWeight: 500, fontSize: 22, color: '#F6F1E6',
            }}>Total real-world value if bought separately</div>
            <div style={{
              textAlign: 'right',
              fontFamily: '"Playfair Display", serif', fontWeight: 600,
              fontSize: 32, color: '#E8C979',
            }}>${total.toLocaleString()}</div>
          </div>
        </div>

        {/* Proof row — run-of-show + testimonial */}
        <div style={{
          marginTop: 72,
          display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 32,
        }}>
          {/* Sample run-of-show */}
          <div style={{
            background: '#FBF8EF', color: '#0B0B0C',
            padding: '36px 40px',
            border: '1px solid rgba(198,165,92,.35)',
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
              <Kicker>Sample run-of-show</Kicker>
              <span style={{
                fontFamily: 'Jost, sans-serif', fontSize: 9, letterSpacing: '0.28em',
                textTransform: 'uppercase', color: '#9B7E3D',
              }}>v.2026.01 · PDF</span>
            </div>
            <h4 style={{
              fontFamily: '"Playfair Display", serif', fontWeight: 500,
              fontSize: 22, margin: 0, color: '#0B0B0C',
            }}>Rockwell Dynamics · Year-End 2026</h4>
            <div style={{ width: 40, height: 2, background: '#C8102E', margin: '12px 0 18px' }} />
            <table style={{ width: '100%', borderCollapse: 'collapse', fontFamily: 'Lora, serif', fontSize: 14 }}>
              <tbody>
                {[
                  ['7:30 PM', 'Doors / Red carpet', 'Photog active · Walk-in playlist A'],
                  ['7:55 PM', 'Bar opens, $1,300 credit live', 'House mix 65%'],
                  ['8:30 PM', 'CEO welcome + awards', 'Mic 1 · Spot wash · Cue 4'],
                  ['9:00 PM', 'Live set · Saturn & Brass', '60-min · Color wash · Haze'],
                  ['10:00 PM', 'DJ handoff', 'Open dance · Bar refresh'],
                  ['12:45 AM', 'Last call', 'Cue 12 · Fade'],
                ].map((r, i) => (
                  <tr key={i} style={{ borderTop: '1px solid rgba(11,11,12,.1)' }}>
                    <td style={{ padding: '10px 0', color: '#9B7E3D', fontFamily: 'Jost, sans-serif', fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase', width: 90 }}>{r[0]}</td>
                    <td style={{ padding: '10px 12px', color: '#0B0B0C', fontWeight: 500 }}>{r[1]}</td>
                    <td style={{ padding: '10px 0', color: '#50505A', fontSize: 13 }}>{r[2]}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          {/* Testimonial */}
          <div style={{
            padding: '36px 40px',
            border: '1px solid rgba(198,165,92,.35)',
            background: 'rgba(198,165,92,.05)',
            display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
          }}>
            <div>
              <div style={{
                fontFamily: '"Playfair Display", serif', fontWeight: 500,
                fontSize: 64, color: '#C6A55C', lineHeight: 1, marginBottom: -28,
              }}>“</div>
              <p style={{
                fontFamily: '"Cormorant Garamond", serif', fontStyle: 'italic',
                fontWeight: 400, fontSize: 24, lineHeight: 1.45,
                color: '#F6F1E6', margin: 0,
              }}>The easiest event I’ve ever planned. One contract, one point of contact, and a night our team won’t stop talking about.</p>
            </div>
            <div style={{ marginTop: 24, paddingTop: 24, borderTop: '1px solid rgba(198,165,92,.3)' }}>
              <div style={{
                fontFamily: 'Jost, sans-serif', fontSize: 11, letterSpacing: '0.3em',
                textTransform: 'uppercase', color: '#E8C979',
              }}>Jordan T. · Events Lead</div>
              <div style={{
                fontFamily: 'Lora, serif', fontSize: 13, color: '#B5B5BB', marginTop: 4,
              }}>McKinley &amp; Field · 92 guests, Dec 2025</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Offer = Offer;
window.STACK = STACK;


// Section H: Bonuses
function Bonuses() {
  const bonuses = [
    {
      tag: 'Bonus 01 · Fast-Action',
      title: 'Extra 30-Min Live Set',
      body: 'Book your venue tour within 7 days of your initial inquiry and we’ll extend your live entertainment by 30 minutes — more DJ, more band, more night.',
      value: '$500',
      img: 'assets/venue-crowd.jpg',
    },
    {
      tag: 'Bonus 02 · Founders Only',
      title: 'Rebooking Rights at $6,000',
      body: 'Be one of the first 5 companies to book an Executive Entertainment Night in the 2026 season and lock in rebooking rights at the same $6,000 rate for 2027.',
      value: 'Price protection',
      img: 'assets/hero-stage.jpeg',
    },
    {
      tag: 'Bonus 03 · Marquee',
      title: 'Custom Marquee Message',
      body: 'We’ll customize the theater marquee with your company name or event title — the single most-photographed thing your team will do that night.',
      value: '$300',
      img: 'assets/venue-ceiling.jpg',
    },
  ];
  return (
    <section style={{
      background: '#F6F1E6', color: '#0B0B0C',
      padding: '140px 56px 120px',
    }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 72 }}>
          <Kicker>Chapter VII</Kicker>
          <h2 style={{
            fontFamily: '"Playfair Display", serif', fontWeight: 500,
            fontSize: 'clamp(40px, 4.4vw, 64px)', lineHeight: 1.08,
            color: '#0B0B0C', margin: '12px auto 0', maxWidth: 800,
          }}>Three bonuses for<br/><em style={{ fontStyle: 'italic', color: '#9B7E3D' }}>the first movers.</em></h2>
          <div style={{ width: 88, height: 2, background: '#C8102E', margin: '28px auto 0' }} />
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 28 }}>
          {bonuses.map((b, i) => (
            <div key={i} style={{
              background: '#FBF8EF',
              border: '1px solid rgba(11,11,12,.12)',
              display: 'flex', flexDirection: 'column',
            }}>
              <div style={{ height: 220, overflow: 'hidden', position: 'relative' }}>
                <img src={b.img} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
                <div style={{
                  position: 'absolute', top: 14, left: 14,
                }}><Chip variant="crimson">{b.tag}</Chip></div>
              </div>
              <div style={{ padding: '28px 30px 32px' }}>
                <h4 style={{
                  fontFamily: '"Playfair Display", serif', fontWeight: 500,
                  fontSize: 26, lineHeight: 1.15, color: '#0B0B0C', margin: 0,
                }}>{b.title}</h4>
                <div style={{ width: 36, height: 2, background: '#C8102E', margin: '14px 0 14px' }} />
                <p style={{
                  fontFamily: 'Lora, serif', fontSize: 15, lineHeight: 1.7,
                  color: '#50505A', margin: 0,
                }}>{b.body}</p>
                <div style={{
                  marginTop: 22, paddingTop: 18,
                  borderTop: '1px solid rgba(11,11,12,.12)',
                  display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
                }}>
                  <span style={{
                    fontFamily: 'Jost, sans-serif', fontSize: 10, letterSpacing: '0.28em',
                    textTransform: 'uppercase', color: '#9B7E3D',
                  }}>Value</span>
                  <span style={{
                    fontFamily: '"Playfair Display", serif', fontWeight: 500, fontStyle: 'italic',
                    fontSize: 22, color: '#0B0B0C',
                  }}>{b.value}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Bonuses = Bonuses;