// Section L: FAQ + Footer
function FAQ() {
  const isMobile = useBreakpoint();

  const qs = [
    ['What exactly is included in the $8,500?', 'Full-venue rental (Saturday night), professional band, concert-grade A/V (spotlight package), open bar with custom cocktails, red carpet entrance, and full event coordination — including entertainment booking, decor setup help, and caterer liaison. Optional RSVP webpage also included. 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,500 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: isMobile ? '72px 20px 60px' : '140px 56px 120px',
    }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1fr 1.6fr',
          gap: isMobile ? 40 : 72, alignItems: 'start',
        }}>
          <div style={{ position: isMobile ? 'static' : 'sticky', top: 120 }}>
            <Kicker>Chapter XI</Kicker>
            <h2 style={{
              fontFamily: '"Playfair Display", serif', fontWeight: 500,
              fontSize: 'clamp(32px, 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: '24px 0', cursor: 'pointer',
                  display: 'grid', gridTemplateColumns: '36px 1fr 28px',
                  alignItems: 'start', gap: 16,
                }}>
                  <span style={{
                    fontFamily: '"Playfair Display", serif', fontStyle: 'italic',
                    fontWeight: 500, fontSize: 18, color: '#9B7E3D', lineHeight: 1.2,
                  }}>{String(i + 1).padStart(2, '0')}</span>
                  <span style={{
                    fontFamily: '"Playfair Display", serif', fontWeight: 500,
                    fontSize: isMobile ? 18 : 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: isMobile ? '0 0 24px 0' : '0 0 32px 52px',
                  }}>
                    <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() {
  const isMobile = useBreakpoint();

  return (
    <section style={{
      background: '#0B0B0C', color: '#F6F1E6',
      padding: isMobile ? '72px 20px' : '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(28px, 4vw, 54px)', lineHeight: 1.2,
          color: '#F6F1E6', margin: '0 0 32px',
        }}>Experience the magic.</h2>
        <Button variant="primary" size={isMobile ? 'md' : '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() {
  const isMobile = useBreakpoint();

  return (
    <footer style={{
      background: '#0B0B0C', color: '#E0D4B6',
      padding: isMobile ? '56px 20px 32px' : '72px 56px 40px',
      borderTop: '1px solid rgba(198,165,92,.2)',
    }}>
      <div style={{
        maxWidth: 1200, margin: '0 auto',
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr 1fr' : '2fr 1fr 1fr 1fr',
        gap: isMobile ? 32 : 56, alignItems: 'flex-start',
      }}>
        <div style={{ gridColumn: isMobile ? '1 / span 2' : 'auto' }}>
          <img src="assets/logo-white-full.png" style={{ height: isMobile ? 48 : 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: '40px auto 0', paddingTop: 20,
        borderTop: '1px solid rgba(198,165,92,.18)',
        display: 'flex', justifyContent: 'space-between',
        flexDirection: isMobile ? 'column' : 'row',
        gap: isMobile ? 8 : 0,
        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;