// TitanFAQ.jsx — 8 plainspoken FAQs

const TitanFAQ = () => {
  const faqs = [
    {
      q: 'Can you file my taxes?',
      a: 'No. Tax preparation, planning, and filing are handled by your CPA or EA. The books are kept in a state where their job is straightforward and their billable hours stay low.',
    },
    {
      q: 'Will you work with my existing CPA or tax preparer?',
      a: 'Yes. At year-end, your tax preparer receives clean books, reconciled statements, and any backup documentation they request. Most prefer this arrangement to doing the cleanup themselves.',
    },
    {
      q: 'What accounting software do you use?',
      a: 'QuickBooks Online for the majority of engagements. Setup, chart of accounts, bank feeds, and rules are configured during onboarding so the monthly close runs predictably.',
    },
    {
      q: "My books haven't been touched in months or even years. Can you fix that?",
      a: 'Yes. Catch-up and clean-up work is a regular part of the practice. Prior periods are reconstructed from statements and source documents before the monthly cadence begins.',
    },
    {
      q: 'How quickly do you respond?',
      a: 'Most messages get a reply within one business day. Urgent items such as lender requests and tax preparer deadlines are flagged and handled the same day when possible.',
    },
    {
      q: 'How is my monthly fee determined?',
      a: 'We base pricing on factors like transaction volume, number of banks, credit card and loan accounts, business complexity, reporting requirements, compliance needs, and the level of ongoing support you require.',
    },
    {
      q: "I'm a one-person business. Am I too small?",
      a: 'No. Solo operators, contractors, and single-member LLCs make up a meaningful portion of the client list. Clean, accurate books benefit every business owner regardless of size, and that\'s exactly who we\'re here to serve.',
    },
    {
      q: 'Where are you located, and do I need to be local?',
      a: 'Sugar Land, Texas. Clients are served nationwide. The work is done remotely with secure access to your accounting and banking platforms.',
    },
  ];

  const [openIdx, setOpenIdx] = React.useState(null);
  const toggle = (i) => setOpenIdx(cur => cur === i ? null : i);

  return (
    <section id="faq" style={{ background: '#fff', padding: '96px 32px', fontFamily: "'DM Sans', sans-serif", borderTop: '1px solid #e5edf5' }}>
      <style>{`
        @media (max-width: 768px) {
          #faq { padding: 56px 20px !important; }
        }
      `}</style>
      <div style={{ maxWidth: 800, margin: '0 auto' }}>
        <div style={{ fontSize: 11, fontWeight: 500, color: '#967844', letterSpacing: 1.2, textTransform: 'uppercase', marginBottom: 14, textAlign: 'center' }}>Questions</div>
        <h2 style={{ fontSize: 'clamp(28px,4vw,40px)', fontWeight: 400, lineHeight: 1.15, letterSpacing: '-0.64px', color: '#0F1A2E', textAlign: 'center', marginBottom: 56, textWrap: 'pretty' }}>
          Common questions, direct answers.
        </h2>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
          {faqs.map((f, i) => <TitanFAQItem key={i} {...f} open={openIdx === i} onToggle={() => toggle(i)} />)}
        </div>
      </div>
    </section>
  );
};

const TitanFAQItem = ({ q, a, open, onToggle }) => {
  return (
    <div style={{ borderTop: '1px solid #e5edf5' }}>
      <button
        onClick={onToggle}
        style={{
          width: '100%', textAlign: 'left', cursor: 'pointer',
          background: 'transparent', border: 'none', padding: '24px 4px',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          fontFamily: "'DM Sans', sans-serif",
        }}
      >
        <span style={{ fontSize: 17, fontWeight: 500, color: '#0F1A2E', letterSpacing: '-0.2px', textWrap: 'pretty' }}>{q}</span>
        <span style={{
          width: 24, height: 24, borderRadius: '50%',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: '#967844', flexShrink: 0, marginLeft: 16,
          transform: open ? 'rotate(45deg)' : 'rotate(0)',
          transition: 'transform 200ms',
        }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
        </span>
      </button>
      {open && (
        <div style={{ padding: '0 40px 24px 4px', fontSize: 15, fontWeight: 300, color: '#475569', lineHeight: 1.75, maxWidth: 720, textWrap: 'pretty' }}>
          {a}
        </div>
      )}
    </div>
  );
};

Object.assign(window, { TitanFAQ, TitanFAQItem });
