/* global React */

function WhyChooseUsSection() {
  const paragraphs = [
    "Outsourced bookkeeping generally fills an important gap between very small operations and companies that have grown large enough to need full time financial staff.",
    "When a company is very small, they typically have either a family member or an administrative assistant doing the books. This works okay at the beginning, but as the company grows they often need an experienced, professional bookkeeper who is dedicated to keeping the books updated consistently.",
    "That's where we come in. When you choose Parade Bookkeeping, you're choosing a local firm that can provide customized customer service. We do the work at our local home office right here in Austin, TX, and we always review the work product to ensure accuracy. We don't outsource your work to an offshore bookkeeping company, and we don't blindly let an AI agent keep your books. When you choose us, you can be sure the work is getting done timely and professionally with a real person you can talk to whenever you need help.",
  ];
  return (
    <section id="why-choose-us" style={wcuStyles.wrap}>
      <div style={wcuStyles.inner}>
        <div style={wcuStyles.head}>
          <h2 className="t-eyebrow" style={wcuStyles.h2}>Why Choose Us</h2>
        </div>
        {paragraphs.map((text, i) => (
          <p key={i} style={wcuStyles.p}>{text}</p>
        ))}
      </div>
    </section>
  );
}

const wcuStyles = {
  wrap: { padding: "64px 40px", background: "var(--paper-2)" },
  inner: { maxWidth: 1100, margin: "0 auto" },
  head: { marginBottom: 24 },
  // Styling comes from the .t-eyebrow class; only the browser's default
  // h2 margin needs clearing so it matches the eyebrow <div>s elsewhere.
  h2: { margin: 0 },
  p: { fontSize: 17, lineHeight: 1.7, color: "var(--fg-muted)", margin: "0 0 18px", maxWidth: 780 },
};

window.WhyChooseUsSection = WhyChooseUsSection;