/* global React */

function WhyChooseUsSection() {
  const paragraphs = [
    "Outsourced bookkeeping fills an important gap between solo operators and companies that have grown large enough to need full time financial staff.",
    "When a business is still small, the owner will either do the books themselves or have either a family member or an administrative assistant doing it. 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. And let's face it, the last thing a business owner wants to do is bookkeeping.",
    "That's where we come in. When you choose Parade Bookkeeping, you're choosing a local firm that can provide personalized service. We do the work at our local office right here in Austin, TX, we always review the work to ensure accuracy, and you'll always have a dedicated contact point to call whenever you have questions or need help. 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.",
  ];
  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;