/* global React */
const { useState: useFaqState } = React;

const FAQ_ITEMS = [
  ["Why revenue share instead of a retainer?",
   "Because incentives should be aligned. A retainer gets paid whether or not the business grows. We take a share of the upside, which means the risk of performance sits with us. We make money when you make money, that's the whole model."],
  ["What exactly do you take off my plate?",
   "Your job as a coach is to create content and deliver for your students. That's it. Instead, most coaches end up buried in admin work, tech setup, operations, and things they have to figure out from scratch.\n\nThat's exactly what we take off your plate. Backend infrastructure, your full funnel, all the copywriting, launch campaigns, a trained sales team handling your calls and DMs, and ongoing management of the entire operation. You stay in front of your audience and your students. We run everything behind it."],
  ["Who is this actually for?",
   "Coaches and info sellers who already have an offer, an audience, and revenue, and who have become the bottleneck in their own business. If you're pre-offer or pre-audience, we're probably not the right fit yet."],
  ["Why such a small client roster?",
   "Owning an outcome end-to-end is deep work. We deliberately keep the roster small so every operation gets the attention it needs. It also means we're selective. We diagnose before we build, and we only take on businesses we believe we can scale."],
  ["What happens on the call?",
   "We audit where you are and find the real bottleneck, which usually isn't the one you'd name. You leave with a clear read on what we'd own first. No pitch deck, no pressure."],
];

function FaqItem({ idx, q, a, open, onToggle }) {
  return (
    <div className="lp-faq__item" data-open={open ? "true" : "false"}>
      <button className="lp-faq__q" onClick={onToggle} aria-expanded={open}>
        <span className="lp-faq__idx smo-num">{String(idx + 1).padStart(2, "0")}</span>
        <span className="lp-faq__qtext">{q}</span>
        <span className="lp-faq__sign">+</span>
      </button>
      <div className="lp-faq__a" style={{ maxHeight: open ? "640px" : 0 }}>
        {a.split("\n\n").map((para, i) => (
          <p className="lp-faq__atext" key={i}>{para}</p>
        ))}
      </div>
    </div>
  );
}

function LpFaq() {
  const [openIdx, setOpenIdx] = useFaqState(0);
  return (
    <section id="faq" className="lp-faq">
      <div className="lp-faq__head reveal">
        <p className="smo-eyebrow">Questions</p>
        <h2 className="smo-h2" style={{ marginTop: "16px" }}>
          The model, <span className="smo-accent">answered plainly</span>.
        </h2>
      </div>
      <div className="lp-faq__list reveal">
        {FAQ_ITEMS.map(([q, a], i) => (
          <FaqItem key={q} idx={i} q={q} a={a}
                   open={openIdx === i}
                   onToggle={() => setOpenIdx(openIdx === i ? -1 : i)} />
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { LpFaq });