// Services.jsx — "What I Do" — intro + four service cards on paper
function Services() {
  const cards = [
    {
      icon: "chart-line-up", title: "Growth Strategy",
      body: "Go-to-market planning, positioning, and forecasting your team can actually plan around. I build growth models that sales, ops, and support use to make real decisions."
    },
    {
      icon: "megaphone-simple", title: "Paid Media",
      body: "Social, Search, Display, Traditional. I build the campaigns, manage the spend, and report on what drives pipeline. I've run budgets from a few thousand a month into seven figures a year."
    },
    {
      icon: "pen-nib", title: "Brand & Positioning",
      body: "Research first, messaging second. I dig into your customers and your market before I write a word of positioning. I've done it for single products and for whole portfolios of brands."
    },
    {
      icon: "magnifying-glass", title: "Websites & Getting Found",
      body: "Sites and landing pages that turn visitors into conversations. Built for how people actually search now, including the AI tools quietly rewiring how customers find you."
    },
  ];
  return (
    <section id="services" className="sec">
      <div className="wrap">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "start" }} className="hero-grid">
          <div className="sec-head">
            <Kicker>What I Do</Kicker>
            <h2 className="sec-title">Senior marketing leadership.</h2>
          </div>
          <div style={{ paddingTop: 6 }}>
            <p style={{ fontSize: 17.5, lineHeight: 1.6, color: "var(--fg-2)", margin: 0 }}>
              Most companies don't need another vendor to manage. They need someone who's sat in
              the seat, owned the number, and can actually do the work. That's what you get with me.
              Strategy and execution from one person, plugged in where you need it.
            </p>
            <p style={{ fontSize: 17.5, lineHeight: 1.6, color: "var(--fg-2)", margin: "16px 0 0" }}>
              Some businesses need a growth plan. Some need someone to run their ads and stop
              lighting budget on fire. Most need both, plus a straight answer about what's working
              and what isn't.
            </p>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 22, marginTop: 48 }} className="pillars-grid">
          {cards.map((c, i) => (
            <div key={i} className="card" style={{ padding: 28, position: "relative" }}>
              <span style={{
                position: "absolute", top: 22, right: 24, fontFamily: "var(--font-wide)",
                fontStretch: "125%", fontWeight: 800, fontSize: 16, color: "var(--gm-stone)"
              }}>0{i + 1}</span>
              <div style={{
                width: 56, height: 56, background: "var(--gm-ink)", color: "var(--gm-orange)",
                display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 22
              }}>
                <i className={"ph-fill ph-" + c.icon} style={{ fontSize: 30 }}></i>
              </div>
              <h3 style={{
                fontFamily: "var(--font-display)", fontWeight: 800, textTransform: "uppercase",
                fontSize: 26, lineHeight: .98, color: "var(--gm-ink)", margin: "0 0 12px"
              }}>{c.title}</h3>
              <p style={{ fontSize: 16, lineHeight: 1.58, color: "var(--fg-2)", margin: 0 }}>{c.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Services });