// Section D: Why you're stuck + Section E: Mechanism + Section F: Differentiation
function WhyStuck() {
  return (
    <section style={{
      background: '#0B0B0C', color: '#F6F1E6',
      padding: '140px 56px 120px',
    }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 96, alignItems: 'start' }}>
          <div style={{ position: 'sticky', top: 120 }}>
            <Kicker light>Chapter III</Kicker>
            <h2 style={{
              fontFamily: '"Playfair Display", serif', fontWeight: 500,
              fontSize: 'clamp(36px, 3.8vw, 60px)', lineHeight: 1.08,
              color: '#F6F1E6', margin: '6px 0 0',
            }}>Why last year<br/><em style={{ color: '#E8C979', fontStyle: 'italic' }}>felt “fine.”</em></h2>
            <div style={{ width: 88, height: 2, background: '#C8102E', margin: '24px 0' }} />
            <p style={{
              fontFamily: '"Cormorant Garamond", serif', fontStyle: 'italic',
              fontSize: 22, lineHeight: 1.5, color: '#EDE5D1', margin: 0,
              maxWidth: 380,
            }}>Most SMB events around Cedar Rapids follow the same tired script.</p>
          </div>

          <div>
            <div style={{
              border: '1px solid rgba(198,165,92,.25)',
              background: 'rgba(23,23,26,.6)',
            }}>
              {[
                ['Hotel ballroom or generic banquet hall', 'Built for sleeping guests, not live shows.'],
                ['Package: okay food, basic bar, DJ in the corner', 'Nobody remembers the music a week later.'],
                ['Fluorescent lighting, beige walls, carpet', 'Unphotographable. Your team won’t post it.'],
                ['4–5 vendors to juggle (venue, AV, DJ, bar, photo)', 'Nobody owns the night. You’re the glue.'],
              ].map(([h, s], i) => (
                <div key={i} style={{
                  display: 'grid', gridTemplateColumns: '64px 1fr',
                  gap: 24, padding: '28px 32px',
                  borderBottom: i < 3 ? '1px solid rgba(198,165,92,.18)' : 'none',
                  alignItems: 'start',
                }}>
                  <div style={{
                    fontFamily: '"Playfair Display", serif', fontStyle: 'italic',
                    fontWeight: 500, fontSize: 32, color: '#8A8A93', lineHeight: 1,
                  }}>0{i + 1}</div>
                  <div>
                    <h4 style={{
                      fontFamily: '"Cormorant Garamond", serif', fontWeight: 600,
                      fontSize: 22, color: '#F6F1E6', margin: 0, lineHeight: 1.3,
                    }}>{h}</h4>
                    <p style={{
                      fontFamily: 'Lora, serif', fontSize: 15, lineHeight: 1.6,
                      color: '#B5B5BB', margin: '8px 0 0', maxWidth: 520,
                    }}>{s}</p>
                  </div>
                </div>
              ))}
            </div>

            <div style={{
              marginTop: 40,
              padding: '36px 40px',
              borderLeft: '3px solid #C8102E',
              background: 'linear-gradient(90deg, rgba(200,16,46,.08), transparent 60%)',
            }}>
              <div style={{
                fontFamily: 'Jost, sans-serif', fontSize: 10, letterSpacing: '0.3em',
                textTransform: 'uppercase', color: '#E8C979', marginBottom: 10,
              }}>The real problem</div>
              <p style={{
                fontFamily: '"Cormorant Garamond", serif', fontWeight: 400,
                fontStyle: 'italic', fontSize: 26, lineHeight: 1.4,
                color: '#F6F1E6', margin: 0, maxWidth: 680,
              }}>You’re buying square footage, not a designed experience. You’re renting a room and trying to bolt “fun” onto it.</p>
            </div>
            <p style={{
              fontFamily: 'Lora, serif', fontSize: 17, lineHeight: 1.75,
              color: '#E0D4B6', maxWidth: 640, margin: '32px 0 0',
            }}>
              Executive Entertainment Night flips that. <span style={{ color: '#E8C979' }}>We start with the show and wrap the logistics around it.</span>
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}
window.WhyStuck = WhyStuck;


// Section E: The Mechanism
function Mechanism() {
  const pieces = [
    {
      n: '01',
      title: 'Historic 1914 theater as your canvas',
      body: 'Real stage, balcony, pro acoustics, and architecture built for performances — not PowerPoints.',
    },
    {
      n: '02',
      title: 'In-house concert sound & lighting',
      body: 'The same system that runs shows, tuned to your event, with a pro engineer running the board.',
    },
    {
      n: '03',
      title: 'Curated live act included',
      body: 'One 60-minute set (DJ, acoustic, or band) selected to match your team vibes and event goals.',
    },
    {
      n: '04',
      title: 'Bar credit baked in',
      body: '$1,300 bar credit applied automatically. No awkward “who’s paying?” tab at the end.',
    },
    {
      n: '05',
      title: 'Run-Of-Show Design Session',
      body: '7 days out, you sit down with the owner to build your exact timeline, mic moments, and cues. You leave with a fully written run-of-show.',
    },
  ];
  return (
    <section id="mechanism" style={{
      position: 'relative',
      padding: '160px 56px 140px',
      background: `linear-gradient(rgba(11,11,12,.82),rgba(11,11,12,.92)), url('assets/glitter-swirl.jpg')`,
      backgroundSize: 'cover', backgroundPosition: 'center',
      color: '#F6F1E6',
    }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 80 }}>
          <Kicker light>Chapter IV · The New Mechanism</Kicker>
          <h2 style={{
            fontFamily: '"Playfair Display", serif', fontWeight: 500,
            fontSize: 'clamp(40px, 5vw, 80px)', lineHeight: 1.02,
            letterSpacing: '-0.01em', color: '#F6F1E6',
            margin: '12px auto 0', maxWidth: 1000,
          }}>Executive Entertainment Night:<br/><em style={{ color: '#E8C979', fontStyle: 'italic' }}>a concert-grade corporate takeover.</em></h2>
          <div style={{ width: 88, height: 2, background: '#C8102E', margin: '28px auto 28px' }} />
          <p style={{
            fontFamily: '"Cormorant Garamond", serif', fontStyle: 'italic',
            fontSize: 22, lineHeight: 1.5, color: '#EDE5D1',
            margin: '0 auto', maxWidth: 720,
          }}>Instead of renting a room and hunting for vendors, you book <span style={{ color: '#E8C979' }}>one mechanism</span> — a private concert-grade takeover of a 1914 music theater, with in-house production and a curated live act, sold as a single turnkey package.</p>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)',
          gap: 0,
          border: '1px solid rgba(198,165,92,.3)',
          background: 'rgba(11,11,12,.55)',
        }}>
          {pieces.map((p, i) => (
            <div key={i} style={{
              padding: '36px 28px 32px',
              borderRight: i < 4 ? '1px solid rgba(198,165,92,.2)' : 'none',
            }}>
              <div style={{
                fontFamily: '"Playfair Display", serif', fontStyle: 'italic',
                fontWeight: 500, fontSize: 40, color: '#C6A55C', lineHeight: 1,
              }}>{p.n}</div>
              <div style={{ width: 28, height: 2, background: '#C8102E', margin: '16px 0 18px' }} />
              <h4 style={{
                fontFamily: '"Cormorant Garamond", serif', fontWeight: 600,
                fontSize: 20, lineHeight: 1.25, color: '#F6F1E6', margin: 0,
              }}>{p.title}</h4>
              <p style={{
                fontFamily: 'Lora, serif', fontSize: 14, lineHeight: 1.65,
                color: '#B5B5BB', margin: '14px 0 0',
              }}>{p.body}</p>
            </div>
          ))}
        </div>

        <div style={{ textAlign: 'center', marginTop: 56 }}>
          <p style={{
            fontFamily: '"Cormorant Garamond", serif', fontStyle: 'italic',
            fontSize: 26, lineHeight: 1.4, color: '#F6F1E6',
            margin: '0 auto', maxWidth: 680,
          }}>You’re not assembling pieces.<br/><span style={{ color: '#E8C979' }}>You’re buying a finished show your company steps into.</span></p>
        </div>

        {/* Proof: stage photo */}
        <div style={{
          marginTop: 72,
          height: 480, overflow: 'hidden', position: 'relative',
          border: '1px solid rgba(198,165,92,.3)',
        }}>
          <img src="assets/venue-crowd.jpg" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
          <div style={{
            position: 'absolute', inset: 0,
            background: 'linear-gradient(180deg, transparent 55%, rgba(11,11,12,.85) 100%)',
          }} />
          <div style={{
            position: 'absolute', left: 40, bottom: 32, right: 40,
            display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
          }}>
            <div>
              <Kicker light>Live Act · Featured</Kicker>
              <div style={{
                fontFamily: '"Playfair Display", serif', fontWeight: 500,
                fontSize: 32, color: '#F6F1E6', lineHeight: 1.1,
              }}>Saturn &amp; the Brass Section</div>
              <div style={{
                fontFamily: 'Jost, sans-serif', fontSize: 11, letterSpacing: '0.24em',
                textTransform: 'uppercase', color: '#E8C979', marginTop: 8,
              }}>60-min set · Funk / Soul · Full band</div>
            </div>
            <div style={{
              fontFamily: 'Jost, sans-serif', fontSize: 10, letterSpacing: '0.28em',
              textTransform: 'uppercase', color: '#E8C979', textAlign: 'right',
              border: '1px solid rgba(232,201,121,.4)', padding: '8px 14px',
            }}>Clip · Live at The Ideal</div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Mechanism = Mechanism;


// Section F: Differentiation (+ comparison chart)
function Differentiation() {
  const bullets = [
    ['Concert, not conference', 'Your team feels like they’re at a private show — not “mandatory fun” in a ballroom.'],
    ['One decision instead of five', 'Venue, production, live act, bar credit, and run-of-show in one contract.'],
    ['Built for SMB budgets', 'Around what Eastern Iowa companies already spend on generic hotel parties.'],
    ['Designed for HR & Ops', 'We handle stage, lights, sound, bar flow, and timing. You handle invites and headcount.'],
    ['Measurable morale win', 'We tie success to a post-event score — and back it with a guarantee on our fee.'],
    ['Limited nights', 'Only 5 Executive Entertainment Nights are released for the 2026 season.'],
  ];

  const compareRows = [
    ['Venue style',         'Hotel ballroom',          '1914 historic theater'],
    ['Sound & lighting',    'Fluorescent, rented AV',  'In-house concert rig + engineer'],
    ['Entertainment',       'DJ in the corner',        'Curated 60-min live act'],
    ['Bar',                 'You open a tab',          '$1,300 credit pre-loaded'],
    ['Photos',              'Beige walls, no posts',   'Red carpet + branded step-and-repeat'],
    ['Vendors to manage',   '4–5 separate contracts',  'One turnkey agreement'],
    ['Planning',            'You build the run-of-show', 'Run-of-show design session included'],
    ['Guarantee',           'None',                     'Best-Event-Or-Your-Next-Is-On-Us'],
  ];

  return (
    <section style={{
      background: '#F6F1E6', color: '#0B0B0C',
      padding: '140px 56px 120px',
    }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ maxWidth: 720, marginBottom: 72 }}>
          <Kicker>Chapter V · What makes this different</Kicker>
          <h2 style={{
            fontFamily: '"Playfair Display", serif', fontWeight: 500,
            fontSize: 'clamp(36px, 4.4vw, 68px)', lineHeight: 1.06,
            letterSpacing: '-0.01em', color: '#0B0B0C', margin: '12px 0 0',
          }}>Six reasons this isn’t<br/><em style={{ fontStyle: 'italic', color: '#9B7E3D' }}>another ballroom night.</em></h2>
          <div style={{ width: 88, height: 2, background: '#C8102E', margin: '24px 0 0' }} />
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0,
          borderTop: '1px solid rgba(11,11,12,.15)',
          borderLeft: '1px solid rgba(11,11,12,.15)',
        }}>
          {bullets.map(([t, b], i) => (
            <div key={i} style={{
              padding: '36px 32px',
              borderRight: '1px solid rgba(11,11,12,.15)',
              borderBottom: '1px solid rgba(11,11,12,.15)',
              background: '#FBF8EF',
            }}>
              <div style={{
                fontFamily: 'Jost, sans-serif', fontSize: 10, letterSpacing: '0.3em',
                textTransform: 'uppercase', color: '#9B7E3D', marginBottom: 12,
              }}>0{i + 1}</div>
              <h4 style={{
                fontFamily: '"Playfair Display", serif', fontWeight: 500,
                fontSize: 22, lineHeight: 1.2, color: '#0B0B0C', margin: 0,
              }}>{t}</h4>
              <div style={{ width: 32, height: 2, background: '#C8102E', margin: '14px 0 14px' }} />
              <p style={{
                fontFamily: 'Lora, serif', fontSize: 15, lineHeight: 1.7,
                color: '#50505A', margin: 0,
              }}>{b}</p>
            </div>
          ))}
        </div>

        {/* Comparison chart */}
        <div style={{ marginTop: 88 }}>
          <div style={{ textAlign: 'center', marginBottom: 28 }}>
            <Kicker>Side by side</Kicker>
            <h3 style={{
              fontFamily: '"Playfair Display", serif', fontWeight: 500, fontStyle: 'italic',
              fontSize: 32, color: '#0B0B0C', margin: '6px 0 0',
            }}>Ballroom vs. Theater Takeover.</h3>
          </div>
          <div style={{
            display: 'grid', gridTemplateColumns: '1.3fr 1fr 1fr',
            border: '1px solid rgba(11,11,12,.15)',
            background: '#FBF8EF',
          }}>
            <div style={{ padding: '20px 28px', background: '#0B0B0C', color: '#8A8A93',
              fontFamily: 'Jost, sans-serif', fontSize: 10, letterSpacing: '0.28em',
              textTransform: 'uppercase' }}>&nbsp;</div>
            <div style={{ padding: '20px 28px', background: '#0B0B0C', color: '#B5B5BB',
              fontFamily: 'Jost, sans-serif', fontSize: 10, letterSpacing: '0.28em',
              textTransform: 'uppercase', borderLeft: '1px solid #2A2A2F' }}>Beige ballroom</div>
            <div style={{ padding: '20px 28px', background: '#C6A55C', color: '#0B0B0C',
              fontFamily: 'Jost, sans-serif', fontSize: 10, letterSpacing: '0.28em',
              textTransform: 'uppercase', fontWeight: 600 }}>Executive Entertainment Night</div>

            {compareRows.map((r, i) => (
              <React.Fragment key={i}>
                <div style={{
                  padding: '18px 28px', borderTop: '1px solid rgba(11,11,12,.12)',
                  fontFamily: '"Cormorant Garamond", serif', fontWeight: 600,
                  fontSize: 17, color: '#0B0B0C',
                }}>{r[0]}</div>
                <div style={{
                  padding: '18px 28px', borderTop: '1px solid rgba(11,11,12,.12)',
                  borderLeft: '1px solid rgba(11,11,12,.08)',
                  fontFamily: 'Lora, serif', fontSize: 15, color: '#8A8A93',
                  textDecoration: 'line-through', textDecorationColor: 'rgba(138,138,147,.4)',
                }}>{r[1]}</div>
                <div style={{
                  padding: '18px 28px', borderTop: '1px solid rgba(11,11,12,.12)',
                  borderLeft: '1px solid rgba(11,11,12,.08)',
                  fontFamily: 'Lora, serif', fontSize: 15, color: '#0B0B0C',
                  background: 'rgba(198,165,92,.08)',
                }}>{r[2]}</div>
              </React.Fragment>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
window.Differentiation = Differentiation;