/* Approach — "Two ways to work with us". Paper + Ink card pair from page 7
 * of the guidelines. */

function ApproachSection() {
  return (
    <section id="approach" style={{ background: "var(--ri-paper)", padding: "120px 0" }}>
      <Container>
        <div style={{ maxWidth: 720, marginBottom: 56 }}>
          <Eyebrow number="02">Value proposition</Eyebrow>
          <h2 style={{
            fontSize: "clamp(40px, 5.4vw, 72px)", lineHeight: 1.04,
            letterSpacing: "-0.02em", fontWeight: 700, margin: 0,
          }}>
            Two ways to work with us.
          </h2>
        </div>

        <div style={{
          display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24,
        }} className="ri-approach-grid">
          <ApproachCard
            tone="paper"
            kicker="For businesses with no in-house IT"
            title="Fully-managed"
            description="We become your IT department. End-to-end ownership of helpdesk, infrastructure, cybersecurity, vendors and strategy."
            points={[
              "Helpdesk & on-site support",
              "Endpoint & network management",
              "Cybersecurity & compliance",
              "Strategic IT roadmap",
              "Vendor & licence management",
            ]}
          />
          <ApproachCard
            tone="ink"
            kicker="For businesses with an internal team"
            title="Co-managed"
            description="We slot in alongside your team — taking the load off, plugging gaps, and bringing in specialist expertise where it's needed."
            points={[
              "Overflow helpdesk",
              "Project & migration support",
              "Cybersecurity uplift & audit",
              "Specialist tooling & vendor access",
              "Holiday & sickness cover",
            ]}
          />
        </div>
      </Container>

      <style>{`
        @media (max-width: 880px) {
          .ri-approach-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

function ApproachCard({ tone, kicker, title, description, points }) {
  const isInk = tone === "ink";
  return (
    <article
      style={{
        position: "relative",
        background: isInk ? "var(--ri-ink)" : "#fff",
        color: isInk ? "var(--fg-inverse)" : "var(--fg)",
        border: isInk ? "1px solid var(--border-ink)" : "1px solid var(--border)",
        borderRadius: 20,
        padding: "44px 40px 40px",
        overflow: "hidden",
        boxShadow: isInk ? "none" : "var(--shadow-1)",
      }}
    >
      {/* Gradient top border */}
      <div
        aria-hidden
        style={{
          position: "absolute", left: 0, right: 0, top: 0, height: 4,
          background: "var(--grad-brand)",
        }}
      />
      <div style={{
        fontSize: 11, fontWeight: 600, letterSpacing: "0.18em",
        textTransform: "uppercase",
        color: isInk ? "var(--ri-pink)" : "var(--ri-pink)",
        marginBottom: 18,
      }}>
        {kicker}
      </div>
      <h3 style={{
        fontSize: 52, fontWeight: 800, lineHeight: 1, letterSpacing: "-0.025em",
        margin: "0 0 18px",
      }}>{title}</h3>
      <p style={{
        fontSize: 16, lineHeight: 1.55, margin: "0 0 26px",
        color: isInk ? "rgba(245,245,247,0.78)" : "var(--fg-muted)",
        maxWidth: 460,
      }}>{description}</p>
      <ul style={{
        listStyle: "none", padding: 0, margin: 0,
        display: "flex", flexDirection: "column", gap: 12,
      }}>
        {points.map((p) => (
          <li key={p} style={{
            display: "flex", alignItems: "center", gap: 12,
            fontSize: 14, fontWeight: 500,
          }}>
            <span
              aria-hidden
              style={{
                width: 16, height: 3, borderRadius: 2,
                background: "var(--grad-brand)", flex: "0 0 auto",
              }}
            />
            {p}
          </li>
        ))}
      </ul>
    </article>
  );
}

Object.assign(window, { ApproachSection });