// COMPARED — DIY / Big firm / SupportGenie matrix.
// Speaks to the comparison buyers are already running in their heads.

function Compared() {
  const cols = [
    {
      id: "diy",
      label: "Do it yourself",
      sub: "Hire a Salesforce dev, learn agents on the way",
      ship: "9 – 18 months",
      cost: "$180K – $400K",
      tone: "ink",
      rows: [
        { k: "Time to first working agent", v: "9–18 months — hiring, ramp, then build", weak: true },
        { k: "Cost over 12 months", v: "$180K – $400K (salary + ramp + opportunity cost)", weak: true },
        { k: "Specialist depth", v: "What your hire happens to know", weak: true },
        { k: "Eval / observability", v: "Whatever you build yourself", weak: true },
        { k: "Who owns it after", v: "You — congrats", weak: false },
      ],
    },
    {
      id: "big",
      label: "Hire a big firm",
      sub: "Accenture, Deloitte, the usual",
      ship: "6 – 9 months",
      cost: "$200K – $1M",
      tone: "ink",
      rows: [
        { k: "Time to first working agent", v: "6–9 months — discovery decks, then build", weak: true },
        { k: "Cost over 12 months", v: "$200K – $1M (blended rate + change orders)", weak: true },
        { k: "Specialist depth", v: "Senior partner sells, juniors build", weak: true },
        { k: "Eval / observability", v: "Usually a Datadog dashboard, sometimes", weak: true },
        { k: "Who owns it after", v: "They do, until the retainer ends", weak: true },
      ],
    },
    {
      id: "us",
      label: "SupportGenie",
      sub: "Small studio · narrowly focused",
      ship: "3 weeks",
      cost: "$42K – $112K",
      tone: "persimmon",
      featured: true,
      rows: [
        { k: "Time to first working agent", v: "3 weeks — sprint, ship, tune", weak: false, good: true },
        { k: "Cost over 12 months", v: "$42K – $112K + care", weak: false, good: true },
        { k: "Specialist depth", v: "Senior team on every standup — no juniors, no rotation", weak: false, good: true },
        { k: "Eval / observability", v: "Built in from day one. You see every dollar spent.", weak: false, good: true },
        { k: "Who owns it after", v: "You. We document, train, hand over.", weak: false, good: true },
      ],
    },
  ];

  return (
    <section className="section" id="compared">
      <div className="shell">
        <SectionHead
          num="§ 05"
          label="THE COMPARISON YOU'RE ALREADY DOING"
          title="Three ways to get to a working agent."
          kicker="Stack us next to your other options. The math gets clear fast — and we'd rather lose a deal honestly than win one by hiding numbers."
        />

        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(3, 1fr)",
          gap: 1,
          background: "var(--ink)",
          border: "1px solid var(--ink)",
        }} className="cmp-grid">
          {cols.map(c => (
            <article key={c.id} style={{
              background: c.featured ? "var(--persimmon)" : "var(--paper)",
              color: c.featured ? "var(--ink)" : "var(--ink-2)",
              padding: 32,
              display: "flex",
              flexDirection: "column",
              gap: 20,
              position: "relative",
              minHeight: 600,
            }}>
              {c.featured && (
                <span className="mono" style={{
                  position: "absolute",
                  top: 16, right: 16,
                  fontSize: 10,
                  background: "var(--ink)",
                  color: "var(--persimmon)",
                  padding: "4px 10px",
                  letterSpacing: "0.14em",
                  textTransform: "uppercase",
                  fontWeight: 700,
                }}>↳ THAT'S US</span>
              )}
              <header>
                <p className="mono" style={{ margin: 0, fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: c.featured ? "var(--ink)" : "var(--ink-mute)", opacity: c.featured ? 0.7 : 1 }}>
                  Option {c.id === "diy" ? "01" : c.id === "big" ? "02" : "03"}
                </p>
                <h3 className="serif" style={{
                  margin: "10px 0 4px 0",
                  fontSize: "clamp(26px, 2.8vw, 34px)",
                  lineHeight: 1.05,
                  letterSpacing: "-0.025em",
                  color: c.featured ? "var(--ink)" : "var(--ink)",
                }}>
                  {c.label}
                </h3>
                <p className="body-sm" style={{ margin: 0, color: c.featured ? "var(--ink)" : "var(--ink-soft)", opacity: c.featured ? 0.75 : 1 }}>
                  {c.sub}
                </p>
              </header>

              {/* Headline numbers */}
              <div style={{
                display: "grid",
                gridTemplateColumns: "1fr 1fr",
                gap: 16,
                padding: "16px 0",
                borderTop: `1px solid ${c.featured ? "color-mix(in oklab, var(--ink) 22%, transparent)" : "var(--rule-strong)"}`,
                borderBottom: `1px solid ${c.featured ? "color-mix(in oklab, var(--ink) 22%, transparent)" : "var(--rule-strong)"}`,
              }}>
                <div>
                  <div className="mono" style={{ fontSize: 10, letterSpacing: "0.1em", textTransform: "uppercase", color: c.featured ? "var(--ink)" : "var(--ink-mute)", opacity: c.featured ? 0.7 : 1, marginBottom: 4 }}>Ship in</div>
                  <div className="serif" style={{ fontSize: 22, lineHeight: 1, letterSpacing: "-0.02em" }}>{c.ship}</div>
                </div>
                <div>
                  <div className="mono" style={{ fontSize: 10, letterSpacing: "0.1em", textTransform: "uppercase", color: c.featured ? "var(--ink)" : "var(--ink-mute)", opacity: c.featured ? 0.7 : 1, marginBottom: 4 }}>12-mo cost</div>
                  <div className="serif" style={{ fontSize: 22, lineHeight: 1, letterSpacing: "-0.02em" }}>{c.cost}</div>
                </div>
              </div>

              {/* Rows */}
              <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "grid", gap: 12, flex: 1 }}>
                {c.rows.map((r, i) => (
                  <li key={i} style={{ display: "grid", gridTemplateColumns: "20px 1fr", gap: 10, alignItems: "flex-start" }}>
                    <span style={{
                      marginTop: 2,
                      fontFamily: "var(--font-mono)",
                      fontSize: 14,
                      color: r.good ? "var(--ink)" : (r.weak ? (c.featured ? "var(--ink)" : "var(--ink-mute)") : (c.featured ? "var(--ink)" : "var(--ink-soft)")),
                      opacity: c.featured && r.good ? 0.85 : 1,
                      fontWeight: r.good ? 700 : 400,
                    }}>{r.good ? "✓" : (r.weak ? "—" : "·")}</span>
                    <div>
                      <div className="mono" style={{ fontSize: 10, letterSpacing: "0.08em", textTransform: "uppercase", color: c.featured ? "var(--ink)" : "var(--ink-mute)", opacity: c.featured ? 0.7 : 1, marginBottom: 2 }}>
                        {r.k}
                      </div>
                      <div style={{ fontSize: 13, lineHeight: 1.4, color: c.featured ? "var(--ink)" : "var(--ink-2)", opacity: r.weak && !c.featured ? 0.75 : 1 }}>
                        {r.v}
                      </div>
                    </div>
                  </li>
                ))}
              </ul>

              {c.featured && (
                <a href="#configurator-cta" data-iris-open className="btn" style={{ background: "var(--ink)", color: "var(--persimmon)", borderColor: "var(--ink)", justifyContent: "center", marginTop: 4 }}>
                  Talk to Iris about your shape <span className="arr">→</span>
                </a>
              )}
            </article>
          ))}
        </div>

        {/* Closing line */}
        <p className="body" style={{
          marginTop: 36,
          fontFamily: "var(--font-display)",
          fontSize: "clamp(18px, 1.6vw, 24px)",
          lineHeight: 1.3,
          fontWeight: 500,
          letterSpacing: "-0.01em",
          maxWidth: "60ch",
          color: "var(--ink-2)",
        }}>
          ↳ If DIY makes more sense for your situation, we'll say so on the intro call. We've sent more than one prospect home with a one-pager and our blessing.
        </p>
      </div>

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

Object.assign(window, { Compared });
