// Services section — numbered list, editorial
function Services({ t }) {
  return (
    <section id="services" className="section">
      <div className="shell">
        <Reveal>
          <Eyebrow>{t.services.eyebrow}</Eyebrow>
        </Reveal>

        <div className="services-head" style={{
          marginTop: 24,
          display: "grid",
          gridTemplateColumns: "1.1fr 1fr",
          gap: 80,
          alignItems: "end",
        }}>
          <Reveal delay={80}>
            <h2 style={{
              fontSize: "clamp(44px, 6vw, 76px)",
              lineHeight: 1.0,
              letterSpacing: "-0.025em",
              fontWeight: 500,
            }}>
              {t.services.title}{" "}
              <span className="serif-italic" style={{ color: "var(--orange-deep)" }}>{t.services.titleItalic}</span>
              {t.services.titleEnd}
            </h2>
          </Reveal>
          <Reveal delay={140}>
            <p style={{
              fontSize: 17, lineHeight: 1.55, color: "var(--muted)", maxWidth: 50 + "ch",
            }}>{t.services.lede}</p>
          </Reveal>
        </div>

        <div style={{ marginTop: 80, borderTop: "1px solid var(--border-strong)" }}>
          {t.services.items.map((it, i) => (
            <ServiceRow key={i} item={it} delay={i * 60} />
          ))}
        </div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .services-head { grid-template-columns: 1fr !important; gap: 32px !important; align-items: start !important; }
        }
      `}</style>
    </section>
  );
}

function ServiceRow({ item, delay }) {
  return (
    <Reveal delay={delay}>
      <div
        className="service-row"
        style={{
          display: "grid",
          gridTemplateColumns: "80px 1fr 2fr 40px",
          gap: 24,
          padding: "32px 0",
          borderBottom: "1px solid var(--border-strong)",
          alignItems: "baseline",
          transition: "padding-left 200ms var(--ease)",
          cursor: "default",
        }}
      >
        <div className="service-row__tag serif-italic" style={{
          fontSize: "clamp(22px, 4vw, 32px)",
          transition: "color 200ms var(--ease)",
        }}>{item.tag}</div>
        <div style={{
          fontSize: "clamp(20px, 5vw, 28px)", fontWeight: 500, letterSpacing: "-0.015em",
        }}>{item.title}</div>
        <div style={{
          fontSize: 16, color: "var(--muted)", lineHeight: 1.5,
        }}>{item.body}</div>
        <div className="service-row__arrow" style={{
          transition: "color 200ms var(--ease), transform 200ms var(--ease)",
          textAlign: "right",
        }}>
          <Arrow size={16} />
        </div>
      </div>
      <style>{`
        @media (max-width: 720px) {
          .service-row { grid-template-columns: 60px 1fr !important; }
          .service-row > :nth-child(3) { grid-column: 1 / -1; }
          .service-row > :nth-child(4) { display: none; }
        }
      `}</style>
    </Reveal>
  );
}

window.Services = Services;