// Mocks.jsx — shared Shopify cart, date picker, and route mocks

// === SHOPIFY CART WITH DELIVERY DATE PICKER =================
function LDCartMock() {
  const days = [
    { d: "Mon", n: 12, state: "off" },
    { d: "Tue", n: 13, state: "off" },
    { d: "Wed", n: 14, state: "today", label: "Today" },
    { d: "Thu", n: 15, state: "avail" },
    { d: "Fri", n: 16, state: "select" },
    { d: "Sat", n: 17, state: "avail" },
    { d: "Sun", n: 18, state: "full" },
  ];
  const slots = [
    { t: "9am – 11am", state: "avail" },
    { t: "11am – 1pm", state: "select" },
    { t: "1pm – 3pm", state: "avail" },
    { t: "3pm – 5pm", state: "full" },
  ];
  return (
    <div style={{
      width: 460, background: "#fff",
      borderRadius: 18,
      boxShadow: "var(--ld-shadow-cart)",
      overflow: "hidden",
      fontFamily: "var(--ld-font-sans)",
      border: "1px solid var(--ld-line)",
    }}>
      {/* Browser-style top bar */}
      <div style={{
        background: "#F4F2EC", padding: "10px 14px",
        display: "flex", alignItems: "center", gap: 10,
        borderBottom: "1px solid var(--ld-line)",
      }}>
        <div style={{ display: "flex", gap: 5 }}>
          <span style={{ width: 9, height: 9, borderRadius: "50%", background: "#FE5F57" }}/>
          <span style={{ width: 9, height: 9, borderRadius: "50%", background: "#FEBC2D" }}/>
          <span style={{ width: 9, height: 9, borderRadius: "50%", background: "#28C740" }}/>
        </div>
        <div style={{
          flex: 1, height: 22, borderRadius: 6,
          background: "#fff", border: "1px solid var(--ld-line)",
          display: "flex", alignItems: "center", padding: "0 8px",
          fontFamily: "var(--ld-font-mono)", fontSize: 10, color: "var(--ld-ink-soft)",
        }}>
          <span style={{ color: "var(--ld-ink-mute)" }}>🔒</span>
          <span style={{ marginLeft: 6 }}>fernandfox.com/cart</span>
        </div>
      </div>

      {/* Store header */}
      <div style={{
        padding: "16px 22px", borderBottom: "1px solid var(--ld-line-soft)",
        display: "flex", alignItems: "center", justifyContent: "space-between",
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <span style={{
            width: 28, height: 28, borderRadius: 8,
            background: "linear-gradient(135deg,#0F3D2E,#1A6E54)",
            color: "#fff", display: "inline-flex", alignItems: "center", justifyContent: "center",
            fontWeight: 900, fontSize: 13, letterSpacing: "-0.5px",
          }}>F</span>
          <span style={{ fontWeight: 700, fontSize: 14, color: "var(--ld-ink)" }}>Fern &amp; Fox</span>
          <span className="ld-mono" style={{ color: "var(--ld-ink-soft)" }}>· Cart</span>
        </div>
        <span className="ld-mono" style={{ color: "var(--ld-ink-soft)" }}>2 items</span>
      </div>

      {/* Cart line items */}
      <div style={{ padding: "14px 22px 6px" }}>
        <CartLine
          name="Wild Garden Bouquet"
          variant="Medium · Earthy palette"
          price="$68.00"
          qty={1}
          color="#F0DACB"
          emoji="🌿"
        />
        <div style={{ height: 1, background: "var(--ld-line-soft)", margin: "10px 0" }}/>
        <CartLine
          name="Hand-tied Posy"
          variant="Small · Pastel mix"
          price="$42.00"
          qty={1}
          color="#FBE6E8"
          emoji="🌸"
        />
      </div>

      {/* DELIVERY DATE — featured */}
      <div style={{
        margin: "10px 16px 16px",
        background: "var(--ld-yellow-tint)",
        border: "1.5px solid var(--ld-ink)",
        borderRadius: 14,
        padding: "16px 18px 18px",
        position: "relative",
      }}>
        <div style={{
          position: "absolute", top: -10, left: 16,
          background: "var(--ld-ink)", color: "var(--ld-yellow)",
          padding: "3px 10px", borderRadius: 999,
          fontFamily: "var(--ld-font-mono)", fontSize: 10,
          letterSpacing: "1.2px", textTransform: "uppercase", fontWeight: 700,
        }}>Delivery date</div>

        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginTop: 4, marginBottom: 12 }}>
          <div style={{ fontSize: 14, fontWeight: 700, color: "var(--ld-green-deep)" }}>
            Choose when you’d like it
          </div>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
            <window.LDIcon.Pin size={12}/>
            <span className="ld-mono" style={{ color: "var(--ld-green-deep)", fontWeight: 500 }}>
              Inner West
            </span>
          </div>
        </div>

        {/* Day strip */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 5 }}>
          {days.map((d) => <DayCell key={d.n} d={d}/>)}
        </div>

        {/* Time slots */}
        <div style={{ marginTop: 12, fontFamily: "var(--ld-font-mono)", fontSize: 10, color: "var(--ld-green-deep)", letterSpacing: "1px", textTransform: "uppercase", fontWeight: 600 }}>
          Friday · Choose a slot
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 6, marginTop: 8 }}>
          {slots.map((s) => <SlotCell key={s.t} s={s}/>)}
        </div>

        <div style={{
          marginTop: 12, display: "flex", alignItems: "center", gap: 8,
          fontSize: 12, color: "var(--ld-green-deep)",
        }}>
          <window.LDIcon.Check size={14}/>
          <span><strong>Fri, Aug 16 · 11am – 1pm</strong> selected</span>
        </div>
      </div>

      {/* Totals + CTA */}
      <div style={{ padding: "0 22px 18px" }}>
        <div style={{ display: "flex", justifyContent: "space-between", fontSize: 13, color: "var(--ld-ink-mute)", marginBottom: 5 }}>
          <span>Subtotal</span><span>$110.00</span>
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", fontSize: 13, color: "var(--ld-ink-mute)", marginBottom: 10 }}>
          <span>Local delivery</span><span style={{ color: "var(--ld-ok)" }}>$8.00</span>
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", fontSize: 16, fontWeight: 800, color: "var(--ld-ink)", marginBottom: 14 }}>
          <span>Total</span><span>$118.00 <span style={{ fontSize: 11, color: "var(--ld-ink-soft)", fontWeight: 500 }}>USD</span></span>
        </div>
        <button style={{
          width: "100%", padding: "13px",
          background: "var(--ld-ink)", color: "#fff",
          border: "none", borderRadius: 8,
          fontWeight: 700, fontSize: 14, letterSpacing: "0.2px",
          fontFamily: "inherit",
        }}>
          Continue to checkout →
        </button>
      </div>
    </div>
  );
}

function CartLine({ name, variant, price, qty, color, emoji }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
      <div style={{
        width: 48, height: 48, borderRadius: 10,
        background: color, display: "flex", alignItems: "center", justifyContent: "center",
        fontSize: 22,
      }}>{emoji}</div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 13, fontWeight: 700, color: "var(--ld-ink)" }}>{name}</div>
        <div style={{ fontSize: 11, color: "var(--ld-ink-soft)", marginTop: 2 }}>{variant}</div>
      </div>
      <div style={{
        display: "flex", alignItems: "center", gap: 0,
        border: "1px solid var(--ld-line)", borderRadius: 6, padding: "2px 2px",
      }}>
        <span style={{ width: 18, height: 18, display: "inline-flex", alignItems: "center", justifyContent: "center", color: "var(--ld-ink-soft)" }}>
          <window.LDIcon.Minus size={12}/>
        </span>
        <span style={{ width: 18, textAlign: "center", fontSize: 12, fontWeight: 600 }}>{qty}</span>
        <span style={{ width: 18, height: 18, display: "inline-flex", alignItems: "center", justifyContent: "center", color: "var(--ld-ink-soft)" }}>
          <window.LDIcon.Plus size={12}/>
        </span>
      </div>
      <div style={{ fontSize: 13, fontWeight: 700, color: "var(--ld-ink)", minWidth: 48, textAlign: "right" }}>{price}</div>
    </div>
  );
}

function DayCell({ d }) {
  const isOff = d.state === "off";
  const isFull = d.state === "full";
  const isSelect = d.state === "select";
  const isToday = d.state === "today";
  const bg = isSelect ? "var(--ld-yellow)" : "#fff";
  const fg = "var(--ld-ink)";
  const border = isSelect ? "var(--ld-ink)" : "var(--ld-line)";
  return (
    <div style={{
      background: bg, border: `1.5px solid ${border}`,
      borderRadius: 8, padding: "6px 0", textAlign: "center",
      position: "relative", opacity: isOff ? 0.45 : 1,
      fontFamily: "var(--ld-font-sans)",
      boxShadow: isSelect ? "2px 2px 0 var(--ld-ink)" : "none",
    }}>
      <div style={{ fontSize: 9, fontWeight: 600, color: isSelect ? "var(--ld-ink)" : "var(--ld-ink-soft)", letterSpacing: "0.6px", textTransform: "uppercase" }}>{d.d}</div>
      <div style={{ fontSize: 15, fontWeight: 800, color: fg, marginTop: 1, textDecoration: isFull ? "line-through" : "none" }}>{d.n}</div>
      {isFull && <div style={{ fontSize: 7, fontFamily: "var(--ld-font-mono)", color: "var(--ld-ink-soft)", letterSpacing: "0.5px", textTransform: "uppercase", marginTop: 1 }}>Full</div>}
      {isToday && !isSelect && <div style={{ position: "absolute", bottom: 2, left: "50%", transform: "translateX(-50%)", width: 4, height: 4, borderRadius: "50%", background: "var(--ld-accent)" }}/>}
    </div>
  );
}

function SlotCell({ s }) {
  const isSelect = s.state === "select";
  const isFull = s.state === "full";
  return (
    <div style={{
      background: isSelect ? "var(--ld-yellow)" : "#fff",
      border: `1.5px solid ${isSelect ? "var(--ld-ink)" : "var(--ld-line)"}`,
      borderRadius: 8, padding: "8px 10px",
      display: "flex", alignItems: "center", justifyContent: "space-between",
      opacity: isFull ? 0.45 : 1, textDecoration: isFull ? "line-through" : "none",
      boxShadow: isSelect ? "2px 2px 0 var(--ld-ink)" : "none",
    }}>
      <span style={{ fontSize: 12, fontWeight: 700, color: "var(--ld-ink)" }}>{s.t}</span>
      {isSelect && <span style={{ color: "var(--ld-ink)" }}><window.LDIcon.Check size={14}/></span>}
      {isFull && <span className="ld-mono" style={{ fontSize: 9, color: "var(--ld-ink-soft)" }}>FULL</span>}
    </div>
  );
}

// === FLOATING ETA TOAST ====================================
function LDEtaToast() {
  return (
    <div style={{
      background: "#fff", borderRadius: 14,
      boxShadow: "var(--ld-shadow-pop)",
      padding: "12px 14px",
      width: 240, display: "flex", alignItems: "center", gap: 12,
      fontFamily: "var(--ld-font-sans)",
      border: "1px solid var(--ld-line)",
    }}>
      <div style={{
        width: 36, height: 36, borderRadius: 10,
        background: "var(--ld-green-tint)", color: "var(--ld-green-deep)",
        display: "flex", alignItems: "center", justifyContent: "center",
      }}>
        <window.LDIcon.Check size={18}/>
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 11, fontFamily: "var(--ld-font-mono)", color: "var(--ld-ok)", letterSpacing: "1px", textTransform: "uppercase", fontWeight: 600 }}>
          Delivery booked
        </div>
        <div style={{ fontSize: 13, fontWeight: 700, color: "var(--ld-ink)", marginTop: 2 }}>
          Fri, Aug 16 · 11am–1pm
        </div>
      </div>
      <div style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--ld-green)" }}/>
    </div>
  );
}

// === ORDER STACK (small) ====================================
function LDOrderStack() {
  const orders = [
    { id: "#1042", name: "Wild Garden Bouquet", win: "Fri · 11–1pm", color: "var(--ld-green)" },
    { id: "#1043", name: "Hand-tied Posy", win: "Fri · 11–1pm", color: "var(--ld-green)" },
    { id: "#1044", name: "Plant subscription", win: "Sat · 9–11am", color: "var(--ld-accent)" },
  ];
  return (
    <div style={{
      background: "#fff", borderRadius: 14,
      boxShadow: "var(--ld-shadow-pop)",
      padding: "14px 16px",
      width: 280, fontFamily: "var(--ld-font-sans)",
      border: "1px solid var(--ld-line)",
    }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 10 }}>
        <span style={{ fontSize: 12, fontWeight: 700, color: "var(--ld-ink)" }}>Friday’s delivery route</span>
        <span className="ld-mono" style={{ fontSize: 10, color: "var(--ld-ink-soft)" }}>14 orders</span>
      </div>
      {orders.map((o, i) => (
        <div key={i} style={{ display: "flex", alignItems: "center", gap: 10, padding: "8px 0", borderTop: i > 0 ? "1px solid var(--ld-line-soft)" : "none" }}>
          <span style={{ width: 6, height: 6, borderRadius: "50%", background: o.color }}/>
          <span className="ld-mono" style={{ fontSize: 10, color: "var(--ld-ink-soft)" }}>{o.id}</span>
          <span style={{ flex: 1, fontSize: 12, color: "var(--ld-ink)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{o.name}</span>
          <span className="ld-mono" style={{ fontSize: 10, color: "var(--ld-ink-mute)" }}>{o.win}</span>
        </div>
      ))}
    </div>
  );
}

window.LDCartMock = LDCartMock;
window.LDEtaToast = LDEtaToast;
window.LDOrderStack = LDOrderStack;