/* global React, Eyebrow, Display, Diamond */
const { useState: useFaqState } = React;

const FAQ_ITEMS = [
  {
    q: 'What happens if it rains?',
    a: 'We maintain a clear rain-backup layout and offer a Rain Plan Comfort Kit add-on \u2014 heaters or fans as needed, umbrellas, and a printed backup floorplan we can implement if the weather turns.',
  },
  {
    q: 'Can we bring our own alcohol?',
    a: 'Yes. You provide the alcohol and we provide the bartending team and bar setup. This saves most couples a meaningful amount versus traditional bar packages.',
  },
  {
    q: 'Can we customize the menu?',
    a: 'Yes. You\u2019ll have a menu consultation and a tasting for two to make sure the buffet brunch or dinner matches your tastes and your guests\u2019 needs.',
  },
  {
    q: 'Do we have to use your DJ and cake?',
    a: 'The Signature Garden Wedding Experience is designed as a true all-inclusive, so DJ and cake are included \u2014 your core vendors are already handled. If you have a special request, we can talk through it on your tour.',
  },
  {
    q: 'What if our guest count changes?',
    a: 'You book the package for up to 120 guests. If your count rises, it\u2019s $75 per additional guest up to 150. Final headcount is confirmed closer to your date.',
  },
  {
    q: 'How late can our event go?',
    a: 'Your 11-hour access window covers setup, getting ready, ceremony, reception, and teardown. We\u2019ll walk through exact start and end times based on your vision and local guidelines.',
  },
  {
    q: 'What is your reschedule and cancellation policy?',
    a: 'Like most venues, the details are outlined in the contract you\u2019ll review before booking. We walk through it with you on your tour so you\u2019re clear and comfortable before you reserve your date.',
  },
  {
    q: 'How do we get started?',
    a: 'Book a tour, walk the garden and ceremony lawn, and \u2014 if it feels like your place \u2014 reserve your date with a 30% deposit. Decide within 7 days of your visit and the Welcome High Tea bonus is yours.',
  },
];

function FAQRow({ q, a }) {
  const [open, setOpen] = useFaqState(false);
  return (
    <div style={{
      borderTop: '1px solid var(--hg-line)',
    }}>
      <button onClick={() => setOpen(!open)} style={{
        all: 'unset', cursor: 'pointer', display: 'block', width: '100%',
        padding: '28px 0',
      }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '32px 1fr 32px', gap: 20, alignItems: 'center',
        }}>
          <span style={{ color: 'var(--hg-sage-700)' }}><Diamond /></span>
          <span style={{
            fontFamily: 'var(--hg-font-display)', fontSize: 26, fontWeight: 400,
            color: 'var(--hg-fg)', lineHeight: 1.2, letterSpacing: '-0.005em',
          }}>{q}</span>
          <span style={{
            fontFamily: 'var(--hg-font-sans)', fontSize: 22, fontWeight: 300,
            color: 'var(--hg-fg-muted)', textAlign: 'right', lineHeight: 1,
            transition: 'transform .25s', transform: open ? 'rotate(45deg)' : 'rotate(0deg)',
          }}>+</span>
        </div>
      </button>
      <div style={{
        maxHeight: open ? 400 : 0, overflow: 'hidden',
        transition: 'max-height .3s ease, padding .3s ease',
        paddingBottom: open ? 28 : 0,
      }}>
        <p style={{
          fontFamily: 'var(--hg-font-serif)', fontSize: 17.5, lineHeight: 1.65,
          color: 'var(--hg-fg-soft)', margin: 0, paddingLeft: 52, maxWidth: '72ch',
        }}>{a}</p>
      </div>
    </div>
  );
}

function FAQ() {
  return (
    <section id="faq" style={{
      background: 'var(--hg-cream-100)', padding: '128px 48px',
    }}>
      <div style={{ maxWidth: 880, margin: '0 auto', textAlign: 'center' }}>
        <Eyebrow>Things couples ask</Eyebrow>
        <div style={{ height: 22 }} />
        <Display size="h1">
          The questions before<br/>
          <em style={{ fontStyle: 'italic', color: 'var(--hg-sage-700)' }}>you reserve.</em>
        </Display>
      </div>
      <div style={{ maxWidth: 980, margin: '64px auto 0' }}>
        {FAQ_ITEMS.map((it) => <FAQRow key={it.q} {...it} />)}
        <div style={{ borderTop: '1px solid var(--hg-line)' }} />
      </div>
    </section>
  );
}

window.FAQ = FAQ;