/* OrchEcomm website — spotlight visual mockups for the Home showcase. */
const _card = { background: "var(--white)", border: "1px solid var(--border-default)", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-md)", padding: 22 };

function SpotlightMock_payments() {
  const I = window.OcWebIcons;
  const node = (label, sub, tone) => (
    <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 12px", borderRadius: "var(--radius-sm)", background: tone === "hub" ? "var(--green-800)" : "var(--white)", border: "1px solid " + (tone === "hub" ? "var(--green-800)" : "var(--border-default)"), color: tone === "hub" ? "#fff" : "var(--ink-900)", boxShadow: "var(--shadow-xs)" }}>
      {tone === "hub" ? <img src="../../assets/orchecomm-mark.svg" height="20" alt="" style={{ filter: "brightness(0) invert(1)" }} /> : null}
      <div><div style={{ font: "var(--type-card-title)", color: "inherit" }}>{label}</div>{sub ? <div style={{ font: "var(--type-caption)", color: tone === "hub" ? "var(--green-200)" : "var(--text-muted)" }}>{sub}</div> : null}</div>
    </div>
  );
  const arrow = <div style={{ display: "flex", justifyContent: "center", color: "var(--green-500)" }}><I.ChevronDown size={18} /></div>;
  return (
    <div style={_card}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 16 }}>
        <span style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--green-600)", boxShadow: "0 0 0 4px rgba(82,183,136,0.2)" }} />
        <span style={{ font: "var(--type-eyebrow)", textTransform: "uppercase", letterSpacing: "var(--tracking-caps)", color: "var(--text-secondary)" }}>Payment Orchestration</span>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 7 }}>
        {node("Customer checkout", "Order #3041 · $148.00")}
        {arrow}
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 7 }}>
          {[["Stripe", false], ["Shopify Pay", true], ["WooCommerce", false]].map(([n, best]) => (
            <div key={n} style={{ padding: "9px 8px", borderRadius: "var(--radius-sm)", textAlign: "center", border: "1px solid " + (best ? "var(--green-600)" : "var(--border-default)"), background: best ? "var(--green-50)" : "var(--white)" }}>
              <div style={{ font: "var(--font-sans)", fontSize: 12, fontWeight: 600, color: best ? "var(--green-800)" : "var(--text-secondary)" }}>{n}</div>
              {best ? <div style={{ font: "var(--font-sans)", fontSize: 10, fontWeight: 600, color: "var(--green-700)", marginTop: 2 }}>Best route ✓</div> : null}
            </div>
          ))}
        </div>
        {arrow}
        {node("OrchEcomm Hub", "Reconciled · routed", "hub")}
        <div style={{ display: "flex", gap: 7 }}>
          <div style={{ flex: 1 }}>{arrow}</div>
          <div style={{ flex: 1 }}>{arrow}</div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 7 }}>
          {node("Revenue Report", "Auto-updated")}
          <div style={{ display: "flex", alignItems: "center", gap: 9, padding: "10px 12px", borderRadius: "var(--radius-sm)", background: "var(--color-warning-bg)", border: "1px solid var(--color-warning)" }}>
            <I.Repeat size={16} style={{ color: "var(--color-warning)" }} />
            <div><div style={{ font: "var(--type-card-title)", color: "var(--color-warning-fg)" }}>Recovery</div><div style={{ font: "var(--type-caption)", color: "var(--color-warning-fg)" }}>Retrying failed charge</div></div>
          </div>
        </div>
      </div>
    </div>
  );
}

function SpotlightMock_suppliers() {
  const I = window.OcWebIcons;
  const rows = [
    { name: "Nordic Textiles Co.", cat: "Textiles", region: "EU", lead: "5 days", low: false },
    { name: "GreenLeaf Botanicals", cat: "Wellness", region: "EU", lead: "8 days", low: true },
    { name: "Pacific Ceramics", cat: "Homeware", region: "Asia", lead: "14 days", low: false },
  ];
  return (
    <div style={{ ..._card, padding: 0, overflow: "hidden" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "16px 20px", borderBottom: "1px solid var(--border-subtle)" }}>
        <I.Factory size={17} style={{ color: "var(--green-700)" }} />
        <span style={{ font: "var(--type-card-title)", color: "var(--ink-900)" }}>Supplier Directory</span>
      </div>
      <div style={{ padding: "6px 8px 12px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr 0.8fr auto", gap: 8, padding: "8px 12px", font: "var(--type-eyebrow)", textTransform: "uppercase", letterSpacing: "var(--tracking-caps)", color: "var(--text-muted)" }}>
          <span>Supplier</span><span>Category</span><span>Lead</span><span></span>
        </div>
        {rows.map((r, i) => (
          <div key={r.name} style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr 0.8fr auto", gap: 8, alignItems: "center", padding: "11px 12px", borderRadius: "var(--radius-sm)", background: r.low ? "var(--color-warning-bg)" : i % 2 ? "var(--surface-zebra)" : "transparent", border: r.low ? "1px solid var(--color-warning)" : "1px solid transparent" }}>
            <div>
              <div style={{ font: "var(--type-card-title)", color: "var(--ink-900)" }}>{r.name}</div>
              {r.low ? <div style={{ display: "inline-flex", alignItems: "center", gap: 4, marginTop: 3, font: "var(--font-sans)", fontSize: 10, fontWeight: 700, color: "var(--color-warning-fg)", background: "var(--white)", borderRadius: "var(--radius-full)", padding: "2px 7px" }}>● Low stock linked</div> : <div style={{ font: "var(--type-caption)", color: "var(--text-muted)", marginTop: 2 }}>{r.region}</div>}
            </div>
            <span style={{ font: "var(--type-body)", color: "var(--text-secondary)" }}>{r.cat}</span>
            <span style={{ font: "var(--type-body)", color: "var(--text-secondary)" }}>{r.lead}</span>
            <button style={{ font: "var(--font-sans)", fontSize: 12, fontWeight: 600, color: "#fff", background: "var(--green-800)", border: "none", borderRadius: "var(--radius-full)", padding: "6px 12px", cursor: "pointer", whiteSpace: "nowrap" }}>Request Quote</button>
          </div>
        ))}
      </div>
    </div>
  );
}

function SpotlightMock_visual() {
  const I = window.OcWebIcons;
  const outputs = [
    { label: "Product banner", ar: "16 / 7", g: ["#2D6A4F", "#52B788"] },
    { label: "Instagram story", ar: "9 / 16", g: ["#1B4332", "#40916C"] },
    { label: "Email header", ar: "16 / 7", g: ["#40916C", "#95D5B2"] },
  ];
  const Banner = ({ g, big }) => (
    <div style={{ height: "100%", minHeight: big ? 84 : 0, borderRadius: "var(--radius-sm)", background: `linear-gradient(135deg, ${g[0]}, ${g[1]})`, padding: 9, display: "flex", flexDirection: "column", justifyContent: "space-between", color: "#fff", overflow: "hidden" }}>
      <img src="../../assets/orchecomm-logo-white.svg" height="9" alt="" style={{ opacity: 0.85 }} />
      <div><div style={{ fontSize: 9, fontWeight: 700, lineHeight: 1.1 }}>Aurora Serum</div><div style={{ fontSize: 11, fontWeight: 700 }}>$38</div></div>
    </div>
  );
  return (
    <div style={{ ..._card, display: "flex", alignItems: "center", gap: 16 }}>
      <div style={{ flexShrink: 0, width: 120 }}>
        <div style={{ border: "1px solid var(--border-default)", borderRadius: "var(--radius-md)", overflow: "hidden", boxShadow: "var(--shadow-xs)" }}>
          <div style={{ aspectRatio: "1", background: "var(--green-100)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--green-600)" }}><I.Image size={30} /></div>
          <div style={{ padding: "8px 10px" }}>
            <div style={{ font: "var(--type-card-title)", color: "var(--ink-900)" }}>Aurora Serum</div>
            <div style={{ font: "var(--type-body)", fontWeight: 700, color: "var(--green-800)", marginTop: 2 }}>$38.00</div>
          </div>
        </div>
      </div>
      <div style={{ flexShrink: 0, display: "flex", flexDirection: "column", alignItems: "center", gap: 4 }}>
        <span style={{ width: 34, height: 34, borderRadius: "50%", background: "var(--green-800)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}><img src="../../assets/orchecomm-mark.svg" height="18" alt="" style={{ filter: "brightness(0) invert(1)" }} /></span>
        <I.ArrowRight size={16} style={{ color: "var(--green-600)" }} />
      </div>
      <div style={{ flex: 1, display: "grid", gridTemplateColumns: "1fr 1fr", gridTemplateRows: "auto auto", gap: 8 }}>
        <div style={{ gridColumn: "1 / 2" }}><Banner g={outputs[0].g} big /><Cap label="Banner" /></div>
        <div style={{ gridColumn: "2 / 3", gridRow: "1 / 3" }}>
          <div style={{ aspectRatio: "9 / 14", borderRadius: "var(--radius-sm)", background: `linear-gradient(160deg, ${outputs[1].g[0]}, ${outputs[1].g[1]})`, padding: 9, display: "flex", flexDirection: "column", justifyContent: "space-between", color: "#fff" }}>
            <img src="../../assets/orchecomm-logo-white.svg" height="9" alt="" style={{ opacity: 0.85 }} />
            <div><div style={{ fontSize: 10, fontWeight: 700 }}>Aurora Serum</div><div style={{ fontSize: 13, fontWeight: 700 }}>$38</div></div>
          </div>
          <Cap label="IG story" />
        </div>
        <div style={{ gridColumn: "1 / 2" }}><Banner g={outputs[2].g} big /><Cap label="Email header" /></div>
      </div>
    </div>
  );
}
function Cap({ label }) { return <div style={{ font: "var(--type-caption)", color: "var(--text-muted)", textAlign: "center", marginTop: 4 }}>{label}</div>; }

Object.assign(window, { SpotlightMock_payments, SpotlightMock_suppliers, SpotlightMock_visual });