/* global React, Icons */
const { useState } = React;

const FAQS = [
  { q: "What is Meefi and how does it work?",
    a: "Meefi is a digital financial platform that lets you manage payments, invoicing and business finances from a single place. We simplify your operations with automated tools and an intuitive interface." },
  { q: "How long does it take to sign up?",
    a: "You can apply and start operating in under 24 hours. Our onboarding process is guided so you don't waste time." },
  { q: "Can I apply as an individual?",
    a: "No. Meefi currently only operates with legal entities. As soon as we offer that service, we'll announce it through our official channels." },
  { q: "What does Meefi use the CIEC key for?",
    a: "To sync invoices with the SAT, generate real-time receivables and payables dashboards, and automatically manage clients and suppliers." },
  { q: "Can I make international payments?",
    a: "Yes. Send and receive payments abroad with no hidden fees, with access to Multi-Currency Accounts to operate in your clients' or suppliers' currency." },
];

function FAQSection() {
  const [open, setOpen] = useState(-1);
  return (
    <section id="faq" style={{ padding: "112px 0" }}>
      <style>{FAQ_DARK_CSS}</style>
      <div className="wrap-tight">
        <div className="reveal" style={{ textAlign: "center", marginBottom: 56 }}>
          <div className="eyebrow" style={{ marginBottom: 16 }}>
            <span className="dot"/> Frequently asked questions
          </div>
          <h2 style={{
            margin: 0, fontFamily: "var(--font-display)",
            fontWeight: 500, fontSize: "clamp(2rem, 2.5vw + 1rem, 2.75rem)",
            letterSpacing: "-0.02em", lineHeight: 1.1, color: "#FFFFFF",
          }}>
            Everything you need to know<br/>
            <span style={{ color: "rgba(234,240,251,.6)" }}>before you start.</span>
          </h2>
        </div>

        <div className="reveal">
          {FAQS.map((f, i) => {
            const isOpen = open === i;
            return (
              <div key={i} className={`faq-row ${isOpen ? "is-open" : ""}`}>
                <button
                  className="faq-q"
                  data-hover="1"
                  onClick={() => setOpen(isOpen ? -1 : i)}
                >
                  {f.q}
                  <span className="faq-icon">
                    <Icons.Plus size={14} stroke={2}/>
                  </span>
                </button>
                <div className="faq-a">
                  <p className="faq-a-inner">{f.a}</p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}
// Dark overrides scoped to #faq — the section now alternates dark (between
// light Offices and light CTA). Reuses the global .faq-* classes without
// altering them for the rest of the site.
const FAQ_DARK_CSS = `
#faq{ position:relative; overflow:hidden; color:#EAF0FB;
  background:
    radial-gradient(900px 600px at 18% 26%, rgba(5,48,206,.18), transparent 64%),
    radial-gradient(760px 520px at 86% 80%, rgba(90,116,236,.12), transparent 60%),
    var(--blue-950); }
#faq .eyebrow{ color:#B7CCFB; }
#faq .eyebrow .dot{ background:#8CA0F6;
  box-shadow:0 0 0 4px rgba(140,160,246,.16), 0 0 12px rgba(140,160,246,.7); }
#faq .faq-row{ border-bottom:1px solid rgba(140,160,246,.18); }
#faq .faq-row:first-child{ border-top:1px solid rgba(140,160,246,.18); }
#faq .faq-q{ color:#EAF0FB; }
#faq .faq-row:hover .faq-q,
#faq .faq-row.is-open .faq-q{ color:#B7CCFB; }
#faq .faq-icon{ border-color:rgba(140,160,246,.35); color:#B7CCFB; }
#faq .faq-row.is-open .faq-icon{ background:var(--accent); border-color:var(--accent); color:#fff; }
#faq .faq-a-inner{ color:rgba(234,240,251,.7); }
`;
window.FAQSection = FAQSection;