// FAQ V2 — Lista simplă, fără filtre/categorii
const { useState: useStateFV2 } = React;

const FAQ_V2_ITEMS = [
  { q: "Cât durează să facem integrarea?",
    a: "15-20 de minute. Conectăm magazinul, alegi serviciile dorite, iar noi începem să îți confirmăm comenzile." },
  { q: "Ce include o confirmare cap-coadă?",
    a: "Confirmare Mesaj WhatsApp→(dacă clientul nu răspunde)→Inițiere Apel Confirmare→(dacă clientul nu răspunde)→Inițiere Apel Secundar." },
  { q: "Ce plătesc exact?",
    a: "Plătești doar ce folosești. SMS (dacă vrei), Inițierea Apelurilor și Conectarea la Apelul de Confirmare propriu-zis cu clientul — fără costuri ascunse." },
  { q: "Există contract minim?",
    a: "Absolut deloc. Rămâi alături de noi cât timp dorești tu, nu te obligăm la un timp minim." },
  { q: "Ce platforme suportați?",
    a: "Shopify, WooCommerce, Wordpress, și orice alt host custom. Doar ne spui ce platformă folosești și ne ocupăm de integrare." },
  { q: "Ce se întâmplă dacă agentul dedicat face o greșeală?",
    a: "Ne responsabilizăm să corectăm greșeala. Tot ce ține de corectarea greșelii, nu facturăm — fără cost suplimentar pentru tine." },
];

const FAQV2 = () => {
  const [open, setOpen] = useStateFV2(null);

  return (
    <div className="ev-stage" style={{ width: "100%", height: "100%", padding: "60px 80px" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 16 }}>
        <span style={{ width: 6, height: 6, borderRadius: 999, background: "var(--neon-purple)", boxShadow: "0 0 12px var(--neon-purple)" }} />
        <span style={{ fontSize: 12, fontWeight: 700, color: "var(--fg-3)", letterSpacing: "0.24em", textTransform: "uppercase" }}>Întrebări frecvente</span>
      </div>

      <h2 style={{ fontSize: 48, fontWeight: 900, color: "#fff", letterSpacing: "-0.03em", lineHeight: 1.05, margin: "0 0 36px", maxWidth: 760 }}>
        Răspunsuri la întrebările tale.
      </h2>

      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        {FAQ_V2_ITEMS.map((it, i) => {
          const isOpen = open === i;
          return (
            <div key={i} className="ev-glass" style={{
              padding: "20px 24px",
              borderColor: isOpen ? "rgba(9,169,85,0.30)" : "var(--glass-border)",
              cursor: "pointer", transition: "border-color .2s ease",
            }} onClick={() => setOpen(isOpen ? null : i)}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16 }}>
                <span style={{ fontSize: 17, fontWeight: 700, color: "#fff", letterSpacing: "-0.01em", flex: 1 }}>{it.q}</span>
                <span style={{
                  width: 30, height: 30, borderRadius: "50%",
                  background: isOpen ? "rgba(9,169,85,0.20)" : "rgba(255,255,255,0.06)",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  transform: isOpen ? "rotate(0deg)" : "rotate(180deg)",
                  transition: "all .25s ease",
                  flexShrink: 0,
                }}>
                  <window.Icon name="phone-call" size={15} color="var(--neon-purple-2)" strokeWidth={2.2} />
                </span>
              </div>
              {isOpen && (
                <div style={{ marginTop: 14, fontSize: 15, color: "var(--fg-2)", lineHeight: 1.6 }}>
                  {it.a.includes("→") ? it.a.split("→").map((part, idx, arr) => {
                    const isParenthetical = part.trim().startsWith("(");
                    return (
                      <React.Fragment key={idx}>
                        <span style={isParenthetical ? undefined : { color: "var(--neon-purple)" }}>{part}</span>
                        {idx < arr.length - 1 && (
                          <span style={{ color: "var(--neon-purple)", fontWeight: 800, fontSize: 13, margin: "0 4px" }}>→</span>
                        )}
                      </React.Fragment>
                    );
                  }) : it.a}
                </div>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
};

window.FAQV2 = FAQV2;