// FAQ — accordion. "Questions you should be asking."

function FAQ() {
  const [open, setOpen] = React.useState(0);
  const qs = [
    { q: "What's your commission structure?",
      a: "Tiered, transparent, written into every contract. The more you earn, the better your rate gets. No hidden fees, no cut of promo spend, no percentage skim on tips." },
    { q: "Can I talk to a creator you currently manage?",
      a: "Yes. Ask us on the intro call and we'll connect you with one in a similar niche." },
    { q: "What happens if it's not working?",
      a: "We tell you first. Month-to-month after the first 90 days — if it's not clicking, you can walk. We don't want to keep anyone who doesn't want to be here." },
    { q: "Who exactly will be managing my page?",
      a: "You'll know every person on your team by name. Your account manager, your chatters, your content director. Not a rotating offshore pool." },
    { q: "How do you train chatters on my voice?",
      a: "Before anyone sends a message on your behalf, we spend a full week studying how you actually talk — your DMs, your captions, your slang. You approve the training doc. Then we onboard." },
    { q: "Do you need my password?",
      a: "For some platforms, yes. For OnlyFans specifically we use official creator permissions where possible. We'll walk you through every access request and explain why it's needed." },
    { q: "How fast will I see results?",
      a: "Chat revenue usually moves in weeks. Follower growth and content performance takes 60–90 days to compound. Anyone promising instant results is lying." },
  ];

  return (
    <section id="faq" className="relative py-40 md:py-48" data-screen-label="FAQ">
      <div className="absolute left-0 top-1/3 w-[500px] h-[500px] rounded-full bg-[rgba(232,160,160,0.02)] blur-[160px] pointer-events-none"></div>
      <div className="max-w-[1400px] mx-auto px-6 md:px-10">
        <div className="grid grid-cols-12 gap-8 mb-20">
          <div className="col-span-12 md:col-span-5 md:sticky md:top-28 self-start">
            <SecLabel num="09 / 09">FAQ</SecLabel>
            <h2 className="mt-6 font-display font-semibold tracking-tight leading-[0.95]" style={{ fontSize: "clamp(44px, 5vw, 80px)" }}>
              Questions you should be <GradientText>asking.</GradientText>
            </h2>
            <p className="mt-8 text-[14px] text-[#7a7a7a] font-light leading-relaxed max-w-sm">
              Ask every agency these seven questions. Compare the answers. <span className="text-[#f0ece8]">You'll see the difference fast.</span>
            </p>
            <div className="mt-10 p-6 border border-[rgba(232,160,160,0.2)] bg-[rgba(232,160,160,0.03)]">
              <p className="text-[11px] tracking-[0.3em] uppercase text-[rgba(232,160,160,0.7)] mb-3">— Don't see yours?</p>
              <a href="#cta" className="font-display text-[18px] font-medium text-[#f0ece8] hover:text-[#E8A0A0] transition-colors">
                Ask us on the intro call →
              </a>
            </div>
          </div>

          <div className="col-span-12 md:col-span-7">
            <div className="border-t border-white/[0.06]">
              {qs.map((q, i) => {
                const isOpen = open === i;
                return (
                  <div key={i} className="border-b border-white/[0.06]">
                    <button
                      onClick={() => setOpen(isOpen ? -1 : i)}
                      className="w-full text-left py-7 flex items-start justify-between gap-6 group"
                      data-cursor="lg"
                    >
                      <div className="flex items-start gap-5">
                        <span className="font-display text-[11px] tracking-[0.3em] text-[rgba(232,160,160,0.5)] mt-2 shrink-0">0{i+1}</span>
                        <span className="font-display text-[20px] md:text-[24px] font-medium tracking-tight leading-tight text-[#f0ece8] group-hover:text-[#E8A0A0] transition-colors duration-300">
                          {q.q}
                        </span>
                      </div>
                      <span
                        className="shrink-0 mt-2 text-[#E8A0A0] text-[22px] leading-none transition-transform duration-500"
                        style={{ transform: isOpen ? "rotate(45deg)" : "rotate(0deg)" }}
                      >+</span>
                    </button>
                    <div
                      className="overflow-hidden transition-all duration-600"
                      style={{
                        maxHeight: isOpen ? "400px" : "0px",
                        opacity: isOpen ? 1 : 0,
                      }}
                    >
                      <div className="pb-8 pl-10 pr-12">
                        <p className="text-[15px] md:text-[16px] text-[#a0a0a0] font-light leading-[1.65]">{q.a}</p>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>

            <div className="mt-10 flex flex-col sm:flex-row gap-3">
              <BtnArrow href="#cta">Book a Call</BtnArrow>
              <BtnArrow variant="ghost" href="mailto:hello@palm-mgmt.com">Email us instead</BtnArrow>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.FAQ = FAQ;