/* store-mockups.jsx — elegant mini product previews used in cards, hero collage,
   and gallery. Each fills its parent width; keep them light and on-palette.
   Exported to window. */

function L({ w = "100%", h = 5, c = "#e9edf5", mb = 5, r = 9999 }) {
  return <div style={{ width: w, height: h, borderRadius: r, background: c, marginBottom: mb }} />;
}
function Sheet({ children, pad = 14, bg = "#fff" }) {
  return (
    <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", padding: 18 }}>
      <div style={{ width: "82%", height: "88%", background: bg, borderRadius: 10, boxShadow: "0 10px 30px rgba(28,30,84,0.14)", padding: pad, boxSizing: "border-box", overflow: "hidden" }}>{children}</div>
    </div>
  );
}

/* 1. Business Planner — weekly spread */
function MkPlanner() {
  return (
    <Sheet>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }}>
        <div style={{ fontSize: 10, fontWeight: 400, letterSpacing: "-0.2px", color: "var(--ink)" }}>Weekly Plan</div>
        <div style={{ fontSize: 8, color: "var(--primary)" }}>2026</div>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
        {[0, 1, 2, 3].map((i) => (
          <div key={i} style={{ border: "1px solid var(--hairline)", borderRadius: 7, padding: 8 }}>
            <div style={{ width: 20, height: 4, borderRadius: 9999, background: "var(--primary-bg-subdued-hover)", marginBottom: 7 }} />
            <L w="90%" h={3} /><L w="70%" h={3} mb={0} />
          </div>
        ))}
      </div>
    </Sheet>
  );
}

/* 2. Invoice */
function MkInvoice() {
  return (
    <Sheet>
      <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 12 }}>
        <div><div style={{ fontSize: 11, fontWeight: 400, color: "var(--ink)" }}>Invoice</div><div style={{ fontSize: 7, color: "var(--ink-mute)" }}>#INV-0248</div></div>
        <div style={{ width: 24, height: 24, borderRadius: 6, background: "var(--primary)" }} />
      </div>
      {[0, 1, 2].map((i) => (
        <div key={i} className="tnum" style={{ display: "flex", justifyContent: "space-between", borderBottom: "1px solid var(--hairline)", padding: "6px 0", fontSize: 8, color: "var(--ink-mute)" }}>
          <span>Item {i + 1}</span><span>${(120 * (i + 1)).toFixed(2)}</span>
        </div>
      ))}
      <div className="tnum" style={{ display: "flex", justifyContent: "space-between", marginTop: 8, fontSize: 10, color: "var(--ink)", fontWeight: 400 }}><span>Total</span><span>$720.00</span></div>
    </Sheet>
  );
}

/* 3. Content Calendar */
function MkCalendar() {
  return (
    <Sheet pad={12}>
      <div style={{ fontSize: 10, fontWeight: 400, marginBottom: 10, color: "var(--ink)" }}>Content Calendar</div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(7,1fr)", gap: 4 }}>
        {Array.from({ length: 28 }).map((_, i) => {
          const on = [3, 8, 12, 17, 22, 25].includes(i);
          return <div key={i} style={{ aspectRatio: "1", borderRadius: 4, background: on ? "var(--primary)" : "#eef1f8" }} />;
        })}
      </div>
    </Sheet>
  );
}

/* 4. Social Media Kit — post grid */
function MkSocial() {
  const grads = ["linear-gradient(135deg,#c9b6f5,#533afd)", "linear-gradient(135deg,#f7b986,#ea2261)", "linear-gradient(135deg,#b9b9f9,#665efd)", "linear-gradient(135deg,#f96bee,#533afd)"];
  return (
    <Sheet pad={12}>
      <div style={{ fontSize: 10, fontWeight: 400, marginBottom: 10, color: "var(--ink)" }}>Social Kit</div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 7 }}>
        {grads.map((g, i) => <div key={i} style={{ aspectRatio: "1.1", borderRadius: 8, background: g }} />)}
      </div>
    </Sheet>
  );
}

/* 5. Resume */
function MkResume() {
  return (
    <Sheet>
      <div style={{ display: "flex", gap: 8, marginBottom: 10, alignItems: "center" }}>
        <div style={{ width: 22, height: 22, borderRadius: 9999, background: "linear-gradient(135deg,#c9b6f5,#533afd)" }} />
        <div><div style={{ fontSize: 9, fontWeight: 400, color: "var(--ink)" }}>Alex Rivera</div><div style={{ fontSize: 7, color: "var(--primary)" }}>Product Designer</div></div>
      </div>
      <L w="40%" h={4} c="var(--primary-bg-subdued-hover)" />
      <L w="100%" h={3} /><L w="92%" h={3} /><L w="96%" h={3} mb={10} />
      <L w="35%" h={4} c="var(--primary-bg-subdued-hover)" />
      <L w="88%" h={3} /><L w="70%" h={3} mb={0} />
    </Sheet>
  );
}

/* 6. Budget Tracker — chart */
function MkBudget() {
  const bars = [50, 72, 40, 88, 64, 96, 58];
  return (
    <Sheet>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 4 }}>
        <div style={{ fontSize: 10, fontWeight: 400, color: "var(--ink)" }}>Budget</div>
        <div className="tnum" style={{ fontSize: 8, color: "#1f8a5b" }}>+12%</div>
      </div>
      <div className="tnum" style={{ fontSize: 15, fontWeight: 300, letterSpacing: "-0.4px", marginBottom: 10 }}>$8,240</div>
      <div style={{ display: "flex", gap: 4, alignItems: "flex-end", height: 46 }}>
        {bars.map((h, i) => <div key={i} style={{ flex: 1, height: h + "%", borderRadius: 3, background: i === 5 ? "var(--primary)" : "var(--primary-bg-subdued-hover)" }} />)}
      </div>
    </Sheet>
  );
}

/* 7. Media Kit */
function MkMediaKit() {
  return (
    <Sheet pad={0}>
      <div style={{ height: "46%", background: "linear-gradient(135deg,#f7b986,#c9b6f5)" }} />
      <div style={{ padding: 12 }}>
        <div style={{ fontSize: 10, fontWeight: 400, color: "var(--ink)", marginBottom: 8 }}>Media Kit</div>
        <div className="tnum" style={{ display: "flex", gap: 8 }}>
          {[["48K", "reach"], ["6.2%", "eng."], ["120", "posts"]].map(([v, l]) => (
            <div key={l} style={{ flex: 1, border: "1px solid var(--hairline)", borderRadius: 6, padding: "5px 6px" }}>
              <div style={{ fontSize: 10, fontWeight: 400 }}>{v}</div><div style={{ fontSize: 6, color: "var(--ink-mute)" }}>{l}</div>
            </div>
          ))}
        </div>
      </div>
    </Sheet>
  );
}

/* 8. Client Onboarding — checklist */
function MkOnboarding() {
  const check = <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6L9 17l-5-5" /></svg>;
  return (
    <Sheet>
      <div style={{ fontSize: 10, fontWeight: 400, marginBottom: 10, color: "var(--ink)" }}>Welcome Pack</div>
      {[1, 1, 1, 0].map((done, i) => (
        <div key={i} style={{ display: "flex", gap: 8, alignItems: "center", marginBottom: 9 }}>
          <span style={{ width: 14, height: 14, borderRadius: 5, background: done ? "var(--primary)" : "#eef1f8", display: "flex", alignItems: "center", justifyContent: "center" }}>{done ? check : null}</span>
          <L w={i % 2 ? "70%" : "84%"} h={4} mb={0} />
        </div>
      ))}
    </Sheet>
  );
}

/* 9. Productivity Dashboard */
function MkDashboard() {
  return (
    <Sheet pad={0}>
      <div style={{ display: "grid", gridTemplateColumns: "40% 1fr", height: "100%" }}>
        <div style={{ background: "var(--brand-dark-900)", padding: 10 }}>
          <div style={{ fontSize: 8, color: "#fff", marginBottom: 10 }}>Fluvex</div>
          {[1, 0, 0, 0].map((a, i) => <div key={i} style={{ height: 5, borderRadius: 9999, background: a ? "var(--primary-soft)" : "rgba(255,255,255,0.2)", marginBottom: 7, width: a ? "80%" : "60%" }} />)}
        </div>
        <div style={{ padding: 10 }}>
          <div style={{ display: "flex", gap: 6, marginBottom: 8 }}>
            <div style={{ flex: 1, border: "1px solid var(--hairline)", borderRadius: 6, padding: 6 }}><L w="60%" h={3} /><div className="tnum" style={{ fontSize: 10, fontWeight: 400 }}>84%</div></div>
            <div style={{ flex: 1, border: "1px solid var(--hairline)", borderRadius: 6, padding: 6 }}><L w="60%" h={3} /><div className="tnum" style={{ fontSize: 10, fontWeight: 400 }}>12</div></div>
          </div>
          <L w="100%" h={4} /><L w="80%" h={4} /><L w="90%" h={4} mb={0} />
        </div>
      </div>
    </Sheet>
  );
}

/* 10. Business Card pair */
function MkCard() {
  return (
    <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" }}>
      <div style={{ width: 96, height: 58, background: "var(--brand-dark-900)", borderRadius: 8, transform: "rotate(-8deg)", position: "absolute", boxShadow: "0 12px 26px rgba(28,30,84,0.28)", padding: 10 }}>
        <div style={{ width: 16, height: 16, borderRadius: 5, background: "var(--primary)", marginBottom: 8 }} />
        <L w="70%" h={3} c="rgba(255,255,255,0.5)" /><L w="50%" h={3} c="rgba(255,255,255,0.3)" mb={0} />
      </div>
      <div style={{ width: 96, height: 58, background: "#fff", borderRadius: 8, transform: "rotate(6deg) translate(22px,20px)", position: "absolute", boxShadow: "0 12px 26px rgba(28,30,84,0.18)", padding: 10, border: "1px solid var(--hairline)" }}>
        <div style={{ fontSize: 9, fontWeight: 400, color: "var(--ink)" }}>Studio Co.</div>
        <L w="60%" h={3} mb={4} /><L w="80%" h={3} mb={0} />
      </div>
    </div>
  );
}

/* 11. Wedding Invitation — formal invitation card, densely composed */
function MkWedding() {
  return (
    <Sheet pad={0}>
      <div style={{ position: "relative", height: "100%", background: "linear-gradient(160deg,#fff5f2 0%, #fbe0dc 55%, #f3c9c5 100%)", padding: "20px 18px", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", textAlign: "center", overflow: "hidden" }}>
        {/* rose gold inner frame */}
        <div style={{ position: "absolute", top: 10, left: 10, right: 10, bottom: 10, border: "0.5px solid #b76e79", borderRadius: 3, opacity: 0.6, pointerEvents: "none" }} />

        <div style={{ fontFamily: "'Cormorant Garamond', 'Playfair Display', Georgia, serif", fontStyle: "italic", fontWeight: 500, fontSize: 18, color: "#5a1f3a", lineHeight: 1, marginBottom: 5 }}>Rose</div>
        <div style={{ fontFamily: "'Cormorant Garamond', 'Playfair Display', Georgia, serif", fontStyle: "italic", fontWeight: 400, fontSize: 11, color: "#b76e79", lineHeight: 1, marginBottom: 5 }}>&amp;</div>
        <div style={{ fontFamily: "'Cormorant Garamond', 'Playfair Display', Georgia, serif", fontStyle: "italic", fontWeight: 500, fontSize: 18, color: "#5a1f3a", lineHeight: 1, marginBottom: 12 }}>Ethan</div>
        <div style={{ width: 40, height: 1, background: "#b76e79", margin: "0 auto 8px", opacity: 0.8 }} />
        <div style={{ fontFamily: "var(--font-sans)", fontSize: 7.5, fontWeight: 400, letterSpacing: "2px", color: "#5a1f3a", textTransform: "uppercase" }}>Sept · 08 · 2026</div>
      </div>
    </Sheet>
  );
}

/* 11b. Wedding Invitation — compact bundle version (smaller typography) */
function MkWeddingBundle() {
  return (
    <Sheet pad={0}>
      <div style={{ position: "relative", height: "100%", background: "linear-gradient(160deg,#fff5f2 0%, #fbe0dc 55%, #f3c9c5 100%)", padding: "10px 8px", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", textAlign: "center", overflow: "hidden" }}>
        <div style={{ position: "absolute", top: 5, left: 5, right: 5, bottom: 5, border: "0.5px solid #b76e79", borderRadius: 2, opacity: 0.55, pointerEvents: "none" }} />
        <div style={{ fontFamily: "'Cormorant Garamond', 'Playfair Display', Georgia, serif", fontStyle: "italic", fontWeight: 500, fontSize: 11, color: "#5a1f3a", lineHeight: 1, marginBottom: 2 }}>Rose</div>
        <div style={{ fontFamily: "'Cormorant Garamond', 'Playfair Display', Georgia, serif", fontStyle: "italic", fontWeight: 400, fontSize: 7, color: "#b76e79", lineHeight: 1, marginBottom: 2 }}>&amp;</div>
        <div style={{ fontFamily: "'Cormorant Garamond', 'Playfair Display', Georgia, serif", fontStyle: "italic", fontWeight: 500, fontSize: 11, color: "#5a1f3a", lineHeight: 1, marginBottom: 6 }}>Ethan</div>
        <div style={{ width: 22, height: 0.6, background: "#b76e79", margin: "0 auto 4px", opacity: 0.8 }} />
        <div style={{ fontFamily: "var(--font-sans)", fontSize: 5, fontWeight: 400, letterSpacing: "1.2px", color: "#5a1f3a", textTransform: "uppercase" }}>Sept · 08 · 2026</div>
      </div>
    </Sheet>
  );
}

/* 12. Floral Wedding Invitation — soft floral corners, densely composed */
function MkFloralWedding() {
  const petal = (bg) => ({ position: "absolute", width: 10, height: 10, borderRadius: "60% 40% 60% 40%", background: bg, opacity: 0.85 });
  return (
    <Sheet pad={0}>
      <div style={{ position: "relative", height: "100%", background: "linear-gradient(160deg,#fff5f8 0%, #fce4ec 100%)", padding: "14px 12px", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", textAlign: "center", overflow: "hidden" }}>
        {/* floral clusters */}
        <div style={{ ...petal("#ea6fa5"), top: 4, left: 4 }} />
        <div style={{ ...petal("#f7b986"), top: 10, left: 12 }} />
        <div style={{ ...petal("#c9b6f5"), top: 2, left: 14 }} />
        <div style={{ ...petal("#ea6fa5"), bottom: 4, right: 4 }} />
        <div style={{ ...petal("#f7b986"), bottom: 10, right: 12 }} />
        <div style={{ ...petal("#c9b6f5"), bottom: 2, right: 14 }} />
        <div style={{ ...petal("#f7b986"), top: 6, right: 8, width: 6, height: 6 }} />
        <div style={{ ...petal("#c9b6f5"), bottom: 6, left: 8, width: 6, height: 6 }} />

        <div style={{ fontSize: 6, letterSpacing: "2px", color: "#c94b7d", textTransform: "uppercase", marginBottom: 4 }}>Save the date</div>
        <div style={{ width: 22, height: 1, background: "#ea6fa5", margin: "0 auto 6px" }} />
        <div style={{ fontFamily: "Georgia, serif", fontStyle: "italic", fontSize: 15, color: "#5a1f3a", lineHeight: 1, marginBottom: 2, whiteSpace: "nowrap" }}>Lily</div>
        <div style={{ fontFamily: "Georgia, serif", fontStyle: "italic", fontSize: 8, color: "#c94b7d", marginBottom: 2 }}>&amp;</div>
        <div style={{ fontFamily: "Georgia, serif", fontStyle: "italic", fontSize: 15, color: "#5a1f3a", lineHeight: 1, marginBottom: 6, whiteSpace: "nowrap" }}>Noah</div>
        <div style={{ width: 22, height: 1, background: "#ea6fa5", margin: "0 auto 6px" }} />
        <div style={{ fontSize: 6.5, letterSpacing: "1.5px", color: "#5a1f3a", textTransform: "uppercase", marginBottom: 3 }}>May · 22 · 2026</div>
        <div style={{ fontSize: 6, color: "#c94b7d", letterSpacing: "0.6px" }}>Garden Chapel</div>
      </div>
    </Sheet>
  );
}

/* 13. AI Prompts for Students — stacked prompt cards, filled composition */
function MkAIPrompts() {
  const prompts = [
    { c: "Essay",    t: "Outline my argument",    b: "#eae4ff", d: "#533afd" },
    { c: "Study",    t: "14-day revision plan",   b: "#ffe9d9", d: "#f7a35b" },
    { c: "Research", t: "Summarise this paper",   b: "#e0f2ec", d: "#1f8a5b" },
    { c: "Writing",  t: "Improve this paragraph", b: "#fde3ee", d: "#c94b7d" },
  ];
  return (
    <Sheet pad={10}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 8 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
          <div style={{ width: 16, height: 16, borderRadius: 5, background: "var(--primary)", display: "flex", alignItems: "center", justifyContent: "center" }}>
            <svg width="9" height="9" viewBox="0 0 24 24" fill="none"><path d="M12 2l2.4 5.6L20 10l-5.6 2.4L12 18l-2.4-5.6L4 10l5.6-2.4L12 2z" fill="#fff" /></svg>
          </div>
          <div style={{ fontSize: 8.5, fontWeight: 400, color: "var(--ink)" }}>AI Prompt Pack</div>
        </div>
        <div className="tnum" style={{ fontSize: 6, color: "var(--primary)", padding: "2px 5px", borderRadius: 9999, background: "var(--primary-bg-subdued-hover)" }}>43 prompts</div>
      </div>
      {prompts.map((p, i) => (
        <div key={i} style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 4, padding: "3px 6px", background: p.b, borderRadius: 4 }}>
          <div style={{ fontSize: 5.5, fontWeight: 400, letterSpacing: "0.4px", color: p.d, textTransform: "uppercase", background: "#fff", padding: "1px 4px", borderRadius: 3, minWidth: 28, textAlign: "center" }}>{p.c}</div>
          <div style={{ fontSize: 7, color: "var(--ink)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", flex: 1 }}>{p.t}</div>
        </div>
      ))}
    </Sheet>
  );
}

/* 14. Cover Letter — clean ATS letter */
function MkCoverLetter() {
  return (
    <Sheet pad={12}>
      <div style={{ borderLeft: "3px solid var(--primary)", paddingLeft: 8, marginBottom: 8 }}>
        <div style={{ fontSize: 10, fontWeight: 400, color: "var(--ink)" }}>Alex Morgan</div>
        <div style={{ fontSize: 6.5, color: "var(--ink)", opacity: 0.55 }}>Product Designer · Cover Letter</div>
      </div>
      <div className="tnum" style={{ fontSize: 6.5, color: "var(--ink)", opacity: 0.55, marginBottom: 6 }}>Dear Hiring Team,</div>
      <L w="100%" h={3} /><L w="94%" h={3} /><L w="88%" h={3} /><L w="96%" h={3} /><L w="72%" h={3} mb={8} />
      <L w="60%" h={3} /><L w="80%" h={3} mb={0} />
    </Sheet>
  );
}

/* 13b. AI Prompts — compact bundle version with prominent rounded-square icon */
function MkAIPromptsBundle() {
  return (
    <Sheet pad={12}>
      <div style={{ height: "100%", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 8 }}>
        <div style={{ width: 34, height: 34, borderRadius: 8, background: "var(--primary)", display: "flex", alignItems: "center", justifyContent: "center", boxShadow: "0 6px 14px rgba(83,58,253,0.35)" }}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M12 2l2.4 5.6L20 10l-5.6 2.4L12 18l-2.4-5.6L4 10l5.6-2.4L12 2z" fill="#fff" /></svg>
        </div>
        <div style={{ fontSize: 9, fontWeight: 400, color: "var(--ink)", textAlign: "center", lineHeight: 1.1 }}>AI Prompt Pack</div>
        <div className="tnum" style={{ fontSize: 6.5, color: "var(--primary)", padding: "2px 7px", borderRadius: 9999, background: "var(--primary-bg-subdued-hover)", letterSpacing: "0.5px", textTransform: "uppercase" }}>43 prompts</div>
      </div>
    </Sheet>
  );
}

/* 15. The Thinking Copywriter's AI Arsenal — bright, on-brand PDF cover.
   Uses the shared Sheet frame (same footprint as every other product mock) so
   it fills the card, gallery, cart and quick-view panels identically — light
   lavender/cream sheet, indigo title accent, navy ink, indigo/peach keyline. */
function MkArsenal() {
  return (
    <Sheet pad={0}>
      <div style={{ height: "100%", display: "flex", flexDirection: "column", background: "linear-gradient(165deg,#ffffff 0%,#f6f2ff 58%,#efe7ff 100%)" }}>
        <div style={{ height: 6, background: "linear-gradient(90deg,var(--primary),#f7a35b)", flexShrink: 0 }} />
        <div style={{ flex: 1, padding: "16px 16px 14px", display: "flex", flexDirection: "column" }}>
          <div style={{ fontSize: 6, letterSpacing: "1.6px", color: "var(--primary-deep)", textTransform: "uppercase", marginBottom: 12 }}>Fluvex Designs · Copywriting</div>
          <div style={{ fontFamily: "Georgia, 'Times New Roman', serif", fontWeight: 700, color: "var(--ink)", lineHeight: 1.06, letterSpacing: "-0.3px" }}>
            <div style={{ fontSize: 16 }}>The Thinking</div>
            <div style={{ fontSize: 16, color: "var(--primary-deep)" }}>Copywriter’s</div>
            <div style={{ fontSize: 16 }}>AI Arsenal</div>
          </div>
          <div style={{ width: 28, height: 2.5, background: "var(--primary)", margin: "10px 0 9px", borderRadius: 2 }} />
          <div style={{ fontFamily: "Georgia, serif", fontStyle: "italic", fontSize: 7.5, lineHeight: 1.45, color: "var(--ink-secondary)", maxWidth: "92%" }}>48 Battle-Tested Prompts for Writing Copy That Sells</div>
          <div style={{ marginTop: "auto", display: "flex", gap: 6, flexWrap: "wrap" }}>
            <span style={{ fontSize: 6, letterSpacing: "0.6px", color: "#fff", background: "var(--primary)", padding: "3px 7px", borderRadius: 9999, fontWeight: 600 }}>48 PROMPTS</span>
            <span style={{ fontSize: 6, letterSpacing: "0.6px", color: "var(--primary-deep)", background: "var(--primary-bg-subdued-hover)", padding: "3px 7px", borderRadius: 9999 }}>13 DRILLS</span>
          </div>
        </div>
      </div>
    </Sheet>
  );
}

const MOCKS = { MkPlanner, MkInvoice, MkCalendar, MkSocial, MkResume, MkBudget, MkMediaKit, MkOnboarding, MkDashboard, MkCard, MkWedding, MkWeddingBundle, MkFloralWedding, MkAIPrompts, MkAIPromptsBundle, MkCoverLetter, MkArsenal };
Object.assign(window, MOCKS, { MOCKS });