// pricing.jsx: Comparison, Pricing in PHP, Founding Customer offer

function Comparison() {
  const T = window.l2uTokens;
  const cols = [
    { name: "Lalamove / Grab Express", sub: "Booking drivers on-demand" },
    { name: "Onfleet / Locus", sub: "Enterprise fleets" },
    { name: "Excel + Viber", sub: "What 80% of PH fleets use today" },
    { name: "Locate2u", sub: "Businesses with their own drivers", featured: true },
  ];
  const rows = [
    { label: "Route optimization",      vals: ["✗ Single trips", "✓ Built in", "✗ Plotted by hand", "✓ Auto-sequenced"] },
    { label: "Customer tracking link",  vals: ["✓ (their brand)", "✓ Live link", "✗ Phone calls", "✓ (your brand)"] },
    { label: "Proof of delivery",       vals: ["Limited", "✓ Photo proof", "Screenshots", "✓ Photo · sig · timestamp"] },
    { label: "Price (per driver/mo)",   vals: ["Per-trip fees", "$50+ USD", '"Free" (lost time)', "₱795 to ₱1,114"] },
    { label: "Support in PH",           vals: ["Yes", "Limited", "✗ You're on your own", "Local team · EN + TL"] },
  ];

  const cell = (v, featured) => {
    if (v.startsWith("✗")) {
      const label = v.replace(/^✗\s?/, "");
      const mark = <span style={{ color: featured ? "rgba(255,255,255,0.45)" : "rgba(28,62,97,0.30)", fontSize: 18, lineHeight: 1 }}>✗</span>;
      if (!label) return mark;
      return (
        <span style={{ display: "inline-flex", alignItems: "center", gap: 8, fontSize: 14, fontWeight: 500, color: featured ? "rgba(255,255,255,0.55)" : T.mute }}>
          {mark}<span>{label}</span>
        </span>
      );
    }
    if (v.startsWith("✓")) {
      return (
        <span style={{
          display: "inline-flex", alignItems: "center", gap: 8,
          color: featured ? "#fff" : T.bluishGrey, fontSize: 14, fontWeight: 500,
        }}>
          <span style={{
            width: 18, height: 18, borderRadius: "50%",
            background: featured ? "rgba(45,210,122,0.20)" : "rgba(45,210,122,0.14)",
            display: "inline-flex", alignItems: "center", justifyContent: "center",
          }}>
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke={T.success} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
          </span>
          {v.replace(/^✓\s?/, "")}
        </span>
      );
    }
    return <span style={{ fontSize: 14, color: featured ? "rgba(255,255,255,0.85)" : T.body }}>{v}</span>;
  };

  return (
    <section style={{ background: T.cream, padding: "120px 80px", fontFamily: T.fontSans }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <window.L2U_SectionHead
          eyebrow="WHY LOCATE2U"
          title="Why Philippine fleets choose Locate2u."
          body="There are three other ways to manage your fleet. Here's how Locate2u compares, honestly."
        />

        <div style={{
          background: "#fff", border: "1px solid rgba(28,62,97,0.08)",
          borderRadius: 24, overflow: "hidden",
          boxShadow: "0 1px 2px rgba(15,31,56,0.04)",
        }}>
          <div style={{ overflowX: "auto" }}>
          <div data-keepcols="1" style={{
            display: "grid",
            gridTemplateColumns: "1.2fr repeat(4, 1fr)",
          }}>
            {/* Header row */}
            <div style={{ padding: "26px 28px", borderBottom: "1px solid rgba(28,62,97,0.08)" }}>
              <div style={{ fontFamily: T.fontMono, fontSize: 10, letterSpacing: "1.4px", color: T.mute2, fontWeight: 700 }}>COMPARISON</div>
              <div style={{ fontWeight: 900, fontSize: 18, color: T.bluishGrey, marginTop: 6, letterSpacing: "-0.2px" }}>For PH fleets</div>
            </div>
            {cols.map((c) => (
              <div key={c.name} style={{
                padding: "26px 22px",
                background: c.featured ? "linear-gradient(180deg,#1C3E61,#0A2540)" : "transparent",
                color: c.featured ? "#fff" : T.bluishGrey,
                borderBottom: c.featured ? "none" : "1px solid rgba(28,62,97,0.08)",
                borderLeft: "1px solid rgba(28,62,97,0.06)",
              }}>
                <span style={{
                  display: "inline-block", marginBottom: 12,
                  padding: "4px 10px", borderRadius: 999,
                  fontFamily: T.fontMono, fontSize: 9, letterSpacing: "1.2px", fontWeight: 700,
                  background: c.featured ? T.primary : "transparent",
                  color: c.featured ? "#fff" : "transparent",
                  visibility: c.featured ? "visible" : "hidden",
                }}>RECOMMENDED</span>
                <div style={{ fontWeight: 900, fontSize: 15, letterSpacing: "-0.1px" }}>{c.name}</div>
                <div style={{ fontSize: 11, color: c.featured ? "rgba(255,255,255,0.6)" : T.mute2, marginTop: 4, lineHeight: 1.4 }}>{c.sub}</div>
              </div>
            ))}

            {/* Body rows */}
            {rows.map((r, ri) => (
              <React.Fragment key={r.label}>
                <div style={{
                  padding: "20px 28px",
                  borderBottom: ri === rows.length - 1 ? "none" : "1px solid rgba(28,62,97,0.06)",
                  fontWeight: 600, fontSize: 13, color: T.bluishGrey,
                  display: "flex", alignItems: "center",
                }}>{r.label}</div>
                {r.vals.map((v, ci) => (
                  <div key={ci} style={{
                    padding: "20px 22px",
                    background: ci === 3 ? "linear-gradient(180deg,#1C3E61,#0A2540)" : "transparent",
                    borderBottom: ri === rows.length - 1 ? "none" : (ci === 3 ? "none" : "1px solid rgba(28,62,97,0.06)"),
                    borderLeft: "1px solid rgba(28,62,97,0.06)",
                    display: "flex", alignItems: "center",
                  }}>{cell(v, ci === 3)}</div>
                ))}
              </React.Fragment>
            ))}
          </div>
          </div>
        </div>

        <p style={{
          margin: "32px auto 0", maxWidth: 760, textAlign: "center",
          fontSize: 16, lineHeight: "26px", color: T.mute,
        }}>
          Locate2u is roughly <strong style={{ color: T.bluishGrey }}>45% of the price of overseas SaaS alternatives</strong> because we built it for the Philippine market, not retrofitted from a US product.
        </p>
      </div>
    </section>
  );
}

function Pricing() {
  const T = window.l2uTokens;
  const plans = [
    {
      name: "Starter",
      price: "₱795",
      unit: "per driver / month",
      tag: "FOR FLEETS OF 3–9 DRIVERS",
      desc: "Everything a growing fleet needs to plan, dispatch, and confirm daily deliveries.",
      bullets: [
        "Route optimization",
        "Driver app (EN + Tagalog rolling out)",
        "Customer tracking link",
        "SMS notifications (capped)",
        "Email support",
      ],
      cta: "Start with Starter",
    },
    {
      name: "Growth",
      price: "₱1,114",
      unit: "per driver / month",
      tag: "MOST POPULAR · 10–30 DRIVERS",
      desc: "Full-featured delivery management for the sweet-spot PH fleet.",
      bullets: [
        "Everything in Starter",
        "Proof of delivery (photo + signature)",
        "Custom branding on tracking page",
        "Higher SMS allowance + Viber notifications",
        "Priority support (next quarter)",
      ],
      featured: true,
      cta: "Start with Growth",
    },
    {
      name: "Enterprise",
      price: "Talk to us",
      unit: "30+ drivers · custom",
      tag: "FOR LARGE FLEETS",
      desc: "Dedicated success manager, SLA, API access, and custom integrations.",
      bullets: [
        "Everything in Growth",
        "Full API & webhooks",
        "Custom integrations (ERP, WMS)",
        "Dedicated CSM & SLA",
        "Volume pricing",
      ],
      cta: "Book a call",
    },
  ];
  return (
    <section style={{ background: "#fff", padding: "120px 80px", fontFamily: T.fontSans }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <window.L2U_SectionHead
          eyebrow="PRICING IN PESOS"
          title="Simple pricing in Philippine pesos."
          body="No setup fees. Save with annual billing. 30-day money-back guarantee on every plan."
        />

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 20 }}>
          {plans.map((p) => (
            <div key={p.name} style={{
              background: p.featured ? "linear-gradient(180deg,#1C3E61,#01101F)" : "#fff",
              color: p.featured ? "#fff" : T.bluishGrey,
              border: p.featured ? "none" : "1px solid rgba(28,62,97,0.10)",
              borderRadius: 22, padding: "36px 32px",
              boxShadow: p.featured ? "0 30px 60px rgba(28,62,97,0.20)" : "none",
              position: "relative",
              display: "flex", flexDirection: "column", gap: 22,
            }}>
              {p.featured && (
                <span style={{
                  position: "absolute", top: -12, left: 32, padding: "5px 12px",
                  background: T.primary, color: "#fff", borderRadius: 999,
                  fontFamily: T.fontMono, fontSize: 10, letterSpacing: "1.2px", fontWeight: 700,
                }}>{p.tag}</span>
              )}
              {!p.featured && (
                <div style={{ fontFamily: T.fontMono, fontSize: 10, letterSpacing: "1.2px", color: T.primary, fontWeight: 700 }}>{p.tag}</div>
              )}
              <div>
                <div style={{ fontWeight: 900, fontSize: 28, letterSpacing: "-0.4px", marginTop: p.featured ? 8 : 0 }}>{p.name}</div>
                <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginTop: 12 }}>
                  <span style={{ fontWeight: 900, fontSize: 44, letterSpacing: "-1.4px", lineHeight: 1 }}>{p.price}</span>
                  <span style={{ fontFamily: T.fontMono, fontSize: 12, color: p.featured ? "rgba(255,255,255,0.6)" : T.mute2, letterSpacing: "0.4px" }}>{p.unit}</span>
                </div>
              </div>
              <div style={{ fontSize: 14, lineHeight: "22px", color: p.featured ? "rgba(255,255,255,0.78)" : T.mute }}>{p.desc}</div>

              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 12, flex: 1 }}>
                {p.bullets.map((b) => (
                  <li key={b} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 14, color: p.featured ? "rgba(255,255,255,0.88)" : T.bluishGrey }}>
                    <span style={{
                      flexShrink: 0, marginTop: 4,
                      width: 16, height: 16, borderRadius: "50%",
                      background: p.featured ? "rgba(43,147,255,0.30)" : "rgba(43,147,255,0.12)",
                      display: "inline-flex", alignItems: "center", justifyContent: "center",
                    }}>
                      <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke={T.primary} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                    </span>
                    <span style={{ lineHeight: "20px" }}>{b}</span>
                  </li>
                ))}
              </ul>
              <button
                onClick={() => { window.location.href = "/request-access?plan=" + encodeURIComponent(p.name); }}
                onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-1px)"; e.currentTarget.style.background = p.featured ? "#1C82EF" : "rgba(43,147,255,0.06)"; if (!p.featured) e.currentTarget.style.borderColor = "rgba(43,147,255,0.5)"; }}
                onMouseLeave={(e) => { e.currentTarget.style.transform = ""; e.currentTarget.style.background = p.featured ? T.primary : "#fff"; if (!p.featured) e.currentTarget.style.borderColor = "rgba(28,62,97,0.15)"; }}
                style={{
                width: "100%", padding: "14px 18px", borderRadius: 12, cursor: "pointer",
                background: p.featured ? T.primary : "#fff",
                color: p.featured ? "#fff" : T.bluishGrey,
                border: p.featured ? "none" : "1px solid rgba(28,62,97,0.15)",
                fontFamily: T.fontSans, fontWeight: 700, fontSize: 14,
                boxShadow: p.featured ? "0 8px 20px rgba(43,147,255,0.35)" : "none",
                transition: "background .15s ease, transform .15s ease, border-color .15s ease",
              }}>{p.cta} →</button>
            </div>
          ))}
        </div>

        <div style={{
          marginTop: 32, fontFamily: T.fontMono, fontSize: 12, color: T.mute2,
          textAlign: "center", letterSpacing: "0.3px",
        }}>
          Need 30+ drivers? · Talk to us about volume pricing · 30-day money-back guarantee on every plan
        </div>
      </div>
    </section>
  );
}

function FoundingOffer({ visible }) {
  const T = window.l2uTokens;
  if (!visible) return null;
  return (
    <section style={{
      background: T.cream,
      padding: "0 80px 120px",
      fontFamily: T.fontSans,
    }}>
      <div style={{
        maxWidth: 1280, margin: "0 auto",
        background: "linear-gradient(135deg, #0C2440 0%, #01101F 100%)",
        color: "#fff", borderRadius: 28,
        padding: "56px 64px", position: "relative", overflow: "hidden",
        display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 56, alignItems: "center",
      }}>
        <div style={{ position: "relative" }}>
          <span style={{
            display: "inline-flex", alignItems: "center", gap: 8,
            fontFamily: T.fontMono, fontSize: 11, letterSpacing: "1.4px", color: "#0BDA8E",
            fontWeight: 700, padding: "6px 12px", borderRadius: 999,
            background: "rgba(11,218,142,0.10)", border: "1px solid rgba(11,218,142,0.30)",
          }}>
            <window.L2U_Dot color="#0BDA8E" pulse /> FOUNDING CUSTOMER OFFER
          </span>
          <h2 style={{
            margin: "20px 0 18px", fontSize: 44, fontWeight: 900,
            lineHeight: "52px", letterSpacing: "-1.2px", color: "#fff",
            textWrap: "balance",
          }}>
            Be one of our first 5 Philippine customers, and pay <span style={{ color: "#6EC1F7" }}>half price for a year</span>.
          </h2>
          <p style={{ margin: "0 0 28px", fontSize: 17, lineHeight: "28px", color: "rgba(255,255,255,0.78)", maxWidth: 580 }}>
            We're launching in the Philippines and looking for 5 founding customers across furniture, water, pharmacy, florist, and field services. You get <strong style={{ color: "#fff" }}>50% off Year 1</strong> in exchange for honest feedback and a quick case study if Locate2u works for you. Limited spots, limited time.
          </p>
          <div style={{ display: "flex", gap: 14, alignItems: "center", flexWrap: "wrap" }}>
            <button
              onClick={() => { window.location.href = "/request-access?plan=" + encodeURIComponent("Claim founding offer"); }}
              onMouseEnter={(e) => { e.currentTarget.style.background = "#09C07D"; e.currentTarget.style.transform = "translateY(-1px)"; e.currentTarget.style.boxShadow = "0 12px 30px rgba(11,218,142,0.42)"; }}
              onMouseLeave={(e) => { e.currentTarget.style.background = "#0BDA8E"; e.currentTarget.style.transform = ""; e.currentTarget.style.boxShadow = "0 8px 24px rgba(11,218,142,0.30)"; }}
              style={{
              display: "inline-flex", alignItems: "center", gap: 8,
              background: "#0BDA8E", color: "#fff", border: "none", cursor: "pointer",
              padding: "16px 26px", borderRadius: 12, fontWeight: 700, fontSize: 15,
              boxShadow: "0 8px 24px rgba(11,218,142,0.30)",
              transition: "background .15s ease, transform .15s ease, box-shadow .15s ease",
            }}>
              Claim a founding spot
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M2 7h10M8 3l4 4-4 4"/></svg>
            </button>
            <span style={{ fontFamily: T.fontMono, fontSize: 12, color: "rgba(255,255,255,0.55)", letterSpacing: "0.3px" }}>
              Cancel anytime
            </span>
          </div>
        </div>

        {/* Spot counter */}
        <div style={{ position: "relative", display: "flex", flexDirection: "column", gap: 14 }}>
          <div style={{
            background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.10)",
            borderRadius: 18, padding: 24,
          }}>
            <div style={{ fontFamily: T.fontMono, fontSize: 10, letterSpacing: "1.4px", color: "#6EC1F7", fontWeight: 700 }}>FOUNDING SPOTS</div>
            <div style={{ display: "flex", alignItems: "baseline", gap: 10, marginTop: 8 }}>
              <span style={{ fontWeight: 900, fontSize: 72, letterSpacing: "-2px", lineHeight: 1, color: "#fff" }}>5</span>
              <span style={{ fontFamily: T.fontMono, fontSize: 14, color: "rgba(255,255,255,0.55)" }}>open</span>
            </div>
            {/* ten founding spots */}
            <div style={{ marginTop: 18, display: "flex", gap: 6 }}>
              {Array.from({ length: 5 }).map((_, i) => (
                <span key={i} style={{
                  flex: 1, height: 6, borderRadius: 999, background: T.primary,
                }}/>
              ))}
            </div>
            <div style={{ marginTop: 14, fontFamily: T.fontMono, fontSize: 11, color: "rgba(255,255,255,0.6)", letterSpacing: "0.3px" }}>First come, first served · 50% off Year 1</div>
          </div>
          <div style={{
            background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.10)",
            borderRadius: 18, padding: 18,
            display: "flex", flexDirection: "column", gap: 10,
          }}>
            <div style={{ fontFamily: T.fontMono, fontSize: 10, letterSpacing: "1.4px", color: T.muteOnDark }}>WHO IT'S FOR</div>
            {[
              { initials: "FA", label: "Furniture & appliance delivery", href: "/ph/solutions/furniture-delivery", c: T.primary },
              { initials: "WL", label: "Water & LPG delivery", href: "/ph/solutions/water-lpg-delivery", c: T.success },
              { initials: "Rx", label: "Pharmacy & medical delivery", href: "/ph/solutions/pharmacy-delivery", c: "#A855F7" },
              { initials: "FL", label: "Florist & gifting delivery", href: "/ph/solutions/florist-delivery", c: T.warn },
              { initials: "FS", label: "Field service scheduling", href: "/ph/solutions/field-service-scheduling", c: "#EC4899" },
            ].map((r) => (
              <a key={r.label} href={r.href} style={{ display: "flex", gap: 10, alignItems: "center", fontSize: 13, color: "rgba(255,255,255,0.85)", textDecoration: "none" }}>
                <span style={{
                  width: 26, height: 26, borderRadius: "50%", background: r.c, color: "#fff",
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                  fontWeight: 700, fontSize: 10, flexShrink: 0,
                }}>{r.initials}</span>
                {r.label}
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

window.L2U_Comparison = Comparison;
window.L2U_Pricing = Pricing;
window.L2U_FoundingOffer = FoundingOffer;