// FAQ — accordion. Two-column layout to keep it editorial.
const FAQ = () => {
  const groups = [
    {
      heading: 'Arriving',
      items: [
        { q: 'When can we check in?', a: "From 4pm on the day of arrival. If you'd like to arrive earlier, just message and we'll do our best — usually fine if you're our only changeover that day." },
        { q: 'Where are you, exactly?', a: "We're in Luxborough, near Watchet, Somerset, on the eastern edge of Exmoor. Postcode TA23 0SB. About 30 minutes from Tiverton Parkway, an hour from Taunton, two from Bristol." },
        { q: 'What about parking?', a: "On the gravel by the gate — room for two cars per cottage. The lane up is narrow but tarmac all the way." },
      ],
    },
    {
      heading: 'The cottages',
      items: [
        { q: 'Are dogs welcome?', a: "Yes, in both cottages. There's a shared, fully-fenced lawn, towels for muddy paws by the door, and a small fee of £30 per dog per night." },
        { q: 'Is there WiFi?', a: "Fast fibre in both cottages — fast enough for a film, not so fast you'll be tempted to work." },
        { q: "What's provided?", a: "Logs for the wood-burner, milk and bread on arrival, fresh flowers from the cutting garden when in season, a bottle of something local on the kitchen table, and a working larder of staples." },
        { q: 'Can the two cottages be booked together?', a: "Yes — we sometimes have whole-farm bookings for families and small groups. Eight guests across both. Message us for a combined rate." },
      ],
    },
  ];

  const [open, setOpen] = React.useState({ '0-0': true });

  return (
    <section id="faq" style={{ padding: '120px 56px', background: 'var(--bg-2)' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ marginBottom: 48, textAlign: 'center' }}>
          <div className="eyebrow" style={{ marginBottom: 14 }}>Practical things</div>
          <h2 style={{ fontSize: 'var(--fs-h2)', margin: 0 }}>The questions we usually get.</h2>
        </div>

        <div className="slf-faq-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64 }}>
          {groups.map((g, gi) => (
            <div key={gi}>
              <h3 style={{
                fontFamily: 'var(--font-serif)', fontStyle: 'italic',
                fontSize: 26, fontWeight: 500, color: 'var(--sage-deep)',
                margin: 0, marginBottom: 16,
              }}>{g.heading}</h3>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
                {g.items.map((item, ii) => {
                  const k = `${gi}-${ii}`;
                  const isOpen = open[k];
                  return (
                    <li key={k} style={{ borderTop: '1px solid var(--border)' }}>
                      <button
                        onClick={() => setOpen((o) => ({ ...o, [k]: !o[k] }))}
                        style={{
                          width: '100%', textAlign: 'left',
                          background: 'none', border: 0, padding: '20px 0',
                          display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
                          cursor: 'pointer', fontFamily: 'var(--font-sans)', fontSize: 16,
                          fontWeight: 600, color: 'var(--fg)',
                        }}>
                        <span>{item.q}</span>
                        <span aria-hidden style={{
                          fontFamily: 'var(--font-serif)', fontSize: 24, color: 'var(--sage-deep)',
                          transform: isOpen ? 'rotate(45deg)' : 'rotate(0)',
                          transition: 'transform var(--dur-mid) var(--ease-out)',
                          display: 'inline-block', lineHeight: 1,
                        }}>+</span>
                      </button>
                      {isOpen && (
                        <p style={{
                          fontFamily: 'var(--font-serif)', fontSize: 17, fontStyle: 'italic',
                          lineHeight: 1.55, color: 'var(--fg-2)', margin: 0, padding: '0 0 22px',
                          maxWidth: '52ch',
                        }}>{item.a}</p>
                      )}
                    </li>
                  );
                })}
                <li style={{ borderTop: '1px solid var(--border)' }}/>
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.FAQ = FAQ;