/* First-run onboarding overlay — mode aware */
const { useEffect: useEffectO } = React;

const INTRO_STEPS = {
  shop: [
    ["LayoutTemplate", "Start from a template", "Pick a style you like — you'll make it your own next."],
    ["Type", "Add your words & photo", "Edit the text, drop in a photo, position it just right."],
    ["Frame", "Choose size & frame", "See it framed on a wall, then add it to your cart."],
  ],
  etsy: [
    ["BadgeCheck", "Thanks for your order!", "Your poster is paid for — now let's personalize it."],
    ["Type", "Make it yours", "Add your names, dates, a photo — see it update live."],
    ["Send", "Submit your design", "When it looks perfect, send it to us and we'll print it."],
  ],
};

function Onboarding({ entry, onClose }) {
  useEffectO(() => {
    const onKey = e => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);
  const etsy = entry.mode === "etsy";
  const steps = INTRO_STEPS[entry.mode] || INTRO_STEPS.shop;

  return (
    <div onClick={onClose} style={{ position: "absolute", inset: 0, zIndex: 30, display: "flex", alignItems: "center", justifyContent: "center", padding: 18, background: "rgba(40,28,16,.42)", backdropFilter: "blur(3px)", animation: "fadeIn .2s" }}>
      <div onClick={e => e.stopPropagation()} role="dialog" aria-modal="true" style={{ width: "min(440px, 100%)", maxHeight: "94%", overflowY: "auto", background: "var(--card)", borderRadius: "var(--r-xl)", boxShadow: "var(--sh-lg)", border: "1px solid var(--line)", padding: "28px 26px 22px", animation: "riseIn .26s var(--ease-out)" }} className="scroll-y">
        <div style={{ display: "flex", alignItems: "center", gap: 11, marginBottom: 6 }}>
          <div style={{ width: 38, height: 38, borderRadius: 10, background: "var(--clay)", color: "#FFF7EF", display: "flex", alignItems: "center", justifyContent: "center", flex: "none" }}><Icon name="Frame" size={21} /></div>
          <div style={{ display: "flex", flexDirection: "column", lineHeight: 1.15 }}>
            <span style={{ fontFamily: "var(--serif)", fontSize: 19, fontWeight: 600 }}>Belle Maison</span>
            <span className="eyebrow" style={{ fontSize: 10 }}>Poster Studio</span>
          </div>
        </div>

        {etsy && (
          <div style={{ display: "flex", alignItems: "center", gap: 9, margin: "14px 0 4px", padding: "10px 13px", background: "var(--sage-tint)", borderRadius: "var(--r-md)", color: "#46522F" }}>
            <Icon name="ShoppingBag" size={16} />
            <span style={{ fontSize: 13, fontWeight: 600 }}>Order {entry.orderRef} · {entry.purchased}</span>
          </div>
        )}

        <h2 style={{ fontFamily: "var(--serif)", fontSize: 27, fontWeight: 600, margin: "16px 0 4px", letterSpacing: "-.01em" }}>
          {etsy ? "Let's personalize your poster" : "Design a poster you'll love"}
        </h2>
        <p style={{ margin: "0 0 20px", color: "var(--ink-2)", fontSize: 14.5 }}>
          {etsy ? "It takes about a minute. Everything updates live as you go." : "No account, no fuss — just a few choices and it's ready."}
        </p>

        <div style={{ display: "flex", flexDirection: "column", gap: 4, marginBottom: 22 }}>
          {steps.map(([ic, t, sub], i) => (
            <div key={i} style={{ display: "flex", gap: 14, alignItems: "flex-start", padding: "11px 4px" }}>
              <div style={{ width: 38, height: 38, borderRadius: 10, background: "var(--clay-tint)", color: "var(--clay-dark)", display: "flex", alignItems: "center", justifyContent: "center", flex: "none", position: "relative" }}>
                <Icon name={ic} size={19} />
                <span style={{ position: "absolute", top: -5, left: -5, width: 18, height: 18, borderRadius: "50%", background: "var(--ink)", color: "#FBF4E8", fontSize: 10.5, fontWeight: 700, display: "flex", alignItems: "center", justifyContent: "center" }}>{i + 1}</span>
              </div>
              <div style={{ display: "flex", flexDirection: "column" }}>
                <span style={{ fontSize: 14.5, fontWeight: 700, color: "var(--ink)" }}>{t}</span>
                <span style={{ fontSize: 13, color: "var(--ink-2)", lineHeight: 1.4 }}>{sub}</span>
              </div>
            </div>
          ))}
        </div>

        <button className="btn btn-primary" style={{ width: "100%" }} onClick={onClose}>
          {etsy ? "Start personalizing" : "Start designing"} <Icon name="ArrowRight" size={18} />
        </button>
      </div>
    </div>
  );
}

Object.assign(window, { Onboarding });