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

const FAQ_ITEMS = [
  {
    q: 'How many guests can you host?',
    a: 'Up to 50, indoors, in the private Tea House. Pricing is set at 25 and 50 guests, with each additional guest at $65 for the Signature Dragonfly Tea Experience.',
  },
  {
    q: 'What\u2019s included \u2014 do I need to bring anything?',
    a: 'Everything is handled: the styled tea house, tables, linens, the full tablescape, the Dragonfly high tea spread, service staff, your onsite Tea Host, sound, parking, and complete setup and teardown \u2014 plus all four bonuses. You bring your guests and yourself. That\u2019s it.',
  },
  {
    q: 'What makes the Dragonfly menu different?',
    a: 'It\u2019s a Filipino-inspired high tea \u2014 Dragonfly Tea Cakes, Maya Tea, Lumpia Sariwa, Ube Biko, and Chicken Adobo \u2014 that you won\u2019t find anywhere else in Tucson. It\u2019s the heart of the experience, and the reason guests remember it.',
  },
  {
    q: 'Is the price really all-in?',
    a: 'Yes. Local tax and staff gratuity are already included in the price you see. No surprise line items at the end.',
  },
  {
    q: 'What if my date or plans change?',
    a: 'The Peace-of-Mind Reschedule lets you move your date once, up to 14 days before your event, with no penalty. Life happens \u2014 we built for it.',
  },
  {
    q: 'What if it doesn\u2019t look like what I pictured \u2014 or something goes wrong?',
    a: 'That\u2019s exactly what the Styling Concierge and the Love-Your-Look Walkthrough prevent: you approve your entire styling plan in advance. And the Unforgettable Afternoon Guarantee means your tea is fully styled, staffed, and ready before your first guest arrives \u2014 or your venue fee is free. Your Tea Host runs the whole day so you never have to.',
  },
  {
    q: 'What kinds of events is this for?',
    a: 'Bridal and baby showers, milestone and golden birthdays, mother-daughter and friend celebrations, bridal and engagement parties, retirements, and women-led corporate gatherings. If it\u2019s an afternoon worth remembering, it fits.',
  },
  {
    q: 'How do I reserve, and how does payment work?',
    a: 'Reserve your date with 25% down. The balance is due 14 days before your event, and you can split it into two payments on request. We open only a limited number of private tea dates each month, so milestone dates fill early.',
  },
];

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 ? 460 : 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: '74ch',
        }}>{a}</p>
      </div>
    </div>
  );
}

function FAQ() {
  return (
    <section id="faq" data-screen-label="FAQ" style={{ background: 'var(--hg-cream-100)', padding: '128px 48px' }}>
      <div style={{ maxWidth: 880, margin: '0 auto', textAlign: 'center' }}>
        <Eyebrow>Things hosts 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;
