// faq.jsx — FAQ page with accordion dropdowns

const FAQ_GROUPS = [
  {
    label: "Donating",
    items: [
      {
        q: "Can I make a one-off donation, or does it have to be monthly?",
        a: "Both options are available. A one-off donation goes directly toward the campaign you choose. Monthly giving is especially valuable because it allows us to prioritise urgent cases as they come in — children waiting for surgery don't always have the luxury of time.",
      },
      {
        q: "Where exactly does my money go?",
        a: "91% goes directly to medical care — paid to the treating practitioner against the child's verified treatment plan. 6% covers case verification and follow-up (visiting families, confirming diagnoses, tracking outcomes). 3% covers platform operations. Donations are never held in a general fund and are never paid to families directly.",
      },
      {
        q: "Are donations tax-deductible?",
        a: "Not yet. We are actively working toward tax-deductible status for donors in Australia and the United States. We'll update this page as soon as that changes.",
      },
      {
        q: "How do you process payments?",
        a: "All donations are processed securely through Stripe, one of the world's most trusted payment platforms. Stripe uses bank-level encryption and is PCI DSS compliant. You can donate using any major credit or debit card. Your payment details are never stored by LittleCareFund — they go directly to Stripe's secure servers.",
      },
      {
        q: "What happens if a campaign is already fully funded when I try to donate?",
        a: "Fully funded campaigns are clearly marked. If you arrive at a campaign that has already reached its goal, you'll be offered the option to support another verified child.",
      },
    ],
  },
  {
    label: "How it works",
    items: [
      {
        q: "How are children selected for LittleCareFund?",
        a: "Families are referred to us by partner medical practitioners, community health workers, barangay health centres, and local church and aid networks across the Philippines. We do not solicit cases or run open applications. Every referral is assessed individually.",
      },
      {
        q: "How do you verify a case is genuine?",
        a: "Before any campaign goes live, our case team visits the family (or conducts a video assessment where remote) and obtains a signed treatment referral from the treating practitioner. We confirm the diagnosis, the full treatment plan, and the quoted cost directly with the treating physician. No campaign is published without this sign-off.",
      },
      {
        q: "How long does a campaign run?",
        a: "Most campaigns run for 30 to 60 days, depending on the urgency and size of the funding target. For critical surgical cases — where delay causes direct medical harm — we expedite the campaign and notify our monthly donor pool immediately. Campaigns are closed as soon as they reach their goal.",
      },
      {
        q: "What happens if a campaign doesn't reach its goal in time?",
        a: "We never leave a family without a next step. If a campaign falls short of its goal by the deadline, we use our emergency bridge fund to cover the remaining gap — provided the case meets our criteria. Alternatively, we work with the treating practitioner to explore staged treatment or interim support while fundraising continues.",
      },
      {
        q: "Can I donate to a specific child's campaign?",
        a: "Yes. Every verified child has their own campaign page. You can choose exactly who you want to support, read their full story, and track the outcome. If you prefer not to choose, a general donation is allocated to the most urgent open case at the time.",
      },
    ],
  },
  {
    label: "Trust & transparency",
    items: [
      {
        q: "Is LittleCareFund a registered charity?",
        a: "LittleCareFund is a children's medical support initiative currently operating in the Philippines. Financial statements are prepared annually and made available on request.",
      },
      {
        q: "How do I know the child actually received treatment?",
        a: "We publish outcome reports for every closed campaign — including a summary of treatment received, confirmation from the treating practitioner, and (where the family has consented) a follow-up update on the child's recovery. These are posted on the original campaign page and in our Stories section.",
      },
      {
        q: "Do you publish outcomes even when things don't go as hoped?",
        a: "Yes, always. We believe trust is built on honesty. If a child does not respond to treatment, if complications arise, or if an outcome is uncertain, we say so. Every story in our outcomes section is a complete account — not a curated highlight reel.",
      },
      {
        q: "Who manages donor funds between collection and payment?",
        a: "Donations are processed through Stripe and allocated according to our published breakdown: 91% goes directly to medical care, 6% covers case verification and follow-up, and 3% covers platform operations. All payments to treating practitioners are made only on receipt of treatment confirmation, and every transfer is documented.",
      },
    ],
  },
  {
    label: "For families",
    items: [
      {
        q: "How does a family in the Philippines apply for support?",
        a: "We do not currently run an open public application process. Cases come to us through referrals from our partner medical practitioners and community networks. If you are a healthcare worker or community leader with a child who may qualify, you can contact us directly through our contact page and we will be in touch.",
      },
      {
        q: "What types of medical conditions do you fund?",
        a: "We focus on children who require surgical intervention, specialist treatment, or multi-cycle care that their families cannot afford and that is not accessible through PhilHealth or available government programmes. This includes congenital conditions, paediatric cancers, orthopaedic surgery, reconstructive procedures, and serious acute illness. We assess each case individually.",
      },
      {
        q: "Is there any cost for a family to receive support?",
        a: "No. There is no application fee, administration fee, or repayment obligation of any kind. Families are never asked to contribute to fundraising efforts. Our role is to remove barriers — not to create new ones.",
      },
    ],
  },
];

// ─────────────────────────────────────────────────────────────
// Single accordion item
// ─────────────────────────────────────────────────────────────
function FaqItem({ question, answer, isOpen, onToggle }) {
  return (
    <div style={{ borderBottom: "1px solid var(--line)" }}>
      <button
        onClick={onToggle}
        style={{
          width: "100%", display: "flex", alignItems: "flex-start",
          justifyContent: "space-between", gap: 16,
          background: "none", border: 0, padding: "18px 0",
          cursor: "pointer", textAlign: "left",
        }}
      >
        <span style={{
          fontFamily: "var(--font-display)", fontSize: 17.5, fontWeight: 500,
          color: "var(--ink-deep)", letterSpacing: "-0.01em", lineHeight: 1.3,
          flex: 1,
        }}>
          {question}
        </span>
        <span style={{
          flexShrink: 0, width: 28, height: 28, borderRadius: "50%",
          background: isOpen ? "var(--ink-mid)" : "rgba(86,52,64,0.08)",
          display: "flex", alignItems: "center", justifyContent: "center",
          transition: "background 0.2s ease",
          marginTop: 2,
        }}>
          <svg
            width="14" height="14" viewBox="0 0 14 14" fill="none"
            style={{ transform: isOpen ? "rotate(180deg)" : "rotate(0deg)", transition: "transform 0.25s ease" }}
          >
            <path d="M2.5 5l4.5 4.5L11.5 5" stroke={isOpen ? "#FBF7F4" : "var(--ink-mid)"} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </span>
      </button>

      <div style={{
        overflow: "hidden",
        maxHeight: isOpen ? 400 : 0,
        opacity: isOpen ? 1 : 0,
        transition: "max-height 0.3s cubic-bezier(.2,.8,.2,1), opacity 0.2s ease",
      }}>
        <p style={{
          margin: 0, padding: "0 48px 20px 0",
          fontSize: 15, lineHeight: 1.7, color: "var(--ink-mute)",
        }}>
          {answer}
        </p>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// FAQ group section
// ─────────────────────────────────────────────────────────────
function FaqGroup({ group, openId, onToggle }) {
  return (
    <div style={{ marginBottom: 36 }}>
      <div className="eyebrow" style={{ marginBottom: 14 }}>{group.label}</div>
      <div className="card" style={{ padding: "0 22px" }}>
        {group.items.map((item, i) => (
          <FaqItem
            key={i}
            question={item.q}
            answer={item.a}
            isOpen={openId === `${group.label}-${i}`}
            onToggle={() => onToggle(`${group.label}-${i}`)}
          />
        ))}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// FAQ page
// ─────────────────────────────────────────────────────────────
function FaqPage({ onNavigate }) {
  const [openId, setOpenId] = React.useState(null);

  const handleToggle = (id) => {
    setOpenId(prev => prev === id ? null : id);
  };

  return (
    <>
      {/* Hero */}
      <Section bg="var(--bg-2)">
        <div className="eyebrow" style={{ marginBottom: 10 }}>FAQ</div>
        <h1 className="display" style={{ fontSize: 40, marginBottom: 16 }}>
          Questions &amp; answers.
        </h1>
        <p className="body-md" style={{ maxWidth: 520, marginBottom: 0 }}>
          Everything you need to know about how LittleCareFund works, how funds are managed, and how to get involved. Can't find what you're looking for? Reach out via our contact page.
        </p>
      </Section>

      {/* FAQ groups */}
      <Section>
        {FAQ_GROUPS.map((group) => (
          <FaqGroup
            key={group.label}
            group={group}
            openId={openId}
            onToggle={handleToggle}
          />
        ))}
      </Section>

      {/* CTA */}
      <Section bg="var(--bg-2)">
        <div style={{ display: "flex", flexDirection: "column", gap: 14, alignItems: "flex-start" }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 8 }}>Still have questions?</div>
            <h2 className="display" style={{ fontSize: 28, marginBottom: 10 }}>
              We'd love to hear from you.
            </h2>
            <p className="body-sm" style={{ marginBottom: 0, maxWidth: 420 }}>
              Our team typically responds within one business day. Whether you're a donor, a healthcare worker, or a family in need — we're here.
            </p>
          </div>
          <button className="btn btn--primary" onClick={() => onNavigate && onNavigate("contact")}>
            Contact us
          </button>
        </div>
      </Section>

      <Footer onNavigate={onNavigate} />
    </>
  );
}

Object.assign(window, { FaqPage });
