/* FAQ page — on-brand accordion. Starter answers are grounded in the
   site's existing details; the couple will refine specifics later. */

function FaqItem({ q, a, isOpen, onToggle, last }) {
  return (
    <div style={{
      borderTop: '1px solid color-mix(in srgb, var(--olive) 32%, transparent)',
      borderBottom: last ? '1px solid color-mix(in srgb, var(--olive) 32%, transparent)' : 'none'
    }}>
      <button
        onClick={onToggle}
        aria-expanded={isOpen}
        style={{
          width: '100%', background: 'transparent', border: 'none',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          gap: 24, textAlign: 'left',
          padding: 'clamp(24px, 2.6vw, 34px) 4px'
        }}>
        <span className="subhead" style={{


          color: 'var(--night-bordeaux)',
          lineHeight: 1.1, fontFamily: "RandomHandwritten", fontSize: "36px"
        }}>{q}</span>
        <span style={{
          flexShrink: 0,
          fontFamily: 'var(--font-body)', fontWeight: 300,
          fontSize: 30, lineHeight: 1,
          color: 'var(--flag-red)',
          transform: isOpen ? 'rotate(45deg)' : 'rotate(0deg)',
          transition: 'transform 320ms var(--ease-walk)'
        }}>+</span>
      </button>
      <div style={{
        maxHeight: isOpen ? 400 : 0,
        overflow: 'hidden',
        transition: 'max-height 420ms var(--ease-walk)'
      }}>
        <p style={{
          margin: 0, padding: '0 4px clamp(28px, 3vw, 38px)',
          maxWidth: '60ch',
          color: 'color-mix(in srgb, var(--ink) 74%, transparent)',
          fontSize: 17, lineHeight: 2.0
        }}>{a}</p>
      </div>
    </div>);

}

function Faq() {
  const [open, setOpen] = React.useState(0);
  const items = [
  { q: 'When should I RSVP by?',
    a: <React.Fragment>It's helpful for us to receive your rsvp as soon as you know, but at the latest we kindly ask that you respond by the first of February, 2027. You can do it right here on the site, on the <a href="rsvp.html" style={{ color: 'var(--flag-red)', textDecoration: 'underline', textUnderlineOffset: '3px' }}>RSVP page</a>.</React.Fragment> },
  { q: 'Are kids welcome at the wedding events?',
    a: 'Our wedding events will be adults-only. We understand this may be difficult for some families, so if childcare affects your ability to attend, please reach out to us. We’d love to help find a way for you to join us.' },
  { q: 'What should I wear?',
    a: 'We will be providing mood boards for each event in the coming weeks...stay tuned for updates and more information' },
  { q: 'How do I get to Tepoztlán?',
    a: 'Fly into Mexico City Benito Juárez International Airport (MEX). Tepoztlán is about 90 minutes south by car. We’ll share shuttle and transport options closer to the date.' },
  { q: 'Do I need to rent a car?',
    a: 'A rental car is an option if you’d like more flexibility or are planning to explore the surrounding area, but it is not required for the wedding weekend. Keep in mind the town’s roads are cobblestoned and can be narrow, busy, and tricky to park in. However, most hotels offer parking. We’ll be coordinating transportation for the main events and will share more details soon.' },
  { q: 'Where should I stay?',
    a: <React.Fragment>Tepoztlán has an abundance of great hotel options in/around town. We've added some of our favorites to the <a href="travel-stay.html" style={{ color: 'var(--flag-red)', textDecoration: 'underline', textUnderlineOffset: '3px' }}>travel &amp; stay page</a> but feel free to find one that best suits your liking. For larger groups, there are also some great Airbnb and vrbo options.</React.Fragment> },
  { q: 'What will the weather be like?',
    a: 'Tepoztlán is typically warm and sunny during the day, but the temperature drops quick in the evenings once the sun goes down. We recommend packing light, breathable clothing, comfortable shoes, sunscreen, and a layer for dinners or late-night celebrations. Rain is less common this time of year, but mountain weather can be unpredictable, so a light jacket never hurts.' }];


  return (
    <main>
      <PageHeader
        label="faq header"
        eyebrow="good to know"
        title="Questions"
        titleItalic="& Answers"
        bg="var(--night-bordeaux)"
        fg="var(--parchment)"
        accent="var(--flag-red)"
        bgImage="assets/headers/faq.png"
        titleImage="assets/headers/titles/faq.png"
        subtitle="A few things you might be wondering. More will appear here as the weekend takes shape." />

      <section data-screen-label="faq list" style={{
        padding: 'clamp(70px, 9vw, 130px) var(--gutter)',
        background: 'var(--parchment)'
      }}>
        <div style={{ maxWidth: 880, margin: '0 auto' }}>
          {items.map((it, i) =>
          <FaqItem
            key={i}
            q={it.q}
            a={it.a}
            isOpen={open === i}
            last={i === items.length - 1}
            onToggle={() => setOpen(open === i ? -1 : i)} />
          )}
        </div>

        <p style={{
          textAlign: 'center',
          maxWidth: '46ch', margin: 'clamp(48px, 6vw, 76px) auto 0',
          fontFamily: 'var(--font-labels)',
          fontSize: 21,
          color: 'color-mix(in srgb, var(--ink) 60%, transparent)'
        }}>
          Still wondering about something? Write to us anytime — we’d love to hear from you.
        </p>
      </section>
    </main>);

}

window.Faq = Faq;