// PricingTable.jsx — detailed comparison table
function LDPricingTable() {
  const sections = [
    {
      label: "Cart + delivery date",
      rows: [
        { f: "Date picker on cart drawer + cart page", v: [true, true, true] },
        { f: "Time-slot picker (1hr / 2hr / 4hr / all-day)", v: [true, true, true] },
      ],
    },
    {
      label: "Delivery areas + rules",
      rows: [
        { f: "Number of delivery areas", v: ["1", "Unlimited", "Unlimited"] },
        { f: "Postcode delivery areas", v: [true, true, true] },
        { f: "Per-area cutoff settings", v: [false, true, true] },
        { f: "Per-product / per-tag rules", v: [false, true, true] },
        { f: "Daily limits (per area)", v: [false, true, true] },
      ],
    },
    {
      label: "Dispatch (via Locate2u)",
      rows: [
        { f: "Driver mobile app", v: [false, false, true] },
        { f: "Route optimization", v: [false, false, true] },
        { f: "Multi-driver fleet management", v: [false, false, true] },
        { f: "Live dispatch dashboard", v: [false, false, true] },
      ],
    },
    {
      label: "Support",
      rows: [
        { f: "Help-center + email support", v: [true, true, true] },
        { f: "Chat support (business hours)", v: [false, true, true] },
        { f: "Onboarding call + delivery-area setup", v: [true, true, true] },
        { f: "Dedicated success manager", v: [false, false, true] },
      ],
    },
  ];

  const tiers = ["Starter", "Growth", "Pro + Locate2u"];

  return (
    <section style={{ background: "var(--ld-paper)", padding: "112px 0", borderTop: "1px solid var(--ld-line)" }}>
      <div className="ld-container-wide">
        <div style={{ textAlign: "center", marginBottom: 56, maxWidth: 680, margin: "0 auto 56px" }}>
          <span className="ld-eyebrow ld-eyebrow-dot" style={{ justifyContent: "center" }}>Full comparison</span>
          <h2 className="ld-h2" style={{ marginTop: 16 }}>Everything in every plan</h2>
          <p className="ld-lead" style={{ marginTop: 16 }}>
            Granular view of what each plan includes. Need a custom plan for 10,000+ deliveries / month? Get in touch.
          </p>
        </div>

        <div style={{ background: "var(--ld-cream)", borderRadius: 24, padding: "8px 8px 32px", border: "1px solid var(--ld-line)", overflowX: "auto" }}>
          <table style={{ width: "100%", borderCollapse: "collapse", minWidth: 720 }}>
            <thead>
              <tr>
                <th style={{ ...thBase, width: "40%" }}></th>
                {tiers.map((t, i) => (
                  <th key={t} style={{ ...thBase, textAlign: "center", color: i === 1 ? "var(--ld-green)" : i === 2 ? "var(--ld-l2u-blue)" : "var(--ld-ink)", fontSize: 15 }}>
                    <div style={{ fontWeight: 800, fontSize: 17 }}>{t}</div>
                    <div style={{ fontFamily: "var(--ld-font-mono)", fontSize: 11, color: "var(--ld-ink-soft)", fontWeight: 500, letterSpacing: "0.4px", marginTop: 4 }}>
                      {i === 0 ? "Free" : i === 1 ? "$19.99 / mo" : "Contact us"}
                    </div>
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {sections.map((s) => (
                <React.Fragment key={s.label}>
                  <tr>
                    <td colSpan={4} style={{
                      paddingTop: 28, paddingBottom: 12, paddingLeft: 20,
                      fontFamily: "var(--ld-font-mono)", fontWeight: 600, fontSize: 11,
                      color: "var(--ld-ink)", letterSpacing: "1.6px", textTransform: "uppercase",
                    }}>{s.label}</td>
                  </tr>
                  {s.rows.map((r) => (
                    <tr key={r.f} style={{ borderTop: "1px solid var(--ld-line)" }}>
                      <td style={{ padding: "14px 20px", fontSize: 14, color: "var(--ld-ink)" }}>{r.f}</td>
                      {r.v.map((v, i) => (
                        <td key={i} style={{
                          padding: "14px 20px", textAlign: "center",
                          background: i === 1 ? "rgba(255,214,10,0.04)" : i === 2 ? "rgba(59,130,246,0.05)" : "transparent",
                        }}>
                          <PCell v={v}/>
                        </td>
                      ))}
                    </tr>
                  ))}
                </React.Fragment>
              ))}
            </tbody>
          </table>
        </div>

        <div style={{ marginTop: 24, textAlign: "center" }}>
          <p className="ld-small">All prices in USD. 14-day free trial · No setup fee · Cancel anytime · No credit card required to start.</p>
        </div>
      </div>
    </section>
  );
}

const thBase = {
  padding: "20px 20px 12px",
  textAlign: "left",
  fontSize: 13,
  fontFamily: "var(--ld-font-sans)",
  fontWeight: 600,
  borderBottom: "1px solid var(--ld-line)",
};

function PCell({ v }) {
  if (typeof v === "string") {
    return <span className="ld-mono" style={{ fontSize: 12, fontWeight: 600, color: "var(--ld-ink)" }}>{v}</span>;
  }
  if (v === true) return <span style={{ color: "var(--ld-ok)", display: "inline-flex" }}><window.LDIcon.Check size={18}/></span>;
  return <span style={{ color: "var(--ld-ink-soft)", opacity: 0.3 }}>—</span>;
}

window.LDPricingTable = LDPricingTable;