// CONTAINMENT VISUAL - a product core nested inside its PAS+ tier.
// Content-driven; defaults describe the MGA side (DA Platform inside MGA PAS+).
// Pass the broker-side props for Schemes Platform inside Broker PAS+.
//
// Reads brand tokens from EdCtx (chrome.jsx). Load AFTER chrome.jsx.
// Props:
//   variant   : 'da' (ghosted additions) | 'pas' (full)   default 'da'
//   surface   : background colour the cut-out labels sit on (default ED.bg)
//   scale     : size multiplier (desktop only)
//   outerPre  : word before "PAS+" in the outer frame label ('MGA' | 'Broker')
//   outerTag  : small descriptor on the outer frame ('The complete solution')
//   coreName  : core product name ('DA Platform' | 'Schemes Platform')
//   coreSub   : core descriptor tag
//   coreGroups: array of core chip labels
//   adds      : [{ ti, mt }] addition chips
//   addsLabel : label above the additions row

const { EdCtx: CvCtx, useIsMobile: cvUseIsMobile } = window;

function ContainmentVisual({
  variant = 'da', surface, scale = 1,
  outerPre = 'MGA',
  outerTag = 'The complete solution',
  coreName = 'DA Platform',
  coreSub = 'Delegated authority core',
  coreGroups = [
    'Core policy & underwriting',
    'Configuration, workflows & automation',
    'Data, reporting & bordereaux',
    'Distribution',
    'Platform foundations',
  ],
  adds = [
    { ti: 'Accounting & finance', mt: 'Premium & office accounting' },
    { ti: 'Claims & complaints', mt: 'Logged, tracked & reported' },
    { ti: 'Multi-brand & division', mt: 'One platform, multiple entities' },
  ],
  addsLabel = 'Added by MGA PAS+',
  addsInside = false,   // render the additions row INSIDE the core box (unified look)
  frame = true,         // render the teal outer frame; false = core box only
  outerLabel,   // optional node — overrides the branded "{outerPre} PAS+" title (lit variant)
}) {
  const ED = React.useContext(CvCtx);
  const edText = ED.text;
  const isMobile = cvUseIsMobile();
  const ghost = variant === 'da';
  const bg = surface || ED.bg;
  const s = (n) => isMobile ? n : Math.round(n * scale * 10) / 10;

  const additions = (
    <>
      {/* ── additions label ── */}
      {addsLabel ? (
        <div style={{
          ...edText.tag, fontSize: isMobile ? 10 : s(11.5), letterSpacing: '0.13em',
          color: ED.teal, fontWeight: 600,
          margin: isMobile ? '20px 0 12px' : `${s(addsInside ? 20 : 26)}px 0 ${s(14)}px`,
          display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <span>{addsLabel}</span>
          <span style={{ flex: 1, height: 1, background: 'rgba(0,164,180,0.3)' }} />
        </div>
      ) : null}

      {/* ── addition chips ── */}
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : (adds.length >= 4 ? '1fr 1fr' : '1fr 1fr 1fr'), gap: isMobile ? 8 : s(8) }}>
        {adds.map((a) => (
          <div key={a.ti} style={{
            display: 'flex', flexDirection: 'row', alignItems: 'baseline', gap: 7, padding: `${s(11)}px ${s(11)}px`, borderRadius: 2,
            border: ghost ? `1px dashed rgba(0,164,180,0.5)` : `1px solid rgba(0,164,180,0.35)`,
            background: ghost ? 'transparent' : 'rgba(0,164,180,0.035)',
          }}>
            <span style={{ color: ED.teal, fontWeight: 700, lineHeight: 1, fontSize: s(15) }}>+</span>
            <span style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
              <span style={{ ...edText.med, fontWeight: 600, fontSize: isMobile ? 14 : s(13), color: ED.ink, whiteSpace: 'nowrap' }}>{a.ti}</span>
              <span style={{ ...edText.sans, fontSize: s(11.5), lineHeight: 1.3, color: ED.ink3 }}>{a.mt}</span>
            </span>
          </div>
        ))}
      </div>
    </>
  );

  const labelTag = { ...edText.tag, fontSize: isMobile ? 10 : s(11), letterSpacing: '0.14em' };

  const coreBox = (
    <>
      {/* ── core box ── */}
      <div style={{
          position: 'relative',
          border: `1.5px solid ${ED.red}`,
          borderRadius: 3,
          background: ED.bg,
          padding: isMobile ? `${!frame ? 46 : 26}px 16px 18px` : `${s(30)}px ${s(22)}px ${s(22)}px`,
          boxShadow: ghost ? '0 14px 40px -22px rgba(238,75,70,0.55)' : 'none',
        }}>
          <div style={{ position: 'absolute', top: -12, left: frame ? 20 : '50%', transform: frame ? undefined : 'translateX(-50%)', background: ED.bg, padding: isMobile && !frame ? '0 11px 4px' : '0 11px', display: 'flex', flexDirection: isMobile && !frame ? 'column' : 'row', alignItems: isMobile && !frame ? 'center' : 'baseline', gap: isMobile && !frame ? 4 : 10, whiteSpace: isMobile && !frame ? 'normal' : 'nowrap', textAlign: isMobile && !frame ? 'center' : undefined, maxWidth: isMobile && !frame ? '90%' : undefined }}>
            <span style={{ ...edText.display, fontSize: isMobile ? 18 : s(21), color: ED.red, letterSpacing: '-0.01em' }}>{coreName}</span>
            <span style={{ ...labelTag, color: ED.ink3, whiteSpace: 'nowrap' }}>{coreSub}</span>
          </div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: s(9) }}>
            {coreGroups.map((g) => (
              <div key={g} style={{
                ...edText.med, fontSize: isMobile ? 12.5 : s(13.5), color: ED.ink,
                padding: `${s(9)}px ${s(14)}px`, border: `1px solid rgba(238,75,70,0.4)`, borderRadius: 2,
                background: ED.bg, display: 'flex', alignItems: 'center', gap: 9,
              }}>
                <span style={{ color: ED.red, fontWeight: 700, lineHeight: 1 }}>+</span>{g}
              </div>
            ))}
          </div>
          {addsInside && additions}
        </div>

      {/* ── additions (below core, default) ── */}
      {!addsInside && additions}
    </>
  );

  if (!frame) {
    return <div style={{ position: 'relative', width: '100%' }}>{coreBox}</div>;
  }

  return (
    <div style={{ position: 'relative', width: '100%' }}>
      {/* ── outer frame: MGA PAS+ ── */}
      <div style={{
        position: 'relative',
        borderRadius: 4,
        padding: isMobile ? '44px 18px 22px' : `${s(52)}px ${s(26)}px ${s(26)}px`,
        border: ghost ? `1.5px dashed ${ED.rule}` : `1.5px solid rgba(0,164,180,0.5)`,
        background: ghost
          ? `repeating-linear-gradient(135deg, rgba(55,71,79,0.018) 0 10px, transparent 10px 20px)`
          : 'rgba(0,164,180,0.025)',
      }}>
        {/* outer label - quiet frame-tag when ghosted, branded serif when lit */}
        {ghost ? (
          <div style={{ position: 'absolute', top: -10, left: isMobile ? 18 : 24, background: bg, padding: '0 12px', display: 'flex', alignItems: 'center', gap: 9, whiteSpace: 'nowrap', ...edText.tag, fontSize: isMobile ? 10 : s(11), letterSpacing: '0.16em', color: ED.ink3 }}>
            <span>{outerPre} PAS+</span>
            <span style={{ width: 14, height: 1, background: ED.ink3, opacity: 0.5 }} />
            <span>{outerTag}</span>
          </div>
        ) : (
          <div style={{ position: 'absolute', top: -13, left: isMobile ? 18 : 24, background: bg, padding: '0 12px', display: 'flex', alignItems: 'baseline', gap: 10, flexWrap: 'wrap' }}>
            <span style={{ ...edText.display, fontSize: isMobile ? 20 : s(23), color: ED.teal, letterSpacing: '-0.01em' }}>
              {outerLabel || <>{outerPre} <span style={{ ...edText.displayBold, fontStyle: 'italic', color: ED.teal }}>PAS+</span></>}
            </span>
            <span style={{ ...labelTag, color: ED.ink3 }}>{outerTag}</span>
          </div>
        )}
        {coreBox}
      </div>
    </div>
  );
}

Object.assign(window, { ContainmentVisual });