/* global React */

function ServicesSection() {
  const services = [
    {
      eyebrow: "Core Services",
      title: "Monthly Bookkeeping",
      body: "Your books kept current every month, with clean reports you can actually read.",
      bullets: ["Transaction categorization", "Statement reconciliations", "Monthly reports"],
      color: "var(--terracotta-400)",
    },
    {
      eyebrow: "Catch-ups",
      title: "Behind on your books?",
      body: "Not a problem. We'll get you up to date fast, then move you onto a steady monthly rhythm.",
      bullets: ["Any number of months back", "Flat fee, quoted up front", "Tidy, reconciled records when we're done"],
      color: "var(--forest-400)",
    },
    {
      eyebrow: "Optional Services",
      title: "Need more? Just ask.",
      body: "Depending on what your business needs, we can take more off your plate:",
      bullets: ["A/R management", "A/P management", "Payroll", "Sales tax & 1099 filings"],
      color: "var(--marigold-500)",
    },
  ];
  return (
    <section id="services" style={ssStyles.wrap}>
      <div style={ssStyles.inner}>
        <div style={ssStyles.head}>
          <div className="t-eyebrow">What we do</div>
        </div>
        <div style={ssStyles.grid}>
          {services.map((s, i) => (
            <article key={i} style={ssStyles.card}>
              <div style={{ ...ssStyles.cardEyebrow, color: s.color }}>{s.eyebrow}</div>
              <h3 style={ssStyles.cardTitle}>{s.title}</h3>
              <p style={ssStyles.cardBody}>{s.body}</p>
              <ul style={ssStyles.bullets}>
                {s.bullets.map((b) => (
                  <li key={b} style={ssStyles.bullet}>
                    <Check color={s.color} /> <span>{b}</span>
                  </li>
                ))}
              </ul>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function Check({ color }) {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
      <circle cx="8" cy="8" r="8" fill={color} opacity="0.15" />
      <path d="M5 8.5 L7 10.5 L11 6" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

const ssStyles = {
  wrap: { padding: "64px 40px", background: "var(--paper)" },
  inner: { maxWidth: 1100, margin: "0 auto" },
  head: { marginBottom: 24 },
  grid: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 },
  card: { background: "var(--white)", border: "1px solid var(--border)", borderRadius: 16, padding: 32, boxShadow: "var(--shadow-xs)" },
  cardEyebrow: { fontSize: 11, fontWeight: 600, letterSpacing: "0.1em", textTransform: "uppercase", marginBottom: 14 },
  cardTitle: { fontFamily: "var(--font-display)", fontSize: 26, fontWeight: 600, letterSpacing: "-0.01em", margin: "0 0 14px", color: "var(--ink-900)" },
  cardBody: { fontSize: 14.5, lineHeight: 1.65, color: "var(--fg-muted)", margin: 0 },
  bullets: { listStyle: "none", padding: 0, margin: "22px 0 0", display: "flex", flexDirection: "column", gap: 10 },
  bullet: { display: "flex", alignItems: "center", gap: 10, fontSize: 14, color: "var(--fg)" },
  addon: { fontSize: 14.5, lineHeight: 1.6, color: "var(--fg-muted)", marginTop: 32, maxWidth: 620 },
};

window.ServicesSection = ServicesSection;