// VELOUR — what a free member sees where a paid feature would be.
//
// One component for every gate so the answer is always the same shape: what this
// is, what it does, and the way to it. Written as an offer, never as a scolding —
// the member has not done anything wrong by being on the free plan, and the copy
// has to hold that. No urgency, no countdown, no "you're missing out".
//
// PREMIUM_FEATURES is what Premium adds, keyed to the entitlement names in
// api/_entitlements.js so a gate can look up its own copy. PricingPage.jsx keeps
// its own list in the same order — the two are deliberately parallel but NOT
// shared, because the pricing table needs a per-plan on/off column this doesn't
// have. Change one, change both. (The pointer here used to say api/me.js, which
// stopped defining the entitlements when the sync layer landed.)
//
// NAME IT SOMETHING SPECIFIC. These .jsx files are classic scripts, not modules, so
// every top-level const lands in one shared global scope and the last file loaded
// silently wins. This was `FEATURES`, which collided with FeaturesPage.jsx's own
// FEATURES and blanked the entire marketing Features page — same name, different
// shape, no error anywhere.
const { Card } = window.VelourDesignSystem_380ed4;

const PREMIUM_FEATURES = [
  { key: "rituals", icon: "repeat", name: "Unlimited rituals", line: "Free holds three. Premium lets the whole day have a shape." },
  { key: "stylist", icon: "sparkle", name: "The stylist", line: "A head-to-toe look from pieces you already own." },
  { key: "budgetAdvisor", icon: "wallet", name: "The budget advisor", line: "What to buy next, against a budget you set." },
  // THE ONE LINE IN THIS FILE THAT MUST NOT BE LOOSENED INTO A LOCK. The long view
  // is what the product DRAWS, not what a member is permitted to have: their log
  // lives in their own browser and "Save a backup" exports all of it on every
  // plan. So the sentence describes what Premium shows, and the second half says
  // plainly that nothing is being held back. Never "unlock", never "access",
  // never "your history is locked".
  { key: "longView", icon: "chart-line-up", name: "The long view", line: "An insight says what is true now; history says whether you're getting better. Free shows the last few weeks — Premium sees all the way back, and everything you've logged stays yours either way." },
  { key: "monthlyLetter", icon: "envelope-open", name: "Jennifer's monthly letter", line: "A founder-written note each month, and the space to write back." },
];

// Open pricing in a new tab rather than navigating this one. Swapping the view
// in place drops the member out of the dashboard and onto the marketing site,
// where the only visible door back is "Sign in" — so reading about Premium cost
// a whole magic-link round trip. A new tab leaves the dashboard exactly as it was.
// Falls back to in-place navigation if the popup is blocked, which is still better
// than doing nothing when the button is clicked.
//
// EVERY upgrade button inside the signed-in dashboard must use this — the gates in
// DashRituals and DashBlog have their own buttons rather than rendering
// UpgradePrompt, so fixing this component alone left them still navigating away.
// Marketing-side links to pricing (the header, "See membership", the Education
// teaser) deliberately do NOT use it: there is no session to strand there, and a
// new tab from a marketing page is just surprising.
function openPricing(onNavigate) {
  const url = location.origin + location.pathname + "#pricing";
  // NOT window.open(url, "_blank", "noopener"). That returns null BY SPEC when
  // noopener is set — the opener relationship is severed, so there is no handle to
  // give back. `!tab` was therefore true on every single click, and the
  // popup-blocked fallback fired every time: the new tab opened AND this tab
  // navigated away to pricing, which is the exact thing this function exists to
  // prevent. The guard never worked once. Sever the opener by hand instead: same
  // security property, and a return value that actually means "a tab opened".
  const tab = window.open(url, "_blank");
  if (tab) { try { tab.opener = null; } catch (e) {} return; }
  if (onNavigate) onNavigate("pricing");
}
window.velourOpenPricing = openPricing;

// The inline gate — sits where the feature would have been.
function UpgradePrompt({ feature, title, line, onNavigate, compact }) {
  const meta = PREMIUM_FEATURES.find((f) => f.key === feature);
  const heading = title || (meta ? `${meta.name} is part of Premium.` : "This is part of Premium.");
  const body = line || (meta ? meta.line : "");

  return (
    <Card padding={compact ? 22 : 30} style={{ textAlign: "center" }}>
      <span style={{ width: compact ? 42 : 52, height: compact ? 42 : 52, borderRadius: 14, background: "var(--ink)", display: "inline-flex", alignItems: "center", justifyContent: "center", marginBottom: 16 }}>
        <i className={`ph ph-${meta ? meta.icon : "lock-simple"}`} style={{ fontSize: compact ? 20 : 24, color: "var(--parchment)" }}></i>
      </span>
      <div style={{ fontFamily: "var(--font-serif)", fontSize: compact ? 20 : 24, color: "var(--text-primary)", letterSpacing: "-0.01em", maxWidth: 460, margin: "0 auto" }}>{heading}</div>
      {body && (
        <p style={{ fontSize: compact ? 14.5 : 15.5, lineHeight: 1.6, color: "var(--text-secondary)", maxWidth: 440, margin: "10px auto 0" }}>{body}</p>
      )}
      <button onClick={() => openPricing(onNavigate)}
        style={{ marginTop: 22, display: "inline-flex", alignItems: "center", gap: 8, background: "var(--ink)", color: "var(--parchment)", border: "none", borderRadius: 999, padding: "12px 22px", fontFamily: "var(--font-sans)", fontSize: 14.5, fontWeight: 500, cursor: "pointer", boxShadow: "0 4px 14px rgba(44,44,42,0.18)" }}>
        See what Premium adds <i className="ph ph-arrow-right" style={{ fontSize: 15 }}></i>
      </button>
      <p style={{ fontSize: 13, color: "var(--text-tertiary)", margin: "14px 0 0" }}>Your free plan stays free. Nothing you've added goes away.</p>
    </Card>
  );
}

window.UpgradePrompt = UpgradePrompt;