const FAQS = [
  { q: "How do you make money? What are your fees?", a: "We charge a flat annual planning fee (₹50,000–₹2,50,000 depending on complexity) and a 0.5–1.0% AUM fee for managed portfolios. We use direct mutual funds — zero commission — so we have no incentive to push specific products." },
  { q: "What's the minimum investment to work with you?", a: "Our planning service starts at any size. For our discretionary wealth management practice, we work with portfolios of ₹50 lakh and above — including investments held elsewhere." },
  { q: "Are you registered and qualified?", a: "Yes. MaxWealth is an AMFI Registered Mutual Fund Distributor, a Certified Financial Planner (FPSB) and an MSME-registered firm, backed by 20+ years of experience in financial services and banking." },
  { q: "Do you work with NRIs and overseas Indians?", a: "Yes — roughly 28% of our client base is NRI. We handle FEMA-compliant onboarding, NRE/NRO/RFC structuring, DTAA positioning, and global diversification under the LRS scheme." },
  { q: "Will I get a single point of contact?", a: "Yes. Every client has a dedicated planner and an associate. You'll never be routed through a call centre or a chatbot. WhatsApp included." },
  { q: "How is this different from a robo-advisor or my bank's wealth desk?", a: "Robo-advisors give you an algorithm; banks give you whichever fund pays the highest commission this quarter. We give you a person who knows your kids' names, your tax slab and your fears." },
];

const TeamFaq = () => {
  const [openIdx, setOpenIdx] = useState(0);

  return (
    <section id="about" className="block" style={{ background: "var(--green-800)", color: "var(--cream)" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 56, alignItems: "start" }} className="faq-grid">
          <div>
            <Marker index={7} total={7} label="Things people ask"/>
            <h2 className="display" style={{ fontSize: "clamp(33px, 3.8vw, 46px)", lineHeight: 1.02, marginTop: 24, color: "var(--cream)", maxWidth: "14ch" }}>
              Before you book a call.
            </h2>
            <p style={{ fontSize: 17, color: "rgba(250,246,236,0.72)", marginTop: 24, maxWidth: 380, lineHeight: 1.6 }}>
              Still have a question? Write to <a href="mailto:maxwealthfin@gmail.com" style={{ color: "var(--gold-400)", borderBottom: "1px solid currentColor" }}>maxwealthfin@gmail.com</a> — we reply within a working day.
            </p>
            <a href="#consult" className="btn btn-gold" style={{ marginTop: 32 }}>
              Book a consult <ArrowIcon/>
            </a>
          </div>
          <div>
            {FAQS.map((f, i) => {
              const isOpen = openIdx === i;
              return (
                <div key={i} style={{ borderTop: "1px solid var(--hairline-light)" }}>
                  <button onClick={() => setOpenIdx(isOpen ? -1 : i)} style={{
                    width: "100%", padding: "26px 0", display: "flex", justifyContent: "space-between", alignItems: "center",
                    textAlign: "left", color: "var(--cream)"
                  }}>
                    <span className="display" style={{ fontSize: 19, paddingRight: 32, fontWeight: 600 }}>{f.q}</span>
                    <span style={{
                      width: 36, height: 36, borderRadius: "50%", border: "1px solid var(--hairline-light)",
                      display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0,
                      transition: "transform .3s ease, background .2s, color .2s",
                      transform: isOpen ? "rotate(45deg)" : "none",
                      background: isOpen ? "var(--gold-500)" : "transparent",
                      color: isOpen ? "var(--green-900)" : "var(--cream)"
                    }}>
                      <svg width="14" height="14" viewBox="0 0 14 14"><path d="M7 0v14M0 7h14" stroke="currentColor" strokeWidth="1.5"/></svg>
                    </span>
                  </button>
                  <div style={{
                    maxHeight: isOpen ? 280 : 0, overflow: "hidden", transition: "max-height .5s cubic-bezier(.2,.7,.2,1)",
                  }}>
                    <p style={{ paddingBottom: 28, fontSize: 15, lineHeight: 1.65, color: "rgba(250,246,236,0.78)", maxWidth: "60ch" }}>
                      {f.a}
                    </p>
                  </div>
                </div>
              );
            })}
            <div style={{ borderTop: "1px solid var(--hairline-light)" }}/>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px){
          .faq-grid{ grid-template-columns: 1fr !important; gap: 36px !important }
        }
      `}</style>
    </section>
  );
};

window.TeamFaq = TeamFaq;