// PRLX site — services (light editorial section) + stats strip
function ServicesSection() {
  const { Divider } = window.PRLXDesignSystem_b1b8b9;
  const { Icon, useViewport } = window;
  const [hover, setHover] = React.useState(null);
  const [open, setOpen] = React.useState(null);
  const { isMobile, isTablet } = useViewport();
  const details = window.PRLX_PRODUCTION_TYPES || {};

  return (
    <section data-screen-label="Services" id="services" data-theme="light" style={{ background: "var(--prlx-paper)", color: "var(--prlx-ink)", padding: isMobile ? "64px 20px" : "96px 32px" }}>
      <div style={{ display: "grid", gridTemplateColumns: isTablet ? "1fr" : "minmax(0, 0.9fr) minmax(0, 1.3fr)", gap: isTablet ? 40 : 64, alignItems: "start" }}>
        <div style={{ position: isTablet ? "static" : "sticky", top: 96 }}>
          <div style={{ fontWeight: 700, fontSize: 11, textTransform: "uppercase", letterSpacing: "0.32em", color: "var(--prlx-graphite-500)", marginBottom: 16 }}>
            ↳ What we do
          </div>
          <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 800, textTransform: "uppercase", letterSpacing: "-0.02em", fontSize: "clamp(34px, 4.5vw, 60px)", lineHeight: 0.98, margin: 0 }}>
            End to end,<br />lens to&nbsp;launch.
          </h2>
          <p style={{ fontWeight: 300, fontSize: 17, lineHeight: 1.6, color: "var(--prlx-graphite-600)", maxWidth: "42ch", marginTop: 24 }}>
            One team from the first treatment to the final grade. We write it, shoot it, cut it.<br />
            Whether you're planning a national campaign or creating content for your local business, our team works with brands, agencies and organisations across Darwin, Hobart and Australia to bring ideas to life.

Let's chat.

          </p>
        </div>

        <div style={{ display: "flex", flexDirection: "column" }}>
          {window.PRLX_SERVICES.map((s, i) => {
            const info = details[s.k] || {};
            const isOpen = open === s.n;
            return (
              <div
                key={s.n}
                style={{ borderTop: "2px solid rgba(10,10,10,0.14)", background: (hover === s.n || isOpen) ? "rgba(10,10,10,0.03)" : "transparent", transition: "background 220ms" }}
              >
                <button
                  type="button"
                  aria-expanded={isOpen}
                  onMouseEnter={() => setHover(s.n)}
                  onMouseLeave={() => setHover(null)}
                  onClick={() => setOpen(isOpen ? null : s.n)}
                  style={{
                    display: "grid", gridTemplateColumns: isMobile ? "40px 1fr 24px" : "64px 1fr 32px", gap: isMobile ? 16 : 24, alignItems: "baseline",
                    width: "100%", textAlign: "left", padding: "30px 8px", border: "none", background: "transparent", cursor: "pointer", color: "var(--prlx-ink)", font: "inherit",
                  }}
                >
                  <span style={{ fontFamily: "var(--font-mono)", fontSize: 14, color: "var(--prlx-graphite-400)" }}>{s.n}</span>
                  <div>
                    <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, textTransform: "uppercase", letterSpacing: "-0.01em", fontSize: isMobile ? 24 : 30, lineHeight: 1, marginBottom: 10 }}>{s.k}</div>
                    <p style={{ fontWeight: 300, fontSize: 15, lineHeight: 1.55, color: "var(--prlx-graphite-600)", margin: 0, maxWidth: "48ch" }}>{s.d}</p>
                  </div>
                  <span style={{ justifySelf: "end", transform: isOpen ? "rotate(180deg)" : "none", transition: "transform 260ms cubic-bezier(0.22,1,0.36,1)", color: "var(--prlx-ink)" }}>
                    <Icon name="ChevronDown" size={22} />
                  </span>
                </button>

                {/* Expanded detail — animated open via grid-rows; stays in the DOM (clipped, not removed) so it's indexable for SEO. */}
                <div
                  role="region"
                  aria-label={`${s.k} details`}
                  style={{ display: "grid", gridTemplateRows: isOpen ? "1fr" : "0fr", transition: "grid-template-rows 420ms cubic-bezier(0.22,1,0.36,1)" }}
                >
                  <div style={{ overflow: "hidden", minHeight: 0 }}>
                    <div style={{
                      padding: isMobile ? "0 8px 30px 8px" : "0 32px 34px 88px",
                      opacity: isOpen ? 1 : 0,
                      transform: isOpen ? "translateY(0)" : "translateY(-10px)",
                      transition: isOpen
                        ? "opacity 360ms ease 120ms, transform 420ms cubic-bezier(0.22,1,0.36,1) 80ms"
                        : "opacity 180ms ease, transform 220ms ease",
                    }}>
                      {info.body && (
                        <p style={{ fontWeight: 300, fontSize: 16, lineHeight: 1.6, color: "var(--prlx-ink)", margin: "0 0 22px", maxWidth: "56ch" }}>{info.body}</p>
                      )}
                      {info.deliverables && (
                        <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr", gap: "12px 32px", maxWidth: 620 }}>
                          {info.deliverables.map((d) => (
                            <li key={d} style={{ display: "flex", alignItems: "baseline", gap: 10, fontFamily: "var(--font-body)", fontSize: 15, fontWeight: 500, color: "var(--prlx-ink)", paddingBottom: 10, borderBottom: "1px solid rgba(10,10,10,0.10)" }}>
                              <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--prlx-signal)" }}>/</span>
                              {d}
                            </li>
                          ))}
                        </ul>
                      )}
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
          <div style={{ borderTop: "2px solid rgba(10,10,10,0.14)" }} />
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { ServicesSection });