// faq.jsx — FAQ accordion

const FAQS = [
  { q: "What exactly will I receive?",
    a: "Instant digital access to your books. PDF and ePub. Yours to keep, to re-read, to share quietly with someone you love. No subscription. No app to download. The practices live on your shelf, not on a server." },
  { q: "How long does each practice take?",
    a: "Five minutes. Sometimes less. Never more than seven. The practices are designed for a tired modern life — they meet you where you already are. Do not rush. If a practice takes you ten minutes one evening, that is also correct." },
  { q: "I have tried meditation apps. They did not work.",
    a: "My friend — neither did they for many. The work here is not about meditation. It is about specific, named, ancient practices: a Himalayan breath, a Japanese morning bow, a warm-water ritual from Ayurveda. The practice is the medicine. The app is not." },
  { q: "Is this religious?",
    a: "No. Each tradition is named with respect, and the practice is offered without dogma. You do not need to believe anything. You only need to breathe. The traditions came from a religious context, but the practices belong to anyone willing to sit quietly." },
  { q: "Will it actually help me sleep / with anxiety / with focus?",
    a: "We make no medical claims. We will say only this: thousands of readers report that something shifts. Sleep softens. The internal alarm quiets. The morning is less hostile. We do not promise transformation. We offer a quiet practice." },
  { q: "What if it is not for me?",
    a: "Refunds, gladly, for thirty days — without explanation. No questions. No forms. Just write us, and the money returns to you. You came in good faith; you may leave the same way." },
  { q: "Do I need anything to begin?",
    a: "A quiet room. A candle, if you have one. Twenty minutes the first night, five minutes after that. Nothing else. No yoga mat. No journal. No special clothing. The practice is portable. The practice is small. That is its strength." },
];

const FaqItem = ({ item, isOpen, onClick }) => {
  const ref = useRef(null);
  return (
    <div className={`faq__item ${isOpen ? "is-open" : ""}`}>
      <button className="faq__btn" onClick={onClick} aria-expanded={isOpen}>
        <span>{item.q}</span>
        <span className="faq__icon" aria-hidden="true"></span>
      </button>
      <div
        className="faq__answer"
        style={{ maxHeight: isOpen && ref.current ? ref.current.scrollHeight + "px" : 0 }}
      >
        <div className="faq__answer-inner" ref={ref}>
          {item.a}
        </div>
      </div>
    </div>
  );
};

const FAQ = () => {
  const [open, setOpen] = useState(0);
  return (
    <section className="section section--dark" id="faq">
      <div className="section__head">
        <span className="label" style={{ color: "var(--gold-deep)" }}>Quiet Answers</span>
        <Divider width={100} />
        <h2 className="section__title">Before You Begin</h2>
        <p className="section__lead">
          The questions readers ask before they sit down for the first time.
        </p>
      </div>

      <Reveal>
        <div className="faq__list">
          {FAQS.map((item, i) => (
            <FaqItem
              key={i}
              item={item}
              isOpen={open === i}
              onClick={() => setOpen(open === i ? -1 : i)}
            />
          ))}
        </div>
      </Reveal>
    </section>
  );
};

Object.assign(window, { FAQ, FAQS });