// ────────────────────────────────────────────────────────────────────
// AW-013 · Integrated Product Create / Edit Modal — 1040px xlarge
// ────────────────────────────────────────────────────────────────────

// ── Section shell (compact) ──────────────────────────────────────
const SectionHeader = ({ num, title, subtitle, right, dimmed }) => (
  <div style={{
    display: 'flex', alignItems: 'center', gap: 10,
    padding: '14px 18px 12px', borderBottom: '1px solid var(--n-200)',
    background: dimmed ? 'var(--n-050)' : '#fff',
  }}>
    <div style={{
      width: 24, height: 24, borderRadius: 4,
      background: dimmed ? 'var(--n-200)' : 'var(--n-900)',
      color: dimmed ? 'var(--n-500)' : '#fff',
      display: 'grid', placeItems: 'center',
      fontFamily: 'Inter', fontSize: 11, fontWeight: 700,
    }}>{num}</div>
    <div style={{ flex: 1 }}>
      <div style={{ fontFamily: 'Inter', fontSize: 14, fontWeight: 600, color: dimmed ? 'var(--n-500)' : 'var(--n-900)' }}>{title}</div>
      {subtitle && (
        <div style={{ fontFamily: 'Inter', fontSize: 11, color: 'var(--n-500)', marginTop: 1 }}>{subtitle}</div>
      )}
    </div>
    {right}
  </div>
);

const IntSection = ({ num, title, subtitle, right, dimmed, children }) => (
  <div style={{
    background: '#fff', border: '1px solid var(--n-200)', borderRadius: 8,
    marginBottom: 14, overflow: 'hidden',
  }}>
    <SectionHeader num={num} title={title} subtitle={subtitle} right={right} dimmed={dimmed}/>
    <div style={{ padding: 18, background: dimmed ? 'var(--n-050)' : '#fff', opacity: dimmed ? 0.55 : 1 }}>
      {children}
    </div>
  </div>
);

// ── SegmentedControl ─────────────────────────────────────────────
const Segmented = ({ options, value, width }) => (
  <div style={{
    display: 'inline-flex', width: width || 'auto',
    padding: 3, borderRadius: 6, background: 'var(--n-100)', border: '1px solid var(--n-200)',
  }}>
    {options.map(o => (
      <div key={o.value} style={{
        flex: 1, minWidth: 60, textAlign: 'center',
        padding: '6px 12px', borderRadius: 4,
        background: o.value === value ? '#fff' : 'transparent',
        boxShadow: o.value === value ? '0 1px 2px rgba(17,24,39,0.08)' : 'none',
        fontFamily: 'Inter', fontSize: 12, fontWeight: o.value === value ? 600 : 500,
        color: o.value === value ? 'var(--n-900)' : 'var(--n-500)',
        cursor: 'pointer',
      }}>{o.label}</div>
    ))}
  </div>
);

// ── Number input with steppers ───────────────────────────────────
const NumInput = ({ value = 1, min = 1, max = 10, suffix = '명', width = 140 }) => (
  <div style={{
    display: 'inline-flex', alignItems: 'stretch', height: 36, width,
    background: '#fff', border: '1px solid var(--n-300)', borderRadius: 6,
    overflow: 'hidden',
  }}>
    <div style={{
      width: 30, display: 'grid', placeItems: 'center',
      color: 'var(--n-500)', borderRight: '1px solid var(--n-200)', cursor: 'pointer',
      background: 'var(--n-050)', fontFamily: 'Inter', fontSize: 14, fontWeight: 600,
    }}>−</div>
    <div style={{
      flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5,
      fontFamily: 'JetBrains Mono, monospace', fontSize: 14, fontWeight: 600, color: 'var(--n-900)',
      fontVariantNumeric: 'tabular-nums',
    }}>
      {value}
      <span style={{ fontFamily: 'Inter', fontSize: 11, color: 'var(--n-500)', fontWeight: 500 }}>{suffix}</span>
    </div>
    <div style={{
      width: 30, display: 'grid', placeItems: 'center',
      color: 'var(--n-500)', borderLeft: '1px solid var(--n-200)', cursor: 'pointer',
      background: 'var(--n-050)', fontFamily: 'Inter', fontSize: 14, fontWeight: 600,
    }}>+</div>
  </div>
);

// ── Pax-type radio card ──────────────────────────────────────────
const PaxCard = ({ active, kind, title, desc, children }) => {
  const color = kind === 'Fixed' ? 'var(--primary)' : '#7C3AED';
  const bg = kind === 'Fixed' ? 'var(--primary-hover-bg)' : '#F0E7FF';
  return (
    <div style={{
      flex: 1, padding: 14,
      background: active ? bg : '#fff',
      border: `${active ? 2 : 1}px solid ${active ? color : 'var(--n-300)'}`,
      borderRadius: 8,
      cursor: 'pointer', position: 'relative',
      margin: active ? 0 : 1,
    }}>
      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
        <div style={{
          width: 18, height: 18, borderRadius: '50%', flexShrink: 0, marginTop: 1,
          border: `2px solid ${active ? color : 'var(--n-300)'}`,
          background: '#fff',
          display: 'grid', placeItems: 'center',
        }}>
          {active && <div style={{ width: 9, height: 9, borderRadius: '50%', background: color }}/>}
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <div style={{ fontFamily: 'Inter', fontSize: 14, fontWeight: 600, color: 'var(--n-900)' }}>{title}</div>
            <div style={{
              padding: '1px 6px', borderRadius: 3,
              background: color, color: '#fff',
              fontFamily: 'Inter', fontSize: 9, fontWeight: 700, letterSpacing: '0.06em',
            }}>{kind.toUpperCase()}</div>
          </div>
          <div style={{ fontFamily: 'Inter', fontSize: 12, color: 'var(--n-500)', marginTop: 3, lineHeight: 1.5 }}>{desc}</div>
        </div>
      </div>
      {active && children && (
        <div style={{ marginTop: 12, paddingTop: 12, borderTop: '1px dashed rgba(13,122,110,0.3)' }}>
          {children}
        </div>
      )}
    </div>
  );
};

// ── Small inline toggle (for Add-on row) ─────────────────────────
const RowToggle = ({ on }) => (
  <div style={{
    width: 32, height: 18, borderRadius: 9,
    background: on ? 'var(--primary)' : 'var(--n-300)',
    position: 'relative', flexShrink: 0,
  }}>
    <div style={{
      position: 'absolute', top: 2, left: on ? 16 : 2,
      width: 14, height: 14, borderRadius: '50%', background: '#fff',
      boxShadow: '0 1px 2px rgba(0,0,0,0.2)',
    }}/>
  </div>
);

Object.assign(window, {
  IntSection, SectionHeader, Segmented, NumInput, PaxCard, RowToggle,
});