/* ============================================================
   STELLAR365 — SIGN IN PAGE CONTENT INJECTION
   ============================================================
   Version: 2026.05.25.01
   Drop in: Power Pages Studio → Site Settings → JavaScript
            (or upload as a Web File and link from a header
             snippet — see "Deploy" notes at bottom)

   PURPOSE: Add a scope banner above the sign-in form and a
   3-card "What you can do here" section below it. The
   sign-in page is rendered from a Power Pages Web Template;
   we cannot edit the form HTML directly without surgery, so
   we inject these elements via JS after the page loads.

   The script self-guards: it only runs on /SignIn URLs and
   bails silently on every other page.
   ============================================================ */
(function () {
  "use strict";

  // ============================================================
  // GUARD: only run on the sign-in page
  // ============================================================
  if (!/\/signin/i.test(window.location.pathname)) return;

  console.log("%c[Stellar365 SignIn injector] v2026.05.25.01",
              "color:#BA7517;font-weight:700");

  // ============================================================
  // STYLES — injected as a <style> block so we don't need a
  // separate CSS file deployment
  // ============================================================
  var STYLES = ''
    + '/* Scope banner above the sign-in form */'
    + '#s365-scope-banner {'
    +   'background: white;'
    +   'border-bottom: 1px solid #e3e6eb;'
    +   'padding: 18px 32px;'
    +   'text-align: center;'
    +   'margin: -16px -16px 24px -16px;'
    +   'font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;'
    + '}'
    + '#s365-scope-banner .s365-eyebrow {'
    +   'font-size: 10px;'
    +   'font-weight: 600;'
    +   'text-transform: uppercase;'
    +   'letter-spacing: 0.14em;'
    +   'color: #0b5cad;'
    +   'margin-bottom: 4px;'
    + '}'
    + '#s365-scope-banner .s365-scope-text {'
    +   'font-size: 14px;'
    +   'color: #1a1f2e;'
    +   'max-width: 760px;'
    +   'margin: 0 auto;'
    +   'line-height: 1.5;'
    + '}'
    + '#s365-scope-banner .s365-scope-text strong {'
    +   'color: #1e2761;'
    +   'font-weight: 700;'
    + '}'

    + '/* Audience section below the sign-in form */'
    + '#s365-audience-section {'
    +   'background: #eef1f5;'
    +   'padding: 40px 32px 56px;'
    +   'margin: 40px -16px -16px -16px;'
    +   'border-top: 1px solid #e3e6eb;'
    +   'font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;'
    + '}'
    + '#s365-audience-section .s365-audience-intro {'
    +   'text-align: center;'
    +   'max-width: 760px;'
    +   'margin: 0 auto 28px;'
    + '}'
    + '#s365-audience-section .s365-eyebrow {'
    +   'font-size: 10px;'
    +   'font-weight: 600;'
    +   'text-transform: uppercase;'
    +   'letter-spacing: 0.14em;'
    +   'color: #5a6473;'
    +   'margin-bottom: 4px;'
    + '}'
    + '#s365-audience-section h2.s365-audience-title {'
    +   'font-size: 22px;'
    +   'font-weight: 700;'
    +   'color: #1e2761;'
    +   'margin: 0;'
    + '}'
    + '#s365-audience-section .s365-audience-grid {'
    +   'display: grid;'
    +   'grid-template-columns: repeat(3, 1fr);'
    +   'gap: 20px;'
    +   'max-width: 1200px;'
    +   'margin: 0 auto;'
    + '}'

    + '/* Cards */'
    + '#s365-audience-section .s365-card {'
    +   'background: white;'
    +   'border-radius: 10px;'
    +   'box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 4px 12px rgba(15,23,42,0.07);'
    +   'padding: 24px 26px;'
    +   'border-top: 4px solid #0b5cad;'
    + '}'
    + '#s365-audience-section .s365-card.board  { border-top-color: #1e2761; }'
    + '#s365-audience-section .s365-card.escrow { border-top-color: #1f8a4c; }'
    + '#s365-audience-section .s365-card.staff  { border-top-color: #0b5cad; }'
    + '#s365-audience-section .s365-card .s365-icon {'
    +   'width: 40px;'
    +   'height: 40px;'
    +   'border-radius: 8px;'
    +   'display: flex;'
    +   'align-items: center;'
    +   'justify-content: center;'
    +   'color: white;'
    +   'font-size: 18px;'
    +   'font-weight: 700;'
    +   'margin-bottom: 14px;'
    + '}'
    + '#s365-audience-section .s365-card.board  .s365-icon { background: #1e2761; }'
    + '#s365-audience-section .s365-card.escrow .s365-icon { background: #1f8a4c; }'
    + '#s365-audience-section .s365-card.staff  .s365-icon { background: #0b5cad; font-size: 13px; }'
    + '#s365-audience-section .s365-card .s365-card-eyebrow {'
    +   'font-size: 10px;'
    +   'font-weight: 600;'
    +   'text-transform: uppercase;'
    +   'letter-spacing: 0.14em;'
    +   'color: #5a6473;'
    +   'margin-bottom: 4px;'
    + '}'
    + '#s365-audience-section .s365-card h3 {'
    +   'font-size: 16px;'
    +   'font-weight: 700;'
    +   'color: #1e2761;'
    +   'margin: 0 0 14px;'
    + '}'
    + '#s365-audience-section .s365-card .s365-role-intro {'
    +   'font-size: 12px;'
    +   'font-weight: 600;'
    +   'color: #1a1f2e;'
    +   'margin-bottom: 8px;'
    + '}'
    + '#s365-audience-section .s365-card ul {'
    +   'margin: 0;'
    +   'padding-left: 18px;'
    +   'list-style: none;'
    + '}'
    + '#s365-audience-section .s365-card li {'
    +   'font-size: 13px;'
    +   'color: #5a6473;'
    +   'line-height: 1.55;'
    +   'margin-bottom: 8px;'
    +   'position: relative;'
    + '}'
    + '#s365-audience-section .s365-card li::before {'
    +   'content: "\\2713";'  // ✓
    +   'position: absolute;'
    +   'left: -18px;'
    +   'font-weight: 700;'
    + '}'
    + '#s365-audience-section .s365-card.board  li::before { color: #1e2761; }'
    + '#s365-audience-section .s365-card.escrow li::before { color: #1f8a4c; }'
    + '#s365-audience-section .s365-card.staff  li::before { color: #0b5cad; }'

    /* Responsive: stack cards on narrow screens */
    + '@media (max-width: 900px) {'
    +   '#s365-audience-section .s365-audience-grid {'
    +     'grid-template-columns: 1fr;'
    +     'gap: 16px;'
    +   '}'
    + '}';

  // ============================================================
  // HTML — the actual content to inject
  // ============================================================
  var SCOPE_HTML = ''
    + '<div id="s365-scope-banner">'
    +   '<div class="s365-eyebrow">Welcome</div>'
    +   '<div class="s365-scope-text">'
    +     'This portal supports <strong>resale, lease, transfer, and co-occupancy</strong> transactions for Laguna Woods Village.'
    +   '</div>'
    + '</div>';

  var AUDIENCE_HTML = ''
    + '<div id="s365-audience-section">'
    +   '<div class="s365-audience-intro">'
    +     '<div class="s365-eyebrow">What you can do here</div>'
    +     '<h2 class="s365-audience-title">Built for everyone in the transaction</h2>'
    +   '</div>'
    +   '<div class="s365-audience-grid">'

    +     '<div class="s365-card board">'
    +       '<div class="s365-icon">\u2696</div>'  // ⚖
    +       '<div class="s365-card-eyebrow">Audience</div>'
    +       '<h3>Board Members</h3>'
    +       '<div class="s365-role-intro">As a Board Member, you can:</div>'
    +       '<ul>'
    +         '<li>Review real estate applications and supporting documents</li>'
    +         '<li>Sign your concurrence digitally with full legal effect</li>'
    +         '<li>See where each application stands in the signing chain</li>'
    +       '</ul>'
    +     '</div>'

    +     '<div class="s365-card escrow">'
    +       '<div class="s365-icon">\u00A7</div>'  // §
    +       '<div class="s365-card-eyebrow">Audience</div>'
    +       '<h3>Escrow Officers</h3>'
    +       '<div class="s365-role-intro">As an Escrow Officer, you can:</div>'
    +       '<ul>'
    +         '<li>Submit real estate applications in minutes, not days</li>'
    +         '<li>Upload documents and track signatures from buyers, sellers, and agents</li>'
    +         '<li>Hand off to VMS with a complete audit trail</li>'
    +       '</ul>'
    +     '</div>'

    +     '<div class="s365-card staff">'
    +       '<div class="s365-icon">VMS</div>'
    +       '<div class="s365-card-eyebrow">Audience</div>'
    +       '<h3>VMS Staff</h3>'
    +       '<div class="s365-role-intro">As VMS Staff, you can:</div>'
    +       '<ul>'
    +         '<li>Manage real estate transaction workflows end-to-end</li>'
    +         '<li>Track packages, signatures, and approvals in real time</li>'
    +         '<li>Coordinate handoffs across Counselor, Manager, and Board reviews</li>'
    +       '</ul>'
    +     '</div>'

    +   '</div>'
    + '</div>';

  // ============================================================
  // INJECT — find a stable anchor in the sign-in DOM and
  // insert our content around it. The sign-in form sits inside
  // a <form class="portal-form"> wrapped by the page #content.
  // ============================================================
  function inject() {
    // Idempotency — don't inject twice if user navigates back
    if (document.getElementById("s365-scope-banner")) return;
    if (document.getElementById("s365-audience-section")) return;

    // Inject styles into <head>
    var styleEl = document.createElement("style");
    styleEl.id = "s365-signin-styles";
    styleEl.textContent = STYLES;
    document.head.appendChild(styleEl);

    // Find the form's wrapping container. We try a few anchors
    // because Power Pages versions vary slightly.
    var anchor = document.querySelector("form.portal-form")
              || document.querySelector("#content")
              || document.querySelector("main")
              || document.querySelector(".content-page");

    if (!anchor) {
      console.warn("[Stellar365 SignIn injector] no anchor element found; aborting");
      return;
    }

    // Insert scope banner BEFORE the form
    var bannerWrap = document.createElement("div");
    bannerWrap.innerHTML = SCOPE_HTML;
    anchor.parentNode.insertBefore(bannerWrap.firstChild, anchor);

    // Insert audience section AFTER the form
    var audienceWrap = document.createElement("div");
    audienceWrap.innerHTML = AUDIENCE_HTML;
    anchor.parentNode.insertBefore(audienceWrap.firstChild, anchor.nextSibling);

    console.log("[Stellar365 SignIn injector] content injected \u2713");
  }

  // ============================================================
  // BOOT — wait for DOM ready, then inject
  // ============================================================
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", inject);
  } else {
    inject();
  }
})();

/* ============================================================
   DEPLOY OPTIONS
   ============================================================
   This is a JavaScript file. Power Pages has multiple places
   it can be loaded:

   OPTION 1 — Upload as Web File:
     1. Power Pages Studio -> Pages -> ... -> Site Settings
        (or via Portal Management app -> Web Files)
     2. Create a new Web File named "signin-injector.js"
     3. Upload this file's contents
     4. Note the Partial URL (e.g. /signin-injector.js)
     5. Edit a Content Snippet called "Tracking Code" or
        "Header Code" (or wherever your portal injects global JS)
        and add: <script src="/signin-injector.js"></script>

   OPTION 2 — Inline in a Content Snippet:
     1. Portal Management -> Content Snippets
     2. Find or create a snippet named "Head Code"
        (or whatever your portal uses for global head HTML)
     3. Wrap this file's contents in <script>...</script> tags
     4. Paste into the snippet's Value field

   Either way, the script self-guards via the URL check at the
   top — it does NOTHING on non-/SignIn pages, so it's safe to
   load globally.
   ============================================================ */