/* global React */
// Yomee — Onboarding Shared
// Reusable header + form fields used by every onboarding screen.
// Note: PrimaryButton lives in Shared.jsx (rounded-square, font-mono) — DO NOT redefine here.

const { useState: useStateOS, useRef: useRefOS } = React;

function OnboardingHeader({ onBack, onHelp, screenKey, progress = 0, hideBack = false, noHelp = false }) {
  const handleHelp = onHelp || (() => {
    if (window.YomeeHelp && screenKey) window.YomeeHelp.toggle(screenKey);
  });
  const pct = Math.max(0, Math.min(1, progress)) * 100;
  return (
    <>
      <div
        style={{
          position: "absolute",
          top: 0,
          left: 0,
          right: 0,
          height: 6,
          background: "var(--yo-ink)",
          zIndex: 6,
          overflow: "hidden"
        }}>
        
        <div
          style={{
            height: "100%",
            width: `${pct}%`,
            background: "var(--yo-mint-700)",
            transition: "width 320ms cubic-bezier(0.2,0.8,0.2,1)"
          }} />
        
      </div>

      <div
        style={{
          position: "absolute",
          top: 64,
          left: 0,
          right: 0,
          height: 38,
          zIndex: 5
        }}>
        
        {!hideBack &&
        <button
          onClick={onBack}
          aria-label="Atrás"
          style={{
            position: "absolute",
            left: 16,
            top: 4,
            width: 32,
            height: 32,
            background: "transparent",
            border: "none",
            padding: 0,
            cursor: "pointer",
            display: "flex",
            alignItems: "center",
            justifyContent: "center"
          }}>
          
            <img
            src="assets/icon-arrow-left.svg"
            alt=""
            style={{ width: 22, height: 16 }} />
          
          </button>
        }
        {!noHelp &&
        <button
          onClick={handleHelp}
          aria-label="Ayuda"
          style={{
            position: "absolute",
            right: 16,
            top: 4,
            width: 30,
            height: 30,
            borderRadius: "50%",
            background: "transparent",
            border: "1.5px solid var(--yo-ink)",
            padding: 0,
            cursor: "pointer",
            fontFamily: "var(--font-body)",
            fontWeight: 700,
            fontSize: 14,
            color: "var(--yo-ink)",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            lineHeight: 1
          }}>
          
            ?
          </button>
        }
      </div>
    </>);

}

function TextField({
  label,
  value,
  onChange,
  placeholder,
  placeholderColor,
  error,
  type = "text",
  inputMode,
  maxLength,
  autoFocus,
  prefix
}) {
  const [focused, setFocused] = useStateOS(false);
  const phColor = placeholderColor || "rgba(20,32,28,0.42)";
  const phClassRef = useRefOS(
    "yo-ph-" + Math.random().toString(36).slice(2, 8)
  );
  const phClass = phClassRef.current;
  const borderColor = error ?
  "var(--yo-coral)" :
  focused ?
  "var(--yo-ink)" :
  "var(--yo-ink-200, rgba(20,32,28,0.18))";
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
      {label &&
      <label
        style={{
          fontFamily: "var(--font-body)",
          fontSize: 14,
          fontWeight: 600,
          color: "var(--yo-ink)"
        }}>
        
          {label}
        </label>
      }
      <div
        style={{
          position: "relative",
          height: 56,
          borderRadius: 16,
          border: `1.5px solid ${borderColor}`,
          background: "var(--yo-surface)",
          display: "flex",
          alignItems: "center",
          padding: prefix ? "0 16px 0 36px" : "0 16px",
          transition: "border-color 140ms ease"
        }}>
        
        {prefix &&
        <span
          style={{
            position: "absolute",
            left: 16,
            fontFamily: "var(--font-mono)",
            fontSize: 16,
            color: "var(--yo-ink-600, rgba(20,32,28,0.55))"
          }}>
          
            {prefix}
          </span>
        }
        <input
          type={type}
          inputMode={inputMode}
          value={value}
          onChange={(e) => onChange(e.target.value)}
          onFocus={() => setFocused(true)}
          onBlur={() => setFocused(false)}
          placeholder={placeholder}
          maxLength={maxLength}
          autoFocus={autoFocus}
          className={phClass}
          style={{
            width: "100%",
            height: "100%",
            border: "none",
            outline: "none",
            background: "transparent",
            fontFamily: "var(--font-mono)",
            fontSize: 15,
            color: "var(--yo-ink)",
            letterSpacing: "0.005em"
          }} />
        
        <style>{`
          .${phClass}::placeholder { color: ${phColor}; opacity: 1; }
          .${phClass}::-webkit-input-placeholder { color: ${phColor}; opacity: 1; }
        `}</style>
      </div>
      {error &&
      <div
        style={{
          fontFamily: "var(--font-body)",
          fontSize: 12.5,
          lineHeight: "16px",
          color: "var(--yo-coral)",
          marginTop: 2
        }}>
        
          {error}
        </div>
      }
    </div>);

}

function SegmentedSelect({ label, value, onChange, options, error }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
      {label &&
      <label
        style={{
          fontFamily: "var(--font-body)",
          fontSize: 14,
          fontWeight: 600,
          color: "var(--yo-ink)"
        }}>
        
          {label}
        </label>
      }
      <div style={{ display: "flex", gap: 8 }}>
        {options.map((opt) => {
          const active = opt.value === value;
          return (
            <button
              key={opt.value}
              type="button"
              onClick={() => onChange(opt.value)}
              style={{
                flex: 1,
                height: 52,
                borderRadius: 16,
                border: active ?
                "1.5px solid var(--yo-ink)" :
                `1.5px solid ${error ? "var(--yo-coral)" : "var(--yo-ink-200, rgba(20,32,28,0.18))"}`,
                background: active ? "var(--yo-ink)" : "var(--yo-surface)",
                color: active ? "var(--yo-bg)" : "var(--yo-ink)",
                fontFamily: "var(--font-body)",
                fontSize: 14,
                fontWeight: 600,
                cursor: "pointer",
                transition:
                "background 140ms ease, color 140ms ease, border-color 140ms ease"
              }}>
              
              {opt.label}
            </button>);

        })}
      </div>
      {error &&
      <div
        style={{
          fontFamily: "var(--font-body)",
          fontSize: 12.5,
          lineHeight: "16px",
          color: "var(--yo-coral)",
          marginTop: 2
        }}>
        
          {error}
        </div>
      }
    </div>);

}

// ────────────────────────────────────────────────
// Typography helpers — drop-in DS primitives.
// H1 / H1Bold = Geist Mono Medium / Bold @ 28px (the spec's "subtitle" /
// "archetype" pair). Body = Onest @ 16px, body tracking 0.04em.
// All colors must come from DS tokens; never hardcode hex.
// ────────────────────────────────────────────────
function H1({ children, color = "var(--yo-ink)", style }) {
  return (
    <div
      style={{
        fontFamily: "var(--font-display)",
        fontWeight: 500,
        fontSize: 28,
        lineHeight: "36px",
        color,
        textAlign: "center",
        margin: 0,
        ...style
      }}>
      
      {children}
    </div>);

}

function H1Bold({ children, color = "var(--yo-ink)", style }) {
  return (
    <div
      style={{
        fontFamily: "var(--font-display)",
        fontWeight: 700,
        fontSize: 28,
        lineHeight: "36px",
        color,
        textAlign: "center",
        margin: 0,
        ...style
      }}>
      
      {children}
    </div>);

}

function Body({ children, color = "var(--yo-ink)", style }) {
  return (
    <p
      style={{
        fontFamily: "var(--font-body)",
        fontWeight: 400,
        fontSize: 16,
        lineHeight: "24px",
        letterSpacing: "0.04em",
        color,
        margin: 0,
        textAlign: "center",
        ...style
      }}>
      
      {children}
    </p>);

}

// ────────────────────────────────────────────────
// Archetype reveal typography primitives.
// Backed by --type-archetype-* tokens — used ONLY by ArchetypeScreen +
// DiagnosticScreen (the 4 archetype reveal screens). Do not use elsewhere.
// ────────────────────────────────────────────────
function ArchetypeExclamation({ children, style }) {
  return (
    <div
      style={{
        fontFamily: "var(--type-archetype-exclamation-family)",
        fontWeight: "var(--type-archetype-exclamation-weight)",
        fontSize: "var(--type-archetype-exclamation-size)",
        lineHeight: "var(--type-archetype-exclamation-line)",
        letterSpacing: "var(--type-archetype-exclamation-tracking)",
        color: "var(--yo-ink)",
        textAlign: "center",
        margin: 0,
        ...style
      }}>
      
      {children}
    </div>);

}

function ArchetypeLabel({ children, color = "var(--yo-ink)", style }) {
  return (
    <div
      style={{
        fontFamily: "var(--type-archetype-label-family)",
        fontWeight: "var(--type-archetype-label-weight)",
        fontSize: "var(--type-archetype-label-size)",
        lineHeight: "var(--type-archetype-label-line)",
        letterSpacing: "var(--type-archetype-label-tracking)",
        color,
        textAlign: "center",
        margin: 0,
        ...style
      }}>
      
      {children}
    </div>);

}

function ArchetypeHeadline({ children, style }) {
  return (
    <p
      style={{
        fontFamily: "var(--type-archetype-headline-family)",
        fontWeight: "var(--type-archetype-headline-weight)",
        fontSize: "var(--type-archetype-headline-size)",
        lineHeight: "var(--type-archetype-headline-line)",
        letterSpacing: "var(--type-archetype-headline-tracking)",
        color: "var(--yo-ink)",
        textAlign: "center",
        margin: 0,
        maxWidth: 320,
        ...style
      }}>
      
      {children}
    </p>);

}

function ArchetypeBody({ children, style }) {
  return (
    <p
      style={{
        fontFamily: "var(--type-archetype-body-family)",
        fontWeight: "var(--type-archetype-body-weight)",
        fontSize: "var(--type-archetype-body-size)",
        lineHeight: "var(--type-archetype-body-line)",
        letterSpacing: "var(--type-archetype-body-tracking)",
        color: "var(--yo-ink-muted)",
        textAlign: "center",
        margin: 0,
        maxWidth: "var(--type-archetype-body-max-width)",
        ...style
      }}>
      
      {children}
    </p>);

}

// ────────────────────────────────────────────────
// FrameHeader — back arrow + help (?) + optional close (×) + 6px progress bar.
// Composed on top of OnboardingHeader to keep the existing progress chrome.
// The help icon mirrors OnboardingHeader's behavior (delegates to
// window.YomeeHelp.toggle(screenKey) when no explicit onHelp is provided).
// Used by ArchetypeScreen and DiagnosticScreen.
// ────────────────────────────────────────────────
function FrameHeader({ onBack, onClose, onHelp, screenKey, pct = 0, hideBack = false, noHelp = false }) {
  const handleHelp = onHelp || (() => {
    if (window.YomeeHelp && screenKey) window.YomeeHelp.toggle(screenKey);
  });
  return (
    <>
      <div
        style={{
          position: "absolute",
          top: 0,
          left: 0,
          right: 0,
          height: 6,
          background: "var(--yo-ink)",
          zIndex: 6,
          overflow: "hidden"
        }}>
        
        <div
          style={{
            height: "100%",
            width: `${Math.max(0, Math.min(100, pct * 100))}%`,
            background: "var(--yo-mint-700)",
            transition: "width 320ms cubic-bezier(0.2,0.8,0.2,1)"
          }} />
        
      </div>

      <div
        style={{
          position: "absolute",
          top: 64,
          left: 0,
          right: 0,
          height: 38,
          zIndex: 5
        }}>
        
        {!hideBack &&
        <button
          onClick={onBack}
          aria-label="Atrás"
          style={{
            position: "absolute",
            left: 16,
            top: 4,
            width: 32,
            height: 32,
            background: "transparent",
            border: "none",
            padding: 0,
            cursor: "pointer",
            display: "flex",
            alignItems: "center",
            justifyContent: "center"
          }}>
          
            <img
            src="assets/icon-arrow-left.svg"
            alt=""
            style={{ width: 22, height: 16 }} />
          
          </button>
        }
        {!noHelp &&
        <button
          onClick={handleHelp}
          aria-label="Ayuda"
          style={{
            position: "absolute",
            right: onClose ? 56 : 16,
            top: 4,
            width: 30,
            height: 30,
            borderRadius: "50%",
            background: "transparent",
            border: "1.5px solid var(--yo-ink)",
            padding: 0,
            cursor: "pointer",
            fontFamily: "var(--font-body)",
            fontWeight: 700,
            fontSize: 14,
            color: "var(--yo-ink)",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            lineHeight: 1
          }}>
          
            ?
          </button>
        }
        {onClose &&
        <button
          onClick={onClose}
          aria-label="Cerrar"
          style={{
            position: "absolute",
            right: 16,
            top: 4,
            width: 30,
            height: 30,
            borderRadius: "50%",
            background: "transparent",
            border: "1.5px solid var(--yo-ink)",
            padding: 0,
            cursor: "pointer",
            fontFamily: "var(--font-body)",
            fontWeight: 700,
            fontSize: 16,
            color: "var(--yo-ink)",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            lineHeight: 1
          }}>
          
            ×
          </button>
        }
      </div>
    </>);

}

// ────────────────────────────────────────────────
// MascotSlot — single, codified slot for the per-archetype Pocopin mascot.
//
// Used by ArchetypeScreen and DiagnosticScreen. ALL 4 archetype reveal
// screens (totalero, optimizador, escalador, reiniciador) must render the
// mascot through this slot so its bounding box is pixel-aligned across
// frames — same width, same vertical center, same overlap depth into the
// content card directly below it.
//
// Specs (derived from the totalero reference frame, 390 × 844):
//   width / height : 220 × 220 (≈56% of frame width)
//   object-fit     : contain
//   horizontal     : centered
//   overlap        : the mascot's bottom third overlaps the top edge of the
//                    content card below it. Implemented via negative
//                    margin-bottom on the slot. Vertical overlap target:
//                    ~70px (≈32% of mascot height).
//   z-index        : 2 (above the content card, which sits at z-index 1)
//   background     : transparent — no tile, no frame
//   source         : profileAsset prop, REQUIRED. Must be one of the 4 DS
//                    references under assets/profiles/. No fallback —
//                    missing prop fails loudly so silent placeholders can
//                    never re-introduce drift.
//
// Companion: MASCOT_OVERLAP_PX is the matching negative top-margin the
// content card directly below the slot must absorb so the slot's overlap
// lands consistently regardless of card padding.
// ────────────────────────────────────────────────
const MASCOT_SLOT_PX = 220;
const MASCOT_OVERLAP_PX = 70;

function MascotSlot({ profileAsset, style }) {
  if (!profileAsset) {
    // Fail loudly. Silent placeholders are how the totalero drift survived.
    throw new Error(
      "MascotSlot: `profileAsset` prop is required. Pass one of " +
      "assets/profiles/{totalero,optimizador,escalador,reiniciador}.png — " +
      "no fallback is provided."
    );
  }
  return (
    <div
      style={{
        width: MASCOT_SLOT_PX,
        height: MASCOT_SLOT_PX,
        marginLeft: "auto",
        marginRight: "auto",
        marginBottom: -MASCOT_OVERLAP_PX,
        position: "relative",
        zIndex: 2,
        pointerEvents: "none",
        background: "transparent",
        ...style
      }}>
      
      <img
        src={profileAsset}
        alt=""
        style={{
          width: "100%",
          height: "100%",
          objectFit: "contain",
          display: "block",
          background: "transparent"
        }} />
      
    </div>);

}

// ────────────────────────────────────────────────
// ArchetypeScreen — used by totalero & reiniciador.
//
// Render order top-down inside the frame:
//   1. FrameHeader (with pct)
//   2. subtitle  (Geist Mono Medium 28px, ink, centered)
//   3. archetype (Geist Mono Bold 28px, archetypeColor, centered)
//   4. mascot    (220×220 centered)
//   5. body      (Onest 16px, centered, max-width ~294px)
//   6. PrimaryButton
// ────────────────────────────────────────────────
function ArchetypeScreen({
  pct = 0.95,
  onBack,
  onClose,
  onHelp,
  screenKey = "profile-result",
  subtitle,
  archetype,
  archetypeColor = "var(--yo-ink)",
  mascot,
  body,
  variant, // "mascot-on-card" → totalero-style layout
  headline, // bold, 2-line, ink — only used by variant
  question, // muted question line — only used by variant
  cardBody, // text inside the card — only used by variant
  ctaLabel,
  onCta
}) {
  const isMascotOnCard = variant === "mascot-on-card";

  return (
    <div
      style={{
        position: "relative",
        width: "100%",
        height: "100%",
        background: "var(--yo-bg)",
        display: "flex",
        flexDirection: "column",
        overflow: "hidden"
      }}>
      
      <FrameHeader pct={pct} onBack={onBack} onClose={onClose} onHelp={onHelp} screenKey={screenKey} hideBack={isMascotOnCard} />

      <div
        style={{
          flex: 1,
          padding: isMascotOnCard ? "108px 20px 12px" : "118px 24px 16px",
          overflow: "auto",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          minHeight: 0
        }}>
        
        {subtitle &&
        <ArchetypeExclamation style={{ marginBottom: isMascotOnCard ? 2 : 4 }}>
            {subtitle}
          </ArchetypeExclamation>
        }
        <ArchetypeLabel
          color={archetypeColor}
          style={{ marginBottom: isMascotOnCard ? 14 : 18 }}>
          
          {archetype}
        </ArchetypeLabel>

        {isMascotOnCard ?
        <>
            {headline &&
          <div
            style={{
              fontFamily: "var(--font-body)",
              fontWeight: 700,
              fontSize: 16,
              lineHeight: "22px",
              color: "var(--yo-ink)",
              textAlign: "center",
              whiteSpace: "pre-line",
              margin: "0 0 14px",
              maxWidth: 320
            }}>
            
                {headline}
              </div>
          }
            {question &&
          <div
            style={{
              fontFamily: "var(--font-body)",
              fontWeight: 400,
              fontSize: 14,
              lineHeight: "20px",
              color: "var(--yo-ink-muted, rgba(20,32,28,0.62))",
              textAlign: "center",
              margin: "0 0 12px",
              maxWidth: 260
            }}>
            
                {question}
              </div>
          }

            {/* Mascot + card. The mascot is rendered through MascotSlot so
            its bounding box is identical across all 4 archetype frames.
            The slot owns the overlap (negative margin-bottom); the card
            below absorbs that with extra top padding so its body copy
            clears the mascot. */}
            {mascot && <MascotSlot profileAsset={mascot} />}
            <div
            style={{
                position: "relative",
                width: "100%",
                maxWidth: 300,
                zIndex: 1,
                background: "var(--yo-surface)",
                border: "2px solid var(--yo-ink)",
                borderRadius: 24,
                padding: `${MASCOT_OVERLAP_PX + 22}px 22px 22px`
              }}>
            
              {cardBody &&
            <p
              style={{
                fontWeight: 400,
                lineHeight: "22px",
                letterSpacing: "0.01em",
                color: "var(--yo-ink)",
                textAlign: "center",
                margin: 0,
                fontFamily: "\"Geist Mono\"",
                fontSize: "16px"
              }}>
              
                  {cardBody}
                </p>
            }
            </div>
          </> :

        <>
            {mascot && <MascotSlot profileAsset={mascot} />}

            {body &&
          <ArchetypeBody
            style={{
              // Absorb the slot's negative margin-bottom so body copy
              // clears the mascot. Keeps the mascot bounding box
              // pixel-aligned with the other 3 archetype frames.
              paddingTop: MASCOT_OVERLAP_PX + 18
            }}>
            
                {body}
              </ArchetypeBody>
          }
          </>
        }

        <div style={{ flex: 1, minHeight: 16 }} />
      </div>

      <div
        style={{
          padding: "12px 24px 28px",
          background: "var(--yo-bg)",
          flexShrink: 0
        }}>
        
        <PrimaryButton onClick={onCta}>{ctaLabel}</PrimaryButton>
      </div>
    </div>);

}

// ────────────────────────────────────────────────
// DiagnosticScreen — used by optimizador & escalador.
//
// Render order top-down inside the frame:
//   1. FrameHeader
//   2. subtitle (Geist Mono Medium 28px, ink, centered)
//   3. archetype (Geist Mono Bold 28px, archetypeColor, centered)
//   4. headline (Body, centered, max-width 294)
//   5. mascot (220×220 centered)
//   6. metric card (white, 2px ink stroke, 28px radius, no shadow)
//        - metric:  Geist Mono Bold 28px, --yo-coral
//        - footline: Body, with bolded coral interest amount
//        - emphasis link: Onest Bold 14px, --yo-mint-700
//   7. PrimaryButton
//
// Edge case (unpayable): pass `unpayable: true` to render the single-line
// coral message instead of the metric block.
// ────────────────────────────────────────────────
function DiagnosticScreen({
  pct = 0.95,
  onBack,
  onClose,
  onHelp,
  screenKey = "profile-result",
  subtitle,
  archetype,
  archetypeColor = "var(--yo-ink)",
  headline,
  mascot,
  metric, // string e.g. "8 meses" / "3 años y 4 meses"
  interesTotal, // string e.g. "$14,400"
  emphasis = "Ahórratelos con Yomee",
  unpayable = false,
  ctaLabel,
  onCta
}) {
  return (
    <div
      style={{
        position: "relative",
        width: "100%",
        height: "100%",
        background: "var(--yo-bg)",
        display: "flex",
        flexDirection: "column",
        overflow: "hidden"
      }}>
      
      <FrameHeader pct={pct} onBack={onBack} onClose={onClose} onHelp={onHelp} screenKey={screenKey} />

      <div
        style={{
          flex: 1,
          padding: "118px 24px 16px",
          overflow: "auto",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          minHeight: 0
        }}>
        
        {subtitle &&
        <ArchetypeExclamation style={{ marginBottom: 4 }}>
            {subtitle}
          </ArchetypeExclamation>
        }
        <ArchetypeLabel color={archetypeColor} style={{ marginBottom: 14 }}>
          {archetype}
        </ArchetypeLabel>

        {headline &&
        <ArchetypeHeadline style={{ marginBottom: 18 }}>
            {headline}
          </ArchetypeHeadline>
        }

        {mascot && <MascotSlot profileAsset={mascot} />}

        {/* Metric card. Top padding absorbs the MascotSlot's negative
                                   margin-bottom so the metric clears the mascot, while keeping
                                   the mascot's bounding box pixel-aligned with the totalero
                                   reference frame. */}
        <div
          style={{
            position: "relative",
            zIndex: 1,
            width: "100%",
            maxWidth: 300,
            background: "var(--yo-surface)",
            border: "2px solid var(--yo-ink)",
            borderRadius: 28,
            padding: `${MASCOT_OVERLAP_PX + 22}px 20px 22px`,
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            gap: 10
          }}>
          
          {unpayable ?
          <div
            style={{
              fontFamily: "var(--font-mono)",
              fontWeight: 700,
              fontSize: 16,
              lineHeight: "22px",
              color: "var(--yo-coral)",
              textAlign: "center"
            }}>
            
              Tu pago mensual no cubre los intereses. Yomee encuentra la salida.
            </div> :

          <>
              <div
              style={{
                fontFamily: "var(--font-mono)",
                fontWeight: 700,
                fontSize: 28,
                lineHeight: "34px",
                color: "var(--yo-coral)",
                textAlign: "center"
              }}>
              
                {metric}
              </div>
              <Body style={{ textAlign: "center" }}>
                Pagarás{" "}
                <span
                style={{
                  fontFamily: "var(--font-mono)",
                  fontWeight: 700,
                  color: "var(--yo-coral)"
                }}>
                
                  {interesTotal}
                </span>{" "}
                en intereses.
              </Body>
              <button
              type="button"
              onClick={onCta}
              style={{
                background: "transparent",
                border: "none",
                padding: 0,
                margin: 0,
                cursor: "pointer",
                fontFamily: "var(--font-body)",
                fontWeight: 700,
                fontSize: 14,
                lineHeight: "20px",
                color: "var(--yo-mint-700)",
                textDecoration: "underline",
                textUnderlineOffset: 3,
                textDecorationThickness: 1.5
              }}>
              
                {emphasis}
              </button>
            </>
          }
        </div>

        <div style={{ flex: 1, minHeight: 16 }} />
      </div>

      <div
        style={{
          padding: "12px 24px 28px",
          background: "var(--yo-bg)",
          flexShrink: 0
        }}>
        
        <PrimaryButton onClick={onCta}>{ctaLabel}</PrimaryButton>
      </div>
    </div>);

}

window.OnboardingHeader = OnboardingHeader;
window.TextField = TextField;
window.SegmentedSelect = SegmentedSelect;
window.H1 = H1;
window.H1Bold = H1Bold;
window.Body = Body;
window.ArchetypeExclamation = ArchetypeExclamation;
window.ArchetypeLabel = ArchetypeLabel;
window.ArchetypeHeadline = ArchetypeHeadline;
window.ArchetypeBody = ArchetypeBody;
window.FrameHeader = FrameHeader;
window.ArchetypeScreen = ArchetypeScreen;
window.DiagnosticScreen = DiagnosticScreen;
window.MascotSlot = MascotSlot;