/* global React, Reveal, ArrowGlyph */

// =========================================================
// FAQ — objection-handling before the final ask.
// Lives between Ways-to-Work and the Final CTA.
// =========================================================
function FAQ({ onBook }) {
  const items = [
    {
      q: "How much does it cost?",
      a: "I don't post prices, because the right number depends on which path actually fits you — self-paced, a group, or 1:1. We work that out on the discovery call, and if budget is the blocker I'll point you to the lowest-cost way in. No pressure, no obligation.",
    },
    {
      q: "How much money do I need to start selling?",
      a: "Enough for your first small inventory run and a few samples — not a fortune, but it isn't zero. On the call we right-size a first product to your actual budget so you're never betting money you can't afford to lose on an unproven idea.",
    },
    {
      q: "I'm a complete beginner. Is this for me?",
      a: "Yes — first-time sellers are exactly who I built this for. You don't need a product, a brand, or any Amazon experience. What you do need is the patience to do the boring middle properly, in the right order.",
    },
    {
      q: "How long until I make my first sale?",
      a: "Most students reach their first sale within 90 days of starting. That depends on your product, your effort, and the market — I can't and won't promise a number. What I can promise is you won't waste the first six months guessing.",
    },
    {
      q: "Do I need to be in a particular country?",
      a: "No. I've coached sellers across New Zealand, Australia, the UK, the US and Europe — Amazon is global and so is the playbook. I'm based in Auckland, and we work entirely over video either way.",
    },
    {
      q: "Is this just another course?",
      a: "No. Courses hand you videos and disappear. This is coaching — real access to me, feedback on your actual products, and someone in your corner when it gets hard. I still sell on Amazon myself, so you're learning from someone in the arena, not a retired guru.",
    },
    {
      q: "What if you don't think I'm ready?",
      a: "I'll tell you straight, and tell you exactly what to fix first — even if that means not working with me yet. The discovery call is free and useful either way. I'd rather lose a sale than take your money before you're set up to win.",
    },
  ];

  const [open, setOpen] = React.useState(0);

  return (
    <section id="faq" className="section faq">
      <div className="container">
        <div className="faq__grid">
          <Reveal className="faq__aside">
            <div className="eyebrow">FAQ</div>
            <h2 className="display">Before<br />you book.</h2>
            <p className="lead faq__lead">
              The honest answers to what most first-time sellers ask me — money,
              time, and whether this is even right for you.
            </p>
            <div className="faq__aside-cta">
              <button className="btn btn--primary" onClick={onBook}>
                Book a discovery call <ArrowGlyph />
              </button>
              <span className="label-mono">still stuck? hello@jaysbansal.com</span>
            </div>
          </Reveal>

          <Reveal className="faq__list">
            {items.map((it, i) => {
              const isOpen = open === i;
              return (
                <div className={`faq__item ${isOpen ? "is-open" : ""}`} key={i}>
                  <button
                    className="faq__q"
                    onClick={() => setOpen(isOpen ? -1 : i)}
                    aria-expanded={isOpen}
                  >
                    <span className="faq__q-num">{String(i + 1).padStart(2, "0")}</span>
                    <span className="faq__q-text">{it.q}</span>
                    <span className="faq__q-icon" aria-hidden="true"></span>
                  </button>
                  <div className="faq__a-clip">
                    <div className="faq__a-inner">
                      <p>{it.a}</p>
                    </div>
                  </div>
                </div>
              );
            })}
          </Reveal>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { FAQ });