// Section L: FAQ + Footer
function FAQ() {
  const qs = [
    ['What exactly is included in the $6,000?', 'Full-venue buyout (4 PM–1 AM, up to 175 guests), staff, security, coat check, cleanup, $1,300 bar credit, in-house concert sound and lighting with engineer, one 60-minute live act, production pack, red-carpet arrival + branded backdrop, run-of-show design session, and the Event Blueprint. Food/catering is separate so you can match it to your budget.'],
    ['Do you handle catering?', 'We don’t cook in-house, but we’ll connect you with vetted local caterers who know the building. You choose the menu and pay them directly; we coordinate timing and logistics so service flows with the show.'],
    ['What if our team doesn’t really drink?', 'You can use your $1,300 credit on mocktails, NA options, or simply scale back bar hours and focus more on entertainment. We’ll help you right-size the bar to your culture.'],
    ['What if we have more than 175 people?', 'For larger groups, we can discuss staggered arrival times, balcony use, or a custom quote. On the tour, we’ll walk you through exactly what’s realistic for your headcount.'],
    ['How far in advance should we book?', 'For peak holiday dates, we recommend 4–6 months out. Because we only release 5 Executive Entertainment Nights each season, once a date is gone, it’s gone.'],
    ['What happens if something goes wrong?', 'If we fail to deliver any promised inclusion or your post-event score averages under 8/10, we’ll host your next event with no venue rental fee. That’s in writing in your agreement.'],
    ['Can we customize the entertainment?', 'Yes. During your design session, we’ll talk about your team’s age range, tastes, and event goals, then match you with a DJ, acoustic act, or band that fits.'],
    ['Is this only for holiday parties?', 'No. Executive Entertainment Night works for year-end celebrations, product launches, client appreciation nights, and all-hands events any time of year.'],
  ];
  const [open, setOpen] = React.useState(0);

  return (
    <section id="faq" style={{
      background: '#F6F1E6', color: '#0B0B0C',
      padding: '140px 56px 120px',
    }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 72, alignItems: 'start',
        }}>
          <div style={{ position: 'sticky', top: 120 }}>
            <Kicker>Chapter XI</Kicker>
            <h2 style={{
              fontFamily: '"Playfair Display", serif', fontWeight: 500,
              fontSize: 'clamp(36px, 4vw, 60px)', lineHeight: 1.06,
              color: '#0B0B0C', margin: '12px 0 0',
            }}>Eight honest<br/><em style={{ color: '#9B7E3D', fontStyle: 'italic' }}>questions.</em></h2>
            <div style={{ width: 88, height: 2, background: '#C8102E', margin: '24px 0' }} />
            <p style={{
              fontFamily: '"Cormorant Garamond", serif', fontStyle: 'italic',
              fontSize: 20, lineHeight: 1.5, color: '#50505A', margin: 0, maxWidth: 320,
            }}>If you don’t see yours, ask us on the tour — we’d rather answer than have you guess.</p>

            {/* HR testimonial */}
            <div style={{
              marginTop: 40, padding: '28px 28px',
              border: '1px solid rgba(11,11,12,.12)',
              background: '#FBF8EF',
            }}>
              <div style={{
                fontFamily: '"Playfair Display", serif', fontStyle: 'italic',
                fontWeight: 500, fontSize: 48, color: '#C6A55C', lineHeight: 1,
              }}>“</div>
              <p style={{
                fontFamily: '"Cormorant Garamond", serif', fontStyle: 'italic',
                fontSize: 18, lineHeight: 1.5, color: '#0B0B0C', margin: '-12px 0 0',
              }}>Lowest-stress event I’ve run in eight years of HR. They own it — I just showed up and hosted.</p>
              <div style={{ width: 32, height: 2, background: '#C8102E', margin: '16px 0' }} />
              <div style={{
                fontFamily: 'Jost, sans-serif', fontSize: 10, letterSpacing: '0.28em',
                textTransform: 'uppercase', color: '#9B7E3D',
              }}>Priya S. · HR Director · Hawthorne Eng.</div>
            </div>
          </div>

          <div style={{ borderTop: '1px solid rgba(11,11,12,.18)' }}>
            {qs.map(([q, a], i) => (
              <div key={i} style={{
                borderBottom: '1px solid rgba(11,11,12,.18)',
              }}>
                <button onClick={() => setOpen(open === i ? -1 : i)} style={{
                  width: '100%', textAlign: 'left', background: 'none', border: 0,
                  padding: '28px 0', cursor: 'pointer',
                  display: 'grid', gridTemplateColumns: '40px 1fr 32px',
                  alignItems: 'start', gap: 20,
                }}>
                  <span style={{
                    fontFamily: '"Playfair Display", serif', fontStyle: 'italic',
                    fontWeight: 500, fontSize: 20, color: '#9B7E3D', lineHeight: 1.2,
                  }}>{String(i + 1).padStart(2, '0')}</span>
                  <span style={{
                    fontFamily: '"Playfair Display", serif', fontWeight: 500,
                    fontSize: 22, lineHeight: 1.3, color: '#0B0B0C',
                  }}>{q}</span>
                  <span style={{
                    fontFamily: 'Jost, sans-serif', fontSize: 22, color: '#9B7E3D',
                    textAlign: 'right', lineHeight: 1,
                    transform: open === i ? 'rotate(45deg)' : 'rotate(0)',
                    transition: 'transform 300ms cubic-bezier(0.22,0.61,0.36,1)',
                  }}>+</span>
                </button>
                {open === i && (
                  <div style={{
                    padding: '0 0 32px 60px',
                  }}>
                    <p style={{
                      fontFamily: 'Lora, serif', fontSize: 16, lineHeight: 1.75,
                      color: '#50505A', margin: 0, maxWidth: 640,
                    }}>{a}</p>
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
window.FAQ = FAQ;


function FinalMarquee() {
  return (
    <section style={{
      background: '#0B0B0C', color: '#F6F1E6',
      padding: '120px 56px',
      textAlign: 'center',
      borderTop: '1px solid rgba(198,165,92,.2)',
    }}>
      <div style={{ maxWidth: 900, margin: '0 auto' }}>
        <GoldRule light />
        <h2 style={{
          fontFamily: '"Playfair Display", serif', fontStyle: 'italic',
          fontWeight: 400, fontSize: 'clamp(32px, 4vw, 54px)', lineHeight: 1.2,
          color: '#F6F1E6', margin: '0 0 32px',
        }}>Experience the magic.</h2>
        <Button variant="primary" size="lg" onClick={() => {
          const el = document.getElementById('cta');
          if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 40, behavior: 'smooth' });
        }}>Reserve Your 2026 Date →</Button>
        <div style={{ marginTop: 40 }}>
          <GoldRule light />
        </div>
      </div>
    </section>
  );
}
window.FinalMarquee = FinalMarquee;


function Footer() {
  return (
    <footer style={{ background: '#0B0B0C', color: '#E0D4B6', padding: '72px 56px 40px', borderTop: '1px solid rgba(198,165,92,.2)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 56, alignItems: 'flex-start' }}>
        <div>
          <img src="assets/logo-white-full.png" style={{ height: 64, display: 'block', marginBottom: 20 }} />
          <p style={{ fontFamily: '"Cormorant Garamond", serif', fontStyle: 'italic', fontSize: 18, color: '#E0D4B6', margin: 0, maxWidth: 340 }}>
            Executive Entertainment Night — concert-grade corporate takeovers at Cedar Rapids’ historic 1914 theater.
          </p>
        </div>
        <div>
          <h5 style={{ fontFamily: 'Jost, sans-serif', fontSize: 10, letterSpacing: '0.28em', textTransform: 'uppercase', color: '#E8C979', margin: '0 0 14px', fontWeight: 500 }}>Visit</h5>
          <p style={{ fontFamily: 'Lora, serif', fontSize: 14, color: '#E0D4B6', margin: '4px 0', lineHeight: 1.6 }}>213 16th Ave SE</p>
          <p style={{ fontFamily: 'Lora, serif', fontSize: 14, color: '#E0D4B6', margin: '4px 0', lineHeight: 1.6 }}>Cedar Rapids, IA</p>
        </div>
        <div>
          <h5 style={{ fontFamily: 'Jost, sans-serif', fontSize: 10, letterSpacing: '0.28em', textTransform: 'uppercase', color: '#E8C979', margin: '0 0 14px', fontWeight: 500 }}>Inquiries</h5>
          <p style={{ fontFamily: 'Lora, serif', fontSize: 14, color: '#E0D4B6', margin: '4px 0', lineHeight: 1.6 }}>events@idealtheaterandbar.com</p>
          <p style={{ fontFamily: 'Lora, serif', fontSize: 14, color: '#E0D4B6', margin: '4px 0', lineHeight: 1.6 }}>Mon–Fri · 9am–5pm</p>
        </div>
        <div>
          <h5 style={{ fontFamily: 'Jost, sans-serif', fontSize: 10, letterSpacing: '0.28em', textTransform: 'uppercase', color: '#E8C979', margin: '0 0 14px', fontWeight: 500 }}>Follow</h5>
          <div style={{ display: 'flex', gap: 10 }}>
            {['facebook', 'instagram', 'music'].map(ic => (
              <div key={ic} style={{ width: 36, height: 36, borderRadius: '50%', border: '1px solid rgba(232,201,121,.4)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#E8C979', cursor: 'pointer' }}>
                <i data-lucide={ic} style={{ width: 16, height: 16 }}></i>
              </div>
            ))}
          </div>
        </div>
      </div>
      <div style={{ maxWidth: 1200, margin: '48px auto 0', paddingTop: 20, borderTop: '1px solid rgba(198,165,92,.18)', display: 'flex', justifyContent: 'space-between', fontFamily: 'Jost, sans-serif', fontSize: 10, letterSpacing: '0.28em', textTransform: 'uppercase', color: '#8A8A93' }}>
        <span>©2026 The Ideal Theater &amp; Bar</span>
        <span>Executive Entertainment Night · Limited 2026 Season</span>
      </div>
    </footer>
  );
}
window.Footer = Footer;
