// Services — workflow section, not a list of features.
function Services() {
  const { Container, Eyebrow, Icon } = window;
  const { Card } = window.ZentroDesignSystem_967cea;

  const items = [
    { icon: "Smartphone", title: "Short-form",           body: "Your dedicated editor cuts Reels, TikToks, and Shorts built around your brand voice — ready to post, every week.", tags: "9:16 · Daily" },
    { icon: "Youtube",    title: "Long-form",            body: "YouTube videos, interviews, and branded content structured to hold attention and reflect your brand consistently.", tags: "16:9 · Weekly" },
    { icon: "Sparkles",   title: "Motion graphics",      body: "Animated text, logo stings, and visual enhancements handled by the creative team so every video looks polished.", tags: "2D · 3D" },
    { icon: "Palette",    title: "Color grading",        body: "A consistent color grade across every deliverable so your content always looks and feels like your brand.", tags: "DaVinci" },
    { icon: "Mic",        title: "Podcast & audio",      body: "Multi-camera editing, audio cleanup, and clip packaging handled inside your existing workflow.", tags: "Audio · Video" },
    { icon: "Layers",     title: "Thumbnails & packaging", body: "Thumbnail design and content packaging handled alongside your edits — no extra briefing required.", tags: "CTR" },
  ];

  return (
    <section id="services" style={{ padding: "100px 0", borderTop: "1px solid var(--border-subtle)" }}>
      <Container>
        <div style={{ maxWidth: 680 }}>
          <Eyebrow>What's covered</Eyebrow>
          <h2 style={{ marginTop: 20, fontFamily: "var(--font-display)", fontWeight: 900, fontSize: "clamp(2.25rem, 4.5vw, 3.5rem)", lineHeight: 1.02, letterSpacing: "-0.03em", color: "var(--text-primary)", textWrap: "balance" }}>
            One Workflow.<br />Every Format Covered.
          </h2>
          <p style={{ marginTop: 18, fontFamily: "var(--font-sans)", fontSize: 17, lineHeight: 1.7, color: "var(--text-secondary)", maxWidth: 560 }}>
            Your dedicated editor handles all of this inside a single ongoing workflow. No separate briefs. No juggling multiple freelancers. One relationship, every format.
          </p>
        </div>
        <div style={{ marginTop: 56, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 18 }} className="z-services-grid">
          {items.map((it) => (
            <Card key={it.title} hover padding={28}>
              <span style={{ width: 48, height: 48, borderRadius: "var(--radius-md)", background: "rgba(251,208,40,0.12)", border: "1px solid rgba(251,208,40,0.3)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                <Icon name={it.icon} size={22} color="var(--gold-400)" />
              </span>
              <h3 style={{ marginTop: 22, fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 22, letterSpacing: "-0.02em", color: "var(--text-primary)" }}>{it.title}</h3>
              <p style={{ marginTop: 10, fontFamily: "var(--font-sans)", fontSize: 15, lineHeight: 1.6, color: "var(--text-secondary)" }}>{it.body}</p>
              <span style={{ marginTop: 18, display: "inline-block", fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--text-tertiary)", letterSpacing: "0.02em" }}>{it.tags}</span>
            </Card>
          ))}
        </div>
      </Container>
    </section>
  );
}
window.Services = Services;