// Option 4: Combined — Editorial copy in the Modern Clinical visual system.
// Hero: file-header → headline + lede + CTAs → big "connect the dots" diagram.
// "// " prefix and "section / NN" labels removed throughout. "Pillar" caption
// removed. Pillars rendered as 4 cards (Coordinate / Document / Facilitate / Cover).
// Renders inside a 1440 × ~5800 artboard.

(function () {
  const C = window.SPARK_COPY;
  const PAPER = "#FAFAF7";
  const PAPER_2 = "#F2F1EC";
  const INK = "#0E0F11";
  const MUTE = "#6B6E75";
  const HAIR = "rgba(14, 15, 17, 0.12)";
  const AMBER = "#E89B3C";
  const AMBER_2 = "#C57E25";

  const font = {
    sans: '"Geist", "Geist Variable", system-ui, sans-serif',
    mono: '"Geist Mono", "JetBrains Mono", ui-monospace, monospace',
  };

  function Mono({ children, color = MUTE, size = 11, style }) {
    return (
      <span
        style={{
          font: `500 ${size}px/1.2 ${font.mono}`,
          letterSpacing: 0.4,
          color,
          textTransform: "uppercase",
          ...style,
        }}
      >
        {children}
      </span>
    );
  }

  function Eyebrow({ children, color = AMBER_2, style }) {
    return (
      <div
        style={{
          display: "flex",
          alignItems: "center",
          gap: 10,
          ...style,
        }}
      >
        <span
          style={{
            display: "inline-block",
            width: 8,
            height: 8,
            background: color,
            transform: "rotate(45deg)",
          }}
        />
        <Mono color={color}>{children}</Mono>
      </div>
    );
  }

  function Wordmark({ inverse }) {
    const fg = inverse ? PAPER : INK;
    return (
      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
        <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
          <rect x="0.5" y="0.5" width="21" height="21" stroke={fg} />
          <rect x="5" y="5" width="12" height="12" fill={AMBER} />
          <rect x="9" y="9" width="4" height="4" fill={fg} />
        </svg>
        <div style={{ font: `600 16px/1 ${font.sans}`, color: fg, letterSpacing: -0.2 }}>
          Spark Solutions
        </div>
      </div>
    );
  }

  function Nav() {
    return (
      <div
        style={{
          height: 72,
          padding: "0 56px",
          borderBottom: `1px solid ${HAIR}`,
          background: PAPER,
          display: "flex",
          alignItems: "center",
        }}
      >
        <Wordmark />
        <div style={{ flex: 1 }} />
        <nav style={{ display: "flex", gap: 32 }}>
          {C.nav.map((n) => (
            <a
              key={n.label}
              href={n.href}
              style={{
                font: `500 13px/1 ${font.sans}`,
                color: INK,
                textDecoration: "none",
              }}
            >
              {n.label}
            </a>
          ))}
        </nav>
        <div style={{ width: 32 }} />
        <Mono size={11}>v.2026.05</Mono>
        <div style={{ width: 24 }} />
        <a
          href="#contact"
          style={{
            font: `500 13px/1 ${font.sans}`,
            color: PAPER,
            background: INK,
            padding: "11px 18px",
            textDecoration: "none",
            borderRadius: 0,
          }}
        >
          Contact
        </a>
      </div>
    );
  }

  // Inline SVG: how Spark connects the dots.
  //   Three inputs (Law firm · Patient · Provider) → Spark hub → three outputs
  //   (Coordinated care · Documented outcomes · Resolved cases).
  function ConnectionDiagram() {
    const VB_W = 1280;
    const VB_H = 360;
    const NODE_W = 200;
    const NODE_H = 64;
    const HUB_R = 72;
    const HUB_CX = VB_W / 2;
    const HUB_CY = VB_H / 2;

    const inputs = [
      { num: "01", label: "Law firm" },
      { num: "02", label: "Patient" },
      { num: "03", label: "Healthcare provider" },
    ];
    const outputs = [
      { num: "A", label: "Coordinated care" },
      { num: "B", label: "Documented outcomes" },
      { num: "C", label: "Resolved cases" },
    ];

    const topY = 24;
    const stride = (VB_H - topY * 2 - NODE_H) / 2;
    const midY = (yIdx) => topY + stride * yIdx + NODE_H / 2;

    const inX = NODE_W;
    const hubLeft = HUB_CX - HUB_R;
    const hubRight = HUB_CX + HUB_R;
    const outX = VB_W - NODE_W;

    const inputPath = (y) =>
      `M ${inX} ${y} C ${inX + 180} ${y}, ${hubLeft - 180} ${HUB_CY}, ${hubLeft} ${HUB_CY}`;
    const outputPath = (y) =>
      `M ${hubRight} ${HUB_CY} C ${hubRight + 180} ${HUB_CY}, ${outX - 180} ${y}, ${outX} ${y}`;

    return (
      <svg
        viewBox={`0 0 ${VB_W} ${VB_H}`}
        style={{ display: "block", width: "100%", height: "auto" }}
      >
        {/* grid baseline */}
        <line x1="0" y1={HUB_CY} x2={VB_W} y2={HUB_CY} stroke={INK} strokeOpacity="0.06" strokeDasharray="2 4" />

        {/* connection lines */}
        {inputs.map((_, i) => (
          <path key={`ip-${i}`} d={inputPath(midY(i))} stroke={INK} strokeWidth="1" fill="none" />
        ))}
        {outputs.map((_, i) => (
          <path key={`op-${i}`} d={outputPath(midY(i))} stroke={INK} strokeWidth="1" fill="none" />
        ))}

        {/* small dots where lines meet the hub */}
        <circle cx={hubLeft} cy={HUB_CY} r="3" fill={INK} />
        <circle cx={hubRight} cy={HUB_CY} r="3" fill={INK} />

        {/* input nodes */}
        {inputs.map((n, i) => {
          const y = topY + stride * i;
          return (
            <g key={`in-${i}`}>
              <rect x="0" y={y} width={NODE_W} height={NODE_H} fill={PAPER} stroke={INK} />
              <text
                x="16"
                y={y + 22}
                fill={MUTE}
                fontFamily={font.mono}
                fontSize="11"
                letterSpacing="0.6"
              >
                {n.num} · INPUT
              </text>
              <text
                x="16"
                y={y + 46}
                fill={INK}
                fontFamily={font.sans}
                fontSize="17"
                fontWeight="500"
                letterSpacing="-0.2"
              >
                {n.label}
              </text>
            </g>
          );
        })}

        {/* hub */}
        <g>
          <rect
            x={HUB_CX - HUB_R}
            y={HUB_CY - HUB_R}
            width={HUB_R * 2}
            height={HUB_R * 2}
            fill={AMBER}
          />
          <rect
            x={HUB_CX - HUB_R + 10}
            y={HUB_CY - HUB_R + 10}
            width={HUB_R * 2 - 20}
            height={HUB_R * 2 - 20}
            fill="none"
            stroke={INK}
            strokeWidth="1"
          />
          <text
            x={HUB_CX}
            y={HUB_CY - 10}
            fill={INK}
            fontFamily={font.mono}
            fontSize="10"
            letterSpacing="1"
            textAnchor="middle"
          >
            HUB · MSO
          </text>
          <text
            x={HUB_CX}
            y={HUB_CY + 14}
            fill={INK}
            fontFamily={font.sans}
            fontSize="22"
            fontWeight="600"
            letterSpacing="-0.4"
            textAnchor="middle"
          >
            SPARK
          </text>
        </g>

        {/* output nodes */}
        {outputs.map((n, i) => {
          const y = topY + stride * i;
          return (
            <g key={`out-${i}`}>
              <rect x={outX} y={y} width={NODE_W} height={NODE_H} fill={INK} />
              <text
                x={outX + 16}
                y={y + 22}
                fill={AMBER}
                fontFamily={font.mono}
                fontSize="11"
                letterSpacing="0.6"
              >
                {n.num} · OUTPUT
              </text>
              <text
                x={outX + 16}
                y={y + 46}
                fill={PAPER}
                fontFamily={font.sans}
                fontSize="17"
                fontWeight="500"
                letterSpacing="-0.2"
              >
                {n.label}
              </text>
            </g>
          );
        })}
      </svg>
    );
  }

  function Hero() {
    return (
      <section style={{ background: PAPER, padding: "72px 56px 100px" }}>
        {/* headline + lede / CTAs */}
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "1.35fr 1fr",
            gap: 96,
            alignItems: "start",
          }}
        >
          <h1
            style={{
              font: `500 132px/0.94 ${font.sans}`,
              color: INK,
              letterSpacing: -4.4,
              margin: 0,
              textWrap: "balance",
            }}
          >
            Coordinated care for{" "}
            <span style={{ color: AMBER_2 }}>cases</span> that matter.
          </h1>
          <div style={{ paddingTop: 16 }}>
            <p
              style={{
                font: `400 19px/1.55 ${font.sans}`,
                color: INK,
                opacity: 0.8,
                margin: 0,
              }}
            >
              {C.hero.lede}
            </p>
            <div style={{ display: "flex", gap: 12, marginTop: 36, flexWrap: "wrap" }}>
              <a
                href="#contact"
                style={{
                  font: `500 14px/1 ${font.sans}`,
                  color: PAPER,
                  background: INK,
                  padding: "16px 22px",
                  textDecoration: "none",
                }}
              >
                Connect with us →
              </a>
            </div>
          </div>
        </div>
      </section>
    );
  }

  function What() {
    return (
      <section id="what" style={{ background: INK, color: PAPER, padding: "120px 56px" }}>
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "260px 1fr",
            gap: 64,
            alignItems: "start",
          }}
        >
          <Eyebrow color={AMBER}>{C.what.eyebrow}</Eyebrow>
          <div>
            <h2
              style={{
                font: `500 56px/1.02 ${font.sans}`,
                letterSpacing: -1.6,
                margin: 0,
                maxWidth: 880,
                textWrap: "balance",
              }}
            >
              {C.what.title}
            </h2>
            <p
              style={{
                font: `400 18px/1.6 ${font.sans}`,
                color: "rgba(250,250,247,0.7)",
                margin: "32px 0 0",
                maxWidth: 720,
              }}
            >
              {C.what.body}
            </p>
          </div>
        </div>

        <div
          style={{
            marginTop: 88,
            display: "grid",
            gridTemplateColumns: "repeat(4, 1fr)",
            gap: 0,
            borderTop: "1px solid rgba(250,250,247,0.18)",
          }}
        >
          {C.what.pillars.map((p, i) => (
            <div
              key={p.n}
              style={{
                padding: "36px 28px 32px",
                borderRight: i < 3 ? "1px solid rgba(250,250,247,0.14)" : "none",
                display: "flex",
                flexDirection: "column",
                gap: 20,
              }}
            >
              <Mono color={AMBER}>{p.n}</Mono>
              <h3
                style={{
                  font: `500 34px/1 ${font.sans}`,
                  letterSpacing: -1.1,
                  margin: 0,
                }}
              >
                {p.title}
                <span style={{ color: AMBER }}>.</span>
              </h3>
              <p
                style={{
                  font: `400 14px/1.6 ${font.sans}`,
                  color: "rgba(250,250,247,0.66)",
                  margin: 0,
                }}
              >
                {p.copy}
              </p>
            </div>
          ))}
        </div>
      </section>
    );
  }

  function Audience({ data, anchor }) {
    return (
      <section
        id={anchor}
        style={{ background: PAPER, padding: "120px 56px", borderTop: `1px solid ${HAIR}` }}
      >
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "260px 1fr",
            gap: 56,
            alignItems: "start",
          }}
        >
          <Eyebrow color={AMBER_2}>{data.eyebrow}</Eyebrow>
          <div>
            <h2
              style={{
                font: `500 60px/1 ${font.sans}`,
                letterSpacing: -1.8,
                margin: 0,
                color: INK,
                textWrap: "balance",
              }}
            >
              {data.title}
            </h2>
            <p
              style={{
                font: `400 18px/1.55 ${font.sans}`,
                color: MUTE,
                margin: "20px 0 0",
                maxWidth: 560,
              }}
            >
              {data.sub}
            </p>
          </div>
        </div>

        <div
          style={{
            marginTop: 72,
            marginLeft: 316,
            display: "grid",
            gridTemplateColumns: "repeat(2, 1fr)",
            gap: 0,
            borderTop: `1px solid ${INK}`,
          }}
        >
          {data.points.map((pt, i) => (
            <div
              key={pt.h}
              style={{
                padding: "28px 28px 28px 0",
                borderBottom: `1px solid ${HAIR}`,
                borderRight: i % 2 === 0 ? `1px solid ${HAIR}` : "none",
                paddingRight: i % 2 === 0 ? 40 : 0,
                paddingLeft: i % 2 === 0 ? 0 : 40,
                display: "grid",
                gridTemplateColumns: "44px 1fr",
                gap: 16,
              }}
            >
              <Mono color={AMBER_2} size={11}>
                {String(i + 1).padStart(2, "0")}
              </Mono>
              <div>
                <h4
                  style={{
                    font: `500 18px/1.25 ${font.sans}`,
                    color: INK,
                    margin: 0,
                    letterSpacing: -0.2,
                  }}
                >
                  {pt.h}
                </h4>
                <p style={{ font: `400 14px/1.55 ${font.sans}`, color: MUTE, margin: "8px 0 0" }}>
                  {pt.c}
                </p>
              </div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 48, marginLeft: 316 }}>
          <a
            href="#contact"
            style={{
              font: `500 14px/1 ${font.sans}`,
              color: INK,
              borderBottom: `1px solid ${INK}`,
              paddingBottom: 6,
              textDecoration: "none",
            }}
          >
            {data.cta} →
          </a>
        </div>
      </section>
    );
  }

  function Diagram({ label }) {
    return (
      <div
        style={{
          background: "#FCEFD9",
          aspectRatio: "1 / 1",
          position: "relative",
          overflow: "hidden",
        }}
      >
        <div
          style={{
            position: "absolute",
            inset: 0,
            backgroundImage:
              "repeating-linear-gradient(90deg, rgba(0,0,0,0.06) 0 1px, transparent 1px 24px)",
          }}
        />
        <svg
          viewBox="0 0 320 320"
          style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}
        >
          <polyline
            points="0,240 48,210 96,220 144,170 192,180 240,120 288,90 320,60"
            fill="none"
            stroke={AMBER}
            strokeWidth="1.4"
          />
          <polyline
            points="0,260 48,255 96,240 144,235 192,210 240,200 288,170 320,160"
            fill="none"
            stroke={INK}
            strokeWidth="0.8"
            strokeDasharray="2 3"
            opacity="0.5"
          />
          {[
            [48, 210],
            [144, 170],
            [240, 120],
            [288, 90],
          ].map(([x, y], i) => (
            <circle key={i} cx={x} cy={y} r="3.2" fill={AMBER} />
          ))}
        </svg>
        <div style={{ position: "absolute", top: 16, left: 18 }}>
          <Mono size={10} color={INK}>{label}</Mono>
        </div>
        <div style={{ position: "absolute", bottom: 16, right: 18 }}>
          <Mono size={10} color={MUTE}>fig.001</Mono>
        </div>
      </div>
    );
  }

  function ContactForm() {
    const [role, setRole] = React.useState("Law firm");
    const F = C.contact.fields;
    const label = {
      font: `500 11px/1 ${font.mono}`,
      letterSpacing: 0.6,
      textTransform: "uppercase",
      color: MUTE,
      marginBottom: 12,
      display: "block",
    };
    const input = {
      width: "100%",
      background: "transparent",
      border: "none",
      borderBottom: `1px solid ${INK}`,
      padding: "10px 0 14px",
      font: `400 17px/1.4 ${font.sans}`,
      color: INK,
      outline: "none",
      borderRadius: 0,
    };

    return (
      <section
        id="contact"
        style={{ background: PAPER_2, padding: "120px 56px", borderTop: `1px solid ${HAIR}` }}
      >
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "260px 1fr",
            gap: 64,
            marginBottom: 64,
            alignItems: "start",
          }}
        >
          <Eyebrow color={AMBER_2}>{C.contact.eyebrow}</Eyebrow>
          <div>
            <h2
              style={{
                font: `500 60px/1 ${font.sans}`,
                color: INK,
                letterSpacing: -1.8,
                margin: 0,
                textWrap: "balance",
                maxWidth: 880,
              }}
            >
              {C.contact.title}
            </h2>
            <p
              style={{
                font: `400 17px/1.55 ${font.sans}`,
                color: MUTE,
                margin: "20px 0 0",
                maxWidth: 560,
              }}
            >
              {C.contact.sub}
            </p>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "260px 1fr", gap: 64 }}>
          <div />

          <form
            onSubmit={(e) => e.preventDefault()}
            style={{
              background: PAPER,
              padding: "48px",
              border: `1px solid ${INK}`,
            }}
          >
            <div style={{ marginBottom: 40 }}>
              <span style={label}>{F.role.label}</span>
              <div style={{ display: "flex", gap: 0, marginTop: 4, border: `1px solid ${INK}` }}>
                {F.role.options.map((opt, i) => {
                  const sel = role === opt;
                  return (
                    <button
                      key={opt}
                      type="button"
                      onClick={() => setRole(opt)}
                      style={{
                        flex: 1,
                        padding: "14px 16px",
                        font: `500 13px/1 ${font.sans}`,
                        background: sel ? INK : "transparent",
                        color: sel ? PAPER : INK,
                        border: "none",
                        borderLeft: i > 0 ? `1px solid ${INK}` : "none",
                        cursor: "pointer",
                      }}
                    >
                      {opt}
                    </button>
                  );
                })}
              </div>
            </div>

            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "32px 28px" }}>
              <div>
                <label style={label}>{F.company.label}</label>
                <input style={input} placeholder={F.company.placeholder} />
              </div>
              <div>
                <label style={label}>{F.contact.label}</label>
                <input style={input} placeholder={F.contact.placeholder} />
              </div>
              <div>
                <label style={label}>{F.email.label}</label>
                <input style={input} placeholder={F.email.placeholder} />
              </div>
              <div>
                <label style={label}>{F.phone.label}</label>
                <input style={input} placeholder={F.phone.placeholder} />
              </div>
              <div style={{ gridColumn: "1 / -1" }}>
                <label style={label}>{F.message.label}</label>
                <textarea rows={3} style={{ ...input, resize: "none" }} placeholder={F.message.placeholder} />
              </div>
            </div>

            <div
              style={{
                marginTop: 40,
                paddingTop: 24,
                borderTop: `1px solid ${HAIR}`,
                display: "flex",
                alignItems: "center",
                justifyContent: "space-between",
                gap: 24,
              }}
            >
              <p style={{ font: `400 12px/1.5 ${font.sans}`, color: MUTE, margin: 0, maxWidth: 360 }}>
                {C.contact.disclosure}
              </p>
              <button
                type="submit"
                style={{
                  font: `500 14px/1 ${font.sans}`,
                  background: INK,
                  color: PAPER,
                  padding: "18px 28px",
                  border: "none",
                  cursor: "pointer",
                }}
              >
                {C.contact.submit} →
              </button>
            </div>
          </form>
        </div>
      </section>
    );
  }

  function Footer() {
    return (
      <footer
        style={{
          background: INK,
          color: PAPER,
          padding: "64px 56px 28px",
        }}
      >
        <div
          style={{
            paddingBottom: 28,
            borderBottom: "1px solid rgba(250,250,247,0.14)",
          }}
        >
          <Wordmark inverse />
          <p
            style={{
              font: `400 14px/1.55 ${font.sans}`,
              color: "rgba(250,250,247,0.6)",
              marginTop: 22,
              maxWidth: 420,
            }}
          >
            {C.footer.tagline}
          </p>
        </div>
        <div
          style={{
            paddingTop: 24,
            display: "flex",
            justifyContent: "space-between",
            font: `400 11px/1 ${font.mono}`,
            color: "rgba(250,250,247,0.45)",
            letterSpacing: 0.4,
          }}
        >
          <span>{C.footer.legal[0]}</span>
          <div style={{ display: "flex", gap: 28 }}>
            <span>{C.footer.legal[1]}</span>
            <span>{C.footer.legal[2]}</span>
          </div>
        </div>
      </footer>
    );
  }

  // Mount the page.
  function Site() {
    return (
      <div
        style={{
          width: 1440,
          background: PAPER,
          color: INK,
          font: `400 16px/1.5 ${font.sans}`,
          fontFamily: font.sans,
          WebkitFontSmoothing: "antialiased",
        }}
      >
        <Nav />
        <Hero />
        <What />
        <Audience data={C.firms} anchor="firms" />
        <Audience data={C.providers} anchor="providers" />
        <ContactForm />
        <Footer />
      </div>
    );
  }

  ReactDOM.createRoot(document.getElementById("root")).render(<Site />);
})();