// Hero.jsx — Shopify cart with date picker as the focal mock
function LDHero() {
  return (
    <section style={{
      position: "relative",
      background: "var(--ld-cream)",
      overflow: "hidden",
      paddingBottom: 80,
    }}>
      {/* soft green wash */}
      <div aria-hidden="true" style={{
        position: "absolute", inset: 0,
        background: "radial-gradient(900px 600px at 80% 0%, rgba(255,214,10,0.08), transparent 60%), radial-gradient(700px 500px at 0% 100%, rgba(255,107,53,0.06), transparent 60%)",
        pointerEvents: "none",
      }}/>

      <div className="ld-container-wide ld-hero-grid" style={{
        position: "relative",
        paddingTop: 64, paddingBottom: 24,
      }}>
        {/* Copy column */}
        <div style={{ display: "flex", flexDirection: "column", gap: 22, maxWidth: 560 }}>
          <span className="ld-eyebrow ld-eyebrow-dot">
            Shopify App · Built for local fulfilment
          </span>

          <h1 className="ld-display">
            Let customers pick <em style={{
              fontStyle: "normal",
              background: "var(--ld-yellow)",
              padding: "0 8px",
              borderRadius: 6,
              boxShadow: "3px 3px 0 var(--ld-ink)",
              display: "inline-block",
              lineHeight: 0.95,
              transform: "rotate(-1.5deg)",
            }}>when</em> their order arrives.
          </h1>

          <p className="ld-lead" style={{ maxWidth: 520 }}>
            Local Delivery Premium puts a real, working delivery&nbsp;date picker on your Shopify cart — showing only the dates that fit your delivery areas, area limits, and order deadlines.
          </p>

          <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginTop: 4 }}>
            <a href="https://apps.shopify.com/local-delivery-premium" target="_blank" rel="noreferrer" className="ld-btn ld-btn-primary ld-btn-lg">
              <window.LDShopifyBag size={17}/>
              Install on Shopify
            </a>
          </div>

          <div style={{ display: "flex", alignItems: "center", gap: 22, marginTop: 8, flexWrap: "wrap" }}>
            <span className="ld-small" style={{ color: "var(--ld-ink)", fontWeight: 600 }}>Built for local Shopify stores</span>
            <span className="ld-small">No credit card required · 14-day free trial</span>
          </div>
        </div>

        {/* Cart column */}
        <div style={{ position: "relative", display: "flex", justifyContent: "center", padding: "20px 0", minHeight: 580 }}>
          {/* drop shadow plate */}
          <div aria-hidden="true" style={{
            position: "absolute", inset: "20px 30px",
            background: "linear-gradient(135deg, #E8F1EC, #F9F6EE)",
            borderRadius: 30, filter: "blur(20px)", opacity: 0.6,
          }}/>
          <div style={{ position: "relative", transform: "rotate(-1.2deg)" }}>
            <window.LDCartMock />
          </div>

          {/* Floating toast top-right */}
          <div style={{ position: "absolute", top: 0, right: 0, transform: "rotate(3deg)" }}>
            <window.LDEtaToast />
          </div>

          {/* Floating order stack bottom-left */}
          <div style={{ position: "absolute", bottom: 0, left: 0, transform: "rotate(-3deg)" }}>
            <window.LDOrderStack />
          </div>
        </div>
      </div>
    </section>
  );
}
window.LDHero = LDHero;