// Faqs.jsx — accordion, one open at a time

function Faqs() {
  useLucide();
  const [openIdx, setOpenIdx] = useState(0);

  const faqs = [
    {
      q: "Do I need to know any tech?",
      a: "No. That's the whole point. We do the technical work. You tell us what's eating your time.",
    },
    {
      q: "Is my business data safe?",
      a: "Yes. Your data stays inside the accounts you already use — Google, Xero, your CRM. For the AI Paperwork Assistant, your information is kept in your own private vault, locked away on one of the world's most trusted and secure storage platforms — the same kind of bank-grade technology used by major tech companies. Everything is encrypted, backed up, and never mixed with other clients' data or used to train AI models.",
    },
    {
      q: "What if the AI gets something wrong?",
      a: "The assistants are trained on your business and tested before they go live. They hand over to you when something is beyond them rather than guessing. If it gets something wrong in real use, we fix it — that's what the monthly service is for.",
    },
    {
      q: "Can I cancel the monthly service?",
      a: "Yes, anytime, with one month's notice. No long contracts.",
    },
    {
      q: "How long does setup take?",
      a: "Most Ready-to-Fit tools are live within two weeks. The AI Fit-Out Session can be booked within a week. Custom Builds we scope together — typically 2–6 weeks.",
    },
    {
      q: "Will it work with my existing tools?",
      a: "Probably. We work with WhatsApp, Google Calendar, Gmail, Xero, QuickBooks, Stripe, and most common small-business tools. If you use something niche, tell us — we'll check before you commit to anything.",
    },
    {
      q: "What if I want something that's not in the standard tools?",
      a: "That's exactly what the Custom Build is for. Or start with a Fit-Out Session — we'll tell you straight if a standard tool will do, or if you need a custom build.",
    },
    {
      q: "Where are you based? Do you work in person?",
      a: "We're UK-based, west London. The AI Fit-Out Session can be online or in person depending on where you are. Setup and ongoing service is mostly remote — we don't need to be on-site to plug AI into your tools.",
    },
    {
      q: "Do you tie me into a contract?",
      a: "No. Setup is a one-off fee. Monthly service is rolling — cancel with one month's notice.",
    },
  ];

  return (
    <Section id="faqs" bg="sand">
      <div style={{ display: "grid", gridTemplateColumns: "0.85fr 1.4fr",
                    gap: 72, alignItems: "start" }} className="grid-faq">

        {/* Left: heading */}
        <div>
          <Eyebrow>FAQs</Eyebrow>
          <h2 style={{
            fontSize: "clamp(36px, 5vw, 56px)", fontWeight: 800,
            letterSpacing: "-0.03em", lineHeight: 1.05,
            margin: "14px 0 20px", color: "var(--ink)", textWrap: "balance",
          }}>Common questions.</h2>
        </div>

        {/* Right: accordion */}
        <div style={{
          background: "#fff", borderRadius: 20, padding: "8px 32px",
          border: "1px solid var(--line)",
        }}>
          {faqs.map((f, i) => {
            const open = openIdx === i;
            return (
              <div key={i} style={{
                borderBottom: i === faqs.length - 1 ? "none" : "1px solid var(--line-2)",
              }}>
                <button onClick={() => setOpenIdx(open ? -1 : i)}
                  style={{
                    width: "100%", background: "transparent", border: "none",
                    padding: "22px 0", cursor: "pointer",
                    display: "flex", justifyContent: "space-between",
                    alignItems: "center", gap: 16, textAlign: "left",
                  }}>
                  <span style={{ fontSize: 17.5, fontWeight: 600, color: "var(--ink)",
                                 letterSpacing: "-0.005em", lineHeight: 1.35 }}>{f.q}</span>
                  <span style={{
                    width: 32, height: 32, borderRadius: 99, flexShrink: 0,
                    background: open ? "var(--ink)" : "var(--sand)",
                    color: open ? "#fff" : "var(--ink)",
                    display: "inline-flex", alignItems: "center", justifyContent: "center",
                    transition: "background .15s var(--t-ease), transform .2s var(--t-ease)",
                    transform: open ? "rotate(45deg)" : "rotate(0deg)",
                  }}>
                    <i data-lucide="plus" style={{ width: 16, height: 16, strokeWidth: 2.5 }}></i>
                  </span>
                </button>
                <div style={{
                  display: "grid",
                  gridTemplateRows: open ? "1fr" : "0fr",
                  transition: "grid-template-rows .25s var(--t-ease)",
                }}>
                  <div style={{ overflow: "hidden" }}>
                    <p style={{
                      fontSize: 16, lineHeight: 1.6, color: "var(--ink-soft)",
                      margin: 0, paddingBottom: 22, paddingRight: 40, maxWidth: 640,
                      textWrap: "pretty",
                    }}>{f.a}</p>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </Section>
  );
}
window.Faqs = Faqs;