// Pricing.jsx — 3-tier teaser
function LDPricing() {
  const tiers = [
    {
      name: "Starter",
      price: "Free",
      sub: "Free forever — the essentials to start offering local delivery.",
      cta: "Install free",
      ctaStyle: "ghost",
      href: "https://apps.shopify.com/local-delivery-premium",
      external: true,
      featured: false,
      feats: [
        "Date picker on cart",
        "1 delivery area",
        "Email support",
      ],
    },
    {
      name: "Growth",
      price: "$19.99",
      pricePer: "/ month",
      sub: "For growing local stores. A great place to start.",
      cta: "Start 14-day trial",
      ctaStyle: "primary",
      href: "https://apps.shopify.com/local-delivery-premium",
      external: true,
      featured: true,
      badge: "Most popular",
      feats: [
        "Unlimited areas + slots",
        "Per-area cutoff settings",
        "Per-product / per-tag rules",
        "Daily limits (per area)",
      ],
    },
    {
      name: "Pro + Locate2u",
      price: "Contact us",
      sub: "For multi-driver fleets and busy delivery operations. Pricing scales with your fleet — our team will quote you.",
      cta: "Talk to sales",
      ctaStyle: "dark",
      href: "support.html",
      featured: false,
      feats: [
        "Everything in Growth",
        "Locate2u route optimization",
        "Driver mobile app",
        "Multi-driver fleet management",
        "Dedicated success manager",
      ],
    },
  ];

  return (
    <section id="pricing" style={{ background: "var(--ld-cream)", 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" }}>Pricing</span>
          <h2 className="ld-h2" style={{ marginTop: 16 }}>
            Simple plans that grow with your store.
          </h2>
          <p className="ld-lead" style={{ marginTop: 16 }}>
            Pick the plan that fits how you deliver. Cancel anytime, no setup fee.
          </p>
        </div>

        <div className="ld-grid-3" style={{ gap: 18, alignItems: "stretch" }}>
          {tiers.map((t) => <Tier key={t.name} t={t}/>)}
        </div>

        <div style={{ textAlign: "center", marginTop: 36 }}>
          <a href="pricing.html" style={{ fontSize: 15, fontWeight: 700, color: "var(--ld-ink)", borderBottom: "2px solid var(--ld-yellow)" }}>
            Compare all plans →
          </a>
        </div>
      </div>
    </section>
  );
}

function Tier({ t }) {
  const featured = t.featured;
  return (
    <div style={{
      background: featured ? "var(--ld-dark-2)" : "#fff",
      color: featured ? "#fff" : "var(--ld-ink)",
      border: featured ? "1px solid rgba(255,255,255,0.08)" : "1px solid var(--ld-line)",
      borderRadius: 22, padding: 28, display: "flex", flexDirection: "column",
      position: "relative",
      boxShadow: featured ? "0 30px 60px rgba(15,30,25,0.20)" : "none",
      transform: featured ? "translateY(-12px)" : "none",
    }}>
      {t.badge && (
        <span style={{
          position: "absolute", top: -12, left: 28,
          background: "var(--ld-accent)", color: "#fff",
          padding: "5px 12px", borderRadius: 999,
          fontFamily: "var(--ld-font-mono)", fontSize: 10,
          letterSpacing: "1.2px", textTransform: "uppercase", fontWeight: 700,
        }}>{t.badge}</span>
      )}

      <div style={{ marginBottom: 16 }}>
        <div style={{ fontSize: 14, fontWeight: 700, color: featured ? "var(--ld-yellow)" : "var(--ld-ink)", marginBottom: 12, fontFamily: "var(--ld-font-mono)", letterSpacing: "1.6px", textTransform: "uppercase" }}>
          {t.name}
        </div>
        <div style={{ display: "flex", alignItems: "baseline", gap: 6 }}>
          <span style={{
            fontWeight: 900,
            fontSize: t.price.length > 4 ? 32 : 48,
            letterSpacing: "-1.4px",
            color: featured ? "#fff" : "var(--ld-ink)",
            lineHeight: 1,
          }}>{t.price}</span>
          {t.pricePer && <span style={{ fontSize: 14, color: featured ? "rgba(255,255,255,0.6)" : "var(--ld-ink-mute)" }}>{t.pricePer}</span>}
        </div>
        <p style={{ marginTop: 12, fontSize: 14, lineHeight: 1.5, color: featured ? "rgba(255,255,255,0.7)" : "var(--ld-ink-mute)" }}>
          {t.sub}
        </p>
      </div>

      <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 12, flex: 1 }}>
        {t.feats.map((f) => (
          <li key={f} style={{ display: "flex", alignItems: "flex-start", gap: 10, fontSize: 14, color: featured ? "rgba(255,255,255,0.9)" : "var(--ld-ink)" }}>
            <span style={{ color: featured ? "var(--ld-yellow)" : "var(--ld-ok)", marginTop: 2 }}>
              <window.LDIcon.Check size={14}/>
            </span>
            {f}
          </li>
        ))}
      </ul>

      <a
        href={t.href}
        {...(t.external ? { target: "_blank", rel: "noreferrer" } : {})}
        className={`ld-btn ld-btn-${t.ctaStyle === "primary" ? "primary" : t.ctaStyle === "dark" ? "dark" : "ghost"}`}
        style={{
          marginTop: 28, width: "100%", justifyContent: "center",
          ...(featured && t.ctaStyle !== "primary" ? { background: "#fff", color: "var(--ld-ink)" } : {}),
        }}
      >
        {t.cta}
      </a>
    </div>
  );
}

window.LDPricing = LDPricing;