/* global React */
const { useState: useStateFaq } = React;

function FaqSection() {
  const items = [
    {
      q: "How much does it cost?",
      a: "A flat monthly fee based on your average monthly business volume — this covers transaction categorization, reconciliation, and monthly statements. We'll quote a number after a quick call about your business.",
    },
    {
      q: "Can you do more than bookkeeping?",
      a: "If it's useful, yes — accounts receivable and accounts payable management are available as add-ons depending on what your business needs.",
    },
  ];
  const [open, setOpen] = useStateFaq(0);
  return (
    <section id="faq" style={faqStyles.wrap}>
      <div style={faqStyles.inner}>
        <div style={faqStyles.head}>
          <div className="t-eyebrow">FAQ</div>
          <h2 style={faqStyles.h2}>Questions we get.</h2>
        </div>
        <div style={faqStyles.list}>
          {items.map((it, i) => (
            <FaqItem
              key={i}
              q={it.q}
              a={it.a}
              open={open === i}
              onClick={() => setOpen(open === i ? -1 : i)}
            />
          ))}
        </div>
      </div>
    </section>
  );
}

function FaqItem({ q, a, open, onClick }) {
  return (
    <div style={{ ...faqStyles.item, ...(open ? faqStyles.itemOpen : null) }}>
      <button onClick={onClick} style={faqStyles.row}>
        <span style={faqStyles.q}>{q}</span>
        <span style={{ ...faqStyles.chev, transform: open ? "rotate(180deg)" : "rotate(0deg)" }}>
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
            <path d="M3 5 L7 9 L11 5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </span>
      </button>
      <div style={{ ...faqStyles.answerWrap, maxHeight: open ? 240 : 0, opacity: open ? 1 : 0 }}>
        <p style={faqStyles.answer}>{a}</p>
      </div>
    </div>
  );
}

const faqStyles = {
  wrap: { padding: "64px 40px", background: "var(--paper-2)" },
  inner: { maxWidth: 1100, margin: "0 auto" },
  head: { marginBottom: 40 },
  h2: { fontFamily: "var(--font-display)", fontSize: 40, fontWeight: 600, lineHeight: 1.15, letterSpacing: "-0.02em", margin: "14px 0 0", color: "var(--ink-900)" },
  list: { display: "flex", flexDirection: "column", gap: 0, borderTop: "1px solid var(--border)" },
  item: { borderBottom: "1px solid var(--border)" },
  itemOpen: {},
  row: {
    width: "100%", display: "flex", justifyContent: "space-between", alignItems: "center",
    padding: "22px 4px", background: "transparent", border: "none", cursor: "pointer",
    textAlign: "left", color: "var(--ink-900)",
  },
  q: { fontFamily: "var(--font-display)", fontSize: 19, fontWeight: 600, letterSpacing: "-0.01em", flex: 1, paddingRight: 16 },
  chev: {
    width: 30, height: 30, borderRadius: 99, background: "var(--paper-2)",
    color: "var(--fg-muted)", display: "inline-flex", alignItems: "center", justifyContent: "center",
    transition: "transform 200ms var(--ease-out)", flexShrink: 0, marginLeft: 24,
  },
  answerWrap: {
    overflow: "hidden",
    transition: "max-height 280ms var(--ease-out), opacity 200ms var(--ease-out)",
  },
  answer: {
    fontSize: 15.5, lineHeight: 1.65, color: "var(--fg-muted)",
    margin: "0 0 22px", maxWidth: 620,
  },
};

window.FaqSection = FaqSection;