const ServiceCard = ({ s, onRequest }) => {
  const IconComp = Icon[s.icon];
  return (
    <article className="card" style={{ display: "grid", gap: 18, alignContent: "start" }}>
      <div style={{
        width: 56, height: 56, borderRadius: 16,
        background: "var(--accent-soft)", color: "var(--accent-ink)",
        display: "flex", alignItems: "center", justifyContent: "center",
      }}>
        <IconComp size={28}/>
      </div>
      <div>
        <h3 style={{ fontSize: "calc(22px * var(--scale))", fontWeight: 700, marginBottom: 8, letterSpacing: "-0.02em" }}>{s.title}</h3>
        <p style={{ color: "var(--ink-2)", fontSize: "calc(15px * var(--scale))", lineHeight: 1.55 }}>{s.body}</p>
      </div>
      <button className="btn btn-link" style={{ justifySelf: "start", padding: "8px 0", color: "var(--ink)", fontWeight: 700 }} onClick={onRequest}>
        <span>{t("common.requestShort")}</span> <Icon.arrow size={16}/>
      </button>
    </article>
  );
};

const Services = ({ onRequest }) => (
  <section id="services" style={{ background: "var(--surface-2)" }}>
    <div className="wrap">
      <div className="section-head">
        <span className="eyebrow">{t("services.eyebrow")}</span>
        <h2>{t("services.title")}</h2>
        <p>{t("services.intro")}</p>
      </div>

      <div className="grid-3">
        {t("services.items").map(s => <ServiceCard key={s.id} s={s} onRequest={onRequest}/>)}
        {/* Last cell — CTA */}
        <article className="card card-slate" style={{
          display: "grid", gap: 20, alignContent: "space-between",
        }}>
          <div>
            <h3 style={{ color: "#fff", fontSize: "calc(22px * var(--scale))", fontWeight: 700, marginBottom: 8, letterSpacing: "-0.02em" }}>
              {t("services.ctaTitle")}
            </h3>
            <p style={{ color: "rgba(255,255,255,.85)", fontSize: "calc(15px * var(--scale))", lineHeight: 1.55 }}>
              {t("services.ctaBody")}
            </p>
          </div>
          <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
            <button className="btn btn-mint" onClick={onRequest}>{t("common.requestRide")}</button>
            <a href="tel:+4961511234567" className="btn btn-ghost" style={{ color: "#fff", border: "1.5px solid rgba(255,255,255,.24)" }}>
              <Icon.phone size={18}/> {t("common.call")}
            </a>
          </div>
        </article>
      </div>
    </div>
  </section>
);

Object.assign(window, { Services });