// Variant A2 — SAP-inspired visual treatment
// Based on variant-a-sap but with SAP Business One chrome:
// dark navy top bar + subtitle row, document action bar, SAP-orange logo accent.

const sapTokens5 = {
  bg: '#eff1f2',
  surface: '#ffffff',
  border: '#d9dde1',
  borderStrong: '#b4bcc4',
  cardBorder: '#eaedee',
  cardBorderStrong: '#cdd3d8',
  text: '#1d2327',
  textMuted: '#556070',
  textFaint: '#8a93a0',
  // SAP B1 LIGHT chrome — sampled from real screenshots (pasted-1777497171062-0.png)
  // Row 1 (app bar) and Row 2 (tabs) are pure white; Row 3 (metadata + actions) is the
  // light shell-gray. Hairline separator between row 2 and row 3 is the same gray.
  navBg: '#ffffff',          // row 1: top app bar (PURE WHITE)
  navTabsBg: '#ffffff',      // row 2: tab strip (PURE WHITE)
  navMetaBg: '#eff1f2',      // row 3: metadata + action buttons strip
  navHairline: '#e5e8ea',    // hairline between row1 / row2 / row3
  navText: '#1d2327',        // dark text on white chrome
  navTextMuted: '#556070',   // secondary on white chrome
  navTextMutedHover: '#1d2327',
  navBtnGhostBorder: '#c5cad0',
  navBtnActiveBg: '#ffffff',
  navBtnActiveText: '#0070f2',
  // SAP Business One signature blue (logo "Business One" on white) — used for active tab
  sapBlue: '#0070f2',
  sapBlueHover: '#0a5fc7',
  // SAP brand orange (logo badge only, unused in new design)
  sapOrange: '#F0AB00',
  // In-content accent — matches the SAP-blue text color used on the
  // active "Upravit" / "030 QUAD" chip in the header. Keeps the whole
  // screen on a single blue family instead of mixing Fiori indigo with
  // navy chrome blue.
  accent: '#0070f2',
  accentDark: '#0a5fc7',     // hover / pressed
  accentBg: '#e3f0fd',
  // Muted, slightly desaturated green that sits next to the navy chrome
  // without clashing.
  success: '#3d8a5e',
  successBg: '#e9f3ec',
  warn: '#b05a1f',
  warnBg: '#fbeedf',
  error: '#a62828',
  errorBg: '#f8e6e6',
  mandatory: '#a62828',
  rowHover: '#eef2f7',
  selected: '#6393ca',
  selectedBg: '#f2f4f5',
  selectedBorder: '#cdd3d8',
};
const sapFont5 = '"72", "Segoe UI", Roboto, -apple-system, sans-serif';

function Sap5Chev() {
  return <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M3 2L6.5 5L3 8" stroke="currentColor" strokeWidth="1.2" opacity="0.6"/></svg>;
}
function Sap5Icon({ name, size = 14, color = 'currentColor' }) {
  const s = size;
  const paths = {
    search: <path d="M7 3a4 4 0 104 4 4 4 0 00-4-4zM10.2 10.2L13 13" stroke={color} strokeWidth="1.4" fill="none" strokeLinecap="round"/>,
    bell: <path d="M5 6a3 3 0 016 0v3l1 2H4l1-2V6zM6.5 13a1.5 1.5 0 003 0" stroke={color} strokeWidth="1.3" fill="none" strokeLinejoin="round"/>,
    help: <><circle cx="8" cy="8" r="6" stroke={color} strokeWidth="1.3" fill="none"/><path d="M6.5 6.5a1.5 1.5 0 013 0c0 1-1.5 1-1.5 2M8 10.8v.4" stroke={color} strokeWidth="1.3" fill="none" strokeLinecap="round"/></>,
    menu: <path d="M2 4h12M2 8h12M2 12h12" stroke={color} strokeWidth="1.3"/>,
    back: <path d="M9 3L4 8l5 5" stroke={color} strokeWidth="1.3" fill="none" strokeLinecap="round"/>,
    up: <path d="M3 9l5-5 5 5" stroke={color} strokeWidth="1.4" fill="none" strokeLinecap="round"/>,
    down: <path d="M3 7l5 5 5-5" stroke={color} strokeWidth="1.4" fill="none" strokeLinecap="round"/>,
    external: <path d="M6 4H4v8h8v-2M9 3h4v4M8 8l5-5" stroke={color} strokeWidth="1.3" fill="none" strokeLinecap="round"/>,
  };
  return <svg width={s} height={s} viewBox="0 0 16 16" fill="none">{paths[name]}</svg>;
}

// ─────────────────────────────────────────────────────────────
// SAP Business One LIGHT header (3 white/light rows)
// Row 1 (#ffffff): SilentLab logo + quotation # + global controls
// Row 2 (#ffffff): item tabs — active tab = SAP-blue underline + blue text
// Row 3 (#eff1f2): metadata + action buttons (light gray strip)
// ─────────────────────────────────────────────────────────────
function Sap5Header({ quoteNum, partner, priceList, activeTab = '030' }) {
  return (
    <>
      {/* Row 1 — white app bar */}
      <div style={{ height: 53, background: sapTokens5.navBg, color: sapTokens5.navText, display: 'flex', alignItems: 'center', padding: '0 20px', fontSize: 14, letterSpacing: 0.1, borderBottom: `1px solid ${sapTokens5.navHairline}` }}>
        <button style={{ background: 'transparent', border: 'none', color: sapTokens5.navTextMuted, cursor: 'pointer', padding: '7px 9px', marginRight: 2 }} title="Menu"><Sap5Icon name="menu" size={16}/></button>

        <div style={{ width: 1, height: 24, background: sapTokens5.navHairline, margin: '0 11px 0 7px' }}/>

        <img src="assets/slb-pos-col.svg" alt="SilentLab" style={{ height: 24, display: 'block', marginRight: 15 }}/>
        <span style={{ color: sapTokens5.textFaint, marginRight: 13, fontWeight: 300 }}>|</span>
        <span style={{ fontWeight: 500, marginRight: 18, color: sapTokens5.text }}>Product Configurator</span>
        <span style={{ color: sapTokens5.textFaint, marginRight: 15, fontWeight: 300 }}>/</span>
        <span style={{ fontSize: 13, color: sapTokens5.navTextMuted, fontWeight: 500, marginRight: 9 }}>Quotation</span>
        <span style={{ fontVariantNumeric: 'tabular-nums', fontSize: 14, fontWeight: 600, color: sapTokens5.text, letterSpacing: 0.2 }}>{quoteNum}</span>

        <div style={{ flex: 1 }}/>

        <div style={{ display: 'flex', alignItems: 'center', gap: 2 }}>
          <button style={{ background: 'transparent', border: 'none', color: sapTokens5.navTextMuted, cursor: 'pointer', padding: '7px 9px' }} onMouseOver={e=>e.currentTarget.style.color=sapTokens5.text} onMouseOut={e=>e.currentTarget.style.color=sapTokens5.navTextMuted} title="Help"><Sap5Icon name="help" size={16}/></button>
          <button style={{ background: 'transparent', border: 'none', color: sapTokens5.navTextMuted, cursor: 'pointer', padding: '7px 9px' }} onMouseOver={e=>e.currentTarget.style.color=sapTokens5.text} onMouseOut={e=>e.currentTarget.style.color=sapTokens5.navTextMuted} title="Notifications"><Sap5Icon name="bell" size={16}/></button>
          <div style={{ width: 33, height: 33, borderRadius: '50%', background: sapTokens5.sapBlue, color: '#fff', display: 'grid', placeItems: 'center', fontSize: 12, fontWeight: 700, marginLeft: 11 }}>JN</div>
        </div>
      </div>

      {/* Row 2 — white metadata + action buttons strip (sits directly under app bar) */}
      <div style={{ background: sapTokens5.navBg, padding: '13px 20px', display: 'flex', alignItems: 'center', gap: 31, borderBottom: `1px solid ${sapTokens5.navHairline}` }}>
        <Sap5MetaLight label="Customer" value={partner} link/>
        <Sap5MetaLight label="Total price" value="184,250.00 CZK" mono/>
        <Sap5MetaLight label="Status" value="In progress" pill="warn"/>
        <Sap5MetaLight label="Price list" value={priceList}/>
        <Sap5MetaLight label="Valid until" value="31/05/2026"/>

        <div style={{ flex: 1 }}/>

        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <Sap5ActionChip>New item</Sap5ActionChip>
          <Sap5ActionChip>Duplicate item</Sap5ActionChip>
          <Sap5ActionChip>Save as template</Sap5ActionChip>
        </div>
      </div>

      {/* Row 3 — white tab strip with SAP-blue underline; sits directly above the gray body */}
      <div style={{ background: sapTokens5.navTabsBg, display: 'flex', alignItems: 'stretch', padding: '0 13px 0 20px', gap: 0, borderBottom: `1px solid ${sapTokens5.navHairline}` }}>
        <Sap5ItemTab overview label="Quotation overview" count={6} status={activeTab === 'overview' ? 'active' : 'draft'}/>
        <Sap5ItemTabDivider/>
        <Sap5ItemTab num="010" label="SOLO · S1" status={activeTab === '010' ? 'active' : 'done'}/>
        <Sap5ItemTab num="020" label="DUO · M2" status={activeTab === '020' ? 'active' : 'done'}/>
        <Sap5ItemTab num="030" label="QUAD · L4" status={activeTab === '030' ? 'active' : 'draft'}/>
        <Sap5ItemTab num="040" label="SOLO · S1" status={activeTab === '040' ? 'active' : 'draft'}/>
        <Sap5ItemTab num="050" label="DUO · M2" status={activeTab === '050' ? 'active' : 'draft'}/>
        <Sap5ItemTab num="060" label="+ Add-ons" status={activeTab === '060' ? 'active' : 'draft'}/>
      </div>
    </>
  );
}

function Sap5Meta({ label, value, mono, link, pill }) {
  const pillColors = {
    warn: { bg: sapTokens5.warnBg, fg: sapTokens5.warn },
    ok: { bg: sapTokens5.successBg, fg: sapTokens5.success },
  };
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 2, minWidth: 0 }}>
      <span style={{ fontSize: 12, color: sapTokens5.textMuted, fontWeight: 500 }}>{label}</span>
      {pill ? (
        <span style={{ alignSelf: 'flex-start', fontSize: 12, padding: '3px 11px', background: pillColors[pill].bg, color: pillColors[pill].fg, fontWeight: 600, borderRadius: 1099 }}>{value}</span>
      ) : (
        <span style={{ fontSize: 14, color: link ? sapTokens5.accent : sapTokens5.text, fontWeight: link ? 500 : 500, fontVariantNumeric: mono ? 'tabular-nums' : 'normal', textDecoration: link ? 'none' : 'none', borderBottom: link ? `1px solid ${sapTokens5.accent}` : 'none' }}>{value}</span>
      )}
    </div>
  );
}

// Metadata styled for the LIGHT GRAY (#eff1f2) row
function Sap5MetaLight({ label, value, mono, link, pill }) {
  const pillColors = {
    warn: { bg: sapTokens5.warnBg, fg: sapTokens5.warn },
    ok:   { bg: sapTokens5.successBg, fg: sapTokens5.success },
  };
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 3, minWidth: 0 }}>
      <span style={{ fontSize: 12, color: sapTokens5.textMuted, fontWeight: 500 }}>{label}</span>
      {pill ? (
        <span style={{ alignSelf: 'flex-start', fontSize: 12, padding: '3px 11px', background: pillColors[pill].bg, color: pillColors[pill].fg, fontWeight: 600, borderRadius: 1099 }}>{value}</span>
      ) : (
        <span style={{
          fontSize: 14,
          color: link ? sapTokens5.sapBlue : sapTokens5.text,
          fontWeight: 500,
          fontVariantNumeric: mono ? 'tabular-nums' : 'normal',
          borderBottom: link ? `1px solid ${sapTokens5.sapBlue}` : 'none',
        }}>{value}</span>
      )}
    </div>
  );
}

// Action button used on the LIGHT GRAY row-3 bar.
// White surface, gray border, dark text; on HOVER → SAP-blue label + blue border.
function Sap5ActionChip({ children, onClick, icon }) {
  const [hover, setHover] = React.useState(false);
  return (
    <button
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: hover ? '#eaecee' : 'transparent',
        color: '#0070f2',
        border: 'none',
        padding: icon ? '6px 8px' : '6px 12px',
        fontSize: 13,
        fontWeight: 600,
        cursor: 'pointer',
        display: 'inline-flex',
        alignItems: 'center',
        gap: 7,
        letterSpacing: 0.1,
        borderRadius: 7,
        transition: 'background 120ms ease',
        whiteSpace: 'nowrap',
      }}>
      {children}
    </button>
  );
}

// ─────────────────────────────────────────────────────────────
// Main shell (wraps children below the 3-row SAP header)
// ─────────────────────────────────────────────────────────────
function Sap5Shell({ children, activeTab = '030', quoteNum = 'QU202613456', partner = 'Brezina Architects s.r.o.', priceList = 'Wholesale EUR→CZK · 04/2026' }) {
  return (
    <div style={{ fontFamily: sapFont5, background: sapTokens5.bg, color: sapTokens5.text, minHeight: '100%', fontSize: 14, display: 'flex', flexDirection: 'column' }}>
      <Sap5Header activeTab={activeTab} quoteNum={quoteNum} partner={partner} priceList={priceList}/>

      <div style={{
        flex: 1,
        boxShadow: 'inset 0 6px 8px -6px rgba(15, 30, 50, 0.18)',
      }}>{children}</div>

      {/* Footer — document-level actions */}
      <div style={{ background: '#fff', borderTop: `1px solid ${sapTokens5.cardBorder}`, boxShadow: '0 -1px 2px rgba(15, 30, 50, 0.04)', padding: '13px 20px', display: 'flex', alignItems: 'center', gap: 11 }}>
        <div style={{ flex: 1 }}/>
        <Sap5GhostBtn>Discard changes</Sap5GhostBtn>
        <Sap5GhostBtn>Save draft</Sap5GhostBtn>
        <Sap5PrimaryBtn>Update quotation in SAP B1</Sap5PrimaryBtn>
      </div>
    </div>
  );
}

// Item tab — sits on the WHITE row-2 strip.
// Active tab = SAP-blue 3px underline + blue text + bold.
// Inactive  = dark gray text; hover slightly darker.
function Sap5ItemTab({ num, label, status, overview, count }) {
  const isActive = status === 'active';
  const [hover, setHover] = React.useState(false);
  const color = isActive
    ? sapTokens5.sapBlue
    : hover
      ? sapTokens5.sapBlue
      : sapTokens5.navTextMuted;
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        padding: '13px 18px 10px',
        background: 'transparent',
        cursor: 'pointer',
        display: 'flex', alignItems: 'center', gap: 9,
        fontSize: 14,
        color,
        transition: 'color 120ms',
        position: 'relative',
        // Bottom underline — sits over the row's hairline so 3px overlaps cleanly
        boxShadow: isActive ? `inset 0 -3px 0 0 ${sapTokens5.sapBlue}` : 'none',
        marginBottom: -1,
      }}>
      {overview ? (
        <>
          <Sap5OverviewIcon color={color}/>
          <span style={{ fontWeight: isActive ? 700 : 600 }}>{label}</span>
          {count != null && (
            <span style={{
              marginLeft: 2,
              padding: '1px 7px',
              borderRadius: 11,
              fontVariantNumeric: 'tabular-nums',
              fontSize: 11,
              fontWeight: 700,
              background: isActive ? sapTokens5.sapBlue : sapTokens5.bg,
              color: isActive ? '#ffffff' : sapTokens5.textMuted,
              letterSpacing: 0.3,
            }}>{count}</span>
          )}
        </>
      ) : (
        <>
          <Sap5StatusDotLight status={status} active={isActive}/>
          <span style={{ fontWeight: isActive ? 700 : 500 }}>{label}</span>
        </>
      )}
    </div>
  );
}

// Small vertical divider between the Overview tab and the item tabs (light variant)
function Sap5ItemTabDivider() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', padding: '0 7px' }}>
      <div style={{ width: 1, height: 20, background: sapTokens5.navHairline }}/>
    </div>
  );
}

// Overview icon — a small 3-row list glyph
function Sap5OverviewIcon({ color = 'currentColor' }) {
  return (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
      <rect x="1" y="2"  width="2" height="2" fill={color}/>
      <rect x="5" y="2.5" width="8" height="1" fill={color}/>
      <rect x="1" y="6"  width="2" height="2" fill={color}/>
      <rect x="5" y="6.5" width="8" height="1" fill={color}/>
      <rect x="1" y="10" width="2" height="2" fill={color}/>
      <rect x="5" y="10.5" width="8" height="1" fill={color}/>
    </svg>
  );
}

// Status dot for tabs on the WHITE row-2 bar
function Sap5StatusDotLight({ status, active }) {
  if (status === 'done') {
    return (
      <svg width="12" height="12" viewBox="0 0 12 12">
        <circle cx="6" cy="6" r="6" fill={sapTokens5.success}/>
        <path d="M3.5 6L5 7.5L8.5 4" stroke="#ffffff" strokeWidth="1.5" fill="none"/>
      </svg>
    );
  }
  if (active) {
    return <div style={{ width: 9, height: 9, borderRadius: '50%', background: sapTokens5.sapBlue }}/>;
  }
  return <div style={{ width: 9, height: 9, borderRadius: '50%', background: 'transparent', border: `1.5px solid ${sapTokens5.textFaint}` }}/>;
}

function Sap5StatusDot({ status }) {
  const color = status === 'done' ? sapTokens5.success : status === 'active' ? sapTokens5.accent : sapTokens5.textFaint;
  if (status === 'done') return <svg width="12" height="12" viewBox="0 0 12 12"><circle cx="6" cy="6" r="6" fill={color}/><path d="M3.5 6L5 7.5L8.5 4" stroke="#fff" strokeWidth="1.5" fill="none"/></svg>;
  return <div style={{ width: 9, height: 9, borderRadius: '50%', background: status === 'draft' ? 'transparent' : color, border: `1.5px solid ${color}` }} />;
}

// ─────────────────────────────────────────────────────────────
// Buttons — SAP B1 flavored
// Primary: orange solid (matches top "Upravit" chip)
// Ghost: neutral with subtle border
// ─────────────────────────────────────────────────────────────
// SAP B1 button style — link-blue text default, gray hover bg, rounded, no border
function Sap5PrimaryBtn({ children, onClick }) {
  const [hover, setHover] = React.useState(false);
  return <button onClick={onClick}
    onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
    style={{
      background: hover ? '#0a5fc7' : '#0070f2',
      color: '#ffffff', border: 'none',
      padding: '8px 18px', fontSize: 13, fontWeight: 600,
      borderRadius: 7, cursor: 'pointer', letterSpacing: 0.1,
      transition: 'background 120ms ease',
    }}>{children}</button>;
}
function Sap5GhostBtn({ children, onClick }) {
  const [hover, setHover] = React.useState(false);
  return <button onClick={onClick}
    onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
    style={{
      background: hover ? '#eaecee' : 'transparent',
      color: '#0070f2', border: 'none',
      padding: '8px 15px', fontSize: 13, fontWeight: 600,
      borderRadius: 7, cursor: 'pointer', letterSpacing: 0.1,
      transition: 'background 120ms ease',
    }}>{children}</button>;
}
function Sap5LinkBtn({ children, onClick }) {
  const [hover, setHover] = React.useState(false);
  return <button onClick={onClick}
    onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
    style={{
      background: hover ? '#eaecee' : 'transparent',
      color: '#0070f2', border: 'none',
      padding: '7px 11px', fontSize: 13, fontWeight: 600,
      borderRadius: 7, cursor: 'pointer',
      transition: 'background 120ms ease',
    }}>{children}</button>;
}

// ─────────────────────────────────────────────────────────────
// Step card (reused from A1 visual language)
// ─────────────────────────────────────────────────────────────
function Sap5Step({ num, totalSteps, title, subtitle, required, complete, children, valid = true }) {
  const status = !valid ? 'error' : complete ? 'done' : 'pending';
  const statusStyle = {
    pending: { bg: '#eef0f2', fg: sapTokens5.textMuted, headerBg: '#fafbfc' },
    done:    { bg: sapTokens5.success, fg: '#ffffff', headerBg: '#f1f8f3' },
    error:   { bg: sapTokens5.error,   fg: '#ffffff', headerBg: '#fdf3f3' },
  }[status];
  return (
    <section style={{
      background: sapTokens5.surface,
      border: `1px solid ${sapTokens5.cardBorder}`,
      borderRadius: 9,
      boxShadow: '0 1px 2px rgba(15, 30, 50, 0.04)',
      marginBottom: 15,
      overflow: 'hidden',
    }}>
      <header style={{ padding: '13px 18px', borderBottom: `1px solid ${sapTokens5.cardBorder}`, background: statusStyle.headerBg, display: 'flex', alignItems: 'center', gap: 13 }}>
        <div style={{
          width: 31, height: 31, borderRadius: '50%',
          background: statusStyle.bg, color: statusStyle.fg,
          display: 'grid', placeItems: 'center',
          fontVariantNumeric: 'tabular-nums', fontSize: 12, fontWeight: 700, letterSpacing: 0.3,
          flexShrink: 0,
        }}>
          {status === 'done' ? <svg width="14" height="14" viewBox="0 0 12 12"><path d="M2.5 6.2L5 8.7L9.5 3.5" stroke="#fff" strokeWidth="1.8" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
            : status === 'error' ? <span style={{ fontSize: 15, fontWeight: 700, lineHeight: 1 }}>!</span>
            : String(num).padStart(2,'0')}
        </div>
        <div style={{ fontVariantNumeric: 'tabular-nums', fontSize: 12, color: sapTokens5.textFaint, fontWeight: 500 }}>
          {String(num).padStart(2,'0')} / {String(totalSteps).padStart(2,'0')}
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
            <h3 style={{ margin: 0, fontSize: 14, fontWeight: 600 }}>{title}</h3>
            {required && <span style={{ color: sapTokens5.mandatory, fontSize: 12, fontWeight: 600 }}>*</span>}
            {!required && <Sap5Pill tone="neutral">Optional</Sap5Pill>}
            {complete && valid && <span style={{ fontSize: 12, color: sapTokens5.success, fontWeight: 600 }}>Set</span>}
            {!valid && <span style={{ fontSize: 12, color: sapTokens5.error, fontWeight: 600 }}>Invalid — item inactive</span>}
          </div>
          {subtitle && <div style={{ fontSize: 13, color: sapTokens5.textMuted, marginTop: 2 }}>{subtitle}</div>}
        </div>
        <button style={{ background: 'transparent', border: 'none', color: sapTokens5.textMuted, cursor: 'pointer', fontSize: 12 }}>Collapse ▾</button>
      </header>
      <div style={{ padding: 18 }}>{children}</div>
    </section>
  );
}
function Sap5Check() {
  return <svg width="12" height="12" viewBox="0 0 12 12"><path d="M2 6L5 9L10 3" stroke={sapTokens5.success} strokeWidth="1.8" fill="none"/></svg>;
}

// Tile — accent stays Fiori blue inside content, so selection pops against the navy chrome
function Sap5Tile({ selected, invalid, title, desc, price, priceDelta, badge, onClick, info, disabled, qty }) {
  const [hover, setHover] = React.useState(false);
  const borderCol = invalid ? sapTokens5.error : selected ? sapTokens5.selectedBorder : sapTokens5.cardBorder;
  const baseShadow = '0 1px 2px rgba(15, 30, 50, 0.04)';
  const hoverShadow = '0 4px 12px rgba(15, 30, 50, 0.10), 0 1px 3px rgba(15, 30, 50, 0.06)';
  const selectedShadow = '0 2px 6px rgba(15, 30, 50, 0.08), 0 1px 2px rgba(15, 30, 50, 0.05)';
  return (
    <div
      onClick={disabled ? null : onClick}
      onMouseEnter={() => !disabled && setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: selected ? sapTokens5.selectedBg : invalid ? sapTokens5.errorBg : '#fff',
        border: `1px solid ${hover && !disabled && !selected ? sapTokens5.cardBorderStrong : borderCol}`,
        borderRadius: 9,
        boxShadow: selected ? selectedShadow : hover && !disabled ? hoverShadow : baseShadow,
        transform: hover && !disabled && !selected ? 'translateY(-1px)' : 'translateY(0)',
        transition: 'box-shadow 140ms ease, transform 140ms ease, border-color 140ms ease',
        padding: '13px 15px',
        cursor: disabled ? 'not-allowed' : 'pointer',
        position: 'relative',
        display: 'flex',
        gap: 13,
        alignItems: 'flex-start',
        opacity: disabled ? 0.55 : 1,
      }}>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginBottom: 2 }}>
          <div style={{ fontSize: 14, fontWeight: 600, color: sapTokens5.text }}>{title}</div>
          {badge && <Sap5Pill tone="accent">{badge}</Sap5Pill>}
          {info && (
            <span style={{ marginLeft: 'auto', width: 15, height: 15, borderRadius: '50%', border: `1px solid ${sapTokens5.borderStrong}`, color: sapTokens5.textMuted, display: 'grid', placeItems: 'center', fontSize: 10, fontWeight: 600, fontFamily: 'serif', cursor: 'help' }} title={info}>i</span>
          )}
        </div>
        {desc && <div style={{ fontSize: 13, color: sapTokens5.textMuted, lineHeight: 1.4, marginBottom: 7 }}>{desc}</div>}
        {(price || priceDelta) && (
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 7, fontVariantNumeric: 'tabular-nums' }}>
            {price && <span style={{ fontSize: 13, fontWeight: 600, color: sapTokens5.text }}>{price}</span>}
            {priceDelta && <span style={{ fontSize: 12, color: priceDelta.startsWith('+') ? sapTokens5.warn : sapTokens5.success }}>{priceDelta}</span>}
          </div>
        )}
        {qty != null && selected && (
          <div style={{ marginTop: 9, display: 'flex', alignItems: 'center', gap: 7 }}>
            <span style={{ fontSize: 12, color: sapTokens5.textMuted, fontWeight: 500 }}>Qty</span>
            <div style={{ display: 'inline-flex', alignItems: 'stretch', border: `1px solid ${sapTokens5.cardBorder}`, background: '#fff', borderRadius: 7, overflow: 'hidden' }}>
              <button style={{ width: 26, height: 26, border: 'none', background: 'transparent', cursor: 'pointer', color: sapTokens5.accent, fontSize: 15, lineHeight: 1, padding: 0, fontWeight: 600 }}>−</button>
              <div style={{ width: 33, display: 'grid', placeItems: 'center', fontSize: 13, fontWeight: 600, fontVariantNumeric: 'tabular-nums', borderLeft: `1px solid ${sapTokens5.cardBorder}`, borderRight: `1px solid ${sapTokens5.border}` }}>{qty}</div>
              <button style={{ width: 26, height: 26, border: 'none', background: 'transparent', cursor: 'pointer', color: sapTokens5.accent, fontSize: 15, lineHeight: 1, padding: 0, fontWeight: 600 }}>+</button>
            </div>
          </div>
        )}
      </div>
      {selected && (
        <div style={{ position: 'absolute', top: 9, right: 9, width: 18, height: 18, borderRadius: '50%', background: sapTokens5.text, display: 'grid', placeItems: 'center' }}>
          <svg width="10" height="10" viewBox="0 0 10 10"><path d="M2 5L4 7L8 3" stroke="#fff" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
        </div>
      )}
    </div>
  );
}

function Sap5Layout({ left, right }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '240px 1fr 300px', gap: 18, padding: 18, alignItems: 'start' }}>
      <aside style={{ background: '#fff', border: `1px solid ${sapTokens5.cardBorder}`, borderRadius: 9, boxShadow: '0 1px 2px rgba(15, 30, 50, 0.04)', fontSize: 13, overflow: 'hidden' }}>
        <div style={{ padding: '13px 15px', borderBottom: `1px solid ${sapTokens5.cardBorder}`, fontWeight: 600, fontSize: 13, color: sapTokens5.text }}>Configuration steps</div>
        <div style={{ padding: 7 }}>{left}</div>
      </aside>
      <main style={{ minWidth: 0 }}>{right}</main>
      <aside><Sap5SummaryCard/></aside>
    </div>
  );
}
function Sap5NavItem({ n, label, status, active }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
      display: 'flex', alignItems: 'center', gap: 11,
      padding: '9px 11px',
      borderRadius: 7,
      background: active ? sapTokens5.selectedBg : hover ? '#f7f8f9' : 'transparent',
      border: `1px solid ${active ? sapTokens5.selectedBorder : 'transparent'}`,
      fontWeight: active ? 600 : 400,
      cursor: 'pointer',
      marginBottom: 2,
      fontSize: 13,
      transition: 'background 120ms ease',
    }}>
      <Sap5StatusDot status={status}/>
      <span style={{ fontVariantNumeric: 'tabular-nums', color: sapTokens5.textMuted, fontSize: 12, fontWeight: 500 }}>{String(n).padStart(2,'0')}</span>
      <span style={{ flex: 1 }}>{label}</span>
    </div>
  );
}

function Sap5SummaryCard() {
  const rows = [
    ['Pod model', 'QUAD L4'],
    ['External dim.', '2400 × 2400 × 2250 mm'],
    ['Interior finish', 'Charcoal felt'],
    ['Exterior', 'Oak veneer'],
    ['Glazing', 'Single, clear'],
    ['Electrical', '4× EU · 2× USB-C'],
  ];
  return (
    <div style={{ background: '#fff', border: `1px solid ${sapTokens5.cardBorder}`, borderRadius: 9, boxShadow: '0 1px 2px rgba(15, 30, 50, 0.04)', fontSize: 13, overflow: 'hidden' }}>
      <div style={{ padding: '13px 15px', borderBottom: `1px solid ${sapTokens5.cardBorder}`, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ fontWeight: 600, fontSize: 13 }}>Item 030 · QUAD-L4</div>
        <Sap5Pill tone="warn">In Progress</Sap5Pill>
      </div>
      <div style={{ padding: '4px 0' }}>
        {rows.map(([k, v], i) => (
          <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '7px 15px', gap: 13, borderBottom: i < rows.length - 1 ? `1px dashed ${sapTokens5.cardBorder}` : 'none' }}>
            <span style={{ color: sapTokens5.textMuted }}>{k}</span>
            <span style={{ fontWeight: 500, textAlign: 'right', fontSize: 13 }}>{v}</span>
          </div>
        ))}
      </div>
      <div style={{ padding: '11px 15px', background: '#fafbfc', borderTop: `1px solid ${sapTokens5.cardBorder}` }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, color: sapTokens5.textMuted, marginBottom: 4 }}>
          <span>Base price</span><span style={{ fontVariantNumeric: 'tabular-nums' }}>62 400,00</span>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, color: sapTokens5.textMuted, marginBottom: 9 }}>
          <span>Options (+9 items)</span><span style={{ fontVariantNumeric: 'tabular-nums' }}>+28 850,00</span>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontWeight: 700, fontSize: 15, borderTop: `1px solid ${sapTokens5.cardBorder}`, paddingTop: 9 }}>
          <span>Item total</span><span style={{ fontVariantNumeric: 'tabular-nums' }}>110 412,50 CZK</span>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Screen: 01 Main configurator
// ─────────────────────────────────────────────────────────────
function Sap5Screen_Main() {
  const stepNav = [
    ['Pod model', 'done'],
    ['External dimensions', 'done'],
    ['Interior acoustic finish', 'done'],
    ['Exterior finish', 'done'],
    ['Glazing', 'done'],
    ['Electrical outlets', 'active'],
    ['Ventilation & lighting', 'draft'],
    ['Furniture & floor', 'draft'],
    ['Add-ons', 'draft'],
  ];
  return (
    <Sap5Shell>
      <Sap5Layout
        left={stepNav.map(([l, s], i) => <Sap5NavItem key={i} n={i + 1} label={l} status={s} active={s === 'active'} />)}
        right={
          <>
            <div style={{ background: '#fff', border: `1px solid ${sapTokens5.cardBorder}`, borderRadius: 9, boxShadow: '0 1px 2px rgba(15, 30, 50, 0.04)', padding: '11px 15px', marginBottom: 15, fontSize: 13, color: sapTokens5.textMuted, display: 'flex', alignItems: 'center', gap: 11 }}>
              <span style={{ width: 20, height: 20, borderRadius: '50%', background: sapTokens5.accentBg, color: sapTokens5.accent, display: 'grid', placeItems: 'center', fontSize: 12, fontWeight: 700, flexShrink: 0 }}>i</span>
              <span>Configuration auto-saved at 14:38. Pricing applied from <b style={{ color: sapTokens5.text, fontWeight: 600 }}>Wholesale EUR→CZK · 04/2026</b>.</span>
            </div>

            <Sap5Step num={1} totalSteps={9} title="Pod model" required complete subtitle="Base product — determines available options downstream.">
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 9 }}>
                <Sap5Tile title="SOLO S1" desc="1 person · ø 1100 mm · phone booth" price="38 400,00"/>
                <Sap5Tile title="DUO M2" desc="2 persons · 1500 × 1500 · meeting" price="52 800,00"/>
                <Sap5Tile selected title="QUAD L4" desc="4 persons · 2400 × 2400 · team room" price="62 400,00"/>
              </div>
            </Sap5Step>

            <Sap5Step num={2} totalSteps={9} title="External dimensions" required complete subtitle="Footprint in millimeters. Height fixed at 2250 mm for QUAD L4.">
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 9 }}>
                <Sap5Tile title="2100 × 2100" desc="Compact" price="−4 200,00" priceDelta="−6.7%"/>
                <Sap5Tile selected title="2400 × 2400" desc="Standard" price="Included"/>
                <Sap5Tile title="2800 × 2400" desc="Extended depth" priceDelta="+8 600,00"/>
                <Sap5Tile title="3200 × 2400" desc="Large" priceDelta="+14 200,00"/>
              </div>
            </Sap5Step>

            <Sap5Step num={3} totalSteps={9} title="Interior acoustic finish" required complete subtitle="Absorption class A. Fabric covering of the interior panels.">
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 9 }}>
                <Sap5Tile title="Technical felt" desc="Recycled PET, NRC 0.95" price="Included" info="Made of 60% recycled PET bottles. 35 mm thick panels."/>
                <Sap5Tile title="Wool fabric" desc="100% wool, warm acoustic tone" priceDelta="+3 200,00"/>
                <Sap5Tile selected title="Premium wool blend" desc="Wool + linen, designer palette" priceDelta="+5 800,00"/>
              </div>
            </Sap5Step>

            <Sap5Step num={4} totalSteps={9} title="Exterior finish" required complete subtitle="Visible from outside. Match to surrounding interior.">
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 9 }}>
                <Sap5Tile title="Powder-coated steel" desc="RAL 9005 · matte" price="Included"/>
                <Sap5Tile selected title="Oak veneer" desc="Natural rift-cut, matte lacquer" priceDelta="+12 400,00" badge="PREMIUM"/>
                <Sap5Tile title="Walnut veneer" desc="Dark, warm tone" priceDelta="+16 800,00"/>
                <Sap5Tile title="Laminate (10 colors)" desc="HPL by Egger, 10 colors available" priceDelta="+2 800,00" info="HPL by Egger, 10 colors."/>
              </div>
            </Sap5Step>

            <Sap5Step num={5} totalSteps={9} title="Glazing" required complete subtitle="Door glass type. Door hinge direction is set in the next step.">
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 9 }}>
                <Sap5Tile title="Single glazing" desc="8 mm safety glass, clear" price="Included"/>
                <Sap5Tile title="Double glazing" desc="+6 dB attenuation" priceDelta="+6 200,00"/>
                <Sap5Tile title="Privacy film" desc="Switchable or frosted" priceDelta="+4 400,00"/>
              </div>
            </Sap5Step>

            <Sap5Step num={6} totalSteps={9} title="Electrical outlets" required subtitle="Installed in the integrated table panel. Quantity adjustable per type.">
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 9 }}>
                <Sap5Tile selected title="EU socket (230 V)" desc="Schuko, white" priceDelta="+ 680,00 / pc" qty={4}/>
                <Sap5Tile selected title="USB-C (PD 60 W)" desc="Fast-charge capable" priceDelta="+ 540,00 / pc" qty={2}/>
                <Sap5Tile title="RJ45 (Cat 6)" desc="Wired network jack" priceDelta="+ 420,00 / pc" qty={0}/>
                <Sap5Tile title="HDMI pass-through" desc="Type A, 2 m tail" priceDelta="+ 780,00 / pc" qty={0}/>
              </div>
            </Sap5Step>
          </>
        }
      />
    </Sap5Shell>
  );
}

// ─────────────────────────────────────────────────────────────
// Screen: 02 Items list (Quotation overview)
// A full-width SAP-style data table of every line item in the quotation.
// ─────────────────────────────────────────────────────────────
function Sap5Screen_Items() {
  const items = [
    { num: '010', model: 'SOLO · S1',  dim: 'ø 1100',          finish: 'Charcoal felt',        ext: 'Powder-coated steel',   qty: 2, unit: '42 400,00', total: '84 800,00', status: 'done' },
    { num: '020', model: 'DUO · M2',   dim: '1500 × 1500',     finish: 'Wool fabric',          ext: 'Oak veneer',            qty: 1, unit: '61 200,00', total: '61 200,00', status: 'done' },
    { num: '030', model: 'QUAD · L4',  dim: '2400 × 2400',     finish: 'Premium wool blend',   ext: 'Oak veneer',            qty: 1, unit: '110 412,50', total: '110 412,50', status: 'progress' },
    { num: '040', model: 'SOLO · S1',  dim: 'ø 1100',          finish: '—',                    ext: '—',                     qty: 1, unit: '—',          total: '—',           status: 'draft' },
    { num: '050', model: 'DUO · M2',   dim: '1500 × 1500',     finish: '—',                    ext: '—',                     qty: 1, unit: '—',          total: '—',           status: 'draft' },
    { num: '060', model: 'Add-ons',    dim: '—',               finish: '—',                    ext: '—',                     qty: 1, unit: '—',          total: '—',           status: 'draft' },
  ];

  return (
    <Sap5Shell activeTab="overview">
      <div style={{ padding: 18 }}>

        {/* Toolbar — rounded card matching new style; sits above the table card with same styling */}
        <div style={{ background: '#fff', border: `1px solid ${sapTokens5.cardBorder}`, borderRadius: 9, boxShadow: '0 1px 2px rgba(15, 30, 50, 0.04)', padding: '11px 15px', marginBottom: 13, display: 'flex', alignItems: 'center', gap: 13 }}>
          <div style={{ fontSize: 14, fontWeight: 600, color: sapTokens5.text }}>Quotation items</div>
          <Sap5Pill tone="neutral">6 items · 3 configured</Sap5Pill>
          <div style={{ flex: 1 }}/>
          <div style={{ display: 'flex', alignItems: 'center', gap: 7, background: '#f7f8f9', borderRadius: 7, padding: '7px 11px', fontSize: 13, color: sapTokens5.textMuted, minWidth: 242 }}>
            <Sap5Icon name="search" size={12} color={sapTokens5.textMuted}/>
            <input
              type="text"
              placeholder="Search items…"
              style={{ border: 'none', outline: 'none', background: 'transparent', fontSize: 13, color: sapTokens5.text, fontFamily: 'inherit', flex: 1, padding: 0 }}
            />
          </div>
          <Sap5GhostBtn>Filter</Sap5GhostBtn>
          <Sap5GhostBtn>Sort</Sap5GhostBtn>
          <Sap5GhostBtn>Export ▾</Sap5GhostBtn>
        </div>

        {/* Table — wrapped in a rounded card */}
        <div style={{ background: '#fff', border: `1px solid ${sapTokens5.cardBorder}`, borderRadius: 9, boxShadow: '0 1px 2px rgba(15, 30, 50, 0.04)', overflow: 'hidden' }}>
          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
            <thead>
              <tr style={{ background: '#fafbfc', borderBottom: `1px solid ${sapTokens5.cardBorder}` }}>
                <Sap5Th width={24}>
                  <input type="checkbox" style={{ margin: 0 }}/>
                </Sap5Th>
                <Sap5Th>#</Sap5Th>
                <Sap5Th>Status</Sap5Th>
                <Sap5Th>Model</Sap5Th>
                <Sap5Th>Dimensions (mm)</Sap5Th>
                <Sap5Th>Interior</Sap5Th>
                <Sap5Th>Exterior</Sap5Th>
                <Sap5Th align="right">Qty</Sap5Th>
                <Sap5Th align="right">Unit price (CZK)</Sap5Th>
                <Sap5Th align="right">Total (CZK)</Sap5Th>
                <Sap5Th width={40}></Sap5Th>
              </tr>
            </thead>
            <tbody>
              {items.map((it, i) => {
                const isActive = it.num === '030';
                const isLast = i === items.length - 1;
                return (
                  <tr key={it.num} style={{
                    borderBottom: isLast ? 'none' : `1px solid ${sapTokens5.cardBorder}`,
                    background: isActive ? sapTokens5.selectedBg : 'transparent',
                    cursor: 'pointer',
                  }}>
                    <Sap5Td><input type="checkbox" style={{ margin: 0 }}/></Sap5Td>
                    <Sap5Td num strong>{it.num}</Sap5Td>
                    <Sap5Td><Sap5RowStatus status={it.status}/></Sap5Td>
                    <Sap5Td strong>{it.model}</Sap5Td>
                    <Sap5Td num>{it.dim}</Sap5Td>
                    <Sap5Td>{it.finish}</Sap5Td>
                    <Sap5Td>{it.ext}</Sap5Td>
                    <Sap5Td align="right" num>{it.qty}</Sap5Td>
                    <Sap5Td align="right" num>{it.unit}</Sap5Td>
                    <Sap5Td align="right" num strong>{it.total}</Sap5Td>
                    <Sap5Td align="right">
                      <button style={{ background: 'transparent', border: 'none', cursor: 'pointer', color: sapTokens5.textMuted, padding: '2px 7px', fontSize: 15, letterSpacing: 2, borderRadius: 4 }}>⋯</button>
                    </Sap5Td>
                  </tr>
                );
              })}
            </tbody>
            <tfoot>
              <tr style={{ background: '#fafbfc', borderTop: `1px solid ${sapTokens5.cardBorder}` }}>
                <Sap5Td colSpan={9}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
                    <span style={{ color: sapTokens5.text, fontSize: 13, fontWeight: 600 }}>Subtotal</span>
                    <span style={{ color: sapTokens5.textMuted, fontSize: 12 }}>3 configured items · VAT 21% billed separately</span>
                  </div>
                </Sap5Td>
                <Sap5Td align="right" num strong color={sapTokens5.text}>256 412,50</Sap5Td>
                <Sap5Td/>
              </tr>
            </tfoot>
          </table>
        </div>

        {/* Summary bar under the table */}
        <div style={{ marginTop: 15, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 13 }}>
          <Sap5StatCard label="Price excl. VAT" value="256,412.50 CZK" sub="3 items configured"/>
          <Sap5StatCard label="VAT 21%" value="53,846.63 CZK" sub="Calculated per current tax schedule"/>
          <Sap5StatCard label="Price incl. VAT" value="310,259.13 CZK" sub="Quotation valid until 31/05/2026" emphasize/>
        </div>
      </div>
    </Sap5Shell>
  );
}

// Table header cell
function Sap5Th({ children, align = 'left', width }) {
  return (
    <th style={{
      textAlign: align,
      padding: '11px 13px',
      fontSize: 12,
      fontWeight: 600,
      color: sapTokens5.textMuted,
      letterSpacing: 0,
      width,
      whiteSpace: 'nowrap',
    }}>{children}</th>
  );
}

// Table body cell
// `num` = right-leaning numeric column; uses tabular-nums so digits align without
// switching to a monospace face. `strong` bumps weight. Borders between cells removed
// to match Fiori's clean horizontal-rule-only treatment.
function Sap5Td({ children, align = 'left', num, strong, color, colSpan }) {
  return (
    <td colSpan={colSpan} style={{
      textAlign: align,
      padding: '13px 13px',
      fontSize: 13,
      color: color || sapTokens5.text,
      fontFamily: 'inherit',
      fontVariantNumeric: num ? 'tabular-nums' : 'normal',
      fontWeight: strong ? 600 : 400,
      whiteSpace: 'nowrap',
      verticalAlign: 'middle',
    }}>{children}</td>
  );
}

// Row-level status badge — Fiori 3 (Horizon) style: rounded pill, Title Case, 11px
function Sap5RowStatus({ status }) {
  const map = {
    done:     { label: 'Completed',   bg: sapTokens5.successBg, fg: sapTokens5.success },
    progress: { label: 'In Progress', bg: sapTokens5.warnBg,    fg: sapTokens5.warn },
    draft:    { label: 'Draft',       bg: '#ecedef',             fg: sapTokens5.textMuted },
  }[status];
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 7,
      fontSize: 12, fontWeight: 600,
      padding: '3px 11px',
      background: map.bg, color: map.fg,
      borderRadius: 1099, letterSpacing: 0,
    }}>
      <span style={{ width: 7, height: 7, borderRadius: '50%', background: map.fg }}/>
      {map.label}
    </span>
  );
}

// Generic Fiori pill — neutral / accent / success / warn / error
function Sap5Pill({ children, tone = 'neutral' }) {
  const palette = {
    neutral: { bg: '#eef1f3', fg: sapTokens5.textMuted },
    accent:  { bg: sapTokens5.accentBg, fg: sapTokens5.accent },
    success: { bg: sapTokens5.successBg, fg: sapTokens5.success },
    warn:    { bg: sapTokens5.warnBg, fg: sapTokens5.warn },
    error:   { bg: sapTokens5.errorBg, fg: sapTokens5.error },
  }[tone];
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center',
      fontSize: 12, fontWeight: 600,
      padding: '3px 11px',
      background: palette.bg, color: palette.fg,
      borderRadius: 1099, letterSpacing: 0,
      whiteSpace: 'nowrap',
    }}>{children}</span>
  );
}

// Stat card at the bottom of the Items screen — Fiori 3 rounded card
function Sap5StatCard({ label, value, sub, emphasize }) {
  return (
    <div style={{
      background: '#fff',
      border: `1px solid ${emphasize ? '#bcd6f5' : sapTokens5.cardBorder}`,
      borderRadius: 9,
      boxShadow: '0 1px 2px rgba(15, 30, 50, 0.04)',
      padding: '15px 18px',
      position: 'relative',
      overflow: 'hidden',
    }}>
      {emphasize && (
        <div style={{ position: 'absolute', top: 0, left: 0, bottom: 0, width: 3, background: sapTokens5.accent }}/>
      )}
      <div style={{ fontSize: 12, color: sapTokens5.textMuted, fontWeight: 600, marginBottom: 7 }}>{label}</div>
      <div style={{ fontSize: 24, fontWeight: 700, fontVariantNumeric: 'tabular-nums', letterSpacing: -0.2, color: emphasize ? sapTokens5.accent : sapTokens5.text, marginBottom: 4 }}>{value}</div>
      <div style={{ fontSize: 12, color: sapTokens5.textMuted }}>{sub}</div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Screen: 03 Invalid configuration
// Full-screen error state — no modals. Dark SAP chrome + flat
// message surface + issue strips + a step to pick the replacement.
// ─────────────────────────────────────────────────────────────
function Sap5Screen_Invalid() {
  const issues = [
    {
      sev: 'error',
      step: 'Step 04 · Exterior finish',
      code: 'ART-VENEER-WLN-05',
      item: 'Walnut veneer',
      msg: 'Discontinued from 01/03/2026. Select a replacement exterior finish below to continue.',
      action: 'Pick replacement',
    },
    {
      sev: 'warn',
      step: 'Step 06 · Ventilation',
      code: 'ART-VENT-STD-H60',
      item: 'HEPA 60 m³/h',
      msg: 'Price increased by +14.2% since the template was saved. New price: 10,160.00 CZK.',
      action: 'Review price',
    },
  ];

  return (
    <Sap5Shell activeTab="030">
      <div style={{ padding: 18 }}>

        {/* Top banner — rounded card matching the rest of A4 */}
        <div style={{
          background: sapTokens5.errorBg,
          border: `1px solid #e5c2c2`,
          borderRadius: 9,
          boxShadow: '0 1px 2px rgba(15, 30, 50, 0.04)',
          padding: '15px 20px',
          display: 'flex',
          alignItems: 'flex-start',
          gap: 15,
          marginBottom: 15,
        }}>
          <div style={{
            width: 40, height: 40, borderRadius: '50%',
            background: '#fff', border: `1.5px solid ${sapTokens5.error}`,
            color: sapTokens5.error,
            display: 'grid', placeItems: 'center', fontWeight: 700, fontSize: 20,
            flexShrink: 0,
          }}>!</div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 15, fontWeight: 600, color: sapTokens5.text }}>
              Configuration no longer valid — 2 issues need your attention
            </div>
            <div style={{ fontSize: 13, color: sapTokens5.textMuted, lineHeight: 1.5, marginTop: 4 }}>
              This configuration was loaded from a template saved on <b style={{ color: sapTokens5.text }}>12/01/2026</b>. Pricing and availability have changed since. You can’t update the quotation in SAP B1 until the issues below are resolved.
            </div>
          </div>
          <Sap5GhostBtn>Dismiss</Sap5GhostBtn>
        </div>

        {/* Issues — tabular strips matching the items table style */}
        <div style={{ background: '#fff', border: `1px solid ${sapTokens5.cardBorder}`, borderRadius: 9, boxShadow: '0 1px 2px rgba(15, 30, 50, 0.04)', marginBottom: 18, overflow: 'hidden' }}>
          <div style={{ padding: '13px 15px', borderBottom: `1px solid ${sapTokens5.cardBorder}`, background: '#fafbfc', display: 'flex', alignItems: 'center', gap: 11 }}>
            <div style={{ fontSize: 14, fontWeight: 600, color: sapTokens5.text }}>Issue list</div>
            <span style={{ fontSize: 12, color: sapTokens5.textMuted }}>2 total · 1 blocking · 1 warning</span>
          </div>
          {issues.map((iss, i) => {
            const sevLabel = iss.sev === 'error' ? 'Blocking' : 'Warning';
            return (
              <div key={i} style={{
                padding: '15px 18px',
                borderTop: i === 0 ? 'none' : `1px solid ${sapTokens5.cardBorder}`,
                display: 'grid',
                gridTemplateColumns: '96px 1fr auto',
                gap: 15,
                alignItems: 'center',
              }}>
                {/* Severity pill replaces the circular icon */}
                <div>
                  <Sap5Pill tone={iss.sev === 'error' ? 'error' : 'warn'}>{sevLabel}</Sap5Pill>
                </div>
                <div style={{ minWidth: 0 }}>
                  <div style={{ fontSize: 14, fontWeight: 600, color: sapTokens5.text, marginBottom: 4 }}>{iss.item}</div>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 11, marginBottom: 4 }}>
                    <span style={{ fontSize: 12, color: sapTokens5.textMuted, fontVariantNumeric: 'tabular-nums', fontWeight: 500 }}>{iss.step}</span>
                    <span style={{ fontSize: 12, color: sapTokens5.textFaint, fontVariantNumeric: 'tabular-nums' }}>{iss.code}</span>
                  </div>
                  <div style={{ fontSize: 13, color: sapTokens5.textMuted, lineHeight: 1.5 }}>{iss.msg}</div>
                </div>
                <div>
                  {iss.sev === 'error' ? <Sap5PrimaryBtn>{iss.action}</Sap5PrimaryBtn> : <Sap5GhostBtn>{iss.action}</Sap5GhostBtn>}
                </div>
              </div>
            );
          })}
        </div>

        {/* Replacement picker — inline in the configurator flow */}
        <Sap5Step num={4} totalSteps={9} title="Select a replacement exterior finish" required valid={false} subtitle="Walnut has been discontinued — alternatives are sorted by visual similarity to your original choice.">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 11 }}>
            <Sap5Tile invalid disabled title="Walnut veneer" desc="Discontinued from 01/03/2026" badge="INACTIVE"/>
            <Sap5Tile title="Oak veneer — smoked" desc="Closest visual match. Warm, darker oak tone." priceDelta="+13,900.00" badge="SUGGESTED"/>
            <Sap5Tile title="Oak veneer — natural" desc="Lighter oak, clean profile." priceDelta="+12,400.00"/>
            <Sap5Tile title="Laminate Walnut Dark" desc="HPL imitation walnut, cost-effective alternative." priceDelta="+3,400.00"/>
          </div>
        </Sap5Step>

      </div>
    </Sap5Shell>
  );
}

Object.assign(window, {
  sapTokens5, sapFont5,
  Sap5Shell, Sap5Header, Sap5Layout, Sap5NavItem, Sap5Step, Sap5Tile,
  Sap5PrimaryBtn, Sap5GhostBtn, Sap5LinkBtn, Sap5ActionChip,
  Sap5Screen_Main, Sap5Screen_Items, Sap5Screen_Invalid,
});