// Comparison table: Ansys Digital vs Freelancer vs Agency — compact table, fits mobile.
const NS_CMP = window.AnsysDigitalDesignSystem_4543d7;
function Comparison() {
  const { SectionHeading, Button } = NS_CMP;
  const cols = ["Ansys Digital", "Freelancer", "Agency"];
  const rows = [
    ["Pricing", "Transparent quote", "Unpredictable", "3–5× higher"],
    ["Billing", "Flat, fixed", "Hourly", "Retainer"],
    ["Start of work", "Within 48 hrs", "1–2 week wait", "2–4 week queue"],
    ["Turnaround", "Fast, on time", "Unreliable", "8–16 weeks"],
    ["Platform", "Shopify specialist", "Generalist", "Mixed stacks"],
    ["Code quality", "100% custom", "Mixed", "Template-based"],
    ["Performance", "Speed-tuned", "Variable", "Average"],
    ["Shopify Plus", "Full expertise", "Rare", "Limited"],
    ["Migration", "Zero data loss", "Risky", "Slow"],
    ["Revisions", "2 free (21 days)", "Paid", "Paid retainer"],
    ["Onboarding", "Free training", "None", "Extra cost"],
    ["Support", "Direct WhatsApp", "Slow", "Ticket queue"],
    ["Source code", "100% yours", "Varies", "Lock-in risk"],
  ];
  return (
    <section style={{ background: "var(--surface-subtle)" }}>
      <div style={{ maxWidth: "var(--container-max)", margin: "0 auto", padding: "var(--section-y) var(--gutter)" }}>
        <div className="reveal" style={{ marginBottom: "clamp(2.5rem,5vw,3.5rem)" }}>
          <SectionHeading eyebrow="Why Ansys Digital" title="A premium partner, not a freelancer" description="What enterprise-level Shopify work actually requires — and who delivers it." align="center" />
        </div>
        <div className="reveal cmp-wrap" style={{ maxWidth: 780, margin: "0 auto", position: "relative", background: "var(--surface-card)", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-xl)", overflow: "hidden", boxShadow: "var(--shadow-md)" }}>
          <div className="cmp-table" style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr 1fr 1fr" }}>
            {/* header */}
            <div className="cmp-cell cmp-head" />
            {cols.map((c, ci) => (
              <div key={c} className={"cmp-cell cmp-head" + (ci === 0 ? " cmp-feat" : "")} style={{ textAlign: "center", justifyContent: "center", flexDirection: "column", gap: 5, fontFamily: "var(--font-display)", fontWeight: 700, color: ci === 0 ? "var(--brand)" : "var(--text-primary)" }}>
                {ci === 0 ? <span style={{ display: "inline-flex", alignItems: "center", gap: 4, padding: "2px 8px", borderRadius: "var(--radius-pill)", background: "var(--accent)", color: "var(--neutral-950)", fontFamily: "var(--font-mono)", fontSize: 8.5, fontWeight: 700, letterSpacing: ".06em", textTransform: "uppercase" }}>Most chosen</span> : null}
                <span>{c}</span>
              </div>
            ))}
            {/* rows */}
            {rows.map((r, ri) => {
              const zebra = ri % 2 === 1;
              const last = ri === rows.length - 1;
              return (
              <React.Fragment key={r[0]}>
                <div className="cmp-cell cmp-label" style={{ fontWeight: 600, color: "var(--text-primary)", background: zebra ? "var(--surface-subtle)" : "transparent" }}>{r[0]}</div>
                {r.slice(1).map((v, ci) => (
                  <div key={ci} className={"cmp-cell cmp-val" + (ci === 0 ? " cmp-feat" : "")} style={{ color: ci === 0 ? "var(--text-primary)" : "var(--text-secondary)", fontWeight: ci === 0 ? 600 : 500, background: ci === 0 ? undefined : (zebra ? "var(--surface-subtle)" : "transparent"), borderBottomLeftRadius: ci === 0 && last ? 14 : 0, borderBottomRightRadius: ci === 0 && last ? 14 : 0 }}>
                    {ci === 0 ? <span style={{ display: "inline-flex", alignItems: "center", gap: 6, justifyContent: "center" }}><span style={{ color: "var(--success-500)", display: "inline-flex", flexShrink: 0 }}><Ic name="check" size={14} stroke={3} /></span>{v}</span> : v}
                  </div>
                ))}
              </React.Fragment>
              );
            })}
          </div>
        </div>
        <div className="reveal" style={{ display: "flex", justifyContent: "center", marginTop: "clamp(28px,4vw,40px)" }}>
          <Button variant="primary" size="lg" href="#contact" iconRight={<Ic name="arrow-right" size={18} />}>Book a discovery call</Button>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Comparison });