// Section G: Offer / Value Stack
const STACK = [
  { title: 'Venue rental (Saturday night)', sub: 'Exclusive use of a historic 1914 music theater in downtown Cedar Rapids — real stage, balcony, and pro acoustics.', value: 4600 },
  { title: 'Professional band', sub: 'One 60-minute curated live set (DJ, acoustic, or band) selected to match your team and event goals.', value: 3500 },
  { title: 'Concert-grade A/V (spotlight package)', sub: 'In-house concert sound, lighting design, haze, intros/exits, walk-on music, and cues — run by a pro engineer.', value: 1500 },
  { title: 'Open bar with custom cocktails', sub: 'Full bar service with custom cocktails designed for your event. No awkward tab at the end.', value: 1500 },
  { title: 'Red carpet entrance', sub: 'Red carpet arrival experience so guests feel the moment from the second they walk in.', value: 150 },
  { title: 'Event coordination (orders, entertainment booking, decor setup help, caterer liaison)', sub: 'We handle vendor communication, entertainment booking, setup logistics, and day-of coordination so you just show up.', value: 1850 },
  { title: 'Optional RSVP webpage', sub: 'A simple branded RSVP page for your team so invites and headcount stay in one place.', value: 250 },
];

function Offer() {
  const isMobile = useBreakpoint();
  const total = STACK.reduce((s, i) => s + i.value, 0);

  return (
    <section id="offer" style={{
      background: '#0B0B0C', color: '#F6F1E6',
      padding: isMobile ? '72px 20px 60px' : '140px 56px 120px',
    }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: isMobile ? 40 : 72 }}>
          <Kicker light>Chapter VI · The Offer</Kicker>
          <h2 style={{
            fontFamily: '"Playfair Display", serif', fontWeight: 500,
            fontSize: 'clamp(36px, 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(22px, 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: isMobile ? '28px 1fr' : '64px 1fr 180px',
              alignItems: isMobile ? 'start' : 'center',
              gap: isMobile ? 14 : 28,
              padding: isMobile ? '20px 16px' : '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: isMobile ? 16 : 26, color: '#C6A55C', lineHeight: 1,
                paddingTop: 2,
              }}>{String(i + 1).padStart(2, '0')}</div>
              <div>
                <h4 style={{
                  fontFamily: '"Cormorant Garamond", serif', fontWeight: 600,
                  fontSize: isMobile ? 16 : 21, lineHeight: 1.25, color: '#F6F1E6', margin: 0,
                }}>{item.title}</h4>
                <p style={{
                  fontFamily: 'Lora, serif', fontSize: 13, lineHeight: 1.6,
                  color: '#B5B5BB', margin: '6px 0 0',
                }}>{item.sub}</p>
                {isMobile && (
                  <div style={{
                    marginTop: 8,
                    fontFamily: '"Playfair Display", serif', fontWeight: 500,
                    fontSize: 17, color: '#E8C979',
                  }}>${item.value.toLocaleString()}</div>
                )}
              </div>
              {!isMobile && (
                <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: isMobile ? '1fr' : '1fr 180px',
            padding: isMobile ? '20px 16px' : '26px 32px',
            background: '#17171A',
            borderTop: '2px solid #C6A55C',
          }}>
            <div style={{
              fontFamily: '"Playfair Display", serif', fontStyle: 'italic',
              fontWeight: 500, fontSize: isMobile ? 16 : 22, color: '#F6F1E6',
            }}>Total real-world value if bought separately</div>
            <div style={{
              textAlign: isMobile ? 'left' : 'right',
              marginTop: isMobile ? 8 : 0,
              fontFamily: '"Playfair Display", serif', fontWeight: 600,
              fontSize: isMobile ? 26 : 32, color: '#E8C979',
            }}>${total.toLocaleString()}</div>
          </div>
        </div>

        {/* Proof row — run-of-show + testimonial */}
        <div style={{
          marginTop: isMobile ? 40 : 72,
          display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.2fr 1fr', gap: 32,
        }}>
          {/* Sample run-of-show */}
          <div style={{
            background: '#FBF8EF', color: '#0B0B0C',
            padding: isMobile ? '24px 20px' : '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'],
                  ['7:55 PM', 'Bar opens, $1,500 credit live'],
                  ['8:30 PM', 'CEO welcome + awards'],
                  ['9:00 PM', 'Live set · Saturn & Brass'],
                  ['10:00 PM', 'DJ handoff'],
                  ['12:45 AM', 'Last call'],
                ].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 0', color: '#0B0B0C', fontWeight: 500 }}>{r[1]}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          {/* Testimonial */}
          <div style={{
            padding: isMobile ? '24px 20px' : '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: isMobile ? 18 : 24, lineHeight: 1.45,
                color: '#F6F1E6', margin: 0,
              }}>We had a great time at opening night. The live music was fantastic. Really cool old building has been preserved and brought up to 2022 standards. The drinks were great. The bartenders seemed like they were trained well for the event.</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',
              }}>John Fogliano · Google Review</div>
              <div style={{
                fontFamily: 'Lora, serif', fontSize: 13, color: '#B5B5BB', marginTop: 4,
              }}>The Ideal Theater &amp; Bar</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Offer = Offer;
window.STACK = STACK;


// Section H: Bonuses
function Bonuses() {
  const isMobile = useBreakpoint();

  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 $8,500',
      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 $8,500 rate for 2027.',
      value: 'Price protection',
      img: 'assets/hero-stage.jpeg',
    },
  ];

  return (
    <section 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 ? 40 : 72 }}>
          <Kicker>Chapter VII</Kicker>
          <h2 style={{
            fontFamily: '"Playfair Display", serif', fontWeight: 500,
            fontSize: 'clamp(36px, 4.4vw, 64px)', lineHeight: 1.08,
            color: '#0B0B0C', margin: '12px auto 0', maxWidth: 800,
          }}>Two 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: isMobile ? '1fr' : 'repeat(2, 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: isMobile ? 200 : 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: isMobile ? '20px 20px 24px' : '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;