export function ServicesSection() {
  const services = [
    {
      id: "tax",
      title: "Income Tax Preparation",
      description:
        "Accurate, timely filing for individuals, families, and small businesses with a focus on maximizing your refund and staying compliant.",
      bullets: ["Personal & business returns", "Multi‑state and amended returns"],
    },
    {
      id: "insurance",
      title: "Insurance Services",
      description:
        "Guidance on selecting health, life, and other insurance coverage that fits your needs and budget.",
      bullets: ["Health & ObamaCare guidance", "Coverage tailored to your situation"],
    },
    {
      id: "bookkeeping",
      title: "Bookkeeping Services",
      description:
        "Reliable bookkeeping that keeps your records organized and ready when tax time comes.",
      bullets: ["Monthly reports", "Small business friendly"],
    },
  ];

  return (
    <section
      id="services"
      className="bg-emerald-50 py-10 sm:py-12 md:py-16 border-b border-emerald-100"
    >
      <div className="mx-auto max-w-6xl px-4 md:px-6">
        <div className="mb-6 max-w-2xl">
          <h2 className="text-2xl font-semibold tracking-tight text-emerald-950 sm:text-3xl">
            Services tailored to your financial life
          </h2>
          <p className="mt-3 text-sm text-emerald-900/80 sm:text-base">
            Whether you are filing as an individual, supporting your family, or
            running a business, Ghion Financial provides services designed to
            meet you where you are.
          </p>
        </div>
        <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
          {services.map((service) => (
            <article
              key={service.id}
              className="flex flex-col justify-between rounded-2xl border border-emerald-100 bg-white p-5 shadow-sm"
            >
              <div>
                <h3 className="text-base font-semibold text-emerald-950 sm:text-lg">
                  {service.title}
                </h3>
                <p className="mt-2 text-sm text-emerald-900/80">
                  {service.description}
                </p>
                <ul className="mt-3 space-y-1.5 text-sm text-emerald-900/80">
                  {service.bullets.map((item) => (
                    <li key={item}>• {item}</li>
                  ))}
                </ul>
              </div>
              <div className="mt-4 text-sm font-semibold text-emerald-700">
                Book an appointment to get started →
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

