// CTA.jsx — final install block: brand-yellow panel with ink text
function LDCTA() {
  return (
    <section id="install" style={{ background: "var(--ld-cream)", padding: "96px 0 112px" }}>
      <div className="ld-container-wide">
        <div style={{
          background: "var(--ld-yellow)",
          color: "var(--ld-ink)",
          borderRadius: 32,
          padding: "80px 64px",
          position: "relative", overflow: "hidden",
          display: "grid", gridTemplateColumns: "minmax(0, 1.2fr) minmax(0, 1fr)", gap: 56, alignItems: "center",
          border: "2px solid var(--ld-ink)",
          boxShadow: "10px 10px 0 var(--ld-ink)",
        }}>
          {/* deco rings */}
          <svg aria-hidden="true" style={{ position: "absolute", right: -100, top: -100, opacity: 0.10, color: "var(--ld-ink)" }} width="500" height="500" viewBox="0 0 500 500">
            <circle cx="250" cy="250" r="80" fill="none" stroke="currentColor" strokeWidth="1.5"/>
            <circle cx="250" cy="250" r="140" fill="none" stroke="currentColor" strokeWidth="1.5"/>
            <circle cx="250" cy="250" r="200" fill="none" stroke="currentColor" strokeWidth="1.5"/>
            <circle cx="250" cy="250" r="240" fill="none" stroke="currentColor" strokeWidth="1.5"/>
          </svg>

          <div style={{ position: "relative" }}>
            <span style={{
              fontFamily: "var(--ld-font-mono)", fontWeight: 700, fontSize: 12,
              letterSpacing: "1.6px", textTransform: "uppercase",
              color: "var(--ld-ink)",
              display: "inline-flex", alignItems: "center", gap: 10,
            }}>
              <span style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--ld-ink)" }}/>
              Up and running this afternoon
            </span>
            <h2 className="ld-h2" style={{ color: "var(--ld-ink)", marginTop: 18, letterSpacing: "-2px", fontSize: 60 }}>
              Stop losing local carts<br/>at checkout.
            </h2>
            <p style={{ fontSize: 18, lineHeight: 1.55, color: "var(--ld-ink)", marginTop: 18, maxWidth: 480, opacity: 0.85 }}>
              Install Local Delivery Premium from the Shopify App Store, set up your delivery areas, and start offering same-day delivery. Free for the first 14 days, no card required.
            </p>

            <div style={{ display: "flex", gap: 14, marginTop: 32, flexWrap: "wrap" }}>
              <a href="https://apps.shopify.com/local-delivery-premium" target="_blank" rel="noreferrer" className="ld-btn ld-btn-lg" style={{
                background: "var(--ld-ink)", color: "var(--ld-yellow)",
                border: "2px solid var(--ld-ink)",
                boxShadow: "0 4px 0 rgba(255,255,255,0.4)",
              }}>
                <window.LDShopifyBag size={17}/>
                Install on Shopify
              </a>
              <a href="support.html" className="ld-btn ld-btn-lg" style={{
                background: "transparent", color: "var(--ld-ink)",
                border: "2px solid var(--ld-ink)",
              }}>
                Book a demo <window.LDIcon.Arrow size={14}/>
              </a>
            </div>
          </div>

          {/* Shopify App Store card */}
          <div style={{
            background: "#fff", color: "var(--ld-ink)",
            borderRadius: 20, padding: 24,
            border: "2px solid var(--ld-ink)",
            boxShadow: "6px 6px 0 var(--ld-ink)",
            position: "relative",
            transform: "rotate(2deg)",
          }}>
            <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 18 }}>
              <window.LDShopifyBag size={36}/>
              <div>
                <div className="ld-mono" style={{ fontSize: 10, color: "var(--ld-ink-soft)", letterSpacing: "1.2px", textTransform: "uppercase" }}>Shopify App Store</div>
                <div style={{ fontWeight: 800, fontSize: 18, color: "var(--ld-ink)" }}>Local Delivery Premium</div>
              </div>
            </div>
            <div style={{ background: "var(--ld-yellow-tint)", border: "1.5px solid var(--ld-ink)", borderRadius: 10, padding: "10px 14px", marginBottom: 16 }}>
              <div className="ld-mono" style={{ fontSize: 10, color: "var(--ld-ink)", letterSpacing: "1px", textTransform: "uppercase", fontWeight: 700, marginBottom: 4 }}>FREE PLAN AVAILABLE</div>
              <div style={{ fontSize: 12, color: "var(--ld-ink)" }}>14-day free trial · From $19.99/month after</div>
            </div>
            <a href="https://apps.shopify.com/local-delivery-premium" target="_blank" rel="noreferrer" style={{
              width: "100%", background: "#008060", color: "#fff",
              border: "none", borderRadius: 8, padding: 14,
              fontWeight: 700, fontSize: 15, fontFamily: "inherit",
              display: "flex", alignItems: "center", justifyContent: "center", gap: 8,
            }}>
              Try it now! <window.LDIcon.Arrow size={14}/>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}
window.LDCTA = LDCTA;